1 | import { useState, useEffect } from 'react';
|
---|
2 | import useForm from '../../../hooks/useForm';
|
---|
3 |
|
---|
4 | import {
|
---|
5 | DeleteButton,
|
---|
6 | RightSideWrapper,
|
---|
7 | ZoneSectorAndDeleteButtonWrapper,
|
---|
8 | SaveButton,
|
---|
9 | CancelButton,
|
---|
10 | CloseIcon,
|
---|
11 | ModalContainer,
|
---|
12 | ModalTitle,
|
---|
13 | ModalDescription,
|
---|
14 | ButtonsWrapper,
|
---|
15 | ModalButton,
|
---|
16 | } from './styles';
|
---|
17 |
|
---|
18 | import ZoneSectorEdit from './ZoneSectorEdit';
|
---|
19 | import ResponsiblePersonsSectorEdit from './ResponsiblePersonsSectorEdit';
|
---|
20 | import ParkingSpacesSectorEdit from './ParkingSpacesSectorEdit';
|
---|
21 | import { IconButton, Fade } from '@mui/material';
|
---|
22 | import Modal from '@mui/material/Modal';
|
---|
23 | import Backdrop from '@mui/material/Backdrop';
|
---|
24 | import useGetData from '../../../hooks/useGetData';
|
---|
25 | import useDeleteZone from '../../../hooks/useDeleteZone';
|
---|
26 | import useUpdateZone from '../../../hooks/useUpdateZone';
|
---|
27 | import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
|
---|
28 |
|
---|
29 | import { employeesAddData } from './mockData';
|
---|
30 |
|
---|
31 | const ParkingZoneInfoEdit = ({ zone, setEditMode, setZone }) => {
|
---|
32 | const { deleteZone, isLoading: isLoadingDeleteZone } = useDeleteZone();
|
---|
33 | const { updateZone, isLoading: isLoadingUpdateZone } = useUpdateZone();
|
---|
34 | const {
|
---|
35 | data: responsiblePersonsData,
|
---|
36 | isLoading: isLoadingResponsiblePersonsData,
|
---|
37 | } = useGetData({ url: `/vraboten/vrabotenDemo` });
|
---|
38 | const { data: zoneSectorData, onFormChange: setZoneSectorData } = useForm({
|
---|
39 | zoneName: zone?.pzName ?? '',
|
---|
40 | hourlyRate: zone?.price ?? 0,
|
---|
41 | from: zone?.from ?? 0,
|
---|
42 | to: zone?.to ?? 0,
|
---|
43 | lat: zone?.parkingZoneLocation?.centre?.lat ?? '',
|
---|
44 | lng: zone?.parkingZoneLocation?.centre?.lng ?? '',
|
---|
45 | });
|
---|
46 | const [zoneColor, setZoneColor] = useState(zone?.color ?? '');
|
---|
47 | const [newCoord, setNewCoord] = useState({
|
---|
48 | newLat: '',
|
---|
49 | newLng: '',
|
---|
50 | });
|
---|
51 | const [coords, setCoords] = useState(
|
---|
52 | zone?.parkingZoneLocation?.coords ?? []
|
---|
53 | );
|
---|
54 |
|
---|
55 | const handleCoordsChange = ({ type, payload }) => {
|
---|
56 | switch (type) {
|
---|
57 | case 'add':
|
---|
58 | const createdCoord = {
|
---|
59 | lat: parseFloat(newCoord.newLat),
|
---|
60 | lng: parseFloat(newCoord.newLng),
|
---|
61 | };
|
---|
62 | setNewCoord({
|
---|
63 | newLat: '',
|
---|
64 | newLng: '',
|
---|
65 | });
|
---|
66 | setCoords([...coords, createdCoord]);
|
---|
67 | return;
|
---|
68 | case 'delete':
|
---|
69 | const updatedDeleteCoords = [...coords];
|
---|
70 | updatedDeleteCoords.splice(payload.index, 1);
|
---|
71 | setCoords(updatedDeleteCoords);
|
---|
72 | return;
|
---|
73 | case 'update':
|
---|
74 | const updatedCoords = [...coords];
|
---|
75 | updatedCoords[payload.index] = {
|
---|
76 | ...updatedCoords[payload.index],
|
---|
77 | [payload.column]: parseFloat(payload.value),
|
---|
78 | };
|
---|
79 | setCoords(updatedCoords);
|
---|
80 | return;
|
---|
81 | default:
|
---|
82 | return;
|
---|
83 | }
|
---|
84 | };
|
---|
85 |
|
---|
86 | // ResponsiblePersonSectorEdit
|
---|
87 |
|
---|
88 | const [responsiblePersons, setResponsiblePersons] = useState(
|
---|
89 | zone?.responsibleWorkers ?? []
|
---|
90 | );
|
---|
91 | const [employeesDataModal, setEmployeesDataModal] = useState([]);
|
---|
92 | const handleEmployeesAndResponsiblePersonsChange = ({ type, person }) => {
|
---|
93 | switch (type) {
|
---|
94 | case 'delete':
|
---|
95 | setResponsiblePersons(
|
---|
96 | responsiblePersons.filter(
|
---|
97 | (p) => p.workerId !== person.workerId
|
---|
98 | )
|
---|
99 | );
|
---|
100 | setEmployeesDataModal([...employeesDataModal, person]);
|
---|
101 | return;
|
---|
102 | case 'add':
|
---|
103 | setEmployeesDataModal(
|
---|
104 | employeesDataModal.filter(
|
---|
105 | (emp) => emp.workerId !== person.workerId
|
---|
106 | )
|
---|
107 | );
|
---|
108 | setResponsiblePersons([...responsiblePersons, person]);
|
---|
109 | return;
|
---|
110 | default:
|
---|
111 | return;
|
---|
112 | }
|
---|
113 | };
|
---|
114 | // ParkingSpacesSectorEdit
|
---|
115 |
|
---|
116 | const [parkingSpacesNumber, setParkingSpacesNumber] = useState(
|
---|
117 | zone?.parkingSpaces?.length ?? 0
|
---|
118 | );
|
---|
119 | const [newParkingSpace, setNewParkingSpace] = useState({
|
---|
120 | lat: '',
|
---|
121 | lng: '',
|
---|
122 | psName: '',
|
---|
123 | });
|
---|
124 | const [parkingSpaces, setParkingSpaces] = useState(
|
---|
125 | zone?.parkingSpaces ?? []
|
---|
126 | );
|
---|
127 | const handleParkingSpacesChange = ({ type, payload }) => {
|
---|
128 | switch (type) {
|
---|
129 | case 'add':
|
---|
130 | const createParkingSpace = {
|
---|
131 | lat: parseFloat(newParkingSpace.lat),
|
---|
132 | lng: parseFloat(newParkingSpace.lng),
|
---|
133 | psName: newParkingSpace.psName,
|
---|
134 | };
|
---|
135 | setNewParkingSpace({
|
---|
136 | lat: '',
|
---|
137 | lng: '',
|
---|
138 | psName: '',
|
---|
139 | });
|
---|
140 | setParkingSpaces([...parkingSpaces, createParkingSpace]);
|
---|
141 | setParkingSpacesNumber(parkingSpacesNumber + 1);
|
---|
142 | return;
|
---|
143 | case 'delete':
|
---|
144 | const updatedDeleteParkingSpaces = [...parkingSpaces];
|
---|
145 | updatedDeleteParkingSpaces.splice(payload.index, 1);
|
---|
146 | setParkingSpaces(updatedDeleteParkingSpaces);
|
---|
147 | setParkingSpacesNumber(parkingSpacesNumber - 1);
|
---|
148 | return;
|
---|
149 | case 'update':
|
---|
150 | const updatedParkingSpaces = [...parkingSpaces];
|
---|
151 | updatedParkingSpaces[payload.index] = {
|
---|
152 | ...updatedParkingSpaces[payload.index],
|
---|
153 | [payload.column]:
|
---|
154 | payload.column !== 'psName'
|
---|
155 | ? parseFloat(payload.value)
|
---|
156 | : payload.value,
|
---|
157 | };
|
---|
158 | setParkingSpaces(updatedParkingSpaces);
|
---|
159 | return;
|
---|
160 | default:
|
---|
161 | return;
|
---|
162 | }
|
---|
163 | };
|
---|
164 |
|
---|
165 | const [modal, setModal] = useState({
|
---|
166 | open: false,
|
---|
167 | title: '',
|
---|
168 | description: '',
|
---|
169 | btnLeftText: '',
|
---|
170 | btnRightText: '',
|
---|
171 | btnLeftOnClick: null,
|
---|
172 | btnRightOnClick: null,
|
---|
173 | });
|
---|
174 |
|
---|
175 | const closeModal = () => {
|
---|
176 | setModal({
|
---|
177 | open: false,
|
---|
178 | title: '',
|
---|
179 | description: '',
|
---|
180 | btnLeftText: '',
|
---|
181 | btnRightText: '',
|
---|
182 | btnLeftOnClick: null,
|
---|
183 | btnRightOnClick: null,
|
---|
184 | });
|
---|
185 | };
|
---|
186 |
|
---|
187 | // CANCEL BUTTON MODAL HANDLING
|
---|
188 | const handleCancelLeftClick = () => {
|
---|
189 | setEditMode(false);
|
---|
190 | };
|
---|
191 |
|
---|
192 | const handleCancel = () => {
|
---|
193 | setModal({
|
---|
194 | open: true,
|
---|
195 | title: 'Несочувани Измени',
|
---|
196 | description:
|
---|
197 | 'Изменетите податоците нема да бидат сочувани. Дали сакате да ги зачувате?',
|
---|
198 | btnLeftText: 'НЕ',
|
---|
199 | btnRightText: 'ДА',
|
---|
200 | btnLeftOnClick: handleCancelLeftClick,
|
---|
201 | btnRightOnClick: handleSaveChangesRightClick,
|
---|
202 | });
|
---|
203 | };
|
---|
204 |
|
---|
205 | // SAVE CHANGES BUTTON MODAL HANDLING
|
---|
206 |
|
---|
207 | const handleSaveChangesRightClick = () => {
|
---|
208 | const editedZoneN = {
|
---|
209 | ...zone,
|
---|
210 | pzName: zoneSectorData.zoneName,
|
---|
211 | price: zoneSectorData.hourlyRate,
|
---|
212 | from: zoneSectorData.from,
|
---|
213 | to: zoneSectorData.to,
|
---|
214 | color: zoneColor,
|
---|
215 | parkingZoneLocation: {
|
---|
216 | centre: {
|
---|
217 | lat: zoneSectorData.lat,
|
---|
218 | lng: zoneSectorData.lng,
|
---|
219 | },
|
---|
220 | coords: coords,
|
---|
221 | },
|
---|
222 | parkingSpaces: parkingSpaces,
|
---|
223 | responsibleWorkers: responsiblePersons ?? [],
|
---|
224 | };
|
---|
225 | console.log(`The new data is saved:`, editedZoneN);
|
---|
226 | updateZone({ zone: editedZoneN, setEditMode, setZone, setModal });
|
---|
227 | };
|
---|
228 |
|
---|
229 | const handleSaveChanges = () => {
|
---|
230 | setModal({
|
---|
231 | open: true,
|
---|
232 | title: 'Зачувување Измени',
|
---|
233 | description:
|
---|
234 | 'Дали сте сигурни дека сакате да ги сочувате измените?',
|
---|
235 | btnLeftText: 'НЕ',
|
---|
236 | btnRightText: 'ДА',
|
---|
237 | btnLeftOnClick: closeModal,
|
---|
238 | btnRightOnClick: handleSaveChangesRightClick,
|
---|
239 | });
|
---|
240 | };
|
---|
241 |
|
---|
242 | // DELETE ZONE BUTTON MODAL HANDLING
|
---|
243 |
|
---|
244 | const handleDeleteZoneRightClick = () => {
|
---|
245 | deleteZone({ id: zone.pzId });
|
---|
246 | };
|
---|
247 |
|
---|
248 | const handleDeleteZone = () => {
|
---|
249 | setModal({
|
---|
250 | open: true,
|
---|
251 | title: 'Бришење на Зона',
|
---|
252 | description: 'Дали сте сигурни дека сакате да ја избришете зоната?',
|
---|
253 | btnLeftText: 'НЕ',
|
---|
254 | btnRightText: 'ДА',
|
---|
255 | btnLeftOnClick: closeModal,
|
---|
256 | btnRightOnClick: handleDeleteZoneRightClick,
|
---|
257 | });
|
---|
258 | };
|
---|
259 |
|
---|
260 | useEffect(() => {
|
---|
261 | if (responsiblePersonsData) {
|
---|
262 | setEmployeesDataModal(() => {
|
---|
263 | const responsiblePersonsId = zone && zone?.responsibleWorkers.map((p) => p.workerId);
|
---|
264 | const filteredEmployees = responsiblePersonsData.filter(
|
---|
265 | (emp) => !responsiblePersonsId.includes(emp.workerId)
|
---|
266 | );
|
---|
267 | return filteredEmployees;
|
---|
268 | });
|
---|
269 | }
|
---|
270 |
|
---|
271 | }, [responsiblePersonsData ]);
|
---|
272 |
|
---|
273 | return (
|
---|
274 | <>
|
---|
275 | <Modal
|
---|
276 | open={modal.open}
|
---|
277 | closeAfterTransition
|
---|
278 | BackdropComponent={Backdrop}
|
---|
279 | BackdropProps={{
|
---|
280 | timeout: 500,
|
---|
281 | onClick: closeModal,
|
---|
282 | }}
|
---|
283 | style={{
|
---|
284 | display: 'flex',
|
---|
285 | alignItems: 'center',
|
---|
286 | justifyContent: 'center',
|
---|
287 | }}
|
---|
288 | >
|
---|
289 | <Fade in={modal.open}>
|
---|
290 | <ModalContainer>
|
---|
291 | <IconButton
|
---|
292 | style={{
|
---|
293 | marginLeft: 320,
|
---|
294 | }}
|
---|
295 | onClick={closeModal}
|
---|
296 | >
|
---|
297 | <CloseIcon />
|
---|
298 | </IconButton>
|
---|
299 | <ModalTitle>{modal.title}</ModalTitle>
|
---|
300 | {isLoadingDeleteZone || isLoadingUpdateZone ? (
|
---|
301 | <AbsoluteLoader
|
---|
302 | containerStyle={{
|
---|
303 | width: '150px',
|
---|
304 | height: '150px',
|
---|
305 | margin: 'auto',
|
---|
306 | marginTop: '60px',
|
---|
307 | }}
|
---|
308 | />
|
---|
309 | ) : (
|
---|
310 | <>
|
---|
311 | <ModalDescription>
|
---|
312 | {modal.description}
|
---|
313 | </ModalDescription>
|
---|
314 | <ButtonsWrapper>
|
---|
315 | <ModalButton onClick={modal.btnLeftOnClick}>
|
---|
316 | {modal.btnLeftText}
|
---|
317 | </ModalButton>
|
---|
318 | <ModalButton
|
---|
319 | onClick={modal.btnRightOnClick}
|
---|
320 | >
|
---|
321 | {modal.btnRightText}
|
---|
322 | </ModalButton>
|
---|
323 | </ButtonsWrapper>
|
---|
324 | </>
|
---|
325 | )}
|
---|
326 | </ModalContainer>
|
---|
327 | </Fade>
|
---|
328 | </Modal>
|
---|
329 | <ZoneSectorAndDeleteButtonWrapper>
|
---|
330 | <DeleteButton onClick={handleDeleteZone}>
|
---|
331 | Избриши Зона
|
---|
332 | </DeleteButton>
|
---|
333 | <ZoneSectorEdit
|
---|
334 | {...zoneSectorData}
|
---|
335 | setZoneSectorData={setZoneSectorData}
|
---|
336 | zoneColor={zoneColor}
|
---|
337 | setZoneColor={setZoneColor}
|
---|
338 | newCoord={newCoord}
|
---|
339 | setNewCoord={setNewCoord}
|
---|
340 | coords={coords}
|
---|
341 | handleCoordsChange={handleCoordsChange}
|
---|
342 | />
|
---|
343 | </ZoneSectorAndDeleteButtonWrapper>
|
---|
344 | <RightSideWrapper>
|
---|
345 | <SaveButton onClick={handleSaveChanges}>
|
---|
346 | Зачувај Промени
|
---|
347 | </SaveButton>
|
---|
348 | <CancelButton onClick={handleCancel}>Откажи</CancelButton>
|
---|
349 | <ResponsiblePersonsSectorEdit
|
---|
350 | responsiblePersons={responsiblePersons}
|
---|
351 | employeesDataModal={employeesDataModal}
|
---|
352 | isLoadingResponsiblePersonsData={
|
---|
353 | isLoadingResponsiblePersonsData
|
---|
354 | }
|
---|
355 | handleChange={handleEmployeesAndResponsiblePersonsChange}
|
---|
356 | />
|
---|
357 | <ParkingSpacesSectorEdit
|
---|
358 | parkingSpacesNumber={parkingSpacesNumber}
|
---|
359 | parkingSpaces={parkingSpaces}
|
---|
360 | newParkingSpace={newParkingSpace}
|
---|
361 | setNewParkingSpace={setNewParkingSpace}
|
---|
362 | handleParkingSpacesChange={handleParkingSpacesChange}
|
---|
363 | />
|
---|
364 | </RightSideWrapper>
|
---|
365 | </>
|
---|
366 | );
|
---|
367 | };
|
---|
368 |
|
---|
369 | export default ParkingZoneInfoEdit;
|
---|