Merge branch 'US-48-Activar-Desactivarguardadeseguridad' into US-42-EliminarInquilino

api-gateway/src/app.controller.ts

@@ -128,6 +128,14 @@ export class AppController {
     return this.appService.deleteAdminSystem(id);
   }
 
+  @Post('user/changeStatus')
+  changeStatusUser(
+    @Body('id') pId: string,
+    @Body('status') pStatus: string,
+  ) {
+    return this.appService.changeStatusUser(pId, pStatus);
+  }
+
   // #==== API Communities
   @Post('community/createCommunity')
   createCommunity(
@@ -174,11 +182,11 @@ export class AppController {
     return this.appService.findCommunityAdmin(community_id);
   }
   @Post('community/changeStatus')
-  changeStatus(
+  changeStatusCommunity(
     @Body('id') pId: string,
     @Body('status') pStatus: string,
   ) {
-    return this.appService.changeStatus(pId, pStatus);
+    return this.appService.changeStatusCommunity(pId, pStatus);
   }
   // #==== API Common Areas
   @Post('commonArea/createCommonArea')

api-gateway/src/app.service.ts

@@ -18,7 +18,7 @@ export class AppService {
     @Inject('SERVICIO_REPORTES') private readonly clientReportApp: ClientProxy,
     @Inject('SERVICIO_NOTIFICACIONES')
     private readonly clientNotificationtApp: ClientProxy,
-  ) {}
+  ) { }
 
   // ====================== USERS ===============================
 
@@ -179,13 +179,6 @@ export class AppService {
       .send<string>(pattern, payload)
       .pipe(map((message: string) => ({ message })));
   }
-  changeStatus(pId: string, pStatus: string) {
-    const pattern = { cmd: 'changeStatus' };
-    const payload = { id: pId, status: pStatus };
-    return this.clientCommunityApp
-      .send<string>(pattern, payload)
-      .pipe(map((message: string) => ({ message })));
-  }
 
 
   //GET parameter from API
@@ -197,8 +190,23 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+  changeStatusUser(pId: string, pStatus: string) {
+    const pattern = { cmd: 'changeStatus' };
+    const payload = { id: pId, status: pStatus };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
 
   // ====================== COMMUNITIES ===============================
+  changeStatusCommunity(pId: string, pStatus: string) {
+    const pattern = { cmd: 'changeStatus' };
+    const payload = { id: pId, status: pStatus };
+    return this.clientCommunityApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
 
   //POST parameter from API
   createCommunity(name: string, province: string, canton: string, district: string

servicio-comunidad-viviendas/src/communities/communities.controller.ts

@@ -51,8 +51,6 @@ export class CommunitiesController {
    changeStatus(@Payload() body: string) {
      let pid = body['id'];
      let pstatus = body['status'];
-     console.log(pid);
-     console.log(pstatus);
      return this.communitiesService.changeStatus(pid,pstatus);
    }
 }

servicio-usuarios/src/users/users.controller.ts

@@ -6,7 +6,7 @@ import { MongoExceptionFilter } from 'src/MongoExceptionFilter';
 
 @Controller()
 export class UsersController {
-  constructor(private readonly userService: UsersService) {}
+  constructor(private readonly userService: UsersService) { }
 
   @MessagePattern({ cmd: 'createUser' })
   create(@Payload() user: UserDocument) {
@@ -118,5 +118,10 @@ export class UsersController {
   }
 
 
-
+  @MessagePattern({ cmd: 'changeStatus' })
+  changeStatus(@Payload() body: string) {
+    let pid = body['id'];
+    let pstatus = body['status'];
+    return this.userService.changeStatus(pid, pstatus);
+  }
 }

servicio-usuarios/src/users/users.service.ts

@@ -223,5 +223,10 @@ export class UsersService {
     return num_house;
   }
 
+  async changeStatus(id: string, status: string) {
+    return this.userModel.findOneAndUpdate({ _id: id }, {status: status}, {
+      new: true,
+    });  
+  }
 }
 

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

@@ -11,7 +11,7 @@ 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';
 
 const AdministradoresSistema = () => {
   const [administrators, setAdministrators] = useState([]);
@@ -27,6 +27,10 @@ const AdministradoresSistema = () => {
   const toast = useRef(null);
   const dt = useRef(null);
 
+  const [changeStatusAdminSystemDialog, setChangeStatusAdminSystemDialog] = useState(false);
+  const [changeStatusAdminsSystemDialog, setChangeStatusAdminsSystemDialog] =
+    useState(false);
+
   let emptySysAdmin = {
     _id: null,
     dni: '',
@@ -37,14 +41,24 @@ const AdministradoresSistema = () => {
     password: '',
     user_type: '1',
     status: '1',
+    status_text: '',
   };
 
 
   async function fetchP() {
     let nombres = await fetch(urlFetch, { method: 'GET' });
     let adminRes = await nombres.json();
-    setAdministrators(adminRes.message);
+    let data = await adminRes.message.filter(
-    console.log(administrators);
+      (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';
+      } 
+    })
+    setAdministrators(await data);
   }
   useEffect(() => {
     fetchP();
@@ -63,7 +77,6 @@ const AdministradoresSistema = () => {
       status: "1"
     };
     setSysAdmin(data)
-    // console.log(data);
 
     fetch('http://localhost:4000/user/createAdminSystem/', {
       cache: 'no-cache',
@@ -94,6 +107,51 @@ const AdministradoresSistema = () => {
       );
   }
 
+  const cambiarStatusUser = () => {
+    if (sysadmin.status == '1') {
+      sysadmin.status = '0';
+      sysadmin.status_text = 'Inactivo';
+
+    } else if (sysadmin.status == '0') {
+      sysadmin.status = '1';
+      sysadmin.status_text = 'Activo';
+    }
+    var data = {
+      id: sysadmin._id,
+      status: sysadmin.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) {
+          setChangeStatusAdminSystemDialog(false);
+          toast.current.show({
+            severity: 'success',
+            summary: 'Éxito',
+            detail: 'Administrador del Sistema Actualizado',
+            life: 3000,
+          });
+        }
+      )
+      .catch(
+        err => console.log('Ocurrió un error con el fetch', err)
+      );
+  }
+
   const confirmDeleteAdminSystem = (sysAdmin) => {
     setSysAdmin(sysAdmin);
     setDeleteAdminSystemDialog(true);
@@ -111,6 +169,14 @@ const AdministradoresSistema = () => {
     setDeleteAdminsSystemDialog(false);
   };
 
+  const hideChangeStatusAdminDialog = () => {
+    setChangeStatusAdminSystemDialog(false);
+  };
+
+  const confirmChangeStatusAdminSystem = (sysAdmin) => {
+    setSysAdmin(sysAdmin);
+    setChangeStatusAdminSystemDialog(true);
+  };
 
   const deleteSysAdmin = () => {
     fetch('http://localhost:4000/user/deleteAdminSystem/' + sysadmin._id, {
@@ -127,8 +193,9 @@ const AdministradoresSistema = () => {
       })
       .then(function (response) {
         let _sysadmin = administrators.filter(
-          (val) => val._id !== sysadmin._id,
+          (val) => (val._id !== sysadmin._id || val.status != -1),
         );
+
         setAdministrators(_sysadmin);
         setDeleteAdminSystemDialog(false);
         setSysAdmin(emptySysAdmin);
@@ -152,7 +219,7 @@ const AdministradoresSistema = () => {
 
   const deleteSelectedAdminsSystem = () => {
     let _administrators = administrators.filter(
-      (val) => !selectedAdministrators.includes(val),
+      (val) => (!selectedAdministrators.includes(val)),
     );
     selectedAdministrators.map((item) => {
       fetch('http://localhost:4000/user/deleteAdminSystem/' + item._id, {
@@ -163,6 +230,9 @@ const AdministradoresSistema = () => {
         },
       });
     });
+    _administrators = _administrators.filter(
+      (val) => val.status != -1,
+    )
     setAdministrators(_administrators);
     setDeleteAdminsSystemDialog(false);
     setSelectedAdministrators(null);
@@ -174,13 +244,33 @@ const AdministradoresSistema = () => {
     });
   };
 
+
+
   const actionsAdmin = (rowData) => {
+    let icono = '';
+    let text = '';
+    if (rowData.status == '0') {
+      icono = "pi pi-eye";
+      text = "Activar Administrador"
+    } else if (rowData.status == '1') {
+      icono = "pi pi-eye-slash";
+      text = "Inactivar Administrador"
+
+    }
+
     return (
       <div className="actions">
+        <Button
+          icon={`${icono}`}
+          className="p-button-rounded p-button-warning mt-2 mx-2"
+          onClick={() => confirmChangeStatusAdminSystem(rowData)}
+          title={`${text}`}
+        />
         <Button
           icon="pi pi-trash"
-          className="p-button-rounded p-button-danger mt-2"
+          className="p-button-rounded p-button-danger mt-2 mx-2"
           onClick={() => confirmDeleteAdminSystem(rowData)}
+          title="Eliminar Administrador"
         />
       </div>
     );
@@ -264,6 +354,23 @@ const AdministradoresSistema = () => {
     </>
   );
 
+  const changeStatusAdminSystemDialogFooter = (
+    <>
+      <Button
+        label="No"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideChangeStatusAdminDialog}
+      />
+      <Button
+        label="Yes"
+        icon="pi pi-check"
+        className="p-button-text"
+        onClick={cambiarStatusUser}
+      />
+    </>
+  );
+
   const headerName = (
     <>
       <p>
@@ -313,6 +420,27 @@ const AdministradoresSistema = () => {
     </>
   );
   
+  const headerStatus = (
+    <>
+      <p> {' '}
+        <FontAwesomeIcon icon={faCircleQuestion} style={{ color: "#D7A86E" }} />{' '}
+        Estado
+      </p>
+    </>
+  )
+
+  const statusBodyTemplate = (rowData) => {
+    return (
+      <>
+        <span
+          className={`status status-${rowData.status}`}
+        >
+          {rowData.status_text}
+        </span>
+      </>
+    );
+  };
+
   return (
     <div className="grid">
       <div className="col-12">
@@ -401,9 +529,16 @@ const AdministradoresSistema = () => {
                 wordBreak: 'break-word',
               }}
             ></Column>
+            <Column
+              field="status"
+              sortable
+              header={headerStatus}
+              body={statusBodyTemplate}
+              style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
+            </Column>
             <Column
 
-              style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }}
+              style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }}
               body={actionsAdmin}
             ></Column>
           </DataTable>
@@ -448,6 +583,26 @@ const AdministradoresSistema = () => {
               )}
             </div>
           </Dialog>
+          <Dialog
+            visible={changeStatusAdminSystemDialog}
+            style={{ width: '450px' }}
+            header="Confirmar"
+            modal
+            footer={changeStatusAdminSystemDialogFooter}
+            onHide={hideChangeStatusAdminDialog}
+          >
+            <div className="flex align-items-center justify-content-center">
+              <i
+                className="pi pi-exclamation-triangle mr-3"
+                style={{ fontSize: '2rem' }}
+              />
+              {sysadmin && (
+                <span>
+                  ¿Estás seguro que desea cambiar estado a <b>{sysadmin.name}</b>?
+                </span>
+              )}
+            </div>
+          </Dialog>
         </div>
       </div>
       <div className="col-12">
@@ -459,12 +614,12 @@ const AdministradoresSistema = () => {
               <InputText id="nombre" type="text" />
             </div>
             <div className="field col-12 md:col-6">
-              <label htmlFor="apellidos">Apellidos</label>
+              <label htmlFor="apellidos">Apellido(s)</label>
               <InputText id="apellidos" type="text" />
             </div>
             <div className="field col-12 md:col-6">
               <label htmlFor="correo_electronico">Correo electrónico</label>
-              <InputText id="correo_electronico" type="text" />
+              <InputText id="correo_electronico" type="email" />
             </div>
             <div className="field col-12 md:col-6">
               <label htmlFor="identificacion">Identificación</label>

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

@@ -12,8 +12,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons';
 import { faMapLocationDot } from '@fortawesome/free-solid-svg-icons';
 import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
 
 const Communities = () => {
   let emptyCommunity = {
@@ -25,6 +25,7 @@ const Communities = () => {
     phone: '',
     num_houses: 0,
     status: '1',
+    status_text: '',
     date_entry: new Date(),
     houses: [],
   };
@@ -161,7 +162,17 @@ const Communities = () => {
     let pList = await getProvinces();
     let cList = await getCantons();
     let dList = await getDistricts();
-    await resJson.message.map((item) => {
+    let data = await resJson.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';
+      } else {
+        item.status_text = 'Eliminado';
+      }
       item.province = pList.find((p) => p.code === item.province).name;
       item.canton = cList.find((p) => p.code === item.canton).name;
       item.district = dList.find((p) => p.code === item.district).name;
@@ -169,7 +180,7 @@ const Communities = () => {
         item.name_admin = 'Sin Administrador';
       }
     });
-    setCommunitiesList(await resJson.message);
+    setCommunitiesList(await data);
   }
 
   useEffect(() => {
@@ -181,6 +192,9 @@ const Communities = () => {
       .then((response) => response.json())
       .then(data => data.message)
       .then(data => {
+        data = data.filter(
+          (val) => val.status != -1,
+        )
         setTenants(data)
       });
   }
@@ -265,10 +279,9 @@ const Communities = () => {
     if (tenant_id == '') {
       name = 'Sin inquilino';
     } else {
-      let tenant = tenants.find(t => t._id == tenant_id )
+      let tenant = tenants.find(t => t._id == tenant_id)
       name = tenant['name'] + ' ' + tenant['last_name'];
     }
-    console.log(name);
     return name;
   }
 
@@ -323,52 +336,21 @@ const Communities = () => {
     setCommunity(community);
     setEditCommunityDialog(true);
   };
-  //desactivar o activar una comunidad
-  const cambiarDesactivarEstadoCommunity = () => {
-    var data = {
-      id: community._id,
-      status: "0",
-    };
-    console.log(data);
 
-    fetch('http://localhost:4000/community/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) {
-          setEditCommunityDialog(false);
-          toast.current.show({
-            severity: 'success',
-            summary: 'Éxito',
-            detail: 'Comunidad de Viviendas Actualizada',
-            life: 3000,
-          });
-        }
-      )
-      .catch(
-        err => console.log('Ocurrió un error con el fetch', err)
-      );
-  }
   //desactivar o activar una comunidad
-    const cambiarActivarEstadoCommunity = () => {
+  const cambiarEstadoCommunity = () => {
+    if (community.status == '1') {
+      community.status = '0';
+      community.status_text = 'Inactivo';
+
+    } else if (community.status == '0') {
+      community.status = '1';
+      community.status_text = 'Activo';
+    }
     var data = {
       id: community._id,
-        status: "1",
+      status: community.status,
     };
-      console.log(data);
     fetch('http://localhost:4000/community/changeStatus', {
       cache: 'no-cache',
       method: 'POST',
@@ -435,8 +417,11 @@ const Communities = () => {
                    }
                ); 
         */
-    let _community = communitiesList.filter((val) => val._id !== community._id);
+    let _communities = communitiesList.filter((val) => val._id !== community._id);
-    setCommunitiesList(_community);
+    _communities = _communities.filter(
+      (val) => val.status != -1,
+    )
+    setCommunitiesList(_communities);
     setDeleteCommunityDialog(false);
     setCommunity(emptyCommunity);
     toast.current.show({
@@ -460,6 +445,9 @@ const Communities = () => {
                  }
              })
          })*/
+    _communities = _communities.filter(
+      (val) => val.status != -1,
+    )
     setCommunitiesList(_communities);
     setDeleteCommunitiesDialog(false);
     setSelectedCommunities(null);
@@ -472,23 +460,26 @@ const Communities = () => {
   };
 
   const actionsCommunity = (rowData) => {
+
+    let icono = '';
+    if (rowData.status == '0') {
+      icono = "pi pi-eye";
+    } else if (rowData.status == '1') {
+      icono = "pi pi-eye-slash";
+    }
+
     return (
       <div className="actions">
-         <Button
-          icon="pi pi-eye"
-          className="p-button-rounded p-button-success mt-2 mx-2"
-          onClick={() => confirmEditCommunity(rowData)}
-        />
-        <Button
-          icon="pi pi-eye-slash"
-          className="p-button-rounded p-button-danger mt-2 mx-2"
-          onClick={() => confirmEditCommunity(rowData)}
-        />
         <Button
           icon="pi pi-exclamation-circle"
-          className="p-button-rounded p-button-primary mt-2 mx-2"
+          className="p-button-rounded p-button-info mt-2 mx-2"
           onClick={() => infoCommunity(rowData)}
         />
+        <Button
+          icon={`${icono}`}
+          className={`p-button-rounded p-button-warning mt-2 mx-2`}
+          onClick={() => confirmEditCommunity(rowData)}
+        />
         <Button
           icon="pi pi-trash"
           className="p-button-rounded p-button-danger mt-2 mx-2"
@@ -528,7 +519,7 @@ const Communities = () => {
 
   const header = (
     <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
-      <h5 className="m-0">Comunidade de Viviendas</h5>
+      <h5 className="m-0">Comunidades de Viviendas</h5>
       <span className="block mt-2 md:mt-0 p-input-icon-left">
         <i className="pi pi-search" />
         <InputText
@@ -585,7 +576,7 @@ const Communities = () => {
       />
     </>
   );
-  const editDesactivarCommunityDialogFooter = (
+  const editEstadoCommunityDialogFooter = (
     <>
       <Button
         label="No"
@@ -597,27 +588,12 @@ const Communities = () => {
         label="Yes"
         icon="pi pi-check"
         className="p-button-text"
-        onClick={cambiarDesactivarEstadoCommunity}
+        onClick={cambiarEstadoCommunity}
       />
     </>
   );
 
-  const editActivarCommunityDialogFooter = (
+
-    <>
-      <Button
-        label="No"
-        icon="pi pi-times"
-        className="p-button-text"
-        onClick={hideEditCommunityDialog}
-      />
-      <Button
-        label="Yes"
-        icon="pi pi-check"
-        className="p-button-text"
-        onClick={cambiarActivarEstadoCommunity}
-      />
-    </>
-  );
 
   const headerName = (
     <>
@@ -697,6 +673,15 @@ const Communities = () => {
     </>
   );
 
+  const headerStatus = (
+    <>
+      <p> {' '}
+        <FontAwesomeIcon icon={faCircleQuestion} style={{ color: "#D7A86E" }} />{' '}
+        Estado
+      </p>
+    </>
+  )
+
   //ver perfil comunidad
   const headerTenant = (
     <>
@@ -709,11 +694,21 @@ const Communities = () => {
     </>
   );
 
+  const statusBodyTemplate = (rowData) => {
+    return (
+      <>
+        <span
+          className={`status status-${rowData.status}`}
+        >
+          {rowData.status_text}
+        </span>
+      </>
+    );
+  };
 
   const tenantsBodyTemplate = (rowData) => {
     let tenants = rowData.tenants;
     let name = findNameTenant(tenants.tenant_id);
-    console.log(name);
     return (
       <>
         {name}
@@ -795,9 +790,16 @@ const Communities = () => {
               header={headerAdministrator}
               style={{ flexGrow: 1, flexBasis: '180px' }}
             ></Column>
+            <Column
+              field="status"
+              sortable
+              header={headerStatus}
+              body={statusBodyTemplate}
+              style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
+            </Column>
             <Column
               body={actionsCommunity}
-             style={{ flexGrow: 1, flexBasis: '180px' }}
+              style={{ flexGrow: 1, flexBasis: '100px' }}
             ></Column>
           </DataTable>
 
@@ -927,32 +929,13 @@ const Communities = () => {
             </div>
 
           </Dialog>
+
           <Dialog
             visible={editCommunityDialog}
             style={{ width: '450px' }}
             header="Confirmar"
             modal
-            footer={editActivarCommunityDialogFooter}
+            footer={editEstadoCommunityDialogFooter}
-            onHide={hideEditCommunityDialog}
-          >
-            <div className="flex align-items-center justify-content-center">
-              <i
-                className="pi pi-exclamation-triangle mr-3"
-                style={{ fontSize: '2rem' }}
-              />
-              {community && (
-                <span>
-                  ¿Estás seguro que desea cambiar estado a <b>{community.name}</b>?
-                </span>
-              )}
-            </div>
-          </Dialog>
-          <Dialog
-            visible={editCommunityDialog}
-            style={{ width: '450px' }}
-            header="Confirmar"
-            modal
-            footer={editDesactivarCommunityDialogFooter}
             onHide={hideEditCommunityDialog}
           >
             <div className="flex align-items-center justify-content-center">

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 mx-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>
         )
     }
@@ -205,14 +300,31 @@ const GuardasSeguridad = () => {
     const deleteAdminSystemDialogFooter = (
         <>
             <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteGuardasDialog} />
-            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteGuarda} />
+            <Button label="Sí" icon="pi pi-check" className="p-button-text" onClick={deleteGuarda} />
         </>
     );
 
     const deleteAdminsSystemDialogFooter = (
         <>
             <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteGuardasDialog} />
-            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedGuardas} />
+            <Button label="Sí" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedGuardas} />
+        </>
+    );
+
+    const changeStatusGuardDialogFooter = (
+        <>
+            <Button
+                label="No"
+                icon="pi pi-times"
+                className="p-button-text"
+                onClick={hideChangeStatusGuardDialog}
+            />
+            <Button
+                label="Sí"
+                icon="pi pi-check"
+                className="p-button-text"
+                onClick={cambiarStatusUser}
+            />
         </>
     );
 
@@ -261,6 +373,26 @@ const GuardasSeguridad = () => {
         </>
     )
 
+    const headerStatus = (
+        <>
+            <p> {' '}
+                <FontAwesomeIcon icon={faCircleQuestion} style={{ color: "#D7A86E" }} />{' '}
+                Estado
+            </p>
+        </>
+    )
+
+    const statusBodyTemplate = (rowData) => {
+        return (
+            <>
+                <span
+                    className={`status status-${rowData.status}`}
+                >
+                    {rowData.status_text}
+                </span>
+            </>
+        );
+    };
 
     return (
         <div className="grid">
@@ -281,7 +413,14 @@ const GuardasSeguridad = () => {
                         </Column>
                         <Column field="email" sortable header={headerEmail} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
                         <Column field="phone" header={headerPhone} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsAdmin}></Column>
+                        <Column
+                            field="status"
+                            sortable
+                            header={headerStatus}
+                            body={statusBodyTemplate}
+                            style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
+                        </Column>
+                        <Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsAdmin}></Column>
                     </DataTable>
                     <Dialog visible={deleteGuardaDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminSystemDialogFooter} onHide={hideDeleteGuardaDialog}>
                         <div className="flex align-items-center justify-content-center">
@@ -292,7 +431,27 @@ const GuardasSeguridad = () => {
                     <Dialog visible={deleteGuardasDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminsSystemDialogFooter} onHide={hideDeleteGuardasDialog}>
                         <div className="flex align-items-center justify-content-center">
                             <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
-                            {selectedGuardas && <span>¿Está seguro eliminar los adminsitradores del sistema seleccionados?</span>}
+                            {selectedGuardas && <span>¿Está seguro eliminar los guardas de seguridad 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>
@@ -306,12 +465,12 @@ const GuardasSeguridad = () => {
                             <InputText id="nombre" type="text" />
                         </div>
                         <div className="field col-12 md:col-6">
-                            <label htmlFor="apellidos">Apellidos</label>
+                            <label htmlFor="apellidos">Apellido(s)</label>
                             <InputText id="apellidos" type="text" />
                         </div>
                         <div className="field col-12 md:col-6">
                             <label htmlFor="correo_electronico">Correo electrónico</label>
-                            <InputText id="correo_electronico" type="text" />
+                            <InputText id="correo_electronico" type="email" />
                         </div>
                         <div className="field col-12 md:col-6">
                             <label htmlFor="identificacion">Identificación</label>
@@ -319,7 +478,7 @@ const GuardasSeguridad = () => {
                         </div>
                         <div className="field col-12">
                             <label htmlFor="telefono">Teléfono</label>
-                            <InputText id="telefono" type="number" rows="4" />
+                            <InputText id="telefono" type="tel" rows="4" />
                         </div>
                         <Button label="Registrar" onClick={registrarGuarda}></Button>
                     </div>

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

@@ -15,6 +15,7 @@ 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 { faHashtag } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
 
 import { useCookies } from "react-cookie";
 
@@ -34,7 +35,8 @@ const Inquilinos = () => {
     number_house: 'Sin número de vivienda',
     user_type: '4',
     date_entry: new Date(),
-    status: '1'
+    status: '1',
+    status_text: '',
   };
 
   const [tenants, setTenants] = useState([]);
@@ -50,6 +52,7 @@ const Inquilinos = () => {
   const dt = useRef(null);
 
   const [cookies, setCookie] = useCookies();
+  const [changeStatusTenantDialog, setChangeStatusTenantDialog] = useState(false);
 
 
   async function tenantsList() {
@@ -57,9 +60,18 @@ const Inquilinos = () => {
       .then((response) => response.json())
       .then(data => data.message)
       .then(data => {
-
+        data = data.filter(
+          (val) => val.status != -1,
+        )
         data.map((item) => {
-          if(item.number_house ==""){
+          if (item.status == '1') {
+            item.status_text = 'Activo';
+          } else if (item.status == '0') {
+            item.status_text = 'Inactivo';
+          }
+
+
+          if (item.number_house == "") {
             item.number_house = "Sin vivienda asignada";
           }
         })
@@ -72,7 +84,9 @@ const Inquilinos = () => {
     let response = await fetch('http://localhost:4000/community/allCommunities', { method: 'GET' });
     let resList = await response.json();
     let list = await resList.message;
-
+    list = await list.filter(
+      (val) => val.status != -1,
+    )
     setCommunitiesList(await list);
   }
 
@@ -189,6 +203,50 @@ const Inquilinos = () => {
     });
   };
 
+  const cambiarStatusUser = () => {
+    if (tenant.status == '1') {
+      tenant.status = '0';
+      tenant.status_text = 'Inactivo';
+
+    } else if (tenant.status == '0') {
+      tenant.status = '1';
+      tenant.status_text = 'Activo';
+    }
+    var data = {
+      id: tenant._id,
+      status: tenant.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) {
+          setChangeStatusTenantDialog(false);
+          toast.current.show({
+            severity: 'success',
+            summary: 'Éxito',
+            detail: 'Inquilino Actualizado',
+            life: 3000,
+          });
+        }
+      )
+      .catch(
+        err => console.log('Ocurrió un error con el fetch', err)
+      );
+  }
 
   const hideDeleteTenantDialog = () => {
     setDeleteTenantDialog(false);
@@ -207,11 +265,37 @@ const Inquilinos = () => {
     setDeleteTenantsDialog(true);
   };
 
+  const hideChangeStatusTenantDialog = () => {
+    setChangeStatusTenantDialog(false);
+  };
+
+  const confirmChangeStatusTenant = (tenant) => {
+    setTenant(tenant);
+    setChangeStatusTenantDialog(true);
+  };
 
   const actionsTenant = (rowData) => {
+    let icono = '';
+    let text = '';
+    if (rowData.status == '0') {
+      icono = "pi pi-eye";
+      text = "Activar Inquilino"
+    } else if (rowData.status == '1') {
+      icono = "pi pi-eye-slash";
+      text = "Inactivar Inquilino"
+
+    }
     return (
       <div className="actions">
-        <Button icon="pi pi-trash" className="p-button-rounded p-button-danger mt-2" onClick={() => confirmDeleteTenant(rowData)} />
+         <Button
+          icon={`${icono}`}
+          className="p-button-rounded p-button-warning mt-2 mx-2"
+          onClick={() => confirmChangeStatusTenant(rowData)}
+          title={`${text}`}
+        />
+        <Button icon="pi pi-trash" 
+        className="p-button-rounded p-button-danger mt-2 mx-2" 
+        onClick={() => confirmDeleteTenant(rowData)} />
       </div>
     );
   }
@@ -247,14 +331,32 @@ const Inquilinos = () => {
   const deleteTenantDialogFooter = (
     <>
       <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteTenantDialog} />
-      <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteTenant} />
+      <Button label="Sí" icon="pi pi-check" className="p-button-text" onClick={deleteTenant} />
     </>
   );
 
   const deleteTenantsDialogFooter = (
     <>
       <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteTenantsDialog} />
-      <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedTenants} />
+      <Button label="Sí" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedTenants} />
+    </>
+  );
+
+
+  const changeStatusTenantDialogFooter = (
+    <>
+      <Button
+        label="No"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideChangeStatusTenantDialog}
+      />
+      <Button
+        label="Sí"
+        icon="pi pi-check"
+        className="p-button-text"
+        onClick={cambiarStatusUser}
+      />
     </>
   );
   
@@ -296,6 +398,26 @@ const Inquilinos = () => {
     </>
   )
 
+  const headerStatus = (
+    <>
+      <p> {' '}
+        <FontAwesomeIcon icon={faCircleQuestion} style={{ color: "#D7A86E" }} />{' '}
+        Estado
+      </p>
+    </>
+  )
+
+  const statusBodyTemplate = (rowData) => {
+    return (
+      <>
+        <span
+          className={`status status-${rowData.status}`}
+        >
+          {rowData.status_text}
+        </span>
+      </>
+    );
+  };
 
   return (
     <div className="grid">
@@ -317,7 +439,14 @@ const Inquilinos = () => {
             <Column field="email" sortable header={headerEmail} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
             <Column field="phone" header={headerPhone} style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px', wordBreak: 'break-word' }}></Column>
             <Column field="number_house" sortable header={headerNumberHouse} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word', justifyContent: 'center' }}></Column>
-            <Column  style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsTenant}></Column>
+            <Column
+              field="status"
+              sortable
+              header={headerStatus}
+              body={statusBodyTemplate}
+              style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
+            </Column>
+            <Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsTenant}></Column>
           </DataTable>
           <Dialog visible={deleteTenantDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteTenantDialogFooter} onHide={hideDeleteTenantDialog}>
             <div className="flex align-items-center justify-content-center">
@@ -328,7 +457,27 @@ const Inquilinos = () => {
           <Dialog visible={deleteTenantsDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteTenantsDialogFooter} onHide={hideDeleteTenantsDialog}>
             <div className="flex align-items-center justify-content-center">
               <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
-              {selectedTentants && <span>¿Está seguro eliminar los Inquilinos seleccionados?</span>}
+              {selectedTentants && <span>¿Está seguro eliminar los inquilinos seleccionados?</span>}
+            </div>
+          </Dialog>
+          <Dialog
+            visible={changeStatusTenantDialog}
+            style={{ width: '450px' }}
+            header="Confirmar"
+            modal
+            footer={changeStatusTenantDialogFooter}
+            onHide={hideChangeStatusTenantDialog}
+          >
+            <div className="flex align-items-center justify-content-center">
+              <i
+                className="pi pi-exclamation-triangle mr-3"
+                style={{ fontSize: '2rem' }}
+              />
+              {tenant && (
+                <span>
+                  ¿Estás seguro que desea cambiar estado a <b>{tenant.name}</b>?
+                </span>
+              )}
             </div>
           </Dialog>
         </div>
@@ -342,7 +491,7 @@ const Inquilinos = () => {
               <InputText type="text" className="form-control" id="nombre" />
             </div>
             <div className="field col-12 md:col-6">
-              <label htmlFor="apellidos">Apellidos</label>
+              <label htmlFor="apellidos">Apellido(s)</label>
               <InputText type="text" className="form-control" id="apellidos" />
             </div>
             <div className="field col-12 md:col-6">