[bc20307] | 1 | import { useEffect } from 'react';
|
---|
[3a58bd6] | 2 | import { useHistory } from 'react-router';
|
---|
| 3 |
|
---|
| 4 | import {
|
---|
[bc20307] | 5 | TableContainer,
|
---|
| 6 | TableHeaderWrapper,
|
---|
| 7 | TableTitle,
|
---|
| 8 | Table,
|
---|
| 9 | TableHead,
|
---|
| 10 | TableRow,
|
---|
| 11 | TableBody,
|
---|
| 12 | TableCell,
|
---|
| 13 | ButtonTableCell,
|
---|
| 14 | ToggleAccoutStatusButton,
|
---|
| 15 | CreateEmployeeButton,
|
---|
| 16 | AddIcon,
|
---|
| 17 | SearchField,
|
---|
| 18 | IdentityIcon,
|
---|
[3a58bd6] | 19 | } from './styles';
|
---|
| 20 |
|
---|
| 21 | import InputAdornment from '@mui/material/InputAdornment';
|
---|
[bc20307] | 22 | import DropdownViewer from '../../DropdownViewer';
|
---|
[3a58bd6] | 23 |
|
---|
| 24 | import { employeeStatus, accountStatus } from '../../../config/enums';
|
---|
[bc20307] | 25 | import useGetData from '../../../hooks/useGetData';
|
---|
| 26 | import useToggleAccountStatus from '../../../hooks/useToggleAccountStatus';
|
---|
| 27 | import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
|
---|
[3a58bd6] | 28 |
|
---|
[bc20307] | 29 | // import { employees } from './mockData';
|
---|
[3a58bd6] | 30 | import { useState } from 'react';
|
---|
| 31 |
|
---|
| 32 | const EmployeesTable = () => {
|
---|
[bc20307] | 33 | let history = useHistory();
|
---|
| 34 | const { toggleAccountStatus, isLoading: isLoadingAccountStatus } =
|
---|
| 35 | useToggleAccountStatus();
|
---|
| 36 | const { data: employees, isLoading: isLoadingEmployees } = useGetData({
|
---|
| 37 | url: `/vraboten`,
|
---|
| 38 | });
|
---|
| 39 | const [filteredEmployees, setFilteredEmployees] = useState([]);
|
---|
| 40 | const [search, setSearch] = useState('');
|
---|
| 41 | const onRowClick = (workerId) => {
|
---|
| 42 | history.push(`/employees/${workerId}`);
|
---|
| 43 | };
|
---|
| 44 | const changeAccoutStatusOnEmployee = ({ workerId }) => {
|
---|
| 45 | const emp = filteredEmployees.find((e) => e.workerId === workerId);
|
---|
| 46 | emp.accountNonLocked = !emp.accountNonLocked;
|
---|
| 47 | };
|
---|
| 48 | const onAccountStatusClick = (event, workerId) => {
|
---|
| 49 | event.stopPropagation();
|
---|
| 50 | toggleAccountStatus({ workerId, changeAccoutStatusOnEmployee });
|
---|
| 51 | };
|
---|
[3a58bd6] | 52 |
|
---|
[bc20307] | 53 | const onChangeSearch = (e) => {
|
---|
| 54 | let newSearchValue = e.target.value;
|
---|
| 55 | setSearch(newSearchValue);
|
---|
| 56 | const filteredData = employees.filter((employee) =>
|
---|
| 57 | employee.firstName
|
---|
| 58 | .concat(` ${employee.lastName}`)
|
---|
| 59 | .toLowerCase()
|
---|
| 60 | .includes(newSearchValue.trim().toLowerCase())
|
---|
| 61 | );
|
---|
[3a58bd6] | 62 |
|
---|
[bc20307] | 63 | setFilteredEmployees(filteredData);
|
---|
| 64 | };
|
---|
[3a58bd6] | 65 |
|
---|
[bc20307] | 66 | useEffect(() => {
|
---|
| 67 | setFilteredEmployees(employees);
|
---|
| 68 | }, [employees]);
|
---|
[3a58bd6] | 69 |
|
---|
[bc20307] | 70 | return (
|
---|
| 71 | !isLoadingEmployees && (
|
---|
| 72 | <TableContainer>
|
---|
| 73 | <TableHeaderWrapper>
|
---|
| 74 | {isLoadingAccountStatus ? (
|
---|
| 75 | <AbsoluteLoader
|
---|
| 76 | containerStyle={{
|
---|
| 77 | position: 'absolute',
|
---|
| 78 | left: '65%',
|
---|
| 79 | width: '42px',
|
---|
| 80 | height: '42px',
|
---|
| 81 | }}
|
---|
| 82 | />
|
---|
| 83 | ) : null}
|
---|
| 84 | <TableTitle variant='h5'>Вработени</TableTitle>
|
---|
| 85 | <SearchField
|
---|
| 86 | value={search}
|
---|
| 87 | onChange={(e) => onChangeSearch(e)}
|
---|
| 88 | placeholder='Пребарај...'
|
---|
| 89 | InputProps={{
|
---|
| 90 | startAdornment: (
|
---|
| 91 | <InputAdornment position='start'>
|
---|
| 92 | <IdentityIcon />
|
---|
| 93 | </InputAdornment>
|
---|
| 94 | ),
|
---|
| 95 | }}
|
---|
| 96 | />
|
---|
| 97 | <CreateEmployeeButton
|
---|
| 98 | onClick={() => history.push('/employees/create')}
|
---|
| 99 | >
|
---|
| 100 | <AddIcon />
|
---|
| 101 | Додади вработен
|
---|
| 102 | </CreateEmployeeButton>
|
---|
| 103 | </TableHeaderWrapper>
|
---|
| 104 | <Table aria-label='simple table'>
|
---|
| 105 | <TableHead>
|
---|
| 106 | <TableRow>
|
---|
| 107 | <TableCell align='left'>Емаил</TableCell>
|
---|
| 108 | <TableCell align='center'>Име и Презиме</TableCell>
|
---|
| 109 | <TableCell align='center'>Зона</TableCell>
|
---|
| 110 | <TableCell align='center'>Телефон</TableCell>
|
---|
| 111 | <TableCell align='center'>Статус</TableCell>
|
---|
| 112 | <TableCell align='center'>Акаунт</TableCell>
|
---|
| 113 | </TableRow>
|
---|
| 114 | </TableHead>
|
---|
| 115 | <TableBody>
|
---|
| 116 | {filteredEmployees.map((employeeData) => (
|
---|
| 117 | <TableRow
|
---|
| 118 | key={employeeData.workerId}
|
---|
| 119 | onClick={() =>
|
---|
| 120 | onRowClick(employeeData.workerId)
|
---|
| 121 | }
|
---|
| 122 | >
|
---|
| 123 | <TableCell align='left'>
|
---|
| 124 | {employeeData.email}
|
---|
| 125 | </TableCell>
|
---|
| 126 | <TableCell align='center'>
|
---|
| 127 | {employeeData.firstName}{' '}
|
---|
| 128 | {employeeData.lastName}
|
---|
| 129 | </TableCell>
|
---|
| 130 | <TableCell
|
---|
| 131 | align='center'
|
---|
| 132 | style={{ padding: 0, width: '200px' }}
|
---|
| 133 | >
|
---|
| 134 | <DropdownViewer
|
---|
| 135 | data={employeeData.parkingZones.map(
|
---|
| 136 | (z) => z.pzName
|
---|
| 137 | )} // TODO DELETE - after backend fix
|
---|
| 138 | width='200px'
|
---|
| 139 | />
|
---|
| 140 | </TableCell>
|
---|
| 141 | <TableCell align='center'>
|
---|
| 142 | {employeeData.mobile}
|
---|
| 143 | </TableCell>
|
---|
| 144 | <TableCell align='center'>
|
---|
| 145 | {employeeStatus[employeeData.status]}
|
---|
| 146 | </TableCell>
|
---|
| 147 | <ButtonTableCell align='center'>
|
---|
| 148 | <ToggleAccoutStatusButton
|
---|
| 149 | onClick={(event) =>
|
---|
| 150 | onAccountStatusClick(
|
---|
| 151 | event,
|
---|
| 152 | employeeData.workerId
|
---|
| 153 | )
|
---|
| 154 | }
|
---|
| 155 | $enabled={employeeData.accountNonLocked}
|
---|
| 156 | >
|
---|
| 157 | {/* $ added because https://styled-components.com/docs/api#transient-props*/}
|
---|
| 158 | {employeeData.accountNonLocked
|
---|
| 159 | ? accountStatus.enabled
|
---|
| 160 | : accountStatus.disabled}
|
---|
| 161 | </ToggleAccoutStatusButton>
|
---|
| 162 | </ButtonTableCell>
|
---|
| 163 | </TableRow>
|
---|
| 164 | ))}
|
---|
| 165 | </TableBody>
|
---|
| 166 | </Table>
|
---|
| 167 | </TableContainer>
|
---|
| 168 | )
|
---|
| 169 | );
|
---|
[3a58bd6] | 170 | };
|
---|
| 171 |
|
---|
| 172 | export default EmployeesTable;
|
---|