informacion en inquilinos

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

@@ -608,7 +608,6 @@ const AreasComunes = () => {
         );
     };
 
-
     function compareTimesMinRequired(hour1, hour2) {
         var timeFormat1 = Number(hour1.replace(/[:]/g, ''));
         var timeFormat2 = Number(hour2.replace(/[:]/g, ''));
@@ -619,10 +618,6 @@ const AreasComunes = () => {
         }
     }
 
-
-
-
-
     return (
         <div className="grid">
             <div className="col-12">

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

@@ -51,6 +51,8 @@ const Inquilinos = () => {
   const dt = useRef(null)
   const [cookies] = useCookies()
   const [changeStatusTenantDialog, setChangeStatusTenantDialog] = useState(false)
+  const [tenantDialog, setTenantDialog] = useState(false)
+
 
   async function tenantsList() {
     await fetch(
@@ -352,17 +354,34 @@ const Inquilinos = () => {
 
   const editTenant = (tenant) => {
     setTenant(tenant);
-    console.log(tenant);
     setSaveButtonTitle('Actualizar');
     setHouseNumber(tenant.number_house);
+    setTenantDialog(true)
+
   }
 
   const cancelEdit = () => {
     setTenant(emptyTenant);
     setSaveButtonTitle('Registrar');
     setHouseNumber('');
+    setTenantDialog(false)
+
   }
 
+  const openNewTenant = () => {
+    setTenant(emptyTenant);
+    setTenantDialog(true)
+    setSubmitted(false);
+  };
+
+  const hideTenantDialog = () => {
+    setSubmitted(false);
+    setTenantDialog(false)
+    setTenant(emptyTenant);
+    setSaveButtonTitle('Registrar');
+
+  };
+
   const actionsTenant = (rowData) => {
     let icono = ''
     let text = ''
@@ -407,6 +426,12 @@ const Inquilinos = () => {
     return (
       <React.Fragment>
         <div className='my-2'>
+          <Button
+            label="Agregar Inquilino"
+            icon="pi pi-plus"
+            className="p-button-primary mr-2"
+            onClick={openNewTenant}
+          />
           <Button
             label='Eliminar'
             icon='pi pi-trash'
@@ -507,6 +532,23 @@ const Inquilinos = () => {
     </>
   );
 
+  const tenantDialogFooter = (
+    <>
+      <Button
+        label={`${saveButtonTitle}`}
+        icon="pi pi-check"
+        className="p-button-primary"
+        onClick={saveTenant}
+      />
+      <Button
+        label="Cerrar"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideTenantDialog}
+      />
+    </>
+  );
+
   const headerName = (
     <>
       <p>
@@ -610,14 +652,14 @@ const Inquilinos = () => {
             value={tenants}
             dataKey='_id'
             paginator
-            rows={5}
+            rows={10}
             selection={selectedTentants}
             onSelectionChange={(e) => setSelectedTenants(e.value)}
             scrollable
-            scrollHeight='400px'
+            scrollHeight='800px'
             scrollDirection='both'
             header={header}
-            rowsPerPageOptions={[5, 10, 25]}
+            rowsPerPageOptions={[10, 20, 30]}
             className='datatable-responsive mt-3'
             paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown'
             currentPageReportTemplate='Mostrando {first} a {last} de {totalRecords} inquilinos'
@@ -673,16 +715,7 @@ const Inquilinos = () => {
                 wordBreak: 'break-word',
               }}
             ></Column>
-            <Column
+
-              field='phone'
-              header={headerPhone}
-              style={{
-                flexGrow: 1,
-                flexBasis: '80px',
-                minWidth: '80px',
-                wordBreak: 'break-word',
-              }}
-            ></Column>
             <Column
               field='number_house'
               sortable
@@ -707,7 +740,7 @@ const Inquilinos = () => {
                 wordBreak: 'break-word',
               }}
             ></Column>
-            <Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsTenant}></Column>
+            <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsTenant}></Column>
           </DataTable>
           <Dialog
             visible={infoDialogVisible}
@@ -780,68 +813,67 @@ const Inquilinos = () => {
 
           </Dialog>
           <Dialog
-            visible={deleteTenantDialog}
+            visible={infoDialogVisible}
-            style={{ width: '450px' }}
+            style={{ width: '650px' }}
-            header='Confirmar'
+            header="Información del Inquilino"
             modal
-            footer={deleteTenantDialogFooter}
+            className="p-fluid"
-            onHide={hideDeleteTenantDialog}
+            footer={infoDialogFooter}
-          >
+            onHide={hideInfoDialog}>
-            <div className='flex align-items-center justify-content-center'>
+            <div className='container text-center'>
-              <i
+              <div className='row my-4 justify-content-center'>
-                className='pi pi-exclamation-triangle mr-3'
+                <div className=" col-6 md:col-6">
-                style={{ fontSize: '2rem' }}
+                  <i className="pi pi-user icon-khaki"></i>
-              />
+                  <p><strong>Nombre Completo</strong></p>
-              {tenant && (
+                  <div className="p-0 col-12  md:col-12" style={{ margin: '0 auto' }}>
-                <span>
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
-                  ¿Estás seguro que desea eliminar a <b>{tenant.name}</b>?
+                      <p>{tenant.name + ' ' + tenant.last_name} </p>
-                </span>
+                    </div>
-              )}
+                  </div>
+                </div>
+                <div className=" col-6 col-md-6 md:col-6">
+                  <i className="pi pi-id-card icon-khaki"></i>
+                  <p><strong>Identificación</strong></p>
+                  <div className="p-0 col-10 md:col-10" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <p>{tenant.dni}</p>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+
+              <div className='row my-5 justify-content-center'>
+                <div className=" col-6 md:col-6">
+                  <i className="pi pi-phone icon-khaki"></i>
+                  <p><strong>Teléfono</strong></p>
+                  <div className="p-0 col-12 md:col-12">
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <p>{tenant.phone}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className=" col-6 md:col-6">
+                  <i className="pi pi-envelope icon-khaki"></i>
+
+                  <p><strong>Correo Electrónico</strong></p>
+                  <div className="p-0 col-12  md:col-12" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <p>{tenant.email}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </Dialog>
           <Dialog
-            visible={deleteTenantsDialog}
+            visible={tenantDialog}
-            style={{ width: '450px' }}
+            style={{ width: '750px' }}
-            header='Confirmar'
+            header='Mantenimiento de inquilino'
             modal
-            footer={deleteTenantsDialogFooter}
+            footer={tenantDialogFooter}
-            onHide={hideDeleteTenantsDialog}
+            onHide={hideTenantDialog}
           >
-            <div className='flex align-items-center justify-content-center'>
-              <i
-                className='pi pi-exclamation-triangle mr-3'
-                style={{ fontSize: '2rem' }}
-              />
-              {selectedTentants && (
-                <span>¿Está seguro eliminar los inquilinos seleccionados?</span>
-              )}
-            </div>
-          </Dialog>
-          <Dialog
-            visible={changeStatusTenantDialog}
-            style={{ width: '450px' }}
-            header='Confirmar'
-            modal
-            footer={changeStatusTenantDialogFooter}
-            onHide={hideChangeStatusTenantDialog}
-          >
-            <div className='flex align-items-center justify-content-center'>
-              <i
-                className='pi pi-exclamation-triangle mr-3'
-                style={{ fontSize: '2rem' }}
-              />
-              {tenant && (
-                <span>
-                  ¿Estás seguro que desea cambiar estado a <b>{tenant.name}</b>?
-                </span>
-              )}
-            </div>
-          </Dialog>
-        </div>
-      </div>
-      <div className="col-12">
-        <div className="card">
-          <h5>Registro de un Inquilino</h5>
             <div className="p-fluid formgrid grid">
               <div className="field col-12 md:col-6">
                 <label htmlFor="name">Nombre</label>
@@ -928,25 +960,51 @@ const Inquilinos = () => {
                     && <small className="p-invalid">Casa es requerida.</small>}
                 </div>
               </div>
-            <div style={{
+
-              display: "flex",
+
-              justifyContent: "center",
+            </div>
-              gap: "10px",
+          </Dialog>
-              width: "100%"
+          <Dialog
-            }}>
+            visible={deleteTenantsDialog}
-              <Button
+            style={{ width: '450px' }}
-                label={`${saveButtonTitle}`}
+            header='Confirmar'
-                onClick={saveTenant}
+            modal
+            footer={deleteTenantsDialogFooter}
+            onHide={hideDeleteTenantsDialog}
+          >
+            <div className='flex align-items-center justify-content-center'>
+              <i
+                className='pi pi-exclamation-triangle mr-3'
+                style={{ fontSize: '2rem' }}
               />
-              {saveButtonTitle === 'Actualizar' && (
+              {selectedTentants && (
-                <Button
+                <span>¿Está seguro eliminar los inquilinos seleccionados?</span>
-                  label="Cancelar"
+              )}
-                  onClick={cancelEdit}
+            </div>
-                  className="p-button-danger" />)}
+          </Dialog>
-            </div>
+          <Dialog
-          </div>
+            visible={changeStatusTenantDialog}
+            style={{ width: '450px' }}
+            header='Confirmar'
+            modal
+            footer={changeStatusTenantDialogFooter}
+            onHide={hideChangeStatusTenantDialog}
+          >
+            <div className='flex align-items-center justify-content-center'>
+              <i
+                className='pi pi-exclamation-triangle mr-3'
+                style={{ fontSize: '2rem' }}
+              />
+              {tenant && (
+                <span>
+                  ¿Estás seguro que desea cambiar estado a <b>{tenant.name}</b>?
+                </span>
+              )}
+            </div>
+          </Dialog>
         </div>
       </div >
+
     </div >
   )
 }