[3a58bd6] | 1 | import { useHistory } from 'react-router';
|
---|
| 2 |
|
---|
| 3 | import {
|
---|
| 4 | TableContainer,
|
---|
| 5 | TableHeaderWrapper,
|
---|
| 6 | TableTitle,
|
---|
| 7 | Table,
|
---|
| 8 | TableHead,
|
---|
| 9 | TableRow,
|
---|
| 10 | TableBody,
|
---|
| 11 | TableCell,
|
---|
| 12 | ButtonTableCell,
|
---|
| 13 | ToggleAccoutStatusButton,
|
---|
| 14 | CreateEmployeeButton,
|
---|
| 15 | AddIcon,
|
---|
| 16 | SearchField,
|
---|
| 17 | IdentityIcon,
|
---|
| 18 | } from './styles';
|
---|
| 19 |
|
---|
| 20 | import InputAdornment from '@mui/material/InputAdornment';
|
---|
| 21 |
|
---|
| 22 | import { employeeStatus, accountStatus } from '../../../config/enums';
|
---|
| 23 |
|
---|
| 24 | import { employees } from './mockData';
|
---|
| 25 | import { useState } from 'react';
|
---|
| 26 |
|
---|
| 27 | const EmployeesTable = () => {
|
---|
| 28 | let history = useHistory();
|
---|
| 29 | const [filteredEmployees, setFilteredEmployees] = useState(employees);
|
---|
| 30 | const [search, setSearch] = useState('');
|
---|
| 31 |
|
---|
| 32 | const onRowClick = (id) => {
|
---|
| 33 | history.push(`/employees/${id}`);
|
---|
| 34 | };
|
---|
| 35 |
|
---|
| 36 | const onAccountStatusClick = (event, id) => {
|
---|
| 37 | event.stopPropagation();
|
---|
| 38 | console.log(`Disable or activate user acc with id: ${id}`);
|
---|
| 39 | };
|
---|
| 40 |
|
---|
| 41 | const onChangeSearch = (e) => {
|
---|
| 42 | let newSearchValue = e.target.value;
|
---|
| 43 | setSearch(newSearchValue);
|
---|
| 44 | const filteredData = employees.filter((employee) =>
|
---|
| 45 | employee.firstName
|
---|
| 46 | .concat(` ${employee.lastName}`)
|
---|
| 47 | .toLowerCase()
|
---|
| 48 | .includes(newSearchValue.trim().toLowerCase())
|
---|
| 49 | );
|
---|
| 50 |
|
---|
| 51 | setFilteredEmployees(filteredData);
|
---|
| 52 | };
|
---|
| 53 |
|
---|
| 54 | return (
|
---|
| 55 | <TableContainer>
|
---|
| 56 | <TableHeaderWrapper>
|
---|
| 57 | <TableTitle variant='h5'>Вработени</TableTitle>
|
---|
| 58 | <SearchField
|
---|
| 59 | value={search}
|
---|
| 60 | onChange={(e) => onChangeSearch(e)}
|
---|
| 61 | placeholder='Пребарај...'
|
---|
| 62 | InputProps={{
|
---|
| 63 | startAdornment: (
|
---|
| 64 | <InputAdornment position='start'>
|
---|
| 65 | <IdentityIcon />
|
---|
| 66 | </InputAdornment>
|
---|
| 67 | ),
|
---|
| 68 | }}
|
---|
| 69 | />
|
---|
| 70 | <CreateEmployeeButton onClick={() => history.push('/employees/create')}>
|
---|
| 71 | <AddIcon />
|
---|
| 72 | Додади вработен
|
---|
| 73 | </CreateEmployeeButton>
|
---|
| 74 | </TableHeaderWrapper>
|
---|
| 75 | <Table aria-label='simple table'>
|
---|
| 76 | <TableHead>
|
---|
| 77 | <TableRow>
|
---|
| 78 | <TableCell align='left'>Емаил</TableCell>
|
---|
| 79 | <TableCell align='center'>Име и Презиме</TableCell>
|
---|
| 80 | <TableCell align='center'>Зона</TableCell>
|
---|
| 81 | <TableCell align='center'>Телефон</TableCell>
|
---|
| 82 | <TableCell align='center'>Статус</TableCell>
|
---|
| 83 | <TableCell align='center'>Акаунт</TableCell>
|
---|
| 84 | </TableRow>
|
---|
| 85 | </TableHead>
|
---|
| 86 | <TableBody>
|
---|
| 87 | {filteredEmployees.map((employeeData) => (
|
---|
| 88 | <TableRow
|
---|
| 89 | key={employeeData.id}
|
---|
| 90 | onClick={() => onRowClick(employeeData.id)}
|
---|
| 91 | >
|
---|
| 92 | <TableCell align='left'>{employeeData.email}</TableCell>
|
---|
| 93 | <TableCell align='center'>
|
---|
| 94 | {employeeData.firstName} {employeeData.lastName}
|
---|
| 95 | </TableCell>
|
---|
| 96 | <TableCell align='center'>{employeeData.zone}</TableCell>
|
---|
| 97 | <TableCell align='center'>{employeeData.phoneNumber}</TableCell>
|
---|
| 98 | <TableCell align='center'>
|
---|
| 99 | {employeeStatus[employeeData.status]}
|
---|
| 100 | </TableCell>
|
---|
| 101 | <ButtonTableCell align='center'>
|
---|
| 102 | <ToggleAccoutStatusButton
|
---|
| 103 | onClick={(event) =>
|
---|
| 104 | onAccountStatusClick(event, employeeData.id)
|
---|
| 105 | }
|
---|
| 106 | $enabled={employeeData.accountActive}
|
---|
| 107 | >
|
---|
| 108 | {/* $ added because https://styled-components.com/docs/api#transient-props*/}
|
---|
| 109 | {employeeData.accountActive
|
---|
| 110 | ? accountStatus.enabled
|
---|
| 111 | : accountStatus.disabled}
|
---|
| 112 | </ToggleAccoutStatusButton>
|
---|
| 113 | </ButtonTableCell>
|
---|
| 114 | </TableRow>
|
---|
| 115 | ))}
|
---|
| 116 | </TableBody>
|
---|
| 117 | </Table>
|
---|
| 118 | </TableContainer>
|
---|
| 119 | );
|
---|
| 120 | };
|
---|
| 121 |
|
---|
| 122 | export default EmployeesTable;
|
---|