eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #219 from DeimosPr4/popups-registros 

fixes finales
This commit is contained in:
Eduardo Quiros 2022-09-01 21:19:37 +00:00 committed by GitHub
parent 31593c5203 82abb8ebfc
commit a44fe8caa2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 895 additions and 680 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
servicio-usuarios/src/users/users.controller.ts
View File

@ -82,7 +82,8 @@ export class UsersController {
@MessagePattern({ cmd: 'updateAdminCommunity' }) @MessagePattern({ cmd: 'updateAdminCommunity' })
updateAdminCommunity(@Payload() user: UserDocument) { updateAdminCommunity(@Payload() user: UserDocument) {
return this.userService.update(user._id, user); console.log(user)
return this.userService.updateAdminCommunity(user['_id'], user);
} }
@MessagePattern({ cmd: 'updateTenant' }) @MessagePattern({ cmd: 'updateTenant' })

11
servicio-usuarios/src/users/users.service.ts
View File

@ -134,6 +134,17 @@ export class UsersService {
}); });
} }
async updateAdminCommunity(id: string, user: UserDocument) {
return this.userModel.findOneAndUpdate({ _id: id }, {
name: user['name'], last_name: user['last_name'],
dni: user['dni'], email: user['email'], phone: user['phone'],
community_id: user['community_id']
}, {
new: true,
});
}
async updateTenant(id: string, user: UserDocument) { async updateTenant(id: string, user: UserDocument) {
await this.saveTenant(user.community_id, user.number_house, user.id); await this.saveTenant(user.community_id, user.number_house, user.id);

254
web-ui/web-react/src/components/AdministradoresComunidad.js
View File

@ -50,6 +50,7 @@ const AdministradoresComunidad = () => {
const [changeStatusAdminCommunityDialog, setChangeStatusAdminCommunityDialog] = useState(false); const [changeStatusAdminCommunityDialog, setChangeStatusAdminCommunityDialog] = useState(false);
const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar"); const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar");
const [adminDialog, setAdminDialog] = useState(false);
async function listaAdmin() { async function listaAdmin() {
@ -280,6 +281,7 @@ const AdministradoresComunidad = () => {
toast.current.show({ severity: 'success', summary: 'Exito', detail: 'Administrador de Comunidad de vivienda Creada', life: 3000 }); toast.current.show({ severity: 'success', summary: 'Exito', detail: 'Administrador de Comunidad de vivienda Creada', life: 3000 });
setListaAdmins(_administrators); setListaAdmins(_administrators);
setAdminDialog(false)
setAdminCommunity(emptyAdminCommunity); setAdminCommunity(emptyAdminCommunity);
@ -295,7 +297,6 @@ const AdministradoresComunidad = () => {
} else { } else {
console.log(`Actualizando admnistrador de comunidad: ${_admin}`) console.log(`Actualizando admnistrador de comunidad: ${_admin}`)
_admin.community_id = communityId; _admin.community_id = communityId;
console.log(`Actualizando admnistrador de comunidad: ${_admin}`)
fetch(`http://localhost:4000/user/updateAdminCommunity/${_admin._id}`, { fetch(`http://localhost:4000/user/updateAdminCommunity/${_admin._id}`, {
cache: 'no-cache', cache: 'no-cache',
@ -319,7 +320,7 @@ const AdministradoresComunidad = () => {
listaAdmin(); listaAdmin();
setCommunityId(''); setCommunityId('');
setAdminDialog(false)
setAdminCommunity(emptyAdminCommunity); setAdminCommunity(emptyAdminCommunity);
}) })
} }
@ -356,6 +357,8 @@ const AdministradoresComunidad = () => {
setAdminCommunity(admin); setAdminCommunity(admin);
setSaveButtonTitle('Actualizar'); setSaveButtonTitle('Actualizar');
setCommunityId(admin.community_id) setCommunityId(admin.community_id)
setAdminDialog(true)
} }
@ -365,6 +368,20 @@ const AdministradoresComunidad = () => {
setCommunityId(''); setCommunityId('');
} }
const openNewAdmin = () => {
setAdminCommunity(emptyAdminCommunity);
setAdminDialog(true)
setSubmitted(false);
};
const hideAdminDialog = () => {
setSubmitted(false);
setAdminDialog(false)
setAdminCommunity(emptyAdminCommunity);
setSaveButtonTitle('Registrar');
};
const actionsAdminCommunity = (rowData) => { const actionsAdminCommunity = (rowData) => {
let icono = ''; let icono = '';
let text = ''; let text = '';
@ -431,10 +448,33 @@ const AdministradoresComunidad = () => {
</> </>
); );
const adminDialogFooter = (
<>
<Button
label={`${saveButtonTitle}`}
icon="pi pi-check"
className="p-button-primary"
onClick={saveAdminCommunity}
/>
<Button
label="Cerrar"
icon="pi pi-times"
className="p-button-text"
onClick={hideAdminDialog}
/>
</>
);
const leftToolbarTemplate = () => { const leftToolbarTemplate = () => {
return ( return (
<React.Fragment> <React.Fragment>
<div className="my-2"> <div className="my-2">
<Button
label="Agregar Administrador"
icon="pi pi-plus"
className="p-button-primary mr-2"
onClick={openNewAdmin}
/>
<Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedAdminsCommunities || !selectedAdminsCommunities.length} /> <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedAdminsCommunities || !selectedAdminsCommunities.length} />
</div> </div>
</React.Fragment> </React.Fragment>
@ -562,9 +602,9 @@ const AdministradoresComunidad = () => {
<Toast ref={toast} /> <Toast ref={toast} />
<div className="card"> <div className="card">
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar> <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
<DataTable ref={dt} value={listaAdmins} dataKey="_id" paginator rows={5} selection={selectedAdminsCommunities} onSelectionChange={(e) => setSelectedAdminsCommunities(e.value)} <DataTable ref={dt} value={listaAdmins} dataKey="_id" paginator rows={10} selection={selectedAdminsCommunities} onSelectionChange={(e) => setSelectedAdminsCommunities(e.value)}
scrollable scrollHeight="400px" scrollDirection="both" header={header} scrollable scrollHeight="800px" scrollDirection="both" header={header}
rowsPerPageOptions={[5, 10, 25]} className="datatable-responsive mt-3" rowsPerPageOptions={[10, 20, 30]} className="datatable-responsive mt-3"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} administradores de comunidades de viviendas" currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} administradores de comunidades de viviendas"
globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados."> globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados.">
@ -577,7 +617,7 @@ const AdministradoresComunidad = () => {
<Column field="phone" header={headerPhone} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column> <Column field="phone" header={headerPhone} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
<Column field="community_name" sortable header={headerCommuntiy} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column> <Column field="community_name" sortable header={headerCommuntiy} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
<Column field="status" sortable header={headerStatus} body={statusBodyTemplate} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column> <Column field="status" sortable header={headerStatus} body={statusBodyTemplate} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
<Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsAdminCommunity}></Column> <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsAdminCommunity}></Column>
</DataTable> </DataTable>
<Dialog visible={deleteAdminCommunityDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminCommunityDialogFooter} onHide={hideDeleteAdminCommunityDialog}> <Dialog visible={deleteAdminCommunityDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminCommunityDialogFooter} onHide={hideDeleteAdminCommunityDialog}>
<div className="flex align-items-center justify-content-center"> <div className="flex align-items-center justify-content-center">
@ -611,116 +651,112 @@ const AdministradoresComunidad = () => {
)} )}
</div> </div>
</Dialog> </Dialog>
</div> <Dialog
</div> visible={adminDialog}
<div className="col-12"> style={{ width: '850px' }}
<div className="card"> header="Mantenimiento Administradores de la Comunidad"
<h5>Registro de un administrador de una comunidad de viviendas</h5> modal
<div className="p-fluid formgrid grid"> className="p-fluid"
<div className="field col-12 md:col-6"> footer={adminDialogFooter}
<label htmlFor="name">Nombre</label> onHide={hideAdminDialog}
<div className="p-0 col-12 md:col-12"> >
<div className="p-inputgroup"> {adminCommunity && (
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <div className="p-fluid formgrid grid">
<i className="pi pi-user"></i> <div className="field col-12 md:col-6">
</span> <label htmlFor="name">Nombre</label>
<InputText id="name" value={adminCommunity.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.name === '' })} /> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-user"></i>
</span>
<InputText id="name" value={adminCommunity.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.name === '' })} />
</div>
{submitted && adminCommunity.name === '' && <small className="p-invalid">Nombre es requirido.</small>}
</div>
</div> </div>
{submitted && adminCommunity.name === '' && <small className="p-invalid">Nombre es requirido.</small>} <div className="field col-12 md:col-6">
</div> <label htmlFor="name">Apellido(s)</label>
</div> <div className="p-0 col-12 md:col-12">
<div className="field col-12 md:col-6"> <div className="p-inputgroup">
<label htmlFor="name">Apellido(s)</label> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<div className="p-0 col-12 md:col-12"> <i className="pi pi-user"></i>
<div className="p-inputgroup"> </span>
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <InputText id="last_name" value={adminCommunity.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.last_name === '' })} />
<i className="pi pi-user"></i> </div>
</span> {submitted && adminCommunity.last_name === '' && <small className="p-invalid">Apellidos es requirido.</small>}
<InputText id="last_name" value={adminCommunity.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.last_name === '' })} /> </div>
</div> </div>
{submitted && adminCommunity.last_name === '' && <small className="p-invalid">Apellidos es requirido.</small>} <div className="field col-12 md:col-6">
</div> <label htmlFor="name">Correo Electrónico</label>
</div> <div className="p-0 col-12 md:col-12">
<div className="field col-12 md:col-6"> <div className="p-inputgroup">
<label htmlFor="name">Correo Electrónico</label> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<div className="p-0 col-12 md:col-12"> <i className="pi pi-at"></i>
<div className="p-inputgroup"> </span>
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <InputText id="email" value={adminCommunity.email}
<i className="pi pi-at"></i> onChange={(e) => onInputChange(e, 'email')} required autoFocus
</span> className={classNames({
<InputText id="email" value={adminCommunity.email} 'p-invalid': submitted &&
onChange={(e) => onInputChange(e, 'email')} required autoFocus (adminCommunity.email === '' || findRepeated('email', adminCommunity.email) > 0)
className={classNames({ 'p-invalid': submitted && })} />
(adminCommunity.email === '' || findRepeated('email', adminCommunity.email) > 0) })} /> </div>
{submitted && adminCommunity.email === '' && <small className="p-invalid">Correo electrónico
es requirido.</small>}
{submitted && findRepeated('email', adminCommunity.email) > 0 &&
<small className="p-invalid">Correo electrónico se encuentra repetido.</small>
}
</div>
</div> </div>
{submitted && adminCommunity.email === '' && <small className="p-invalid">Correo electrónico <div className="field col-12 md:col-6">
es requirido.</small>} <label htmlFor="name">Identificación</label>
{submitted && findRepeated('email', adminCommunity.email) > 0 && <div className="p-0 col-12 md:col-12">
<small className="p-invalid">Correo electrónico se encuentra repetido.</small> <div className="p-inputgroup">
} <span className="p-inputgroup-addon p-button p-icon-input-khaki">
</div> <i className="pi pi-id-card"></i>
</div> </span>
<div className="field col-12 md:col-6"> <InputText id="dni" value={adminCommunity.dni}
<label htmlFor="name">Identificación</label> onChange={(e) => onInputChange(e, 'dni')} required autoFocus
<div className="p-0 col-12 md:col-12"> className={classNames({
<div className="p-inputgroup"> 'p-invalid': submitted
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> && (adminCommunity.dni === '' || findRepeated('dni', adminCommunity.dni) > 0)
<i className="pi pi-id-card"></i> })} />
</span> </div>
<InputText id="dni" value={adminCommunity.dni} {submitted && adminCommunity.dni === '' && <small className="p-invalid">Identificación es requirida.</small>}
onChange={(e) => onInputChange(e, 'dni')} required autoFocus {submitted && findRepeated('dni', adminCommunity.dni) > 0 &&
className={classNames({ 'p-invalid': submitted <small className="p-invalid">Identificación se encuentra repetida.</small>
&& (adminCommunity.dni === '' || findRepeated('dni', adminCommunity.dni) > 0)})} /> }
</div>
</div> </div>
{submitted && adminCommunity.dni === '' && <small className="p-invalid">Identificación es requirida.</small>} <div className="field col-12 md:col-6">
{submitted && findRepeated('dni', adminCommunity.dni) > 0 && <label htmlFor="name">Número de teléfono</label>
<small className="p-invalid">Identificación se encuentra repetida.</small> <div className="p-0 col-12 md:col-12">
} <div className="p-inputgroup">
</div> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
</div> <i className="pi pi-phone"></i>
<div className="field col-12 md:col-6"> </span>
<label htmlFor="name">Número de teléfono</label> <InputText id="phone" value={adminCommunity.phone} onChange={(e) => onInputChange(e, 'phone')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.phone === '' })} />
<div className="p-0 col-12 md:col-12"> </div>
<div className="p-inputgroup"> {submitted && adminCommunity.phone === '' && <small className="p-invalid">Número de teléfono es requirida.</small>}
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> </div>
<i className="pi pi-phone"></i>
</span>
<InputText id="phone" value={adminCommunity.phone} onChange={(e) => onInputChange(e, 'phone')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.phone === '' })} />
</div> </div>
{submitted && adminCommunity.phone === '' && <small className="p-invalid">Número de teléfono es requirida.</small>} <div className="field col-12 md:col-6">
</div> <label htmlFor="administrator">Comunidad a asignar: </label>
</div> <div className="p-0 col-12 md:col-12">
<div className="field col-12 md:col-6"> <div className="p-inputgroup">
<label htmlFor="administrator">Comunidad a asignar: </label> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<div className="p-0 col-12 md:col-12"> <i className="pi pi-home"></i>
<div className="p-inputgroup"> </span>
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <Dropdown placeholder="--Seleccione la Comunidad a Asignar--" id="administrator" value={communityId} options={cList}
<i className="pi pi-home"></i> onChange={handleCommunities} required autoFocus className={classNames({ 'p-invalid': submitted && !communityId })} />
</span> </div>
<Dropdown placeholder="--Seleccione la Comunidad a Asignar--" id="administrator" value={communityId} options={cList} {submitted && !communityId && <small className="p-invalid">Comunidad es requirida.</small>}
onChange={handleCommunities} required autoFocus className={classNames({ 'p-invalid': submitted && !communityId })} /> </div>
</div> </div>
{submitted && !communityId && <small className="p-invalid">Comunidad es requirida.</small>}
</div>
</div>
<div style={{
display: "flex",
justifyContent: "center",
gap: "10px",
width: "100%"
}}>
<Button
label={`${saveButtonTitle}`}
onClick={saveAdminCommunity}
/>
{saveButtonTitle === 'Actualizar' && (
<Button
label="Cancelar"
onClick={cancelEdit}
className="p-button-danger" />)}
</div>
</div>
</div>
)}
</Dialog>
</div> </div>
</div> </div>
</div> </div>

82
web-ui/web-react/src/components/AdministradoresSistema.js
View File

@ -50,7 +50,7 @@ const AdministradoresSistema = () => {
const [adminDialog, setAdminDialog] = useState(false); const [adminDialog, setAdminDialog] = useState(false);
const [submitted, setSubmitted] = useState(false); const [submitted, setSubmitted] = useState(false);
const [editAdminDialog, setEditAdminDialog] = useState(false); const [formAdminDialog, setFormAdminDialog] = useState(false);
const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar") const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar")
@ -136,7 +136,7 @@ const AdministradoresSistema = () => {
life: 3000, life: 3000,
}); });
setAdministrators(_administrators) setAdministrators(_administrators)
setEditAdminDialog(false); setFormAdminDialog(false);
setSysAdmin(emptySysAdmin); setSysAdmin(emptySysAdmin);
} }
) )
@ -164,6 +164,8 @@ const AdministradoresSistema = () => {
function (response) { function (response) {
_administrators.push(_admin); _administrators.push(_admin);
setAdministrators(_administrators) setAdministrators(_administrators)
setFormAdminDialog(false)
} }
) )
.catch( .catch(
@ -267,7 +269,23 @@ const AdministradoresSistema = () => {
const editAdmin = (sysadmin) => { const editAdmin = (sysadmin) => {
setSysAdmin({ ...sysadmin }); setSysAdmin({ ...sysadmin });
setSaveButtonTitle('Actualizar'); setSaveButtonTitle('Actualizar');
setFormAdminDialog(true)
}; };
const openNewAdmin = () => {
setSysAdmin(emptySysAdmin);
setFormAdminDialog(true)
setSubmitted(false);
};
const hideFormAdminDialog = () => {
setSubmitted(false);
setFormAdminDialog(false)
setSysAdmin(emptySysAdmin);
setSaveButtonTitle('Registrar');
};
const deleteSysAdmin = () => { const deleteSysAdmin = () => {
fetch('http://localhost:4000/user/deleteAdminSystem/' + sysadmin._id, { fetch('http://localhost:4000/user/deleteAdminSystem/' + sysadmin._id, {
@ -386,6 +404,12 @@ const AdministradoresSistema = () => {
return ( return (
<React.Fragment> <React.Fragment>
<div className="my-2"> <div className="my-2">
<Button
label="Agregar Administrador"
icon="pi pi-plus"
className="p-button-primary mr-2"
onClick={openNewAdmin}
/>
<Button <Button
label="Eliminar" label="Eliminar"
icon="pi pi-trash" icon="pi pi-trash"
@ -478,19 +502,19 @@ const AdministradoresSistema = () => {
); );
const editAdminDialogFooter = ( const formAdminDialogFooter = (
<> <>
<Button <Button
label="No" label={`${saveButtonTitle}`}
icon="pi pi-times" icon="pi pi-check"
className="p-button-text" className="p-button-primary"
onClick={hideChangeStatusAdminDialog} onClick={guardarAdmin}
/> />
<Button <Button
label="Yes" label="Cerrar"
icon="pi pi-check" icon="pi pi-times"
className="p-button-text" className="p-button-text"
onClick={editAdmin} onClick={hideFormAdminDialog}
/> />
</> </>
); );
@ -691,7 +715,7 @@ const AdministradoresSistema = () => {
</Column> </Column>
<Column <Column
style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }}
body={actionsAdmin} body={actionsAdmin}
></Column> ></Column>
</DataTable> </DataTable>
@ -834,13 +858,15 @@ const AdministradoresSistema = () => {
)} )}
</div> </div>
</Dialog> </Dialog>
<Dialog
</div> visible={formAdminDialog}
</div> style={{ width: '650px' }}
<div className="col-12"> header="Mantenimiento Administrador del Sistema"
<div className="card"> modal
<h5>Mantenimiento Administrador del Sistema</h5> className="p-fluid"
<div className="p-fluid formgrid grid"> footer={formAdminDialogFooter}
onHide={hideFormAdminDialog}>
<div className="p-fluid formgrid grid">
<div className="field col-6 md:col-6"> <div className="field col-6 md:col-6">
<label htmlFor="name">Nombre</label> <label htmlFor="name">Nombre</label>
@ -953,28 +979,12 @@ const AdministradoresSistema = () => {
)} )}
</div> </div>
</div> </div>
<div style={{
display: "flex",
justifyContent: "center",
gap: "10px",
width: "100%"
}}>
<Button
label={`${saveButtonTitle}`}
onClick={guardarAdmin}
/>
{saveButtonTitle === 'Actualizar' && (
<Button
label="Cancelar"
onClick={cancelEdit}
className="p-button-danger" />)}
</div>
</div> </div>
</Dialog>
</div> </div>
</div> </div>
</div> </div>
); );
}; };

7
web-ui/web-react/src/components/AreasComunes.js
View File

@ -608,7 +608,6 @@ const AreasComunes = () => {
); );
}; };
function compareTimesMinRequired(hour1, hour2) { function compareTimesMinRequired(hour1, hour2) {
var timeFormat1 = Number(hour1.replace(/[:]/g, '')); var timeFormat1 = Number(hour1.replace(/[:]/g, ''));
var timeFormat2 = Number(hour2.replace(/[:]/g, '')); var timeFormat2 = Number(hour2.replace(/[:]/g, ''));
@ -619,10 +618,6 @@ const AreasComunes = () => {
} }
} }
return ( return (
<div className="grid"> <div className="grid">
<div className="col-12"> <div className="col-12">
@ -641,7 +636,7 @@ const AreasComunes = () => {
<Column field="hourMax" sortable header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}> </Column> <Column field="hourMax" sortable header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}> </Column>
<Column field="bookable" sortable header={headerBookable} body={bookableBodyTemplate} style={{ flexGrow: 1, flexBasis: '200px', minWidth: '200px', wordBreak: 'break-word' }}></Column> <Column field="bookable" sortable header={headerBookable} body={bookableBodyTemplate} style={{ flexGrow: 1, flexBasis: '200px', minWidth: '200px', wordBreak: 'break-word' }}></Column>
<Column field="status" sortable header={headerStatus} body={statusBodyTemplate} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column> <Column field="status" sortable header={headerStatus} body={statusBodyTemplate} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
<Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsCommonArea}></Column> <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsCommonArea}></Column>
</DataTable> </DataTable>
<Dialog <Dialog
visible={areaDialog} visible={areaDialog}

515
web-ui/web-react/src/components/ComunidadViviendas.js
View File

@ -49,6 +49,7 @@ const Communities = () => {
const [editCommunityDialog, setEditCommunityDialog] = useState(false); const [editCommunityDialog, setEditCommunityDialog] = useState(false);
const toast = useRef(null); const toast = useRef(null);
const dt = useRef(null); const dt = useRef(null);
const [formCommunityDialog, setFormCommunityDialog] = useState(false);
//para el perfil de la comunidad //para el perfil de la comunidad
const [tenants, setTenants] = useState([]); const [tenants, setTenants] = useState([]);
@ -273,10 +274,37 @@ const Communities = () => {
if (response.status != 200) if (response.status != 200)
console.log('Ocurrió un error con el servicio: ' + response.status); console.log('Ocurrió un error con el servicio: ' + response.status);
else return response.json(); else return response.json();
}).catch((err) => console.log('Ocurrió un error con el fetch', err)); })
setSaveButtonLabel('Registrar'); .then(() => {
setCommunity(emptyCommunity); _community.province = provincesList.find(
} (p) => p.code === _community.province,
).name;
_community.canton = cantonsList.find(
(p) => p.code === _community.canton,
).name;
_community.district = districtsList.find(
(p) => p.code === _community.district,
).name;
_communities.push(_community);
toast.current.show({
severity: 'success',
summary: 'Registro exitoso',
detail: 'Comunidad de vivienda Creada',
life: 3000,
});
setCommunitiesList(_communities);
setProvinciaId('');
setCantonId('');
setDistrictId('');
setCodeHouses('');
setFormCommunityDialog(false);
setCommunity(emptyCommunity);
})
.catch((err) => console.log('Ocurrió un error con el fetch', err));
} else { } else {
setSubmitted(true); setSubmitted(true);
} }
@ -343,6 +371,16 @@ const Communities = () => {
setEditCommunityDialog(true); setEditCommunityDialog(true);
}; };
const openNewCommunity = () => {
setCommunity({ emptyCommunity });
setFormCommunityDialog(true);
};
const hideFormCommunityDialog = () => {
setCommunity({ emptyCommunity });
setFormCommunityDialog(false);
};
//desactivar o activar una comunidad //desactivar o activar una comunidad
const cambiarEstadoCommunity = () => { const cambiarEstadoCommunity = () => {
if (community.status == '1') { if (community.status == '1') {
@ -512,6 +550,12 @@ const Communities = () => {
return ( return (
<React.Fragment> <React.Fragment>
<div className="my-2"> <div className="my-2">
<Button
label="Agregar Comunidad"
icon="pi pi-plus"
className="p-button-primary mr-2"
onClick={openNewCommunity}
/>
<Button <Button
label="Eliminar" label="Eliminar"
icon="pi pi-trash" icon="pi pi-trash"
@ -561,6 +605,25 @@ const Communities = () => {
</> </>
); );
const formCommunityDialogFooter = (
<>
<Button
label={'Registrar'}
icon="pi pi-check"
className="p-button-primary"
onClick={saveCommunity}
/>
<Button
label="Cerrar"
icon="pi pi-times"
className="p-button-text"
onClick={hideFormCommunityDialog}
/>
</>
);
const deleteCommunityDialogFooter = ( const deleteCommunityDialogFooter = (
<> <>
<Button <Button
@ -673,8 +736,8 @@ const Communities = () => {
<> <>
<p> <p>
{' '} {' '}
<FontAwesomeIcon icon={faHashtag} style={{ color: '#D7A86E' }} /> Número <FontAwesomeIcon icon={faHashtag} style={{ color: '#D7A86E' }} />{' '}
de viviendas Cantidad de viviendas
</p> </p>
</> </>
); );
@ -713,6 +776,16 @@ const Communities = () => {
</> </>
); );
const headerCodeHouses = (
<>
<p>
{' '}
<FontAwesomeIcon icon={faHashtag} style={{ color: '#D7A86E' }} />{' '}
Código de vivienda
</p>
</>
);
const statusBodyTemplate = (rowData) => { const statusBodyTemplate = (rowData) => {
return ( return (
<> <>
@ -748,14 +821,14 @@ const Communities = () => {
value={communitiesList} value={communitiesList}
dataKey="_id" dataKey="_id"
paginator paginator
rows={5} rows={10}
selection={selectedCommunities} selection={selectedCommunities}
onSelectionChange={(e) => setSelectedCommunities(e.value)} onSelectionChange={(e) => setSelectedCommunities(e.value)}
scrollable scrollable
scrollHeight="400px" scrollHeight="800px"
scrollDirection="both" scrollDirection="both"
header={header} header={header}
rowsPerPageOptions={[5, 10, 25]} rowsPerPageOptions={[10, 20, 30]}
className="datatable-responsive mt-3" className="datatable-responsive mt-3"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} comunidades de viviendas" currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} comunidades de viviendas"
@ -790,11 +863,6 @@ const Communities = () => {
header={headerDistrict} header={headerDistrict}
style={{ flexGrow: 1, flexBasis: '160px' }} style={{ flexGrow: 1, flexBasis: '160px' }}
></Column> ></Column>
<Column
field="phone"
header={headerPhone}
style={{ flexGrow: 1, flexBasis: '180px' }}
></Column>
<Column <Column
field="num_houses" field="num_houses"
sortable sortable
@ -821,7 +889,7 @@ const Communities = () => {
></Column> ></Column>
<Column <Column
body={actionsCommunity} body={actionsCommunity}
style={{ flexGrow: 2, flexBasis: '100px', flexDirection: 'row' }} style={{ flexGrow: 1, flexBasis: '160px' }}
></Column> ></Column>
</DataTable> </DataTable>
@ -837,13 +905,11 @@ const Communities = () => {
<div className="container text-center"> <div className="container text-center">
<div className="row my-4"> <div className="row my-4">
<div className=" col-12 md:col-12"> <div className=" col-12 md:col-12">
<p>Nombre</p> <i className="pi pi-home icon-khaki"></i>
<div
className="p-0 col-2 md:col-2" <p><strong>Nombre</strong></p>
style={{ margin: '0 auto' }} <div className="p-0 col-2 md:col-2" style={{ margin: '0 auto' }}>
>
<div className="p-inputgroup align-items-center justify-content-evenly"> <div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-home icon-khaki"></i>
<p>{community.name}</p> <p>{community.name}</p>
</div> </div>
</div> </div>
@ -851,25 +917,21 @@ const Communities = () => {
</div> </div>
<div className="row my-5"> <div className="row my-5">
<div className=" col-6 md:col-6"> <div className=" col-6 md:col-6">
<p>Administrador</p> <i className="pi pi-user icon-khaki"></i>
<div
className="p-0 col-6 md:col-6" <p><strong>Administrador</strong></p>
style={{ margin: '0 auto' }} <div className="p-0 col-6 md:col-6" style={{ margin: '0 auto' }}>
>
<div className="p-inputgroup align-items-center justify-content-evenly"> <div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-user icon-khaki"></i>
<p>{community.name_admin}</p> <p>{community.name_admin}</p>
</div> </div>
</div> </div>
</div> </div>
<div className=" col-6 md:col-6"> <div className=" col-6 md:col-6">
<p>Teléfono Administrativo</p> <i className="pi pi-phone icon-khaki"></i>
<div
className="p-0 col-6 md:col-6" <p><strong>Teléfono Administrativo</strong></p>
style={{ margin: '0 auto' }} <div className="p-0 col-6 md:col-6" style={{ margin: '0 auto' }}>
>
<div className="p-inputgroup align-items-center justify-content-evenly"> <div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-phone icon-khaki"></i>
<p>{community.phone}</p> <p>{community.phone}</p>
</div> </div>
</div> </div>
@ -878,28 +940,31 @@ const Communities = () => {
<div className="row my-5"> <div className="row my-5">
<div className=" col-4 col-md-4 md:col-4"> <div className=" col-4 col-md-4 md:col-4">
<p>Provincia</p> <i className="pi pi-map-marker icon-khaki"></i>
<div className="p-0 col-10 md:col-10">
<p><strong>Provincia</strong></p>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup align-items-center justify-content-evenly"> <div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-map-marker icon-khaki"></i>
<p>{community.province}</p> <p>{community.province}</p>
</div> </div>
</div> </div>
</div> </div>
<div className=" col-4 md:col-4"> <div className=" col-4 md:col-4">
<p>Cantón</p> <i className="pi pi-map-marker icon-khaki"></i>
<div className="p-0 col-10 md:col-10">
<p><strong>Cantón</strong></p>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup align-items-center justify-content-evenly"> <div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-map-marker icon-khaki"></i>
<p>{community.canton}</p> <p>{community.canton}</p>
</div> </div>
</div> </div>
</div> </div>
<div className=" col-4 md:col-4"> <div className=" col-4 md:col-4">
<p>Distrito</p> <i className="pi pi-map-marker icon-khaki"></i>
<div className="p-0 col-10 md:col-10">
<p><strong>Distrito</strong></p>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup align-items-center justify-content-evenly"> <div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-map-marker icon-khaki"></i>
<p>{community.district}</p> <p>{community.district}</p>
</div> </div>
</div> </div>
@ -907,13 +972,11 @@ const Communities = () => {
</div> </div>
<div className="row my-5"> <div className="row my-5">
<div className=" col-12 md:col-12"> <div className=" col-12 md:col-12">
<p>Número de Viviendas</p> <i className="pi pi-hashtag icon-khaki"></i>
<div
className="p-0 col-2 md:col-2" <p><strong>Cantidad de viviendas</strong></p>
style={{ margin: '0 auto' }} <div className="p-0 col-2 md:col-2" style={{ margin: '0 auto' }}>
>
<div className="p-inputgroup justify-content-evenly"> <div className="p-inputgroup justify-content-evenly">
<i className="pi pi-hashtag icon-khaki"></i>
<p>{community.num_houses}</p> <p>{community.num_houses}</p>
</div> </div>
</div> </div>
@ -945,12 +1008,8 @@ const Communities = () => {
> >
<Column <Column
field="number_house" field="number_house"
header={headerNumberHouses} header={headerCodeHouses}
style={{ style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }}
flexGrow: 1,
flexBasis: '160px',
minWidth: '160px',
}}
></Column> ></Column>
<Column <Column
field="tenants" field="tenants"
@ -1032,201 +1091,189 @@ const Communities = () => {
)} )}
</div> </div>
</Dialog> </Dialog>
</div> <Dialog
</div> visible={formCommunityDialog}
<div className="col-12"> style={{ width: '850px' }}
<div className="card"> header="Mantenimiento de comunidad de viviendas"
<h5>Registro de comunidad de viviendas</h5> modal
<div className="p-fluid formgrid grid"> footer={formCommunityDialogFooter}
<div className="field col-12 md:col-12"> onHide={hideFormCommunityDialog}
<label htmlFor="name">Nombre</label> >
<div className="p-0 col-12 md:col-12"> <div className="p-fluid formgrid grid">
<div className="p-inputgroup"> <div className="field col-12 md:col-12">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <label htmlFor="name">Nombre</label>
<i className="pi pi-home"></i> <div className="p-0 col-12 md:col-12">
</span> <div className="p-inputgroup">
<InputText <span className="p-inputgroup-addon p-button p-icon-input-khaki">
id="name" <i className="pi pi-home"></i>
value={community.name} </span>
onChange={(e) => onInputChange(e, 'name')} <InputText
required id="name"
autoFocus value={community.name}
className={classNames({ onChange={(e) => onInputChange(e, 'name')}
'p-invalid': submitted && community.name === '', required
})} autoFocus
/> className={classNames({
'p-invalid': submitted && community.name === '',
})}
/>
</div>
{submitted && community.name === '' && (
<small className="p-invalid">Nombre es requirido.</small>
)}
</div> </div>
{submitted && community.name === '' && (
<small className="p-invalid">Nombre es requirido.</small>
)}
</div> </div>
</div> <div className="field col-12 md:col-6">
<div className="field col-12 md:col-6"> <label htmlFor="provinces">Provincia</label>
<label htmlFor="provinces">Provincia</label> <div className="p-0 col-12 md:col-12">
<div className="p-0 col-12 md:col-12"> <div className="p-inputgroup">
<div className="p-inputgroup"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <i className="pi pi-map-marker"></i>
<i className="pi pi-map-marker"></i> </span>
</span> <Dropdown
<Dropdown placeholder="--Seleccione Provincia--"
placeholder="--Seleccione Provincia--" value={provinciaId}
value={provinciaId} options={p}
options={p} onChange={handleProvinces}
onChange={handleProvinces} required
required autoFocus
autoFocus className={classNames({
className={classNames({ 'p-invalid': submitted && !provinciaId,
'p-invalid': submitted && !provinciaId, })}
})} />
/> </div>
{submitted && !provinciaId && (
<small className="p-invalid">Provincia es requirido.</small>
)}
</div> </div>
{submitted && !provinciaId && (
<small className="p-invalid">Provincia es requirido.</small>
)}
</div> </div>
</div> <div className="field col-12 md:col-6">
<div className="field col-12 md:col-6"> <label htmlFor="cantons">Cantón</label>
<label htmlFor="cantons">Cantón</label> <div className="p-0 col-12 md:col-12">
<div className="p-0 col-12 md:col-12"> <div className="p-inputgroup">
<div className="p-inputgroup"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <i className="pi pi-map-marker"></i>
<i className="pi pi-map-marker"></i> </span>
</span> <Dropdown
<Dropdown placeholder="--Seleccione Cantón--"
placeholder="--Seleccione Cantón--" value={cantonId}
value={cantonId} options={c}
options={c} onChange={handleCanton}
onChange={handleCanton} required
required autoFocus
autoFocus className={classNames({
className={classNames({ 'p-invalid': submitted && !cantonId,
'p-invalid': submitted && !cantonId, })}
})} />
/> </div>
{submitted && !cantonId && (
<small className="p-invalid">Cantón es requirido.</small>
)}
</div> </div>
{submitted && !cantonId && (
<small className="p-invalid">Cantón es requirido.</small>
)}
</div> </div>
</div> <div className="field col-12 md:col-6">
<div className="field col-12 md:col-6"> <label htmlFor="districts">Distrito</label>
<label htmlFor="districts">Distrito</label> <div className="p-0 col-12 md:col-12">
<div className="p-0 col-12 md:col-12"> <div className="p-inputgroup">
<div className="p-inputgroup"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <i className="pi pi-map-marker"></i>
<i className="pi pi-map-marker"></i> </span>
</span> <Dropdown
<Dropdown placeholder="--Seleccione Distrito--"
placeholder="--Seleccione Distrito--" value={districtId}
value={districtId} options={d}
options={d} onChange={handleDistrict}
onChange={handleDistrict} required
required autoFocus
autoFocus className={classNames({
className={classNames({ 'p-invalid': submitted && !districtId,
'p-invalid': submitted && !districtId, })}
})} />
/> </div>
{submitted && !districtId && (
<small className="p-invalid">Distrito es requirido.</small>
)}
</div> </div>
{submitted && !districtId && (
<small className="p-invalid">Distrito es requirido.</small>
)}
</div> </div>
</div> <div className="field col-12 md:col-6">
<div className="field col-12 md:col-6"> <label htmlFor="telefono">Número de Teléfono</label>
<label htmlFor="telefono">Número de Teléfono</label> <div className="p-0 col-12 md:col-12">
<div className="p-0 col-12 md:col-12"> <div className="p-inputgroup">
<div className="p-inputgroup"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <i className="pi pi-phone"></i>
<i className="pi pi-phone"></i> </span>
</span> <InputText
<InputText id="phone"
id="phone" value={community.phone}
value={community.phone} onChange={(e) => onInputChange(e, 'phone')}
onChange={(e) => onInputChange(e, 'phone')} required
required autoFocus
autoFocus className={classNames({
className={classNames({ 'p-invalid': submitted && community.phone === '',
'p-invalid': submitted && community.phone === '', })}
})} />
/> </div>
{submitted && community.phone === '' && (
<small className="p-invalid">
Número de teléfono es requirido.
</small>
)}
</div> </div>
{submitted && community.phone === '' && (
<small className="p-invalid">
Número de teléfono es requirido.
</small>
)}
</div> </div>
</div> <div className="field col-12 md:col-6">
<div className="field col-12 md:col-6"> <label htmlFor="numHouse">Numero de Viviendas</label>
<label htmlFor="numHouse">Numero de Viviendas</label> <div className="p-0 col-12 md:col-12">
<div className="p-0 col-12 md:col-12"> <div className="p-inputgroup">
<div className="p-inputgroup"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <i className="pi pi-hashtag"></i>
<i className="pi pi-hashtag"></i> </span>
</span> <InputText
<InputText id="num_houses"
id="num_houses" value={community.num_houses}
value={community.num_houses} onChange={(e) => onInputChange(e, 'num_houses')}
onChange={(e) => onInputChange(e, 'num_houses')} required
required autoFocus
autoFocus className={classNames({
className={classNames({ 'p-invalid': submitted && community.num_houses < 1,
'p-invalid': submitted && community.num_houses < 1, })}
})} />
/> </div>
{submitted && community.num_houses < 1 && (
<small className="p-invalid">
Número de viviendas es requirido y debe ser mayor que 0.
</small>
)}
</div> </div>
{submitted && community.num_houses < 1 && (
<small className="p-invalid">
Número de viviendas es requirido y debe ser mayor que 0.
</small>
)}
</div> </div>
</div> <div className="field col-12 md:col-6">
<div className="field col-12 md:col-6"> <label htmlFor="numHouse">
<label htmlFor="numHouse"> Ingrese el prefijo para el código de las viviendas
Ingrese el prefijo para el código de las viviendas </label>
</label> <div className="p-0 col-12 md:col-12">
<div className="p-0 col-12 md:col-12"> <div className="p-inputgroup">
<div className="p-inputgroup"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <i className="pi pi-hashtag"></i>
<i className="pi pi-hashtag"></i> </span>
</span> <InputText
<InputText id="code_houses"
id="code_houses" value={codeHouses}
value={codeHouses} onChange={handleCodeHouses}
onChange={handleCodeHouses} autoFocus
autoFocus className={classNames({
className={classNames({ 'p-invalid': submitted && codeHouses === '',
'p-invalid': submitted && codeHouses === '', })}
})} />
/> </div>
{submitted && codeHouses === '' && (
<small className="p-invalid">
El código para las viviendas es requirido.
</small>
)}
</div> </div>
{submitted && codeHouses === '' && (
<small className="p-invalid">
El código para las viviendas es requirido.
</small>
)}
</div> </div>
</div> </div>
<div style={{ </Dialog>
display: "flex",
justifyContent: "center",
gap: "10px",
width: "100%"
}} className="col-12 md:col-12 py-2">
<Button
label={saveButtonLabel}
icon="pi pi-check"
onClick={saveCommunity}
/>
{saveButtonLabel === 'Actualizar' && (
<Button
label="Cancelar"
onClick={cancelEdit}
className="p-button-danger" />)}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

256
web-ui/web-react/src/components/GuardasSeguridad.js
View File

@ -46,6 +46,7 @@ const GuardasSeguridad = () => {
const [changeStatusGuardDialog, setChangeStatusGuardDialog] = useState(false); const [changeStatusGuardDialog, setChangeStatusGuardDialog] = useState(false);
const [guardDialog, setGuardDialog] = useState(false); const [guardDialog, setGuardDialog] = useState(false);
const [submitted, setSubmitted] = useState(false); const [submitted, setSubmitted] = useState(false);
const [formGuardDialog, setFormGuardDialog] = useState(false);
async function listaGuardasF() { async function listaGuardasF() {
@ -98,6 +99,8 @@ const GuardasSeguridad = () => {
return response.json(); return response.json();
}).then(() => { }).then(() => {
listaGuardasF(); listaGuardasF();
setFormGuardDialog(false)
setGuarda(emptyGuarda)
}).catch( }).catch(
err => console.log('Ocurrió un error con el fetch', err) err => console.log('Ocurrió un error con el fetch', err)
); );
@ -122,6 +125,8 @@ const GuardasSeguridad = () => {
detail: 'Guarda actualizado correctamente' detail: 'Guarda actualizado correctamente'
}); });
setGuarda(emptyGuarda); setGuarda(emptyGuarda);
setFormGuardDialog(false)
listaGuardasF(); listaGuardasF();
}) })
} }
@ -179,7 +184,7 @@ const GuardasSeguridad = () => {
console.log(`Ocurrió un error con el servicio: ${response.status}`); console.log(`Ocurrió un error con el servicio: ${response.status}`);
else else
return response.json(); return response.json();
}).then(function() { }).then(function () {
let _guarda = listaGuardas.filter(val => val._id !== guarda._id); let _guarda = listaGuardas.filter(val => val._id !== guarda._id);
setListaGuardas(_guarda); setListaGuardas(_guarda);
setDeleteGuardaDialog(false); setDeleteGuardaDialog(false);
@ -251,13 +256,29 @@ const GuardasSeguridad = () => {
const editGuard = (guard) => { const editGuard = (guard) => {
setGuarda(guard); setGuarda(guard);
console.log(guard); setFormGuardDialog(true)
setSaveButtonTitle("Actualizar"); setSaveButtonTitle("Actualizar");
} }
const cancelEdit = () => { const cancelEdit = () => {
setGuarda(emptyGuarda); setGuarda(emptyGuarda);
setSaveButtonTitle("Registrar"); setSaveButtonTitle("Registrar");
setFormGuardDialog(false)
}
const openNewGuard = () => {
setGuarda(emptyGuarda);
setFormGuardDialog(true)
setSubmitted(false);
};
const hideFormGuardDialog = () => {
setSubmitted(false);
setFormGuardDialog(false)
setGuarda(emptyGuarda);
setSaveButtonTitle('Registrar');
} }
const actionsGuard = (rowData) => { const actionsGuard = (rowData) => {
@ -300,6 +321,12 @@ const GuardasSeguridad = () => {
return ( return (
<React.Fragment> <React.Fragment>
<div className="my-2"> <div className="my-2">
<Button
label="Agregar Guarda"
icon="pi pi-plus"
className="p-button-primary mr-2"
onClick={openNewGuard}
/>
<Button label="Eliminar" <Button label="Eliminar"
icon="pi pi-trash" icon="pi pi-trash"
className="p-button-danger" className="p-button-danger"
@ -372,6 +399,22 @@ const GuardasSeguridad = () => {
</> </>
); );
const formGuardDialogFooter = (
<>
<Button
label={`${saveButtonTitle}`}
icon="pi pi-check"
className="p-button-primary"
onClick={registrarGuarda}
/>
<Button
label="Cerrar"
icon="pi pi-times"
className="p-button-text"
onClick={hideFormGuardDialog}
/>
</>
);
const headerName = ( const headerName = (
<> <>
@ -472,7 +515,7 @@ const GuardasSeguridad = () => {
body={statusBodyTemplate} body={statusBodyTemplate}
style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}> style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
</Column> </Column>
<Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsGuard}></Column> <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsGuard}></Column>
</DataTable> </DataTable>
<Dialog <Dialog
visible={guardDialog} visible={guardDialog}
@ -484,30 +527,22 @@ const GuardasSeguridad = () => {
onHide={hideGuardDialog}> onHide={hideGuardDialog}>
<div className='container text-center'> <div className='container text-center'>
<div className='row my-4'> <div className='row my-4'>
<div className=" col-4 md:col-4"> <div className=" col-6 md:col-6">
<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-user icon-khaki"></i>
<p>{guarda.name}</p>
</div>
</div>
</div>
<div className=" col-4 md:col-4">
<p>Apellido(s)</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>{guarda.last_name}</p>
</div>
<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>{guarda.name + ' ' + guarda.last_name}</p>
</div>
</div> </div>
</div> </div>
<div className=" col-4 col-md-4 md:col-4">
<p>Identificación</p> <div className=" col-6 col-md-6 md:col-6">
<div className="p-0 col-10 md:col-10" style={{ margin: '0 auto' }}> <i className="pi pi-id-card icon-khaki"></i>
<p><strong>Identificación</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"> <div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-id-card icon-khaki"></i>
<p>{guarda.dni}</p> <p>{guarda.dni}</p>
</div> </div>
@ -517,21 +552,22 @@ const GuardasSeguridad = () => {
<div className='row my-5 justify-content-center'> <div className='row my-5 justify-content-center'>
</div> </div>
<div className='row my-5 justify-content-center'> <div className='row my-5 justify-content-center'>
<div className=" col-4 md:col-4"> <div className=" col-6 md:col-6">
<p>Teléfono</p> <i className="pi pi-phone icon-khaki"></i>
<div className="p-0 col-10 md:col-10"> <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"> <div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-phone icon-khaki"></i>
<p>{guarda.phone}</p> <p>{guarda.phone}</p>
</div> </div>
</div> </div>
</div> </div>
<div className=" col-6 md:col-6"> <div className=" col-6 md:col-6">
<p>Correo Electrónico</p> <i className="pi pi-envelope icon-khaki"></i>
<div className="p-0 col-10 md:col-10" style={{ margin: '0 auto' }}>
<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"> <div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-envelope icon-khaki"></i>
<p>{guarda.email}</p> <p>{guarda.email}</p>
</div> </div>
@ -573,93 +609,83 @@ const GuardasSeguridad = () => {
)} )}
</div> </div>
</Dialog> </Dialog>
<Dialog
visible={formGuardDialog}
style={{ width: '750px' }}
header='Mantenimiento de Guarda de Seguridad'
modal
footer={formGuardDialogFooter}
onHide={hideFormGuardDialog}
>
<div className="p-fluid formgrid grid">
<div className="field col-12 md:col-6">
<label htmlFor="name">Nombre</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type="text" id="name" value={guarda.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.name === '' })} />
</div>
{submitted && guarda.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="name">Apellido(s)</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type="text" id="last_name" value={guarda.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.last_name === '' })} />
</div>
{submitted && guarda.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="name">Correo Electrónico</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type='email' id="email" value={guarda.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.email === '' })} />
</div>
{submitted && guarda.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="dni">Identificación</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText id="dni" value={guarda.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.dni === '' })} />
</div>
{submitted && guarda.email === '' && <small className="p-invalid">Identificación es requerida.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="phone">Número de teléfono</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-phone"></i>
</span>
<InputText id="phone" value={guarda.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && guarda.phone === '' })} />
</div>
{submitted
&& guarda.phone === ''
&& <small className="p-invalid">Número de teléfono es requerido.</small>}
</div>
</div>
</div>
</Dialog>
</div> </div>
</div> </div>
<div className="col-12">
<div className="card">
<h5>Registro de un Guarda de Seguridad</h5>
<div className="p-fluid formgrid grid">
<div className="field col-12 md:col-6">
<label htmlFor="name">Nombre</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type="text" id="name" value={guarda.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.name === '' })} />
</div>
{submitted && guarda.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="name">Apellido(s)</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type="text" id="last_name" value={guarda.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.last_name === '' })} />
</div>
{submitted && guarda.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="name">Correo Electrónico</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type='email' id="email" value={guarda.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.email === '' })} />
</div>
{submitted && guarda.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="dni">Identificación</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText id="dni" value={guarda.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.dni === '' })} />
</div>
{submitted && guarda.email === '' && <small className="p-invalid">Identificación es requerida.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="phone">Número de teléfono</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-phone"></i>
</span>
<InputText id="phone" value={guarda.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && guarda.phone === '' })} />
</div>
{submitted
&& guarda.phone === ''
&& <small className="p-invalid">Número de teléfono es requerido.</small>}
</div>
</div>
<div style={{
display: "flex",
justifyContent: "center",
gap: "10px",
width: "100%"
}}>
<Button
label={`${saveButtonTitle}`}
onClick={registrarGuarda}
/>
{saveButtonTitle === 'Actualizar' && (
<Button
label="Cancel"
onClick={cancelEdit}
className="p-button-danger" />)}
</div>
</div>
</div>
</div>
</div> </div>
); );
}; };

360
web-ui/web-react/src/components/Inquilinos.js
View File

@ -51,6 +51,8 @@ const Inquilinos = () => {
const dt = useRef(null) const dt = useRef(null)
const [cookies] = useCookies() const [cookies] = useCookies()
const [changeStatusTenantDialog, setChangeStatusTenantDialog] = useState(false) const [changeStatusTenantDialog, setChangeStatusTenantDialog] = useState(false)
const [tenantDialog, setTenantDialog] = useState(false)
async function tenantsList() { async function tenantsList() {
await fetch( await fetch(
@ -74,7 +76,7 @@ const Inquilinos = () => {
}) })
data = data.filter( data = data.filter(
(val) => val.status != -1, (val) => val.status != -1,
); );
setTenants(data) setTenants(data)
}) })
} }
@ -155,6 +157,8 @@ const Inquilinos = () => {
setTenants(_tenants) setTenants(_tenants)
setTenant(emptyTenant) setTenant(emptyTenant)
setHouseNumber('') setHouseNumber('')
setTenantDialog(false)
}) })
.catch((error) => console.log(`Ocurrió un error: ${error}`)) .catch((error) => console.log(`Ocurrió un error: ${error}`))
} else setSubmitted(true) } else setSubmitted(true)
@ -175,14 +179,14 @@ const Inquilinos = () => {
}).then(() => { }).then(() => {
fetch('http://localhost:4000/community/saveTenant', fetch('http://localhost:4000/community/saveTenant',
{ {
cache: 'no-cache', cache: 'no-cache',
method: 'POST', method: 'POST',
body: JSON.stringify(_tenant), body: JSON.stringify(_tenant),
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
} }
}); });
toast.current.show({ toast.current.show({
severity: 'success', severity: 'success',
@ -193,6 +197,8 @@ const Inquilinos = () => {
tenantsList() tenantsList()
setTenant(emptyTenant) setTenant(emptyTenant)
setHouseNumber('') setHouseNumber('')
setTenantDialog(false)
}) })
} }
} }
@ -352,17 +358,34 @@ const Inquilinos = () => {
const editTenant = (tenant) => { const editTenant = (tenant) => {
setTenant(tenant); setTenant(tenant);
console.log(tenant);
setSaveButtonTitle('Actualizar'); setSaveButtonTitle('Actualizar');
setHouseNumber(tenant.number_house); setHouseNumber(tenant.number_house);
setTenantDialog(true)
} }
const cancelEdit = () => { const cancelEdit = () => {
setTenant(emptyTenant); setTenant(emptyTenant);
setSaveButtonTitle('Registrar'); setSaveButtonTitle('Registrar');
setHouseNumber(''); setHouseNumber('');
setTenantDialog(false)
} }
const openNewTenant = () => {
setTenant(emptyTenant);
setTenantDialog(true)
setSubmitted(false);
};
const hideTenantDialog = () => {
setSubmitted(false);
setTenantDialog(false)
setTenant(emptyTenant);
setSaveButtonTitle('Registrar');
};
const actionsTenant = (rowData) => { const actionsTenant = (rowData) => {
let icono = '' let icono = ''
let text = '' let text = ''
@ -407,6 +430,12 @@ const Inquilinos = () => {
return ( return (
<React.Fragment> <React.Fragment>
<div className='my-2'> <div className='my-2'>
<Button
label="Agregar Inquilino"
icon="pi pi-plus"
className="p-button-primary mr-2"
onClick={openNewTenant}
/>
<Button <Button
label='Eliminar' label='Eliminar'
icon='pi pi-trash' icon='pi pi-trash'
@ -507,6 +536,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 = ( const headerName = (
<> <>
<p> <p>
@ -610,14 +656,14 @@ const Inquilinos = () => {
value={tenants} value={tenants}
dataKey='_id' dataKey='_id'
paginator paginator
rows={5} rows={10}
selection={selectedTentants} selection={selectedTentants}
onSelectionChange={(e) => setSelectedTenants(e.value)} onSelectionChange={(e) => setSelectedTenants(e.value)}
scrollable scrollable
scrollHeight='400px' scrollHeight='800px'
scrollDirection='both' scrollDirection='both'
header={header} header={header}
rowsPerPageOptions={[5, 10, 25]} rowsPerPageOptions={[10, 20, 30]}
className='datatable-responsive mt-3' className='datatable-responsive mt-3'
paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown' paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown'
currentPageReportTemplate='Mostrando {first} a {last} de {totalRecords} inquilinos' currentPageReportTemplate='Mostrando {first} a {last} de {totalRecords} inquilinos'
@ -673,16 +719,7 @@ const Inquilinos = () => {
wordBreak: 'break-word', wordBreak: 'break-word',
}} }}
></Column> ></Column>
<Column
field='phone'
header={headerPhone}
style={{
flexGrow: 1,
flexBasis: '80px',
minWidth: '80px',
wordBreak: 'break-word',
}}
></Column>
<Column <Column
field='number_house' field='number_house'
sortable sortable
@ -707,7 +744,7 @@ const Inquilinos = () => {
wordBreak: 'break-word', wordBreak: 'break-word',
}} }}
></Column> ></Column>
<Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsTenant}></Column> <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsTenant}></Column>
</DataTable> </DataTable>
<Dialog <Dialog
visible={infoDialogVisible} visible={infoDialogVisible}
@ -780,23 +817,155 @@ const Inquilinos = () => {
</Dialog> </Dialog>
<Dialog <Dialog
visible={deleteTenantDialog} visible={infoDialogVisible}
style={{ width: '450px' }} style={{ width: '650px' }}
header='Confirmar' header="Información del Inquilino"
modal modal
footer={deleteTenantDialogFooter} className="p-fluid"
onHide={hideDeleteTenantDialog} 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={tenantDialog}
style={{ width: '750px' }}
header='Mantenimiento de inquilino'
modal
footer={tenantDialogFooter}
onHide={hideTenantDialog}
> >
<div className='flex align-items-center justify-content-center'> <div className="p-fluid formgrid grid">
<i <div className="field col-12 md:col-6">
className='pi pi-exclamation-triangle mr-3' <label htmlFor="name">Nombre</label>
style={{ fontSize: '2rem' }} <div className="p-0 col-12 md:col-12">
/> <div className="p-inputgroup">
{tenant && ( <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span> <i className="pi pi-home"></i>
¿Estás seguro que desea eliminar a <b>{tenant.name}</b>? </span>
</span> <InputText type="text" id="name" value={tenant.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.name === '' })} />
)} </div>
{submitted && tenant.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="name">Apellido(s)</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type="text" id="last_name" value={tenant.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.last_name === '' })} />
</div>
{submitted && tenant.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="name">Correo Electrónico</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type='email' id="email" value={tenant.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.email === '' })} />
</div>
{submitted && tenant.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="dni">Identificación</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText id="dni" value={tenant.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.dni === '' })} />
</div>
{submitted && tenant.dni === '' && <small className="p-invalid">Identificación es requerida.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="phone">Número de teléfono</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-phone"></i>
</span>
<InputText id="phone" value={tenant.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && tenant.phone === '' })} />
</div>
{submitted
&& tenant.phone === ''
&& <small className="p-invalid">Número de teléfono es requerido.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="number_house">Casa a asignar: </label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<Dropdown
placeholder="--Seleccione la Casa a Asignar--"
id="number_house"
value={houseNumber}
options={housesList}
onChange={handleHouses}
required autoFocus
className={
classNames({ 'p-invalid': submitted && !houseNumber })}
/>
</div>
{submitted
&& !houseNumber
&& <small className="p-invalid">Casa es requerida.</small>}
</div>
</div>
</div> </div>
</Dialog> </Dialog>
<Dialog <Dialog
@ -838,116 +1007,9 @@ const Inquilinos = () => {
</div> </div>
</Dialog> </Dialog>
</div> </div>
</div> </div >
<div className="col-12">
<div className="card"> </div >
<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>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type="text" id="name" value={tenant.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.name === '' })} />
</div>
{submitted && tenant.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="name">Apellido(s)</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type="text" id="last_name" value={tenant.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.last_name === '' })} />
</div>
{submitted && tenant.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="name">Correo Electrónico</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText type='email' id="email" value={tenant.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.email === '' })} />
</div>
{submitted && tenant.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="dni">Identificación</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText id="dni" value={tenant.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.dni === '' })} />
</div>
{submitted && tenant.dni === '' && <small className="p-invalid">Identificación es requerida.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="phone">Número de teléfono</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-phone"></i>
</span>
<InputText id="phone" value={tenant.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && tenant.phone === '' })} />
</div>
{submitted
&& tenant.phone === ''
&& <small className="p-invalid">Número de teléfono es requerido.</small>}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="number_house">Casa a asignar: </label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<Dropdown
placeholder="--Seleccione la Casa a Asignar--"
id="number_house"
value={houseNumber}
options={housesList}
onChange={handleHouses}
required autoFocus
className={
classNames({ 'p-invalid': submitted && !houseNumber })}
/>
</div>
{submitted
&& !houseNumber
&& <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}
/>
{saveButtonTitle === 'Actualizar' && (
<Button
label="Cancelar"
onClick={cancelEdit}
className="p-button-danger" />)}
</div>
</div>
</div>
</div>
</div>
) )
} }

10
web-ui/web-react/src/components/InvitadosComunidad.js
View File

@ -171,41 +171,35 @@ const InvitadosComunidad = () => {
globalFilter={globalFilter} globalFilter={globalFilter}
emptyMessageTemplate="No se encontraron invitados" emptyMessageTemplate="No se encontraron invitados"
> >
<Column field="name" header="Nombre" sortable header={headerName} /> <Column field="name" sortable header={headerName} />
<Column <Column
field="last_name" field="last_name"
header="Apellido"
sortable sortable
header={headerLastName} header={headerLastName}
/> />
<Column field="dni" header="DNI" sortable header={headerDNI} /> <Column field="dni" sortable header={headerDNI} />
<Column <Column
field="number_plate" field="number_plate"
header="Placa"
sortable sortable
header={headerPlate} header={headerPlate}
/> />
<Column <Column
field="telefono" field="telefono"
header="Teléfono"
sortable sortable
header={headerPhone} header={headerPhone}
/> />
<Column <Column
field="email" field="email"
header="Email"
sortable sortable
header={headerEmail} header={headerEmail}
/> />
<Column <Column
field="date_entry" field="date_entry"
header="Fecha de registro"
sortable sortable
header={headerName} header={headerName}
/> />
<Column <Column
field="tenant_name" field="tenant_name"
header="Inquilino"
sortable sortable
header={headerTenant} header={headerTenant}
/> />

77
web-ui/web-react/src/components/RegistroComunicado.js
View File

@ -37,6 +37,9 @@ const RegistroComunicado = () => {
const dt = useRef(null); const dt = useRef(null);
const [cookies, setCookie] = useCookies(); const [cookies, setCookie] = useCookies();
const [globalFilter, setGlobalFilter] = useState(null); const [globalFilter, setGlobalFilter] = useState(null);
const [postDialog, setPostDialog] = useState(false);
async function listaComunis() { async function listaComunis() {
let comunicadosResponse = await fetch('http://localhost:4000/post/allPosts', { method: 'GET' }); let comunicadosResponse = await fetch('http://localhost:4000/post/allPosts', { method: 'GET' });
@ -127,6 +130,12 @@ const RegistroComunicado = () => {
return ( return (
<React.Fragment> <React.Fragment>
<div className="my-2"> <div className="my-2">
<Button
label="Agregar Comunicado"
icon="pi pi-plus"
className="p-button-primary mr-2"
onClick={openNewPost}
/>
<Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" /> <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" />
</div> </div>
</React.Fragment> </React.Fragment>
@ -145,6 +154,8 @@ const RegistroComunicado = () => {
setComunicado(rowData); setComunicado(rowData);
setComunicadoId(rowData._id); setComunicadoId(rowData._id);
setSaveButtonLabel('Actualizar'); setSaveButtonLabel('Actualizar');
setPostDialog(true)
} }
const cancelEdit = () => { const cancelEdit = () => {
@ -177,6 +188,20 @@ const RegistroComunicado = () => {
setShowDeleteDialog(true); setShowDeleteDialog(true);
} }
const openNewPost = () => {
setComunicado(emptyComunicado);
setPostDialog(true)
setSubmitted(false);
};
const hidePostDialog = () => {
setSubmitted(false);
setPostDialog(false)
setComunicado(emptyComunicado);
setSaveButtonLabel('Registrar');
}
const deleteDialogFooter = ( const deleteDialogFooter = (
<> <>
<Button label="Cancelar" icon="pi pi-times" className="p-button-secondary" onClick={() => setShowDeleteDialog(false)} /> <Button label="Cancelar" icon="pi pi-times" className="p-button-secondary" onClick={() => setShowDeleteDialog(false)} />
@ -184,6 +209,23 @@ const RegistroComunicado = () => {
</> </>
); );
const postDialogFooter = (
<>
<Button
label={`${saveButtonLabel}`}
icon="pi pi-check"
className="p-button-primary"
onClick={saveComunicado}
/>
<Button
label="Cerrar"
icon="pi pi-times"
className="p-button-text"
onClick={hidePostDialog}
/>
</>
);
const deleteComunicado = () => { const deleteComunicado = () => {
fetch(`http://localhost:4000/post/deletePost/${comunicado._id}`, { fetch(`http://localhost:4000/post/deletePost/${comunicado._id}`, {
cache: 'no-cache', cache: 'no-cache',
@ -235,12 +277,15 @@ const RegistroComunicado = () => {
}} }}
body={actions} /> body={actions} />
</DataTable> </DataTable>
</div> <Dialog
</div> visible={postDialog}
<div className="col-12"> style={{ width: '650px' }}
<div className="card"> header="Mantenimiento del Comunicado"
<h5>Registro de un comunicado para la comunidad</h5> modal
<div className="p-fluid formgrid grid"> className="p-fluid"
footer={postDialogFooter}
onHide={hidePostDialog}>
<div className="p-fluid formgrid grid">
<div className="field col-12 md:col-12"> <div className="field col-12 md:col-12">
<label htmlFor="name">Contenido del comunicado</label> <label htmlFor="name">Contenido del comunicado</label>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
@ -261,25 +306,13 @@ const RegistroComunicado = () => {
</div> </div>
</div> </div>
</div> </div>
<div style={{
display: "flex",
justifyContent: "center",
gap: "10px",
width: "100%"
}}>
<Button
label={`${saveButtonLabel}`}
onClick={saveComunicado}
/>
{saveButtonLabel === 'Actualizar' && (
<Button
label="Cancelar"
onClick={cancelEdit}
className="p-button-danger" />)}
</div>
</div> </div>
</Dialog>
</div> </div>
</div> </div>
</div> </div>
); );
}; };