1 | import { useEffect } from 'react';
|
---|
2 | import { useHistory } from 'react-router';
|
---|
3 |
|
---|
4 | import {
|
---|
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,
|
---|
19 | } from './styles';
|
---|
20 |
|
---|
21 | import InputAdornment from '@mui/material/InputAdornment';
|
---|
22 | import DropdownViewer from '../../DropdownViewer';
|
---|
23 |
|
---|
24 | import { employeeStatus, accountStatus } from '../../../config/enums';
|
---|
25 | import useGetData from '../../../hooks/useGetData';
|
---|
26 | import useToggleAccountStatus from '../../../hooks/useToggleAccountStatus';
|
---|
27 | import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
|
---|
28 |
|
---|
29 | // import { employees } from './mockData';
|
---|
30 | import { useState } from 'react';
|
---|
31 |
|
---|
32 | const EmployeesTable = () => {
|
---|
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 | };
|
---|
52 |
|
---|
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 | );
|
---|
62 |
|
---|
63 | setFilteredEmployees(filteredData);
|
---|
64 | };
|
---|
65 |
|
---|
66 | useEffect(() => {
|
---|
67 | setFilteredEmployees(employees);
|
---|
68 | }, [employees]);
|
---|
69 |
|
---|
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 | );
|
---|
170 | };
|
---|
171 |
|
---|
172 | export default EmployeesTable;
|
---|