[bc20307] | 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;
|
---|