dialogos y funciones eliminar reserva

web-ui/web-react/src/components/Reservaciones.js

@@ -222,7 +222,83 @@ const Reservations = () => {
         setReservation(emptyReservation);
         setReservationDialog(true);
         setSubmitted(false);
+    };
 
+
+
+    const hideDeleteReservationDialog = () => {
+        setDeleteReservationDialog(false);
+    };
+
+    const hideDeleteReservationsDialog = () => {
+        setDeleteReservationsDialog(false);
+    };
+
+
+    const deleteReservation = () => {
+        fetch('http://localhost:4000/reservation/deleteReservation' + reservation._id, {
+            cache: 'no-cache',
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        })
+            .then(function (response) {
+                if (response.status != 201)
+                    console.log('Ocurrió un error con el servicio: ' + response.status);
+                else return response.json();
+            })
+            .then(function (response) {
+                let _reservation = reservations.filter(
+                    (val) => (val._id !== reservation._id || val.status != -1),
+                );
+
+                setReservations(_reservation);
+                setDeleteReservationDialog(false);
+                setReservation(emptyReservation);
+                toast.current.show({
+                    severity: 'success',
+                    summary: 'Éxito',
+                    detail: 'Reservación Eliminada',
+                    life: 3000,
+                });
+            })
+            .catch((err) => {
+                console.log('Ocurrió un error con el fetch', err);
+                toast.current.show({
+                    severity: 'danger',
+                    summary: 'Error',
+                    detail: 'Reservación no se pudo Eliminar',
+                    life: 3000,
+                });
+            });
+    };
+
+    const deleteSelectedReservations = () => {
+        let _reservations = reservations.filter(
+            (val) => (!selectedReservations.includes(val)),
+        );
+        selectedReservations.map((item) => {
+            fetch('http://localhost:4000/reservation/deleteReservation/' + item._id, {
+                cache: 'no-cache',
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+        });
+        _reservations = _reservations.filter(
+            (val) => val.status != -1,
+        )
+        setReservations(_reservations);
+        setDeleteReservationsDialog(false);
+        setSelectedReservations(null);
+        toast.current.show({
+            severity: 'success',
+            summary: 'Éxito',
+            detail: 'Reservaciones Eliminadas',
+            life: 3000,
+        });
     };
 
     const leftToolbarTemplate = () => {
@@ -272,6 +348,40 @@ const Reservations = () => {
         </>
     );
 
+    const deleteReservationDialogFooter = (
+        <>
+          <Button
+            label="No"
+            icon="pi pi-times"
+            className="p-button-text"
+            onClick={hideDeleteReservationDialog}
+          />
+          <Button
+            label="Yes"
+            icon="pi pi-check"
+            className="p-button-text"
+            onClick={deleteReservation}
+          />
+        </>
+      );
+    
+      const deleteReservationsDialogFooter = (
+        <>
+          <Button
+            label="No"
+            icon="pi pi-times"
+            className="p-button-text"
+            onClick={hideDeleteReservationsDialog}
+          />
+          <Button
+            label="Yes"
+            icon="pi pi-check"
+            className="p-button-text"
+            onClick={deleteSelectedReservations}
+          />
+        </>
+      );
+
     const header = (
         <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
             <h5 className="m-0">
@@ -698,7 +808,47 @@ const Reservations = () => {
                             </div>
                         )}
                     </Dialog>
-
+                    <Dialog
+                        visible={deleteReservationsDialog}
+                        style={{ width: '450px' }}
+                        header="Confirmar"
+                        modal
+                        footer={deleteReservationDialogFooter}
+                        onHide={hideDeleteReservationDialog}
+                    >
+                        <div className="flex align-items-center justify-content-center">
+                            <i
+                                className="pi pi-exclamation-triangle mr-3"
+                                style={{ fontSize: '2rem' }}
+                            />
+                            {reservation && (
+                                <span>
+                                    ¿Estás seguro que desea eliminar la reservación de <b>{reservation.user_name}</b>?
+                                </span>
+                            )}
+                        </div>
+                    </Dialog>
+                    <Dialog
+                        visible={deleteReservationsDialog}
+                        style={{ width: '450px' }}
+                        header="Confirmar"
+                        modal
+                        footer={deleteReservationsDialogFooter}
+                        onHide={hideDeleteReservationsDialog}
+                    >
+                        <div className="flex align-items-center justify-content-center">
+                            <i
+                                className="pi pi-exclamation-triangle mr-3"
+                                style={{ fontSize: '2rem' }}
+                            />
+                            {selectedReservations && (
+                                <span>
+                                    ¿Está seguro eliminar las reservaciones
+                                    seleccionadas?
+                                </span>
+                            )}
+                        </div>
+                    </Dialog>
                 </div>
             </div>