source: sources/client/src/components/admin/ParkingZoneInfoEdit/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: 13.1 KB
Line 
1import { useState, useEffect } from 'react';
2import useForm from '../../../hooks/useForm';
3
4import {
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
18import ZoneSectorEdit from './ZoneSectorEdit';
19import ResponsiblePersonsSectorEdit from './ResponsiblePersonsSectorEdit';
20import ParkingSpacesSectorEdit from './ParkingSpacesSectorEdit';
21import { IconButton, Fade } from '@mui/material';
22import Modal from '@mui/material/Modal';
23import Backdrop from '@mui/material/Backdrop';
24import useGetData from '../../../hooks/useGetData';
25import useDeleteZone from '../../../hooks/useDeleteZone';
26import useUpdateZone from '../../../hooks/useUpdateZone';
27import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
28
29import { employeesAddData } from './mockData';
30
31const 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
369export default ParkingZoneInfoEdit;
Note: See TracBrowser for help on using the repository browser.