Merge pull request #147 from DeimosPr4/US-17-VerPerfildeinformacióndecomunidaddevivienda

ver perfil comunidada de vivienda

api-gateway/src/app.controller.ts

@@ -118,6 +118,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

@@ -187,6 +187,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

@@ -7120,6 +7120,15 @@
 }
 
 
+.icon-khaki {
+    color: var(--primary-color);
+}
+
+.row {
+    display: flex;
+}
+
+
 .status {
     border-radius: var(--border-radius);
     padding: 0.25em 0.5rem;

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

@@ -184,7 +184,7 @@ const App = () => {
           to: '/guardasSeguridad',
         },
         {
-          label: 'Comunidadades',
+          label: 'Comunidades',
           icon: PrimeIcons.BUILDING,
           to: '/comunidadesViviendas',
         },

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,16 @@ const Communities = () => {
   const toast = useRef(null);
   const dt = useRef(null);
 
+
+
+  //para el perfil de la comunidad
+  const [tenants, setTenants] = useState([]);
+
+  const [communityDialog, setCommunityDialog] = useState(false);
+  const [editcommunityDialog, setEditCommunityDialog] = useState(false);
+
+
+
   const p = provincesList.map((item) => ({
     label: item.name,
     value: item.code,
@@ -165,6 +176,20 @@ const Communities = () => {
     getCommunites();
   }, []);
 
+  async function tenantsList(id) {
+    await fetch(`http://localhost:4000/user/findTenants/${id}`, { method: 'GET' })
+      .then((response) => response.json())
+      .then(data => data.message)
+      .then(data => {
+        setTenants(data)
+      });
+  }
+
+  useEffect(() => {
+    tenantsList(community._id);
+  }, [])
+
+
   const saveCommunity = () => {
     if (
       community.name &&
@@ -233,6 +258,20 @@ const Communities = () => {
     }
   };
 
+
+
+  function findNameTenant(tenant_id) {
+    let name = '';
+    if (tenant_id == '') {
+      name = 'Sin inquilino';
+    } else {
+      let tenant = tenants.find(t => t._id == tenant_id )
+      name = tenant['name'] + ' ' + tenant['last_name'];
+    }
+    console.log(name);
+    return name;
+  }
+
   const onInputChange = (e, name) => {
     const val = (e.target && e.target.value) || '';
     let _community = { ...community };
@@ -241,6 +280,11 @@ const Communities = () => {
     setCommunity(_community);
   };
 
+  const hideCommunityDialog = () => {
+    setSubmitted(false);
+    setCommunityDialog(false);
+  };
+
   const hideDeleteCommunityDialog = () => {
     setDeleteCommunityDialog(false);
   };
@@ -258,6 +302,19 @@ const Communities = () => {
     setDeleteCommunitiesDialog(true);
   };
 
+
+  const infoCommunity = async (community) => {
+    await tenantsList(community._id);
+
+    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 +387,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 +443,18 @@ const Communities = () => {
     </div>
   );
 
+  const communityDialogFooter = (
+    <>
+      <Button
+        label="Cerrar"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideCommunityDialog}
+      />
+
+    </>
+  );
+
   const deleteCommunityDialogFooter = (
     <>
       <Button
@@ -477,7 +551,7 @@ const Communities = () => {
     <>
       <p>
         {' '}
-        <FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#D7A86E' }} />{' '}
+        <FontAwesomeIcon icon={faHashtag} style={{ color: '#D7A86E' }} />{' '}
         Número de viviendas
       </p>
     </>
@@ -493,6 +567,30 @@ 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 (
+      <>
+          {name}
+      </>
+    )
+  };
+
   return (
     <div className="grid">
       <div className="col-12">
@@ -564,10 +662,142 @@ const Communities = () => {
             <Column
               field="name_admin"
               sortable
+              header={headerAdministrator}
+              style={{ flexGrow: 1, flexBasis: '180px' }}
+            ></Column>
+            <Column
+             body={actionsCommunity}
              style={{ flexGrow: 1, flexBasis: '180px' }}
              ></Column>
-            <Column  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} 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' }}