admin de comunidad

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

@@ -50,6 +50,7 @@ const AdministradoresComunidad = () => {
 
     const [changeStatusAdminCommunityDialog, setChangeStatusAdminCommunityDialog] = useState(false);
     const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar");
+    const [adminDialog, setAdminDialog] = useState(false);
 
 
     async function listaAdmin() {
@@ -356,6 +357,8 @@ const AdministradoresComunidad = () => {
         setAdminCommunity(admin);
         setSaveButtonTitle('Actualizar');
         setCommunityId(admin.community_id)
+        setAdminDialog(true)
+
     }
 
 
@@ -365,6 +368,20 @@ const AdministradoresComunidad = () => {
         setCommunityId('');
     }
 
+    const openNewAdmin = () => {
+        setAdminCommunity(emptyAdminCommunity);
+        setAdminDialog(true)
+        setSubmitted(false);
+    };
+
+    const hideAdminDialog = () => {
+        setSubmitted(false);
+        setAdminDialog(false)
+        setAdminCommunity(emptyAdminCommunity);
+        setSaveButtonTitle('Registrar');
+
+    };
+
     const actionsAdminCommunity = (rowData) => {
         let icono = '';
         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 = () => {
         return (
             <React.Fragment>
                 <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} />
                 </div>
             </React.Fragment>
@@ -562,9 +602,9 @@ const AdministradoresComunidad = () => {
                 <Toast ref={toast} />
                 <div className="card">
                     <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"
                         currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} administradores de comunidades de viviendas"
                         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="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 style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsAdminCommunity}></Column>
+                        <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsAdminCommunity}></Column>
                     </DataTable>
                     <Dialog visible={deleteAdminCommunityDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminCommunityDialogFooter} onHide={hideDeleteAdminCommunityDialog}>
                         <div className="flex align-items-center justify-content-center">
@@ -611,11 +651,16 @@ const AdministradoresComunidad = () => {
                             )}
                         </div>
                     </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
+                        className="p-fluid"
+                        footer={adminDialogFooter}
+                        onHide={hideAdminDialog}
+                    >
+                        {adminCommunity && (
                             <div className="p-fluid formgrid grid">
                                 <div className="field col-12 md:col-6">
                                     <label htmlFor="name">Nombre</label>
@@ -650,8 +695,10 @@ const AdministradoresComunidad = () => {
                                             </span>
                                             <InputText id="email" value={adminCommunity.email}
                                                 onChange={(e) => onInputChange(e, 'email')} required autoFocus
-                                    className={classNames({ 'p-invalid': submitted && 
+                                                className={classNames({
-                                    (adminCommunity.email === '' || findRepeated('email', adminCommunity.email) > 0) })} />
+                                                    'p-invalid': submitted &&
+                                                        (adminCommunity.email === '' || findRepeated('email', adminCommunity.email) > 0)
+                                                })} />
                                         </div>
                                         {submitted && adminCommunity.email === '' && <small className="p-invalid">Correo electrónico
                                             es requirido.</small>}
@@ -669,8 +716,10 @@ const AdministradoresComunidad = () => {
                                             </span>
                                             <InputText id="dni" value={adminCommunity.dni}
                                                 onChange={(e) => onInputChange(e, 'dni')} required autoFocus
-                                    className={classNames({ 'p-invalid': submitted 
+                                                className={classNames({
-                                    && (adminCommunity.dni === '' || findRepeated('dni', adminCommunity.dni) > 0)})} />
+                                                    'p-invalid': submitted
+                                                        && (adminCommunity.dni === '' || findRepeated('dni', adminCommunity.dni) > 0)
+                                                })} />
                                         </div>
                                         {submitted && adminCommunity.dni === '' && <small className="p-invalid">Identificación es requirida.</small>}
                                         {submitted && findRepeated('dni', adminCommunity.dni) > 0 &&
@@ -703,24 +752,11 @@ const AdministradoresComunidad = () => {
                                         {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>
+                        )}
+                    </Dialog>
                 </div>
             </div>
         </div>