Merge branch 'dev' into US-listarInquilinos

api-gateway/src/app.controller.ts

@@ -197,6 +197,17 @@ export class AppController {
     return this.appService.findCommonArea(paramCommonAreaId);
   }
 
+  @Get('commonArea/findByCommunity/:community_id')
+  findByCommunity(@Param('community_id') paramCommunityId: string) {
+    return this.appService.findByCommunity(paramCommunityId);
+  }
+
+
+  @Delete('commonArea/deleteCommonArea/:id')
+  deleteCommonArea(@Param('id') id: string) {
+    return this.appService.deleteCommonArea(id);
+  }
+
   // #==== API GUEST
   //#API userService - create user
   @Post('guest/createGuest')

api-gateway/src/app.service.ts

@@ -266,6 +266,26 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+
+   //GET parameter from API
+   findByCommunity(paramCommunityId: string) {
+    const pattern = { cmd: 'findByCommunity' };
+    const payload = { community_id: paramCommunityId };
+    return this.clientCommonAreaApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+
+    //DELETE parameter from API
+    deleteCommonArea(paramCommonAreaId: string) {
+      const pattern = { cmd: 'removeCommonArea' };
+      const payload = { id: paramCommonAreaId };
+      return this.clientCommonAreaApp
+        .send<string>(pattern, payload)
+        .pipe(map((message: string) => ({ message })));
+    }
+
   // ====================== GUESTS ===============================
 
   //POST parameter from API

servicio-areas-comunes/src/common_areas/common_areas.controller.ts

@@ -30,7 +30,13 @@ export class CommonAreasController {
 
   @MessagePattern({ cmd: 'removeCommonArea' })
   remove(@Payload() id: string) {
-    let _id = id['_id'];
+    let _id = id['id'];
     return this.commonAreasService.remove(_id);
   }
+
+  @MessagePattern({ cmd: 'findByCommunity' })
+  findByCommunity(@Payload() id: string) {
+    let _community_id = id['community_id'];
+    return this.commonAreasService.findByCommunity(_community_id);
+  }
 }

servicio-areas-comunes/src/common_areas/common_areas.service.ts

@@ -32,6 +32,13 @@ export class CommonAreasService {
   }
 
   async remove(id: string) {
-    return this.commonAreaModel.findByIdAndRemove({ _id: id }).exec();
+    return this.commonAreaModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
+  };
+
+  async findByCommunity(community_id: string): Promise<CommonArea[]> {
+    return this.commonAreaModel.find({ community_id: community_id }).exec();
   }
+
 }

servicio-areas-comunes/src/schemas/common_area.schema.ts

@@ -19,6 +19,9 @@ export class CommonArea {
   @Prop()
   bookable: number; //saber si es necesario reservarlo o no
 
+  @Prop()
+  status: string;
+
   @Prop()
   community_id: string;
 }

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

@@ -56,7 +56,9 @@ export class CommunitiesService {
   }
 
   async remove(id: string) {
-    return this.communityModel.findByIdAndRemove({ _id: id }).exec();
+    return this.communityModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
   }
 
   async findCommunityAdmin(community: string, user_type: string) {

servicio-foro-comunicaciones/src/post-comments/post-comments.service.ts

@@ -33,6 +33,8 @@ export class PostCommentsService {
   }
 
   async remove(id: string) {
-    return this.commentModel.findByIdAndRemove({ _id: id }).exec();
+    return this.commentModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
   }
 }

servicio-invitados/src/guests/guests.service.ts

@@ -32,6 +32,8 @@ export class GuestsService {
   }
 
   async remove(id: string) {
-    return this.guestModel.findByIdAndRemove({ _id: id }).exec();
+    return this.guestModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
   }
 }

servicio-reportes/src/reports/reports.service.ts

@@ -31,6 +31,9 @@ export class ReportsService {
   }
 
   async remove(id: string) {
-    return this.reportModel.findByIdAndRemove({ _id: id }).exec();
+    return this.reportModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
+    
   }
 }

servicio-reservaciones/src/reservations/reservations.service.ts

@@ -41,6 +41,8 @@ export class ReservationsService {
   }
 
   async remove(id: string) {
-    return this.reservationModel.findByIdAndRemove({ _id: id }).exec();
+    return this.reservationModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
   }
 }

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

@@ -78,8 +78,14 @@ export class UsersService {
     });
   }
 
-  async remove(id: string) {
+ /* async remove(id: string) {
     return this.userModel.findByIdAndRemove({ _id: id }).exec();
+  }*/
+
+  async remove(id: string) {
+    return this.userModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
   }
 
   //inicio de sesion
@@ -174,7 +180,9 @@ export class UsersService {
   }
 
   async deleteAdminSystem(id: string) {
-    return this.userModel.deleteOne({ _id: id }).exec();
+    return this.userModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
   }
 
   async validateEmail(email: string) {

web-ui/web-react/public/assets/themes/khaki/theme.css

@@ -89,8 +89,8 @@
 }
 
 .p-icon-input-khaki {
-    border-top-right-radius: 0!important;
+    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0!important;
+    border-bottom-right-radius: 0 !important;
     border-color: #C08135;
 }
 
@@ -7118,3 +7118,33 @@
 .p-button.p-button-danger:enabled:focus {
     box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
 }
+
+
+.status {
+    border-radius: var(--border-radius);
+    padding: 0.25em 0.5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: 0.3px;
+}
+
+.status.status-1 {
+    background: #c8e6c9!important;
+    color: #256029!important;
+}
+
+.status.status-0 {
+    background: #ffcdd2;
+    color: #c63737;
+}
+
+.status.status-2 {
+    background: #feedaf;
+    color: #8a5340;
+}
+
+.status.status--1 {
+    background: #565656;
+    color: #f7f9f7;
+}

web-ui/web-react/src/App.js

@@ -51,6 +51,7 @@ import './assets/layout/layout.scss';
 import './App.scss';
 import LogIn from './components/LogIn';
 import { PrimeIcons } from 'primereact/api';
+import AreasComunes from './components/AreasComunes';
 
 const App = () => {
   const [layoutMode, setLayoutMode] = useState('static');
@@ -187,7 +188,16 @@ const App = () => {
           icon: PrimeIcons.BUILDING,
           to: '/comunidadesViviendas',
         },
-        { label: 'Inquilinos', icon: PrimeIcons.USER, to: '/inquilinos' },
+        {
+          label: 'Inquilinos',
+          icon: PrimeIcons.USER,
+          to: '/inquilinos'
+        },
+        {
+          label: 'Áreas Comunes de Comunidad',
+          icon: PrimeIcons.BUILDING,
+          to: '/areasComunes',
+        },
         { label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn' },
       ],
     },
@@ -411,6 +421,7 @@ const App = () => {
           <Route path="/guardasSeguridad" component={GuardasSeguridad} />
           <Route path="/comunidadesViviendas" component={Communities} />
           <Route path="/inquilinos" component={Inquilinos} />
+          <Route path="/areasComunes" component={AreasComunes} />
           <Route path="/logIn" component={LogIn} />
         </div>
 

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

@@ -344,15 +344,7 @@ const AdministradoresComunidad = () => {
         </>
     )
 
-    const headerOptions = (
-        <>
-            <p>
-                {' '}
-                <FontAwesomeIcon icon={faEllipsis} size="2x" style={{ color: "#C08135" }} />{' '}
   
-            </p>
-        </>
-    )
 
     const onInputChange = (e, name) => {
         const val = (e.target && e.target.value) || '';
@@ -389,8 +381,8 @@ const AdministradoresComunidad = () => {
                         </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 field="community_name" header={headerCommuntiy} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+                        <Column field="community_name" sortable header={headerCommuntiy} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column header={headerOptions} style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsAdminCommunity}></Column>
+                        <Column  style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsAdminCommunity}></Column>
                     </DataTable>
                     <Dialog visible={deleteAdminCommunityDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminCommunityDialogFooter} onHide={hideDeleteAdminCommunityDialog}>
                         <div className="flex align-items-center justify-content-center">

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

@@ -313,15 +313,6 @@ const AdministradoresSistema = () => {
     </>
   );
 
-  const headerOptions = (
-    <>
-      <p>
-        Opciones{' '}
-        <FontAwesomeIcon icon={faEllipsis} style={{ color: '#D7A86E' }} />
-      </p>
-    </>
-  );
-
   return (
     <div className="grid">
       <div className="col-12">
@@ -402,7 +393,6 @@ const AdministradoresSistema = () => {
             ></Column>
             <Column
               field="phone"
-              sortable
               header={headerPhone}
               style={{
                 flexGrow: 1,
@@ -412,7 +402,7 @@ const AdministradoresSistema = () => {
               }}
             ></Column>
             <Column
-              header={headerOptions}
+              
               style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }}
               body={actionsAdmin}
             ></Column>

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

@@ -0,0 +1,350 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { Dropdown } from 'primereact/dropdown';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { Dialog } from 'primereact/dialog';
+import { Toolbar } from 'primereact/toolbar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import { faAt } from '@fortawesome/free-solid-svg-icons';
+import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
+import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
+import { useCookies } from "react-cookie";
+
+
+const AreasComunes = () => {
+
+    let emptyCommonArea = {
+        _id: null,
+        dni: '',
+        name: '',
+        hourMin: '',
+        hourMax: '',
+        community_id: '',
+        bookable: '1',
+        bookable_text: '',
+        status: '1',
+        status_text: '',
+    };
+
+    const [commonAreaList, setCommonAreaList] = useState([]);
+    const [commonArea, setCommonArea] = useState(emptyCommonArea);
+    const [selectedCommonAreas, setSelectedCommonAreas] = useState(null);
+    const [globalFilter, setGlobalFilter] = useState(null);
+    const [deleteCommonAreaDialog, setDeleteCommonAreaDialog] = useState(false);
+    const [deleteCommonAreasDialog, setDeleteCommonAreasDialog] = useState(false);
+    const [submitted, setSubmitted] = useState(false);
+    const toast = useRef(null);
+    const dt = useRef(null);
+
+    const [cookies, setCookie] = useCookies();
+
+    async function getCommonAreas() {
+        await fetch(`http://localhost:4000/commonArea/findByCommunity/${cookies.community_id}`, { method: 'GET' })
+            .then((response) => response.json())
+            .then(data => data.message)
+            .then(data => {
+                if (data) {
+                    data.map(item => {
+                        if (item.bookable == '1') {
+                            item.bookable_text = 'Necesaria';
+                        } else {
+                            item.bookable_text = 'No es necesarioa';
+                        }
+
+                        if (item.status == '1') {
+                            item.status_text = 'Activo';
+                        } else if (item.status == '0') {
+                            item.status_text = 'Inactivo';
+                        } else {
+                            item.status_text = 'Eliminado';
+                        }
+                    })
+                }
+
+                data = data.filter(
+                    (val) => val.status != -1,
+                )
+                setCommonAreaList(data);
+            });
+    }
+
+    useEffect(() => {
+        getCommonAreas();
+    }, []);
+
+
+    const deleteCommonArea = () => {
+        fetch('http://localhost:4000/commonArea/deleteCommonArea/' + commonArea._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 _common_areas = commonAreaList.filter(
+                        (val) => val._id !== commonArea._id,
+                    );
+                    _common_areas = _common_areas.filter(
+                        (val) => val.status != -1,
+                    )
+                    setCommonAreaList(_common_areas);
+                    setDeleteCommonAreaDialog(false);
+                    setCommonArea(emptyCommonArea);
+                    toast.current.show({
+                        severity: 'success',
+                        summary: 'Área Común Eliminada',
+                        life: 3000,
+                    });
+                }
+            )
+            .catch(
+                err => {
+                    console.log('Ocurrió un error con el fetch', err)
+                    toast.current.show({ severity: 'danger', summary: 'Error', detail: 'Área Común no se pudo eliminar', life: 3000 });
+                }
+            );
+
+    };
+
+    const deleteSelectedCommonAreas = () => {
+        let _common_areas = commonAreaList.filter(
+            (val) => !selectedCommonAreas.includes(val),
+        );
+        selectedCommonAreas.map((item) => {
+            fetch('http://localhost:4000/commonArea/deleteCommonArea/' + item._id, {
+                cache: 'no-cache',
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+        });
+        _common_areas = _common_areas.filter(
+            (val) => val.status != -1,
+        )
+        setCommonAreaList(_common_areas);
+        setDeleteCommonAreasDialog(false);
+        setSelectedCommonAreas(null);
+        toast.current.show({
+            severity: 'success',
+            summary: 'Éxito',
+            detail: 'Áreas Comúnes Eliminadas',
+            life: 3000,
+        });
+    };
+
+    const hideDeleteCommonAreaDialog = () => {
+        setDeleteCommonAreaDialog(false);
+    }
+
+    const hideDeleteCommonAreasDialog = () => {
+        setDeleteCommonAreasDialog(false);
+    }
+
+    const confirmDeleteCommonArea = (commonArea) => {
+        setCommonArea(commonArea);
+        setDeleteCommonAreaDialog(true);
+    }
+
+    const confirmDeleteSelected = () => {
+        setDeleteCommonAreasDialog(true);
+    };
+
+
+
+    const actionsCommonArea = (rowData) => {
+        return (
+            <div className="actions">
+                <Button
+                    icon="pi pi-trash"
+                    className="p-button-rounded p-button-danger mt-2"
+                    onClick={() => confirmDeleteCommonArea(rowData)}
+                />
+            </div>
+        );
+    };
+
+
+    const deleteCommonAreaDialogFooter = (
+        <>
+            <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteCommonAreaDialog} />
+            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteCommonArea} />
+        </>
+    );
+
+    const deleteCommonAreasDialogFooter = (
+        <>
+            <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteCommonAreasDialog} />
+            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedCommonAreas} />
+        </>
+    );
+
+
+    const leftToolbarTemplate = () => {
+        return (
+            <React.Fragment>
+                <div className="my-2">
+                    <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedCommonAreas || !selectedCommonAreas.length} />
+                </div>
+            </React.Fragment>
+        )
+    }
+
+    const rightToolbarTemplate = () => {
+        return (
+            <React.Fragment>
+                <Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
+            </React.Fragment>
+        )
+    }
+
+
+    const header = (
+        <React.Fragment>
+
+            <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+                <h5 className="m-0">Áreas Comunes</h5>
+                <span className="block mt-2 md:mt-0 p-input-icon-left">
+                    <i className="pi pi-search" />
+                    <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Buscar..." />
+                </span>
+            </div>
+        </React.Fragment>
+    );
+
+    const headerName = (
+        <>
+            <p>{' '}
+                <FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '}
+                Nombre
+            </p>
+        </>
+    )
+
+    const headerHourMin = (
+        <>
+            <p>
+                {' '}
+                <FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '}
+                Hora de apertura
+            </p>
+        </>
+    )
+
+    const headerHourMax = (
+        <>
+            <p> {' '}
+                <FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />{' '}
+                Hora de cierre
+            </p>
+        </>
+    )
+
+    const headerBookable = (
+        <>
+            <p> {' '}
+                <FontAwesomeIcon icon={faClipboardCheck} style={{ color: "#D7A86E" }} />{' '}
+                Reservación
+            </p>
+        </>
+    )
+
+    const headerStatus = (
+        <>
+            <p> {' '}
+                <FontAwesomeIcon icon={faCircleQuestion} style={{ color: "#C08135" }} />{' '}
+                Estado
+            </p>
+        </>
+    )
+
+
+    const bookableBodyTemplate = (rowData) => {
+        let class_color = '';
+        if(rowData.bookable == '1') {
+            class_color = '0';
+        } else {
+            class_color = '1';
+
+        }
+        return (
+            <>
+                <span
+                    className={`status status-${class_color}`}
+                >
+                    {rowData.bookable_text}
+                </span>
+            </>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return (
+            <>
+                <span
+                    className={`status status-${rowData.status}`}
+                >
+                    {rowData.status_text}
+                </span>
+            </>
+        );
+    };
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                <Toast ref={toast} />
+                <div className="card">
+                    <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+                    <DataTable ref={dt} value={commonAreaList} dataKey="_id" paginator rows={5} selection={selectedCommonAreas} onSelectionChange={(e) => setSelectedCommonAreas(e.value)}
+                        scrollable scrollHeight="400px" scrollDirection="both" header={header}
+                        rowsPerPageOptions={[5, 10, 25]} className="datatable-responsive mt-3"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} áreas comunes"
+                        globalFilter={globalFilter} emptyMessage="No hay áreas comunes registrados.">
+                        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+                        <Column field="name" sortable header={headerName} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+                        <Column field="hourMin" header={headerHourMin} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }} alignFrozen="left"></Column>
+                        <Column field="hourMax" header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>                    </Column>
+                        <Column field="bookable" sortable header={headerBookable} body={bookableBodyTemplate} style={{ flexGrow: 1, flexBasis: '200px', minWidth: '200px', 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' }} body={actionsCommonArea}></Column>
+                    </DataTable>
+                    <Dialog visible={deleteCommonAreaDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteCommonAreaDialogFooter} onHide={hideDeleteCommonAreaDialog}>
+                        <div className="flex align-items-center justify-content-center">
+                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                            {commonArea && <span>¿Estás seguro que desea eliminar a <b>{commonArea.name}</b>?</span>}
+                        </div>
+                    </Dialog>
+                    <Dialog visible={deleteCommonAreasDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteCommonAreasDialogFooter} onHide={hideDeleteCommonAreasDialog}>
+                        <div className="flex align-items-center justify-content-center">
+                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                            {selectedCommonAreas && <span>¿Está seguro eliminar las áreas comunes seleccionadas?</span>}
+                        </div>
+                    </Dialog>
+                </div>
+            </div>
+        </div>
+    );
+
+};
+
+
+export default React.memo(AreasComunes);

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

@@ -432,7 +432,7 @@ const Communities = () => {
           icon={faMapLocationDot}
           style={{ color: '#D7A86E' }}
         />{' '}
-        Pronvincia
+        Provincia
       </p>
     </>
   );
@@ -493,15 +493,6 @@ const Communities = () => {
     </>
   );
 
-  const headerOptions = (
-    <>
-      <p>
-        Opciones{' '}
-        <FontAwesomeIcon icon={faEllipsis} style={{ color: '#D7A86E' }} />
-      </p>
-    </>
-  );
-
   return (
     <div className="grid">
       <div className="col-12">
@@ -537,21 +528,25 @@ const Communities = () => {
             ></Column>
             <Column
               field="name"
+              sortable
               header={headerName}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
             <Column
               field="province"
+              sortable
               header={headerProvince}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
             <Column
               field="canton"
+              sortable
               header={headerCanton}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
             <Column
               field="district"
+              sortable
               header={headerDistrict}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
@@ -562,15 +557,16 @@ const Communities = () => {
             ></Column>
             <Column
               field="num_houses"
+              sortable
               header={headerNumberHouses}
               style={{ flexGrow: 1, flexBasis: '180px' }}
             ></Column>
             <Column
               field="name_admin"
-              header={headerAdministrator}
+              sortable
               style={{ flexGrow: 1, flexBasis: '180px' }}
             ></Column>
-            <Column header={headerOptions} body={actionsCommunity}></Column>
+            <Column  body={actionsCommunity}></Column>
           </DataTable>
           <Dialog
             visible={deleteCommunityDialog}

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

@@ -14,8 +14,8 @@ import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
 import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
 
 const GuardasSeguridad = () => {
-    const [listaGuardas,setListaGuardas]=useState([]);
+    const [listaGuardas, setListaGuardas] = useState([]);
-    const [urlFetch,setUrlFetch]=useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134');
+    const [urlFetch, setUrlFetch] = useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134');
     const [guarda, setGuarda] = useState(emptyGuarda);
     const [selectedGuardas, setSelectedGuardas] = useState(null);
     const [globalFilter, setGlobalFilter] = useState(null);
@@ -37,14 +37,14 @@ const GuardasSeguridad = () => {
 
 
 
-    async function listaGuardasF(){
+    async function listaGuardasF() {
-    let nombres=await fetch(urlFetch, {method:'GET'});
+        let nombres = await fetch(urlFetch, { method: 'GET' });
-    let listaGuardasRes= await nombres.json();
+        let listaGuardasRes = await nombres.json();
         setListaGuardas(listaGuardasRes.message);
     }
-    useEffect(()=>{
+    useEffect(() => {
         listaGuardasF();
-    },[])
+    }, [])
 
     function registrarGuarda() {
         var data = {
@@ -56,9 +56,9 @@ const GuardasSeguridad = () => {
             password: document.getElementById('correo_electronico').value,
             user_type: "4", //4 es guarda
             status: "1",
-            community_id:"62be68215692582bbfd77134"
+            community_id: "62be68215692582bbfd77134"
         };
-        var data2={
+        var data2 = {
             dni: "11979037",
             name: "Jorge",
             last_name: "Soto",
@@ -67,13 +67,13 @@ const GuardasSeguridad = () => {
             password: "1203",
             user_type: "2",
             status: "4",
-            community_id:"62be68215692582bbfd77134"
+            community_id: "62be68215692582bbfd77134"
         }
-console.log('ssss');
+        console.log('ssss');
         fetch('http://localhost:4000/user/createGuard', {
             cache: 'no-cache',
             method: 'POST',
-            mode:'cors',
+            mode: 'cors',
             body: JSON.stringify(data2),
             headers: {
                 'Content-Type': 'application/json'
@@ -218,39 +218,49 @@ console.log('ssss');
 
     const headerName = (
         <>
-            <p>Nombre</p>
+            <p>{' '}
+                <FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '}
+                Nombre
+            </p>
         </>
     )
 
     const headerLastName = (
         <>
-            <p>Apellidos</p>
+            <p>
+                {' '}
+                <FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '}
+                Apellido(s)
+            </p>
         </>
     )
 
     const headerDNI = (
-        <>
+        <p> {' '}
-            <p>Identificación</p>
+            <FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />{' '}
-        </>
+            Identificación
+        </p>
     )
 
     const headerEmail = (
         <>
-            <p>Correo Electrónico</p>
+            <p> {' '}
+                <FontAwesomeIcon icon={faAt} style={{ color: "#D7A86E" }} />{' '}
+                Correo Electrónico
+            </p>
         </>
     )
 
     const headerPhone = (
         <>
-            <p>Teléfono</p>
+            <p>
+                {' '}
+                <FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#C08135' }} />{' '}
+                Teléfono
+            </p>
         </>
     )
 
-    const headerOptions = (
-        <>
-            <p>Opciones</p>
-        </>
-    )
 
     return (
         <div className="grid">
@@ -270,8 +280,8 @@ console.log('ssss');
                         <Column field="dni" sortable header={headerDNI} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
                         </Column>
                         <Column field="email" sortable header={headerEmail} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column field="phone" sortable header={headerPhone} 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 header={headerOptions} style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsAdmin}></Column>
+                        <Column style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} 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">