informacion en inquilinos

This commit is contained in:
Mariela 2022-09-01 01:55:41 -06:00
parent f37627f662
commit 52cdf9f899
2 changed files with 207 additions and 154 deletions

View File

@ -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">

View File

@ -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}
style={{ width: '450px' }}
header='Confirmar'
visible={infoDialogVisible}
style={{ width: '650px' }}
header="Información del Inquilino"
modal
footer={deleteTenantDialogFooter}
onHide={hideDeleteTenantDialog}
>
<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 eliminar a <b>{tenant.name}</b>?
</span>
)}
className="p-fluid"
footer={infoDialogFooter}
onHide={hideInfoDialog}>
<div className='container text-center'>
<div className='row my-4 justify-content-center'>
<div className=" col-6 md:col-6">
<i className="pi pi-user icon-khaki"></i>
<p><strong>Nombre Completo</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.name + ' ' + tenant.last_name} </p>
</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}
style={{ width: '450px' }}
header='Confirmar'
visible={tenantDialog}
style={{ width: '750px' }}
header='Mantenimiento de inquilino'
modal
footer={deleteTenantsDialogFooter}
onHide={hideDeleteTenantsDialog}
footer={tenantDialogFooter}
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",
gap: "10px",
width: "100%"
}}>
<Button
label={`${saveButtonTitle}`}
onClick={saveTenant}
</div>
</Dialog>
<Dialog
visible={deleteTenantsDialog}
style={{ width: '450px' }}
header='Confirmar'
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' && (
<Button
label="Cancelar"
onClick={cancelEdit}
className="p-button-danger" />)}
</div>
</div>
{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 >
)
}