agregar dialogo para ver informacion admin del inquilino

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

@@ -30,6 +30,8 @@ const AdministradoresSistema = () => {
   const [changeStatusAdminSystemDialog, setChangeStatusAdminSystemDialog] = useState(false);
   const [changeStatusAdminsSystemDialog, setChangeStatusAdminsSystemDialog] =
     useState(false);
+  const [adminDialog, setAdminDialog] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
 
   let emptySysAdmin = {
     _id: null,
@@ -177,6 +179,19 @@ const AdministradoresSistema = () => {
     setChangeStatusAdminSystemDialog(true);
   };
 
+  const hideAdminDialog = () => {
+    setSubmitted(false);
+    setAdminDialog(false);
+    setSysAdmin(emptySysAdmin);
+
+  };
+
+  const infoAdmin = (sysadmin) => {
+    setSysAdmin({ ...sysadmin });
+    setAdminDialog(true);
+  };
+
+
   const deleteSysAdmin = () => {
     fetch('http://localhost:4000/user/deleteAdminSystem/' + sysadmin._id, {
       cache: 'no-cache',
@@ -259,6 +274,13 @@ const AdministradoresSistema = () => {
 
     return (
       <div className="actions">
+        <Button
+          icon="pi pi-exclamation-circle"
+          className="p-button-rounded p-button-info mt-2 mx-2"
+          onClick={() => infoAdmin(rowData)}
+          title="Ver información del Administrador"
+
+        />
         <Button
           icon={`${icono}`}
           className="p-button-rounded p-button-warning mt-2 mx-2"
@@ -370,6 +392,18 @@ const AdministradoresSistema = () => {
     </>
   );
 
+  const adminDialogFooter = (
+    <>
+      <Button
+        label="Cerrar"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideAdminDialog}
+      />
+
+    </>
+  );
+
   const headerName = (
     <>
       <p>
@@ -541,6 +575,84 @@ const AdministradoresSistema = () => {
               body={actionsAdmin}
             ></Column>
           </DataTable>
+          <Dialog
+            visible={adminDialog}
+            style={{ width: '650px' }}
+            header="Información del Admin del Sistema"
+            modal
+            className="p-fluid"
+            footer={adminDialogFooter}
+            onHide={hideAdminDialog}
+          >
+            {sysadmin && (
+            <div className='container text-center'>
+              <div className='row my-4'>
+              <div className=" col-12 md:col-12">
+                  <h3>Información Básica</h3>
+                </div>
+                <div className=" col-6 md:col-6">
+                <i className="pi pi-user icon-khaki"></i>
+                  <p><strong>Nombre</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>{sysadmin.name}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className=" col-6 md:col-6">
+                <i className="pi pi-user icon-khaki"></i>
+                  <p><strong>Apellido(s)</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>{sysadmin.last_name}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='row my-5'>
+                <div className=" col-12 md:col-12">
+                <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">
+                      <p>{sysadmin.dni}</p>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+
+              <div className='row my-5'>
+                <div className=" col-12 md:col-12">
+                  <h3>Contacto</h3>
+                </div>
+                <div className=" col-6 col-md-6 md:col-6">
+                <i className="pi pi-at icon-khaki"></i>
+                  <p><strong>Correo electrónico</strong></p>
+                  <div className="p-0 col-12 md:col-12">
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <p>{sysadmin.email}</p>
+                    </div>
+
+                  </div>
+                </div>
+                <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>{sysadmin.phone}</p>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            </div>
+            )}
+          </Dialog>
+
           <Dialog
             visible={deleteAdminSystemDialog}
             style={{ width: '450px' }}
@@ -602,6 +714,7 @@ const AdministradoresSistema = () => {
               )}
             </div>
           </Dialog>
+         
         </div>
       </div>
       <div className="col-12">