From 9b8e324bf1748203a5324091452b1bcc261b2687 Mon Sep 17 00:00:00 2001
From: Mariela <mbonilla.guti@gmail.com>
Date: Sun, 24 Jul 2022 17:44:25 -0600
Subject: [PATCH] add get tenants

---
 .../components/AdministradoresComunidad.js    |  37 +----
 web-ui/web-react/src/components/Inquilinos.js | 150 ++++++++++++++++--
 2 files changed, 145 insertions(+), 42 deletions(-)

diff --git a/web-ui/web-react/src/components/AdministradoresComunidad.js b/web-ui/web-react/src/components/AdministradoresComunidad.js
index 06416d5d..6d6cdb34 100644
--- a/web-ui/web-react/src/components/AdministradoresComunidad.js
+++ b/web-ui/web-react/src/components/AdministradoresComunidad.js
@@ -152,10 +152,7 @@ const AdministradoresComunidad = () => {
         setDeleteAdminCommunityDialog(true);
     }
 
-    const confirmDeleteSelected = () => {
-        setDeleteAdminsCommunitiesDialog(true);
-    }
-
+   
     const actionsAdminCommunity = (rowData) => {
         return (
             <div className="actions">
@@ -164,34 +161,6 @@ const AdministradoresComunidad = () => {
         );
     }
 
-    const leftToolbarTemplate = () => {
-        return (
-            <React.Fragment>
-                <div className="my-2">
-                    <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedAdminsCommunities || !selectedAdminsCommunities.length} />
-                </div>
-            </React.Fragment>
-        )
-    }
-
-    const rightToolbarTemplate = () => {
-        return (
-            <React.Fragment>
-                <Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
-            </React.Fragment>
-        )
-    }
-
-
-    const header = (
-        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
-            <h5 className="m-0">Administradores de Comunidades</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>
-    );
 
     const deleteAdminCommunityDialogFooter = (
         <>
@@ -346,9 +315,11 @@ const AdministradoresComunidad = () => {
         )
     }
 
+   
+
     const header = (
         <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
-            <h5 className="m-0">Administradores del sistema <i class="fal fa-user"></i></h5>
+            <h5 className="m-0">Administradores de Comunidades</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..." />
diff --git a/web-ui/web-react/src/components/Inquilinos.js b/web-ui/web-react/src/components/Inquilinos.js
index 661af956..d4fdfae0 100644
--- a/web-ui/web-react/src/components/Inquilinos.js
+++ b/web-ui/web-react/src/components/Inquilinos.js
@@ -1,18 +1,35 @@
 import { Button } from 'primereact/button';
-import { Dropdown } from 'primereact/dropdown';
 import { InputText } from 'primereact/inputtext'
 import React, { useEffect, useState, useRef } from 'react'
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Dropdown } from 'primereact/dropdown';
 import { Toast } from 'primereact/toast';
-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 { 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 { faHashtag } from '@fortawesome/free-solid-svg-icons';
+
+
 
 const Inquilinos = () => {
   const [communitiesList, setCommunitiesList] = useState([]);
+  const [communityId, setCommunityId] = useState(null);
   const [tenants, setTenants] = useState([]);
-
   const [tenant, setTenant] = useState(emptyTenant);
+  const [selectedAdministrators, setSelectedAdministrators] = useState(null);
+  const [globalFilter, setGlobalFilter] = useState(null);
+  const [deleteAdminSystemDialog, setDeleteAdminSystemDialog] = useState(false);
+  const [deleteAdminsSystemDialog, setDeleteAdminsSystemDialog] = useState(false);
+  const toast = useRef(null);
+  const dt = useRef(null);
+
 
   let emptyTenant = {
     _id: null,
@@ -31,20 +48,32 @@ const Inquilinos = () => {
 
 
   async function getTenants() {
-
+    let response = await fetch('http://localhost:4000/users/findTenants', { method: 'GET' });
+    let resJson = await response.json();
+    await resJson.message.map((item) => {
+      item.name = communitiesList.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
+      if (!item.id_admin) {
+          item.name_admin = "Sin Administrador"
+      }
+  })
   }
 
-
-  const communityIdList = communitiesList.map(community => community.id);
   async function getCommunites() {
     let response = await fetch('http://localhost:4000/community/allCommunities', { method: 'GET' });
-    let list = await response.json();
-    setCommunitiesList(list.message);
+    let resList = await response.json();
+    let list = await resList.message;
+    console.log(list);
+
+    setCommunitiesList(await list);
   }
 
   useEffect(() => {
     getCommunites();
   }, [])
+
+
   function registrarInquilino() {
     let data = {
       email: document.getElementById('correo_electronico').value,
@@ -69,6 +98,109 @@ const Inquilinos = () => {
     })
   }
 
+  const cList = communitiesList.map((item) => ({
+    label: item.name,
+    value: item.id,
+}))
+
+
+const actionsAdmin = (rowData) => {
+  return (
+      <div className="actions">
+          <Button icon="pi pi-trash" className="p-button-rounded p-button-danger mt-2" onClick={() => confirmDeleteAdminSystem(rowData)} />
+      </div>
+  );
+}
+
+const leftToolbarTemplate = () => {
+  return (
+      <React.Fragment>
+          <div className="my-2">
+              <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedAdministrators || !selectedAdministrators.length} />
+          </div>
+      </React.Fragment>
+  )
+}
+
+const rightToolbarTemplate = () => {
+  return (
+      <React.Fragment>
+          <Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
+      </React.Fragment>
+  )
+}
+
+const header = (
+  <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+      <h5 className="m-0">Administradores del sistema</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>
+);
+
+const deleteAdminSystemDialogFooter = (
+  <>
+      <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteAdminSystemDialog} />
+      <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteSysAdmin} />
+  </>
+);
+
+const deleteAdminsSystemDialogFooter = (
+  <>
+      <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteAdminsSystemsDialog} />
+      <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedAdminsSystem} />
+  </>
+);
+
+const headerName = (
+  <>
+      <p> <FontAwesomeIcon icon={faUserAlt} style={{color: "#C08135"}} />  Nombre</p>
+  </>
+)
+
+const headerLastName = (
+  <>
+      <p> <FontAwesomeIcon icon={faUserAlt} style={{color: "#D7A86E"}} />    Apellidos</p>
+  </>
+)
+
+const headerDNI = (
+  <>
+      <p> <FontAwesomeIcon icon={faIdCardAlt} style={{color: "#C08135"}} />    Identificación</p>
+  </>
+)
+
+const headerEmail = (
+  <>
+      <p> <FontAwesomeIcon icon={faAt} style={{color: "#D7A86E"}} />    Correo Electrónico</p>
+  </>
+)
+
+const headerPhone = (
+  <>
+      <p> <FontAwesomeIcon icon={faPhoneAlt} style={{color: "#C08135"}} />   Teléfono</p>
+  </>
+)
+
+const headerCommuntiy = (
+  <>
+      <p> <FontAwesomeIcon icon={faHome} style={{ color: "#D7A86E" }} />   Comunidad</p>
+  </>
+)
+
+const headerNumberHouse = (
+  <>
+      <p> <FontAwesomeIcon icon={faHashtag} style={{ color: "#C08135" }} />   Número de vivienda</p>
+  </>
+)
+
+const headerOptions = (
+  <>
+      <p>Opciones <FontAwesomeIcon icon={faEllipsis} style={{ color: "#D7A86E" }} /></p>
+  </>
+)
   return (
     <div className="grid">
       <div className="col-12">
@@ -81,7 +213,7 @@ const Inquilinos = () => {
             </div>
             <div className="p-field col-12 md:col-6">
               <label htmlFor="numero_vivienda">Número de Vivienda</label>
-              <Dropdown id="numero_vivienda" value={communityIdList[0]} options={communitiesList} />
+              <Dropdown id="numero_vivienda" value={communityId} options={cList} />
             </div>
             <Button label="Registrar" onClick={registrarInquilino} />
           </div>