Merge pull request #193 from DeimosPr4/61-us-34-lista-de-invitados-de-inquilinos

61 us 34 lista de invitados de inquilinos

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

@@ -34,6 +34,7 @@ import GuardasSeguridad from './components/GuardasSeguridad';
 import Communities from './components/ComunidadViviendas';
 import Inquilinos from './components/Inquilinos';
 import RegistroComunicado from './components/RegistroComunicado';
+import InvitadosComunidad from './components/InvitadosComunidad';
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 
 import Crud from './pages/Crud';
@@ -202,10 +203,9 @@ const App = () => {
                     icon: PrimeIcons.BUILDING,
                     to: '/areasComunes',
                 },
-                
+                { label: 'Comunicados', icon: PrimeIcons.COMMENTS, to: '/registroComunicado' },
+                { label: 'Invitados', icon: PrimeIcons.USERS, to: '/invitadosComunidad' },
                 { label: 'Reservaciones', icon: PrimeIcons.CALENDAR, to: '/reservaciones'},
-                { label: 'Comunicados', icon: PrimeIcons.COMMENTS, to: '/registroComunicado'},
-    
             ]
         },
     ]
@@ -471,6 +471,7 @@ const App = () => {
                                                 <Route path="/areasComunes" component={AreasComunes} />
                                                 <Route path="/reservaciones" component={Reservaciones} />
                                                 <Route path="/registroComunicado" component={RegistroComunicado} />
+                                                <Route path="/invitadosComunidad" component={InvitadosComunidad} />
                                             </>
                                         )
                                     } else {

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

@@ -0,0 +1,219 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+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 { 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 { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import { useCookies } from 'react-cookie';
+import classNames from 'classnames';
+
+const InvitadosComunidad = () => {
+  const [cookies] = useCookies();
+  const [globalFilter, setGlobalFilter] = useState(null);
+  const [invitados, setInvitados] = useState([]);
+  const [selectedInvitados, setSelectedInvitados] = useState([]);
+  const tableRef = useRef(null);
+  const toastRef = useRef(null);
+
+  const getInvitados = async () => {
+    await fetch(`http://localhost:4000/guest/allGuests`, {
+      method: 'GET',
+    })
+      .then((response) => response.json())
+      .then((data) => data.message)
+      .then((data) => {
+        data = data.filter(
+          (invitado) => invitado.community === cookies.community_id,
+        );
+        setInvitados(data);
+      });
+  };
+
+  useEffect(() => {
+    getInvitados();
+  }, [getInvitados, invitados]);
+
+  const leftToolbarTemplate = () => {
+    return (
+      <React.Fragment>
+        <div className="my-2">
+          <p>Boton Eliminar aqui</p>
+        </div>
+      </React.Fragment>
+    );
+  };
+
+  const rightToolbarTemplate = () => {
+    return (
+      <React.Fragment>
+        <Button
+          label="Exportar"
+          icon="pi pi-upload"
+          className="p-button-help"
+        />
+      </React.Fragment>
+    );
+  };
+
+  const headerName = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} /> Nombre
+      </p>
+    </>
+  );
+
+  const headerTenant = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} /> Inquilino
+      </p>
+    </>
+  );
+
+  const headerLastName = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#D7A86E' }} />{' '}
+        Apellido(s)
+      </p>
+    </>
+  );
+
+  const headerPlate = (
+    <p>
+      {' '}
+      <FontAwesomeIcon icon={faIdCardAlt} style={{ color: '#C08135' }} />{' '}
+      Placa
+    </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 headerTemplate = (
+    <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+      <h5 className="m-0">Invitados</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>
+  );
+
+  return (
+    <div className="grid">
+      <div className="col-12">
+        <Toast ref={toastRef} />
+        <div className="card">
+          <Toolbar
+            className="mb-4"
+            left={leftToolbarTemplate}
+            right={rightToolbarTemplate}
+          />
+          <DataTable
+            ref={tableRef}
+            value={invitados}
+            dataKey="_id"
+            paginator
+            rows={10}
+            selection={selectedInvitados}
+            onSelectionChange={(e) => setSelectedInvitados(e.value)}
+            scrollable
+            scrollHeight="500px"
+            scrollWidth="100%"
+            scrollDirection="both"
+            header={headerTemplate}
+            rowsPerPageOptions={[10, 20, 30]}
+            className="datatable-responsive mt-3"
+            paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+            currentPageReportTemplate="{currentPage} de {totalPages}"
+            globalFilter={globalFilter}
+            emptyMessageTemplate="No se encontraron invitados"
+          >
+            <Column field="name" header="Nombre" sortable header={headerName} />
+            <Column
+              field="last_name"
+              header="Apellido"
+              sortable
+              header={headerLastName}
+            />
+            <Column field="dni" header="DNI" sortable header={headerDNI} />
+            <Column
+              field="number_plate"
+              header="Placa"
+              sortable
+              header={headerPlate}
+            />
+            <Column
+              field="telefono"
+              header="Teléfono"
+              sortable
+              header={headerPhone}
+            />
+            <Column
+              field="email"
+              header="Email"
+              sortable
+              header={headerEmail}
+            />
+            <Column
+              field="date_entry"
+              header="Fecha de registro"
+              sortable
+              header={headerName}
+            />
+            <Column
+              field="tenant_name"
+              header="Inquilino"
+              sortable
+              header={headerTenant}
+            />
+          </DataTable>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(InvitadosComunidad);