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

admin de comunidad

This commit is contained in:
Mariela 2022-09-01 02:42:07 -06:00
parent f440b7e181
commit 065456200b
1 changed files with 143 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
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() {
@ -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>