funcionalidad desactivar-activar guarda de seguridad

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

@@ -58,7 +58,7 @@ const AdministradoresSistema = () => {
         item.status_text = 'Inactivo';
       } 
     })
-    setAdministrators(adminRes.message);
+    setAdministrators(await data);
   }
   useEffect(() => {
     fetchP();

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

@@ -11,7 +11,8 @@ import { faUserAlt } from '@fortawesome/free-solid-svg-icons';
 import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
 import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import { useCookies } from "react-cookie";
 
 const GuardasSeguridad = () => {
     const [listaGuardas, setListaGuardas] = useState([]);
@@ -23,6 +24,10 @@ const GuardasSeguridad = () => {
     const [deleteGuardasDialog, setDeleteGuardasDialog] = useState(false);
     const toast = useRef(null);
     const dt = useRef(null);
+
+    const [cookies, setCookie] = useCookies();
+    const [changeStatusGuardDialog, setChangeStatusGuardDialog] = useState(false);
+
     let emptyGuarda = {
         _id: null,
         dni: '',
@@ -32,7 +37,8 @@ const GuardasSeguridad = () => {
         phone: '',
         password: '',
         user_type: '1',
-        status: ''
+        status: '',
+        status_text: '',
     };
 
 
@@ -40,7 +46,17 @@ const GuardasSeguridad = () => {
     async function listaGuardasF() {
         let nombres = await fetch(urlFetch, { method: 'GET' });
         let listaGuardasRes = await nombres.json();
-        setListaGuardas(listaGuardasRes.message);
+        let data = await listaGuardasRes.message.filter(
+            (val) => val.status != -1,
+        )
+        await data.map((item) => {
+            if (item.status == '1') {
+                item.status_text = 'Activo';
+            } else if (item.status == '0') {
+                item.status_text = 'Inactivo';
+            }
+        })
+        setListaGuardas(await data);
     }
     useEffect(() => {
         listaGuardasF();
@@ -56,7 +72,7 @@ const GuardasSeguridad = () => {
             password: document.getElementById('correo_electronico').value,
             user_type: "4", //4 es guarda
             status: "1",
-            community_id: "62be68215692582bbfd77134"
+            community_id: cookies.community_id
         };
         var data2 = {
             dni: "11979037",
@@ -66,7 +82,7 @@ const GuardasSeguridad = () => {
             phone: 84664515,
             password: "1203",
             user_type: "2",
-            status: "4",
+            status: "1",
             community_id: "62be68215692582bbfd77134"
         }
         console.log('ssss');
@@ -74,7 +90,7 @@ const GuardasSeguridad = () => {
             cache: 'no-cache',
             method: 'POST',
             mode: 'cors',
-            body: JSON.stringify(data2),
+            body: JSON.stringify(data),
             headers: {
                 'Content-Type': 'application/json'
             }
@@ -89,7 +105,6 @@ const GuardasSeguridad = () => {
             )
             .then(
                 function (response) {
-                    console.log('fff');
                     listaGuardasF();
                 }
             )
@@ -98,22 +113,51 @@ const GuardasSeguridad = () => {
             );
     }
 
-    const hideDeleteGuardaDialog = () => {
+    const cambiarStatusUser = () => {
-        setDeleteGuardaDialog(false);
+        if (guarda.status == '1') {
+            guarda.status = '0';
+            guarda.status_text = 'Inactivo';
+
+        } else if (guarda.status == '0') {
+            guarda.status = '1';
+            guarda.status_text = 'Activo';
+        }
+        var data = {
+            id: guarda._id,
+            status: guarda.status,
+        };
+        fetch('http://localhost:4000/user/changeStatus', {
+            cache: 'no-cache',
+            method: 'POST',
+            body: JSON.stringify(data),
+            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) {
+                    setChangeStatusGuardDialog(false);
+                    toast.current.show({
+                        severity: 'success',
+                        summary: 'Éxito',
+                        detail: 'Guarda de Seguridad Actualizado',
+                        life: 3000,
+                    });
+                }
+            )
+            .catch(
+                err => console.log('Ocurrió un error con el fetch', err)
+            );
     }
 
-    const hideDeleteGuardasDialog = () => {
-        setDeleteGuardasDialog(false);
-    }
-
-    const confirmDeleteGuarda = (guarda) => {
-        setGuarda(guarda);
-        setDeleteGuardaDialog(true);
-    }
-
-    const confirmDeleteSelected = () => {
-        setDeleteGuardasDialog(true);
-    }
 
     const deleteGuarda = () => {
 
@@ -166,10 +210,55 @@ const GuardasSeguridad = () => {
         toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Administradores del Sistema Eliminados', life: 3000 });
     }
 
+    const hideDeleteGuardaDialog = () => {
+        setDeleteGuardaDialog(false);
+    }
+
+    const hideDeleteGuardasDialog = () => {
+        setDeleteGuardasDialog(false);
+    }
+
+    const confirmDeleteGuarda = (guarda) => {
+        setGuarda(guarda);
+        setDeleteGuardaDialog(true);
+    }
+
+    const confirmDeleteSelected = () => {
+        setDeleteGuardasDialog(true);
+    }
+
+    const hideChangeStatusGuardDialog = () => {
+        setChangeStatusGuardDialog(false);
+    };
+
+    const confirmChangeStatusGuard = (guard) => {
+        setGuarda(guard);
+        setChangeStatusGuardDialog(true);
+    };
+
+
     const actionsAdmin = (rowData) => {
+        let icono = '';
+        let text = '';
+        if (rowData.status == '0') {
+            icono = "pi pi-eye";
+            text = "Activar Guarda de Seguridad"
+        } else if (rowData.status == '1') {
+            icono = "pi pi-eye-slash";
+            text = "Inactivar Guarda de Seguridad"
+
+        }
         return (
             <div className="actions">
-                <Button icon="pi pi-trash" className="p-button-rounded p-button-danger mt-2" onClick={() => confirmDeleteGuarda(rowData)} />
+                <Button
+                    icon={`${icono}`}
+                    className="p-button-rounded p-button-warning mt-2 mx-2"
+                    onClick={() => confirmChangeStatusGuard(rowData)}
+                    title={`${text}`}
+                />
+                <Button icon="pi pi-trash"
+                    className="p-button-rounded p-button-danger mt-2"
+                    onClick={() => confirmDeleteGuarda(rowData)} />
             </div>
         );
     }
@@ -178,7 +267,11 @@ const GuardasSeguridad = () => {
         return (
             <React.Fragment>
                 <div className="my-2">
-                    <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedGuardas || !selectedGuardas.length} />
+                    <Button label="Eliminar"
+                        icon="pi pi-trash"
+                        className="p-button-danger"
+                        onClick={confirmDeleteSelected}
+                        disabled={!selectedGuardas || !selectedGuardas.length} />
                 </div>
             </React.Fragment>
         )
@@ -187,7 +280,9 @@ const GuardasSeguridad = () => {
     const rightToolbarTemplate = () => {
         return (
             <React.Fragment>
-                <Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
+                <Button label="Exportar"
+                    icon="pi pi-upload"
+                    className="p-button-help" />
             </React.Fragment>
         )
     }
@@ -216,6 +311,23 @@ const GuardasSeguridad = () => {
         </>
     );
 
+    const changeStatusGuardDialogFooter = (
+        <>
+            <Button
+                label="No"
+                icon="pi pi-times"
+                className="p-button-text"
+                onClick={hideChangeStatusGuardDialog}
+            />
+            <Button
+                label="Yes"
+                icon="pi pi-check"
+                className="p-button-text"
+                onClick={cambiarStatusUser}
+            />
+        </>
+    );
+
     const headerName = (
         <>
             <p>{' '}
@@ -295,6 +407,26 @@ const GuardasSeguridad = () => {
                             {selectedGuardas && <span>¿Está seguro eliminar los adminsitradores del sistema seleccionados?</span>}
                         </div>
                     </Dialog>
+                    <Dialog
+                        visible={changeStatusGuardDialog}
+                        style={{ width: '450px' }}
+                        header="Confirmar"
+                        modal
+                        footer={changeStatusGuardDialogFooter}
+                        onHide={hideChangeStatusGuardDialog}
+                    >
+                        <div className="flex align-items-center justify-content-center">
+                            <i
+                                className="pi pi-exclamation-triangle mr-3"
+                                style={{ fontSize: '2rem' }}
+                            />
+                            {guarda && (
+                                <span>
+                                    ¿Estás seguro que desea cambiar estado a <b>{guarda.name}</b>?
+                                </span>
+                            )}
+                        </div>
+                    </Dialog>
                 </div>
             </div>
             <div className="col-12">