- > {
+ focusVisible?: string;
+}
+
+interface Props extends SwitchProps {
+ classes: Styles;
+ lable?:String;
+}
+
+const PurpleSwitch = withStyles({
+ switchBase: {
+ color: purple[300],
+ '&$checked': {
+ color: purple[500],
+ },
+ '&$checked + $track': {
+ backgroundColor: purple[500],
+ },
+ },
+ checked: {},
+ track: {},
+})(Switch);
+
+const IOSSwitch = withStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: 42,
+ height: 26,
+ padding: 0,
+ margin: theme.spacing(1),
+ },
+ switchBase: {
+ padding: 1,
+ '&$checked': {
+ transform: 'translateX(16px)',
+ color: theme.palette.common.white,
+ '& + $track': {
+ backgroundColor: '#52d869',
+ opacity: 1,
+ border: 'none',
+ },
+ },
+ '&$focusVisible $thumb': {
+ color: '#52d869',
+ border: '6px solid #fff',
+ },
+ },
+ thumb: {
+ width: 24,
+ height: 24,
+ },
+ track: {
+ borderRadius: 26 / 2,
+ border: `1px solid ${theme.palette.grey[400]}`,
+ backgroundColor: theme.palette.grey[50],
+ opacity: 1,
+ transition: theme.transitions.create(['background-color', 'border']),
+ },
+ checked: {},
+ focusVisible: {},
+ }),
+)(({ classes, ...props }: Props) => {
+ return (
+ ) => {
+ setState({ ...state, [event.target.name]: event.target.checked });
+ };
+
+ return (
+
+ {
- config: IConfigObject;
+ config: IConfigObject;
}
const useStyles1 = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- flexShrink: 0,
- marginLeft: theme.spacing(2.5),
- },
- }),
+ createStyles({
+ root: {
+ flexShrink: 0,
+ marginLeft: theme.spacing(2.5),
+ },
+ })
);
function TablePaginationActions(props: TablePaginationActionsProps) {
- const classes = useStyles1();
- const theme = useTheme();
- const { count, page, rowsPerPage, onChangePage } = props;
-
- const handleFirstPageButtonClick = (event: React.MouseEvent) => {
- onChangePage(event, 0);
- };
-
- const handleBackButtonClick = (event: React.MouseEvent) => {
- onChangePage(event, page - 1);
- };
-
- const handleNextButtonClick = (event: React.MouseEvent) => {
- onChangePage(event, page + 1);
- };
-
- const handleLastPageButtonClick = (event: React.MouseEvent) => {
- onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
- };
-
- return (
-
+ ) => {
+ onChangePage(event, 0);
+ };
+
+ const handleBackButtonClick = (
+ event: React.MouseEvent
+ ) => {
+ onChangePage(event, page - 1);
+ };
+
+ const handleNextButtonClick = (
+ event: React.MouseEvent
+ ) => {
+ onChangePage(event, page + 1);
+ };
+
+ const handleLastPageButtonClick = (
+ event: React.MouseEvent
+ ) => {
+ onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+ };
+
+ return (
+ , newPage: number) => void;
+ count: number;
+ page: number;
+ rowsPerPage: number;
+ onChangePage: (
+ event: React.MouseEvent,
+ newPage: number
+ ) => void;
}
type Props = OwnProps;
-
function descendingComparator(a: any, b: any, orderBy: any) {
- if (b[orderBy] < a[orderBy]) {
- return -1;
- }
- if (b[orderBy] > a[orderBy]) {
- return 1;
- }
- return 0;
+ if (b[orderBy] < a[orderBy]) {
+ return -1;
+ }
+ if (b[orderBy] > a[orderBy]) {
+ return 1;
+ }
+ return 0;
}
-type Order = 'asc' | 'desc';
+type Order = "asc" | "desc";
function getComparator(
- order: Order,
- orderBy: string,
+ order: Order,
+ orderBy: string
): (a: any, b: any) => number {
- return order === 'desc'
- ? (a, b) => descendingComparator(a, b, orderBy)
- : (a, b) => -descendingComparator(a, b, orderBy);
+ return order === "desc"
+ ? (a, b) => descendingComparator(a, b, orderBy)
+ : (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort(array: any[], comparator: (a: any, b: any) => number) {
- const stabilizedThis = array.map((el, index) => [el, index] as [any, number]);
- stabilizedThis.sort((a, b) => {
- const order = comparator(a[0], b[0]);
- if (order !== 0) return order;
- return a[1] - b[1];
- });
- return stabilizedThis.map((el) => el[0]);
+ const stabilizedThis =
+ array && array.map((el, index) => [el, index]);
+ stabilizedThis.sort((a, b) => {
+ const order = comparator(a[0], b[0]);
+ if (order !== 0) return order;
+ return a[1] - b[1];
+ });
+ return stabilizedThis.map((el) => el[0]);
}
interface EnhancedTableProps {
- classes: ReturnType;
- //columns: IColumnsConfig[],
- numSelected?: number;
- onRequestSort: (event: React.MouseEvent, property: string) => void;
- onSelectAllClick?: (event: React.ChangeEvent) => void;
- order: Order;
- orderBy: string;
- rowCount: number;
- isActive?: boolean;
+ classes: ReturnType;
+ //columns: IColumnsConfig[],
+ numSelected?: number;
+ onRequestSort: (event: React.MouseEvent, property: string) => void;
+ onSelectAllClick?: (event: React.ChangeEvent) => void;
+ order: Order;
+ orderBy: string;
+ rowCount: number;
+ isActive?: boolean;
}
-
const StyledMenu = withStyles({
- paper: {
- // border: '1px solid #d3d4d5',
- },
+ paper: {
+ // border: '1px solid #d3d4d5',
+ },
})((props: MenuProps) => (
-
+
));
const StyledMenuItem = withStyles((theme) => ({
- root: {
- '&:focus': {
- // backgroundColor: theme.palette.primary.main,
- // '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
- // color: theme.palette.primary.main,
- // },
- },
+ root: {
+ "&:focus": {
+ // backgroundColor: theme.palette.primary.main,
+ // '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+ // color: theme.palette.primary.main,
+ // },
},
+ },
}))(MenuItem);
const StyledPaginationBox = withStyles((theme) => ({
+ root: {
+ "&": {
+ // textAlign: '-moz-center',
+ textAlign: "-webkit-center",
+ margin: "20px auto",
+ // fontSize: '16px'
+ },
+ },
+}))(Box);
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
root: {
- '&': {
- // textAlign: '-moz-center',
- textAlign: '-webkit-center',
- margin: '20px auto',
- // fontSize: '16px'
- }
- }
-}))(Box)
-
-const useStyles = makeStyles((theme: Theme) => createStyles({
- root: {
- // padding: 30
- // .MuiTableCell-head
- '& .MuiTableCell-root': {
- fontSize: '12px',
- padding: '5px',
- height: '45px',
- borderBottom: 'none'
- },
- '& .MuiAvatar-root, & .MuiAvatar-circle, & .MuiAvatar-colorDefault': {
- height: '30px',
- width: '30px'
- },
- '& .MuiTable-root thead th': {
- fontWeight: 'bold'
- }
+ // padding: 30
+ // .MuiTableCell-head
+ "& .MuiTableCell-root": {
+ fontSize: "12px",
+ padding: "5px",
+ height: "45px",
+ borderBottom: "none",
+ },
+ "& .MuiAvatar-root, & .MuiAvatar-circle, & .MuiAvatar-colorDefault": {
+ height: "30px",
+ width: "30px",
+ },
+ "& .MuiTable-root thead th": {
+ fontWeight: "bold",
+ },
},
header: {
- '& > *': {
- fontWeight: 600
- }
+ "& > *": {
+ fontWeight: 600,
+ },
},
cell: {
- borderBottom: 'none',
- //padding: (config: IConfigObject) => config.cellOptions ? config.cellOptions.padding : 'auto'
+ borderBottom: "none",
+ //padding: (config: IConfigObject) => config.cellOptions ? config.cellOptions.padding : 'auto'
},
pagination: {
- // fontSize: '25px'
+ // fontSize: '25px'
},
visuallyHidden: {
- border: 0,
- clip: 'rect(0 0 0 0)',
- height: 1,
- margin: -1,
- overflow: 'hidden',
- padding: 0,
- position: 'absolute',
- top: 20,
- width: 1,
+ border: 0,
+ clip: "rect(0 0 0 0)",
+ height: 1,
+ margin: -1,
+ overflow: "hidden",
+ padding: 0,
+ position: "absolute",
+ top: 20,
+ width: 1,
},
-}))
-
-export const TableWrapper: FunctionComponent = ({ config, ...props }) => {
- const classes = useStyles(config)
-
- const [anchorEl, setAnchorEl] = useState(null);
- const [menuId, setMenuId] = useState(null);
- const [page, setPage] = React.useState(0);
- const [rowsPerPage, setRowsPerPage] = React.useState(10);
- const [order, setOrder] = React.useState('asc');
- const [orderBy, setOrderBy] = React.useState('id');
- const rows = [...config.data]
- const columns = [...config.columns]
- const menuOptions = [...config.menuOptions]
- const pageChange = config.pageChange
- const totalCount = config.totalCount || rows.length
- const handleRequestSort = (event: React.MouseEvent, property: string) => {
- const isAsc = orderBy === property && order === 'asc';
- setOrder(isAsc ? 'desc' : 'asc');
- setOrderBy(property);
- };
-
- const handleClick = (event: React.MouseEvent, menuId: any) => {
- setAnchorEl(event.currentTarget);
- setMenuId(menuId);
- };
-
- const handleClose = () => {
- setAnchorEl(null);
- setMenuId(null);
- };
-
- const handleChangePage = (event: React.MouseEvent | null, newPage: number) => {
- setPage(newPage);
- pageChange && pageChange(newPage,rowsPerPage)
- };
+ })
+);
- const handleChangeRowsPerPage = (
- event: React.ChangeEvent,
+export const TableWrapper: FunctionComponent = ({
+ config,
+ ...props
+}) => {
+ const classes = useStyles(config);
+
+ const [anchorEl, setAnchorEl] = useState(null);
+ const [menuId, setMenuId] = useState(null);
+ const [page, setPage] = React.useState(0);
+ const [rowsPerPage, setRowsPerPage] = React.useState(10);
+ const [order, setOrder] = React.useState("asc");
+ const [orderBy, setOrderBy] = React.useState("id");
+ const rows = [...config.data];
+ const columns = [...config.columns];
+ const menuOptions = config.menuOptions ? [...config.menuOptions] : null;
+ const pageChange = config.pageChange;
+ const totalCount = config.totalCount || rows.length;
+ const handleRequestSort = (
+ event: React.MouseEvent,
+ property: string
+ ) => {
+ const isAsc = orderBy === property && order === "asc";
+ setOrder(isAsc ? "desc" : "asc");
+ setOrderBy(property);
+ };
+
+ const handleClick = (
+ event: React.MouseEvent,
+ menuId: any
+ ) => {
+ setAnchorEl(event.currentTarget);
+ setMenuId(menuId);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ setMenuId(null);
+ };
+
+ const handleChangePage = (
+ event: React.MouseEvent | null,
+ newPage: number
+ ) => {
+ setPage(newPage);
+ pageChange && pageChange(newPage, rowsPerPage);
+ };
+
+ const handleChangeRowsPerPage = (
+ event: React.ChangeEvent
+ ) => {
+ setRowsPerPage(parseInt(event.target.value, 10));
+ setPage(0);
+ pageChange && pageChange(0, parseInt(event.target.value, 10));
+ };
+
+ const TableHeader = (
+
+ {columns.map((column) => (
+ {column.label}
+ ))}
+
+ );
+
+ function EnhancedTableHead(props: EnhancedTableProps) {
+ const {
+ isActive,
+ classes,
+ onSelectAllClick,
+ order,
+ orderBy,
+ numSelected,
+ rowCount,
+ onRequestSort,
+ } = props;
+ const createSortHandler = (property: string) => (
+ event: React.MouseEvent
) => {
- setRowsPerPage(parseInt(event.target.value, 10));
- setPage(0);
- pageChange && pageChange(0,parseInt(event.target.value, 10))
+ onRequestSort(event, property);
};
-
- const TableHeader =
- {
- columns.map(column => (
- {column.label}
- ))
- }
-
-
- function EnhancedTableHead(props: EnhancedTableProps) {
- const { isActive, classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
- const createSortHandler = (property: string) => (event: React.MouseEvent) => {
- onRequestSort(event, property);
- };
-
- return (
-
-
- {columns.map((headCell: any) => (
-
- {headCell.isSort &&
- {headCell.label}
- {orderBy === headCell.id ? (
-
- {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-
- ) : null}
- }
- {!headCell.isSort && headCell.label}
-
- ))}
-
-
- );
- }
-
-
- const SortableTableHeader =
+
+ {columns.map((headCell: any) => (
+
+ {headCell.isSort && (
+
+ {headCell.label}
+ {orderBy === headCell.id ? (
+
+ {order === "desc"
+ ? "sorted descending"
+ : "sorted ascending"}
+
+ ) : null}
+
+ )}
+ {!headCell.isSort && headCell.label}
+
+ ))}
+
+
+ );
+ }
+
+ const SortableTableHeader = (
+
- {
- tableRows.map((row: any, i: number) => (
-
- {
- columns.map((col: any, j: number) => {row[col.id]} )
- }
-
-
-
- {menuOptions.map(({ item, key, callback }, i) => {
-
- return (
- {
- handleClose()
- callback && callback(row[key] || row.id)
- }}>
- {
- item(row[key] || row.id)
- }
-
- )
- })}
-
-
-
- ))
- }
+ );
+ const tableRows = pageChange
+ ? rowsPerPage > 0
+ ? stableSort(rows, getComparator(order, orderBy))
+ : rows
+ : rowsPerPage > 0
+ ? stableSort(rows, getComparator(order, orderBy)).slice(
+ page * rowsPerPage,
+ page * rowsPerPage + rowsPerPage
+ )
+ : rows;
+ const body = (
+
+ {tableRows &&
+ tableRows.map((row: any, i: number) => (
+
+ {columns.map((col: any, j: number) => (
+ {row[col.id]}
+ ))}
+ {menuOptions && (
+
+
+
+ {menuOptions.map(({ item, key, callback }, i) => {
+ return (
+ {
+ handleClose();
+ callback && callback(row[key] || row.id);
+ }}
+ >
+ {item(row[key] || row.id)}
+
+ );
+ })}
+
+
+ )}
+
+ ))}
-
- const skeletonBody =
- {
- Array(20).fill(0).map((row: any, i: number) => (
-
- {
- columns.map((col: any) =>
-
-
-
- ))
- }
+ );
+
+ const skeletonBody = (
+
+ {Array(20)
+ .fill(0)
+ .map((row: any, i: number) => (
+
+ {columns.map((col: any) => (
+
+
+ ))}
+
+
+
+
+ ))}
-
-
- const tableFooter =
-
-
+ );
+
+ const tableFooter = (
+
+
+
- return (
-
-
- {SortableTableHeader}
- {config.isLoading && skeletonBody}
- {!config.isLoading && body}
-
-
- {config.pagination === undefined ?
- {tableFooter}
- :
- {config.pagination && tableFooter}
- }
-
- );
+ );
+ return (
+
+
+ {SortableTableHeader}
+ {config.isLoading && skeletonBody}
+ {!config.isLoading && body}
+
+ {config.pagination === undefined ? (
+
+ {tableFooter}
+
+ ) : (
+
+ {config.pagination && tableFooter}
+
+ )}
+
+ );
};
-export default TableWrapper;
\ No newline at end of file
+export default TableWrapper;
diff --git a/src/features/Employees/EmployeeForm.tsx b/src/features/Employees/EmployeeForm.tsx
new file mode 100644
index 0000000..1db8a41
--- /dev/null
+++ b/src/features/Employees/EmployeeForm.tsx
@@ -0,0 +1,174 @@
+import { Box, createStyles, Grid, makeStyles, Paper, Theme } from '@material-ui/core';
+import { ArrowBackIos } from '@material-ui/icons';
+import { RootState } from 'app/rootReducer';
+import CustomButton from 'components/Button';
+import TextInput from 'components/TextInput';
+import { setCurrentEmployee, saveEmployee, defaultInputState } from './employeeSlice';
+import * as React from 'react';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { RouteComponentProps } from 'react-router-dom';
+
+const useStyles = makeStyles((theme: Theme) => createStyles({
+ paper: {
+ backgroundColor: '#E7ECF6',
+ borderRadius: theme.shape.borderRadius - 5,
+ marginRight: 30,
+ height: '100%',
+ width: '100%'
+ // marginTop
+ },
+ header: {
+ fontSize: '22px',
+ fontWeight: 'bold',
+ padding: theme.spacing(2, 0, 0, 4),
+ color: theme.palette.text.primary
+ },
+ headerSecondary: {
+ fontSize: '20px',
+ fontWeight: 'bold',
+ padding: theme.spacing(0, 0, 4, 0),
+ color: theme.palette.text.primary,
+ },
+ arrowBack: {
+ height: '30px',
+ verticalAlign: 'bottom',
+ cursor: 'pointer',
+ },
+ rightInputs: {
+ marginTop: 134,
+ },
+ button: {
+ marginRight: 20
+ },
+ inputGrid: {
+ marginTop: '30px',
+ padding: theme.spacing(1, 0, 0, 2)
+ }
+}))
+
+interface OwnProps extends RouteComponentProps {
+}
+
+type Props = OwnProps;
+
+const EmployeeForm: React.FC = (props) => {
+ const classes = useStyles()
+
+ const dispatch = useDispatch()
+
+ const {
+ currentEmployee
+ } = useSelector((state: RootState) => state.employees)
+
+ const {
+ designation,
+ email,
+ empid,
+ fname,
+ lname,
+ mname,
+ mobile
+ } = currentEmployee
+ const inputState = currentEmployee;
+
+ const setInputState = (employee: any) => {
+ dispatch(setCurrentEmployee(employee));
+ }
+
+ const id = props.match.params.employeeId
+ // debugger;
+ // useEffect(() => {
+ // if (employeesById[id]) {
+ // const tempId = employeesById[id]
+ // //setInputState(tempId)
+ // dispatch(setCurrentEmployee(tempId));
+ // }
+ // }, [id])
+
+ const handleChange = (e: any) => setInputState({
+ ...inputState,
+ [e.target.name]: e.target.value
+ })
+
+ const handleSubmit = async (e: any) => {
+ e.preventDefault()
+
+ let bodyFormData = new FormData();
+ bodyFormData.append('fname',fname)
+ bodyFormData.append('mname',mname)
+ bodyFormData.append('lname',lname)
+ bodyFormData.append('mobile',mobile)
+ bodyFormData.append('email',email)
+ bodyFormData.append('empid',empid)
+ bodyFormData.append('designation',designation)
+
+ dispatch(saveEmployee(bodyFormData, () => setInputState(defaultInputState)))
+ }
+ return (
+
+
+
-
+ {/* {props.value}
+ }}>{props.value} */}
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
new file mode 100644
index 0000000..76ace78
--- /dev/null
+++ b/src/components/Switch.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { purple } from '@material-ui/core/colors';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch, { SwitchClassKey, SwitchProps } from '@material-ui/core/Switch';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+
+interface Styles extends Partial
-
- {theme.direction === 'rtl' ?
-
- {theme.direction === 'rtl' ?
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="next page"
- >
- {theme.direction === 'rtl' ?
- = Math.ceil(count / rowsPerPage) - 1}
- aria-label="last page"
- >
- {theme.direction === 'rtl' ?
-
- );
+ const classes = useStyles1();
+ const theme = useTheme();
+ const { count, page, rowsPerPage, onChangePage } = props;
+
+ const handleFirstPageButtonClick = (
+ event: React.MouseEvent
+
+ {theme.direction === "rtl" ?
+
+ {theme.direction === "rtl" ? (
+
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="next page"
+ >
+ {theme.direction === "rtl" ? (
+
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="last page"
+ >
+ {theme.direction === "rtl" ?
+
+ );
}
interface TablePaginationActionsProps {
- count: number;
- page: number;
- rowsPerPage: number;
- onChangePage: (event: React.MouseEvent