Merge pull request #185 from DeimosPr4/45-us-46-modificar-guarda-de-seguridad

45 us 46 modificar guarda de seguridad

api-gateway/src/app.controller.ts

@@ -82,6 +82,35 @@ export class AppController {
     );
   }
 
+  @Put('user/updateGuard/:id')
+  updateGuard(
+    @Param('id') id: string,
+    @Body('dni') dni: string,
+    @Body('name') name: string,
+    @Body('last_name') last_name: string,
+    @Body('email') email: string,
+    @Body('phone') phone: number,
+    @Body('password') password: string,
+    @Body('user_type') user_type: string,
+    @Body('status') status: string,
+    @Body('date_entry') date_entry: Date,
+    @Body('community_id') community_id: string,
+  ) {
+    return this.appService.updateGuard(
+      id,
+      dni,
+      name,
+      last_name,
+      email,
+      phone,
+      password,
+      user_type,
+      status,
+      date_entry,
+      community_id,
+    );
+  }
+
   @Put('user/updateUser/:id')
   updateUser(
     @Param('id') id: string,

api-gateway/src/app.service.ts

@@ -89,6 +89,38 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+  updateGuard(
+    _id: string,
+    dni: string,
+    name: string,
+    last_name: string,
+    email: string,
+    phone: number,
+    password: string,
+    user_type: string,
+    status: string,
+    date_entry: Date,
+    community_id: string,
+  ) {
+    const pattern = { cmd: 'updateGuard' };
+    const payload = {
+      id: _id,
+      dni: dni,
+      name: name,
+      last_name: last_name,
+      email: email,
+      phone: phone,
+      password: password,
+      user_type: user_type,
+      status: status,
+      date_entry: date_entry,
+      community_id: community_id,
+    };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
   //POST parameter from API
   createAdminSystem(dni: string, name: string, last_name: string, email: string, phone: number
     , user_type: string, status: string, date_entry: Date) {

devshell.toml

@@ -6,3 +6,8 @@ help = "Per project developer environments"
 [[commands]]
 package = "nodejs"
 help = "Node.js"
+
+[[commands]]
+package = "nodePackages.expo-cli"
+help = "Expo CLI"
+

servicio-usuarios/src/users/users.controller.ts

@@ -69,6 +69,11 @@ export class UsersController {
     return this.userService.update(user.id, user);
   }
 
+  @MessagePattern({ cmd: 'updateGuard' })
+  updateGuard(@Payload() guard: UserDocument) {
+    return this.userService.update(guard.id, guard);
+  }
+
   @MessagePattern({ cmd: 'removeUser' })
   remove(@Payload() id: string) {
     let dni = id['dni'];

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

@@ -13,6 +13,7 @@ import { faAt } from '@fortawesome/free-solid-svg-icons';
 import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
 import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
 import { useCookies } from "react-cookie";
+import classNames from 'classnames';
 
 const GuardasSeguridad = () => {
 
@@ -27,9 +28,10 @@ const GuardasSeguridad = () => {
     user_type: '1',
     status: '1',
     status_text: '',
+    date_entry: Date.now(),
+    community_id: '',
   };
 
-
   const [listaGuardas, setListaGuardas] = useState([]);
   const [urlFetch, setUrlFetch] = useState('http://localhost:4000/user/findGuards/');
   const [guarda, setGuarda] = useState(emptyGuarda);
@@ -37,12 +39,11 @@ const GuardasSeguridad = () => {
   const [globalFilter, setGlobalFilter] = useState(null);
   const [deleteGuardaDialog, setDeleteGuardaDialog] = useState(false);
   const [deleteGuardasDialog, setDeleteGuardasDialog] = useState(false);
+  const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar");
   const toast = useRef(null);
   const dt = useRef(null);
-
   const [cookies, setCookie] = useCookies();
   const [changeStatusGuardDialog, setChangeStatusGuardDialog] = useState(false);
-
   const [guardDialog, setGuardDialog] = useState(false);
   const [submitted, setSubmitted] = useState(false);
 
@@ -69,27 +70,18 @@ const GuardasSeguridad = () => {
 
   function registrarGuarda() {
     var data = {
-            dni: document.getElementById('identificacion').value,
-            name: document.getElementById('nombre').value,
-            last_name: document.getElementById('apellidos').value,
-            email: document.getElementById('correo_electronico').value,
-            phone: document.getElementById('telefono').value,
-            password: document.getElementById('correo_electronico').value,
+      dni: document.getElementById('dni').value,
+      name: document.getElementById('name').value,
+      last_name: document.getElementById('last_name').value,
+      email: document.getElementById('email').value,
+      phone: document.getElementById('phone').value,
+      password: document.getElementById('email').value,
       user_type: "4", //4 es guarda
       status: "1",
+      date_entry: Date.now(),
       community_id: cookies.community_id
     };
-        var data2 = {
-            dni: "11979037",
-            name: "Jorge",
-            last_name: "Soto",
-            email: "jorgesoto@gmail.com",
-            phone: 84664515,
-            password: "1203",
-            user_type: "2",
-            status: "1",
-            community_id: "62be68215692582bbfd77134"
-        }
+    if (guarda._id === null) {
       console.log('ssss');
       fetch('http://localhost:4000/user/createGuard', {
         cache: 'no-cache',
@@ -99,23 +91,41 @@ const GuardasSeguridad = () => {
         headers: {
           'Content-Type': 'application/json'
         }
-        })
-            .then(
-                function (response) {
+      }).then((response) => {
         if (response.status != 201)
-                        console.log('Ocurrió un error con el servicio: ' + response.status);
+          console.log(`Ocurrió un error con el servicio: ${response.status}`);
         else
           return response.json();
-                }
-            )
-            .then(
-                function (response) {
+      }).then(() => {
         listaGuardasF();
-                }
-            )
-            .catch(
+      }).catch(
         err => console.log('Ocurrió un error con el fetch', err)
       );
+    } else {
+      data._id = guarda._id;
+      console.log(`Actualizando guarda: ${data}`);
+      fetch(`http://localhost:4000/user/updateGuard/${guarda._id}`, {
+        cache: 'no-cache',
+        method: 'PUT',
+        body: JSON.stringify(data),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }).then((response) => {
+        if (response.status !== 200)
+          console.log(`Ocurrió un error con el servicio: ${response.status}`);
+        else return response.json();
+      }).then(() => {
+        toast.current.show({
+          severity: 'success',
+          summary: 'Guarda actualizada',
+          detail: 'Guarda actualizado correctamente'
+        });
+        setGuarda(emptyGuarda);
+        listaGuardasF();
+      })
+    }
+    setSaveButtonTitle("Registrar");
   }
 
   const cambiarStatusUser = () => {
@@ -138,17 +148,12 @@ const GuardasSeguridad = () => {
       headers: {
         'Content-Type': 'application/json'
       }
-        })
-            .then(
-                function (response) {
+    }).then((response) => {
       if (response.status != 201)
-                        console.log('Ocurrió un error con el servicio: ' + response.status);
+        console.log(`Ocurrió un error con el servicio: ${response.status}`);
       else
         return response.json();
-                }
-            )
-            .then(
-                function (response) {
+    }).then(() => {
       setChangeStatusGuardDialog(false);
       toast.current.show({
         severity: 'success',
@@ -156,46 +161,34 @@ const GuardasSeguridad = () => {
         detail: 'Guarda de Seguridad Actualizado',
         life: 3000,
       });
-                }
-            )
-            .catch(
+    }).catch(
       err => console.log('Ocurrió un error con el fetch', err)
     );
   }
 
 
   const deleteGuarda = () => {
-
-        fetch('http://localhost:4000/user/deleteAdminSystem/' + guarda._id, {
+    fetch(`http://localhost:4000/user/deleteAdminSystem/${guarda._id}`, {
       cache: 'no-cache',
       method: 'DELETE',
       headers: {
         'Content-Type': 'application/json'
       }
-        })
-            .then(
-                function (response) {
+    }).then((response) => {
       if (response.status != 201)
-                        console.log('Ocurrió un error con el servicio: ' + response.status);
+        console.log(`Ocurrió un error con el servicio: ${response.status}`);
       else
         return response.json();
-                }
-            )
-            .then(
-                function (response) {
+    }).then(function() {
       let _guarda = listaGuardas.filter(val => val._id !== guarda._id);
       setListaGuardas(_guarda);
       setDeleteGuardaDialog(false);
       setGuarda(emptyGuarda);
       toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Administrador del Sistema Eliminado', life: 3000 });
-                }
-            )
-            .catch(
-                err => {
+    }).catch(err => {
       console.log('Ocurrió un error con el fetch', err)
       toast.current.show({ severity: 'danger', summary: 'Error', detail: 'Administrador del Sistema no se pudo Eliminar', life: 3000 });
-                }
-            );
+    });
   }
 
   const deleteSelectedGuardas = () => {
@@ -212,7 +205,12 @@ const GuardasSeguridad = () => {
     setListaGuardas(_guardas);
     setDeleteGuardasDialog(false);
     setSelectedGuardas(null);
-        toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Administradores del Sistema Eliminados', life: 3000 });
+    toast.current.show({
+      severity: 'success',
+      summary: 'Éxito',
+      detail: 'Administradores del Sistema Eliminados',
+      life: 3000
+    });
   }
 
   const hideDeleteGuardaDialog = () => {
@@ -251,6 +249,16 @@ const GuardasSeguridad = () => {
     setGuardDialog(true);
   };
 
+  const editGuard = (guard) => {
+    setGuarda(guard);
+    console.log(guard);
+    setSaveButtonTitle("Actualizar");
+  }
+
+  const cancelEdit = () => {
+    setGuarda(emptyGuarda);
+    setSaveButtonTitle("Registrar");
+  }
 
   const actionsGuard = (rowData) => {
     let icono = '';
@@ -261,10 +269,15 @@ const GuardasSeguridad = () => {
     } else if (rowData.status == '1') {
       icono = "pi pi-eye-slash";
       text = "Inactivar Guarda de Seguridad"
-
     }
     return (
       <div className="actions">
+        <Button
+          icon="pi pi-pencil"
+          className="p-button-rounded p-button-success mt-2 mx-2"
+          onClick={() => editGuard(rowData)}
+          title="Editar"
+        />
         <Button
           icon="pi pi-exclamation-circle"
           className="p-button-rounded p-button-info mt-2 mx-2"
@@ -356,7 +369,6 @@ const GuardasSeguridad = () => {
         className="p-button-text"
         onClick={hideGuardDialog}
       />
-
     </>
   );
 
@@ -427,6 +439,13 @@ const GuardasSeguridad = () => {
     );
   };
 
+  const onInputChange = (e, name) => {
+    const value = (e.target && e.target.value) || ''
+    let _guarda = { ...guarda }
+    _guarda[`${name}`] = value
+    setGuarda(_guarda)
+  }
+
   return (
     <div className="grid">
       <div className="col-12">
@@ -496,9 +515,6 @@ const GuardasSeguridad = () => {
                 </div>
               </div>
               <div className='row my-5 justify-content-center'>
-                                
-
-
               </div>
               <div className='row my-5 justify-content-center'>
                 <div className=" col-4 md:col-4">
@@ -561,29 +577,86 @@ const GuardasSeguridad = () => {
       </div>
       <div className="col-12">
         <div className="card">
-                    <h5>Registro de un guarda de seguridad</h5>
+          <h5>Registro de un Guarda de Seguridad</h5>
           <div className="p-fluid formgrid grid">
             <div className="field col-12 md:col-6">
-                            <label htmlFor="nombre">Nombre</label>
-                            <InputText id="nombre" type="text" />
+              <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="apellidos">Apellido(s)</label>
-                            <InputText id="apellidos" type="text" />
+              <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="correo_electronico">Correo electrónico</label>
-                            <InputText id="correo_electronico" type="email" />
+              <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="identificacion">Identificación</label>
-                            <InputText id="identificacion" type="text" />
+              <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>
-                        <div className="field col-12">
-                            <label htmlFor="telefono">Teléfono</label>
-                            <InputText id="telefono" type="tel" rows="4" />
+                {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>
-                        <Button label="Registrar" onClick={registrarGuarda}></Button>
           </div>
         </div>
       </div>

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

@@ -47,7 +47,6 @@ const Inquilinos = () => {
   const [housesList, setHousesList] = useState([])
   const [submitted, setSubmitted] = useState(false)
   const [infoDialogVisible, setShowInfoDialog] = useState(false)
-  const [cancelSaveButtonVisible, setCancelSaveButtonVisible] = useState(false)
   const toast = useRef(null)
   const dt = useRef(null)
   const [cookies] = useCookies()
@@ -279,7 +278,6 @@ const Inquilinos = () => {
   const cancelEdit = () => {
     setTenant(emptyTenant);
     setSaveButtonTitle('Registrar');
-    setCancelSaveButtonVisible(false);
     setHouseNumber('');
   }
 
@@ -761,7 +759,7 @@ const Inquilinos = () => {
       </div>
       <div className="col-12">
         <div className="card">
-          <h5>Registro de un administrador de una comunidad de viviendas</h5>
+          <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>