source: sources/client/src/components/admin/EmployeeEdit/index.js@ bc20307

Last change on this file since bc20307 was bc20307, checked in by Tasevski2 <39170279+Tasevski2@…>, 2 years ago

Push before video
  • Property mode set to 100644
File size: 11.8 KB
Line 
1import { useEffect, useState } from 'react';
2import { useParams, useHistory } from 'react-router-dom';
3import useForm from '../../../hooks/useForm';
4
5import {
6 EmployeeEditWrapper,
7 Title,
8 RowWrapper,
9 LabelAndInputWrapper,
10 Label,
11 StandardInputField,
12 Dropdown,
13 DropdownOption,
14 SwitchRowWrapper,
15 SwitchTitle,
16 SwitchLabelAndInputWrapper,
17 AccountSwitch,
18 BackAndSaveChangesButtonsWrapper,
19 DeleteButton,
20 BackButton,
21 SaveChangesButton,
22 VisibilityIcon,
23 VisibilityOffIcon,
24} from './styles';
25
26import IconButton from '@mui/material/IconButton';
27import Checkbox from '@mui/material/Checkbox';
28import ListItemText from '@mui/material/ListItemText';
29import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
30
31import { employeeStatus } from '../../../config/enums';
32import useGetData from '../../../hooks/useGetData';
33import useUpdateEmployee from '../../../hooks/useUpdateEmployee';
34import useDeleteEmployee from '../../../hooks/useDeleteEmployee';
35
36const MenuProps = {
37 PaperProps: {
38 style: {
39 maxHeight: 220,
40 },
41 },
42};
43
44const EmployeeEdit = () => {
45 const [isPasswordVisible, setIsPasswordVisible] = useState(false);
46 let history = useHistory();
47 let { employeeId } = useParams();
48 const { updateEmployee } = useUpdateEmployee();
49 const { deleteEmployee } = useDeleteEmployee();
50 const { data: employeeData, isLoading: isLoadingEmployeeData } = useGetData(
51 {
52 url: `/vraboten/${employeeId}`,
53 }
54 );
55 const { data: zoneOptions, isLoading: isLoadingZonesData } = useGetData({
56 url: `/parkingZone/parkingZoneNames`,
57 });
58
59 const {
60 data: employeeEditableData,
61 setNewData: setNewDataEmployee,
62 onFormChange: setEmployeeEditableData,
63 } = useForm(null);
64 const [accStatus, setAccStatus] = useState(false);
65 const {
66 data: { confirmPassword },
67 onFormChange: setConfirmPassword,
68 } = useForm({ confirmPassword: '' });
69 const [zones, setZones] = useState([]);
70
71 const statusOptions = Object.keys(employeeStatus).map((key) => {
72 return {
73 text: employeeStatus[key],
74 value: key,
75 };
76 });
77
78 const onSaveChanges = () => {
79 if (zones.length === 1 && zones[0] === 'NONE') {
80 zones.shift();
81 }
82 console.log(`Confirm password: ${confirmPassword}`);
83 const mobileNumber = employeeEditableData.mobile;
84 delete employeeEditableData.mobile;
85 const changedEmployee = {
86 ...employeeEditableData,
87 mobileNumber: mobileNumber,
88 locked: accStatus,
89 parkingZones: zones,
90 confirmPass: confirmPassword,
91 };
92 updateEmployee({ employee: changedEmployee });
93 };
94
95 const onDeleteEmployee = () => {
96 deleteEmployee({ id: employeeData.workerId });
97 };
98
99 const handleZonesChange = (event) => {
100 const {
101 target: { value },
102 } = event;
103 if (value.length > 1 && value[0] === 'NONE') {
104 value.shift();
105 }
106 setZones(
107 typeof value === 'string'
108 ? value.split(', ')
109 : value.length === 0
110 ? ['NONE']
111 : value
112 );
113 };
114 useEffect(() => {
115 if (!employeeData) return;
116 setNewDataEmployee({...employeeData, password: ''});
117 setAccStatus(employeeData.locked);
118 setZones(
119 employeeData.pzNames.length === 0
120 ? ['NONE']
121 : employeeData.pzNames
122 );
123 }, [employeeData]);
124
125 return (
126 <EmployeeEditWrapper>
127 <Title variant='h5'>Уреди Вработен</Title>
128 {isLoadingEmployeeData ? (
129 <AbsoluteLoader
130 containerStyle={{
131 width: '200px',
132 height: '200px',
133 margin: 'auto',
134 }}
135 />
136 ) : (
137 <>
138 <RowWrapper>
139 <LabelAndInputWrapper>
140 <Label>Име</Label>
141 <StandardInputField
142 value={employeeEditableData?.firstName ?? ''}
143 name='firstName'
144 onChange={setEmployeeEditableData}
145 />
146 </LabelAndInputWrapper>
147 <LabelAndInputWrapper>
148 <Label>Презиме</Label>
149 <StandardInputField
150 value={employeeEditableData?.lastName ?? ''}
151 name='lastName'
152 onChange={setEmployeeEditableData}
153 />
154 </LabelAndInputWrapper>
155 </RowWrapper>
156 <RowWrapper>
157 <LabelAndInputWrapper>
158 <Label>Емаил</Label>
159 <StandardInputField
160 value={employeeEditableData?.email ?? ''}
161 name='email'
162 type='email'
163 onChange={setEmployeeEditableData}
164 />
165 </LabelAndInputWrapper>
166 <LabelAndInputWrapper>
167 <Label>Телефон</Label>
168 <StandardInputField
169 value={employeeEditableData?.mobile ?? ''}
170 name='mobile'
171 onChange={setEmployeeEditableData}
172 />
173 </LabelAndInputWrapper>
174 </RowWrapper>
175 <RowWrapper>
176 <LabelAndInputWrapper>
177 <Label>Лозинка</Label>
178 <StandardInputField
179 value={employeeEditableData?.password ?? ''}
180 name='password'
181 type={isPasswordVisible ? 'text' : 'password'}
182 onChange={setEmployeeEditableData}
183 />
184 </LabelAndInputWrapper>
185 <IconButton
186 sx={{ marginTop: '23px' }}
187 onClick={() =>
188 setIsPasswordVisible(!isPasswordVisible)
189 }
190 >
191 {isPasswordVisible ? (
192 <VisibilityIcon />
193 ) : (
194 <VisibilityOffIcon />
195 )}
196 </IconButton>
197 <LabelAndInputWrapper>
198 <Label>Потврди Лозинка</Label>
199 <StandardInputField
200 value={confirmPassword}
201 name='confirmPassword'
202 type={isPasswordVisible ? 'text' : 'password'}
203 onChange={setConfirmPassword}
204 />
205 </LabelAndInputWrapper>
206 </RowWrapper>
207 <RowWrapper>
208 {isLoadingZonesData ? (
209 <AbsoluteLoader
210 containerStyle={{
211 position: 'absolute',
212 left: '310px',
213 bottom: '5px',
214 width: '40px',
215 height: '40px',
216 }}
217 />
218 ) : null}
219 <LabelAndInputWrapper>
220 <Label>Одговорен за:</Label>
221 <Dropdown
222 multiple
223 value={zones ?? []}
224 onChange={handleZonesChange}
225 renderValue={(selected) => {
226 return selected.join(', ');
227 }}
228 MenuProps={MenuProps}
229 >
230 {!isLoadingZonesData &&
231 zoneOptions.map((zone) => (
232 <DropdownOption value={zone} key={zone}>
233 <Checkbox
234 checked={
235 zones.indexOf(zone) > -1
236 }
237 />
238 <ListItemText primary={zone} />
239 </DropdownOption>
240 ))}
241 </Dropdown>
242 </LabelAndInputWrapper>
243 <LabelAndInputWrapper>
244 <Label>Статус</Label>
245 <Dropdown
246 value={
247 employeeEditableData?.status !== '' &&
248 employeeEditableData?.status !== null
249 ? employeeEditableData?.status
250 : statusOptions[0].value
251 }
252 name='status'
253 onChange={setEmployeeEditableData}
254 MenuProps={MenuProps}
255 >
256 {statusOptions.map((option) => (
257 <DropdownOption
258 value={option.value}
259 key={option.value}
260 >
261 {option.text}
262 </DropdownOption>
263 ))}
264 </Dropdown>
265 </LabelAndInputWrapper>
266 </RowWrapper>
267 <SwitchRowWrapper>
268 <SwitchTitle>Акаунт</SwitchTitle>
269 <SwitchLabelAndInputWrapper>
270 <Label>Активен:</Label>
271 <AccountSwitch
272 checked={!accStatus}
273 value={accStatus}
274 name='accountActive'
275 onClick={() => setAccStatus(!accStatus)}
276 />
277 </SwitchLabelAndInputWrapper>
278 </SwitchRowWrapper>
279 <RowWrapper>
280 <DeleteButton onClick={onDeleteEmployee}>
281 Избриши Вработен
282 </DeleteButton>
283 <BackAndSaveChangesButtonsWrapper>
284 <BackButton
285 onClick={() => history.push('/employees')}
286 >
287 Врати се Назад
288 </BackButton>
289 <SaveChangesButton onClick={onSaveChanges}>
290 Зачувај ги Промените
291 </SaveChangesButton>
292 </BackAndSaveChangesButtonsWrapper>
293 </RowWrapper>
294 </>
295 )}
296 </EmployeeEditWrapper>
297 );
298};
299
300export default EmployeeEdit;
Note: See TracBrowser for help on using the repository browser.