ver perfil de la comunidad

api-gateway/src/app.controller.ts

@@ -112,6 +112,11 @@ export class AppController {
     return this.appService.findUser(paramUserDNI);
   }
 
+  @Get('user/findUserById/:id')
+  findUserById(@Param('id') id: string) {
+    return this.appService.findUserById(id);
+  }
+
   @Delete('user/deleteAdminSystem/:id')
   deleteAdminSystem(@Param('id') id: string) {
     return this.appService.deleteAdminSystem(id);

api-gateway/src/app.service.ts

@@ -162,6 +162,17 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+
+   //GET parameter from API
+   findUserById(id: string) {
+    const pattern = { cmd: 'findById' };
+    const payload = { id: id };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+
   // ====================== COMMUNITIES ===============================
 
   //POST parameter from API

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

@@ -40,6 +40,12 @@ export class UsersController {
     return this.userService.findOneByDNI(dni);
   }
 
+  @MessagePattern({ cmd: 'findById' })
+  findById(@Payload() id: string) {
+    let _id = id['id'];
+    return this.userService.findOne(_id);
+  }
+
   @MessagePattern({ cmd: 'findGuardsCommunity' })
   findGuardsCommunity(@Payload() community_id: string) {
     let pcommunity_id = community_id['community_id'];

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

@@ -7118,3 +7118,12 @@
 .p-button.p-button-danger:enabled:focus {
     box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
 }
+
+
+.icon-khaki {
+    color: var(--primary-color);
+}
+
+.row {
+    display: flex;
+}

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

@@ -9,10 +9,11 @@ import classNames from 'classnames';
 import { Dialog } from 'primereact/dialog';
 import { Toolbar } from 'primereact/toolbar';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHome } from '@fortawesome/free-solid-svg-icons';
+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';
 
 const Communities = () => {
   let emptyCommunity = {
@@ -47,6 +48,13 @@ const Communities = () => {
   const toast = useRef(null);
   const dt = useRef(null);
 
+  //para el perfil de la comunidad
+
+  const [communityDialog, setCommunityDialog] = useState(false);
+  const [editcommunityDialog, setEditCommunityDialog] = useState(false);
+
+
+
   const p = provincesList.map((item) => ({
     label: item.name,
     value: item.code,
@@ -233,6 +241,22 @@ const Communities = () => {
     }
   };
 
+
+
+  async function findNameTenant(tenant_id) {
+    let name = '';
+    if (tenant_id == '') {
+      name = 'Sin inquilino';
+    } else {
+      name = await fetch('http://localhost:4000/user/findUserById/' + tenant_id, { method: "GET" });
+      let response = await response.json();
+      let res = await response.message;
+      name = res['name'] + ' ' + res['last_name'];
+    }
+
+    return name;
+  }
+
   const onInputChange = (e, name) => {
     const val = (e.target && e.target.value) || '';
     let _community = { ...community };
@@ -241,6 +265,11 @@ const Communities = () => {
     setCommunity(_community);
   };
 
+  const hideCommunityDialog = () => {
+    setSubmitted(false);
+    setCommunityDialog(false);
+  };
+
   const hideDeleteCommunityDialog = () => {
     setDeleteCommunityDialog(false);
   };
@@ -258,6 +287,17 @@ const Communities = () => {
     setDeleteCommunitiesDialog(true);
   };
 
+
+  const infoCommunity = (community) => {
+    setCommunity({ ...community });
+    setCommunityDialog(true);
+  };
+
+  const editCommunity = (community) => {
+    setCommunity({ ...community });
+    setEditCommunityDialog(true);
+  };
+
   const deleteCommunity = () => {
     /*   fetch('http://localhost:4000/community/deleteCommunity/' + community._id, {
                cache: 'no-cache',
@@ -330,6 +370,11 @@ const Communities = () => {
   const actionsCommunity = (rowData) => {
     return (
       <div className="actions">
+        <Button
+          icon="pi pi-exclamation-circle"
+          className="p-button-rounded p-button-primary mr-2"
+          onClick={() => infoCommunity(rowData)}
+        />
         <Button
           icon="pi pi-trash"
           className="p-button-rounded p-button-danger mt-2"
@@ -381,6 +426,18 @@ const Communities = () => {
     </div>
   );
 
+  const communityDialogFooter = (
+    <>
+      <Button
+        label="Cerrar"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideCommunityDialog}
+      />
+
+    </>
+  );
+
   const deleteCommunityDialogFooter = (
     <>
       <Button
@@ -477,7 +534,7 @@ const Communities = () => {
     <>
       <p>
         {' '}
-        <FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#D7A86E' }} />{' '}
+        <FontAwesomeIcon icon={faHashtag} style={{ color: '#D7A86E' }} />{' '}
         Número de viviendas
       </p>
     </>
@@ -502,6 +559,27 @@ const Communities = () => {
     </>
   );
 
+
+  //ver perfil comunidad
+  const headerTenant = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} />{' '}
+        Inquilinos
+      </p>
+    </>
+  );
+
+
+
+  const tenantsBodyTemplate = (rowData) => {
+    let tenants = rowData.tenants;
+    let name = findNameTenant(tenants.tenant_id);
+    console.log(name)
+  };
+
+
   return (
     <div className="grid">
       <div className="col-12">
@@ -572,6 +650,134 @@ const Communities = () => {
             ></Column>
             <Column header={headerOptions} body={actionsCommunity}></Column>
           </DataTable>
+
+
+          <Dialog
+            visible={communityDialog}
+            style={{ width: '650px' }}
+            header="Información de la Comunidad"
+            modal
+            className="p-fluid"
+            footer={communityDialogFooter}
+            onHide={hideCommunityDialog}>
+            <div className='container text-center'>
+              <div className='row my-4'>
+                <div className=" col-12 md:col-12">
+                  <p>Nombre</p>
+                  <div className="p-0 col-2  md:col-2" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <i className="pi pi-home icon-khaki"></i>
+                      <p>{community.name}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='row my-5'>
+                <div className=" col-6 md:col-6">
+                  <p>Administrador</p>
+                  <div className="p-0 col-6  md:col-6" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <i className="pi pi-user icon-khaki"></i>
+                      <p>{community.name_admin}</p>
+                    </div>
+
+                  </div>
+                </div>
+                <div className=" col-6 md:col-6">
+                  <p>Teléfono Administrativo</p>
+                  <div className="p-0 col-6  md:col-6" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <i className="pi pi-phone icon-khaki"></i>
+                      <p>{community.phone}</p>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+
+              <div className='row my-5'>
+                <div className=" col-4 col-md-4 md:col-4">
+                  <p>Provincia</p>
+                  <div className="p-0 col-10 md:col-10">
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <i className="pi pi-map-marker icon-khaki"></i>
+                      <p>{community.province}</p>
+                    </div>
+
+                  </div>
+                </div>
+                <div className=" col-4 md:col-4">
+                  <p>Cantón</p>
+                  <div className="p-0 col-10 md:col-10">
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <i className="pi pi-map-marker icon-khaki"></i>
+                      <p>{community.canton}</p>
+                    </div>
+
+                  </div>
+                </div>
+                <div className=" col-4 md:col-4">
+                  <p>Distrito</p>
+                  <div className="p-0 col-10 md:col-10">
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <i className="pi pi-map-marker icon-khaki"></i>
+                      <p>{community.district}</p>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+              <div className='row my-5'>
+                <div className=" col-12 md:col-12">
+                  <p>Número de Viviendas</p>
+                  <div className="p-0 col-2  md:col-2" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup justify-content-evenly">
+                      <i className="pi pi-hashtag icon-khaki"></i>
+                      <p>{community.num_houses}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='row my-5'>
+                <div className=" col-12 md:col-12">
+
+
+                  <p> <i className="pi pi-home icon-khaki"></i>  Viviendas</p>
+                  <div className="p-0 col-12  md:col-12" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup justify-content-evenly">
+                      <DataTable
+                        value={community.houses}
+                        paginator
+                        rows={5}
+                        scrollable
+                        scrollHeight="200px"
+                        scrollDirection="both"
+                        rowsPerPageOptions={[5, 10, 25]}
+                        className="datatable-responsive mt-3"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} comunidades de viviendas"
+                        globalFilter={globalFilter}
+                      >
+                        <Column
+                          field="number_house"
+                          header={headerNumberHouses}
+                          style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }}
+                        ></Column>
+                        <Column
+                          field="tenants"
+                          header={headerTenant}
+                          body={tenantsBodyTemplate}
+                          style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }}
+                        ></Column>
+                      </DataTable>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </Dialog>
+
           <Dialog
             visible={deleteCommunityDialog}
             style={{ width: '450px' }}