iniciar proceso de editar guarda

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

@@ -27,6 +27,7 @@ const GuardasSeguridad = () => {
         user_type: '1',
         status: '1',
         status_text: '',
+        community_id: '',
     };
 
 
@@ -37,6 +38,7 @@ 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);
 
@@ -240,6 +242,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 = '';
@@ -254,6 +266,12 @@ const GuardasSeguridad = () => {
         }
         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"
@@ -554,25 +572,40 @@ const GuardasSeguridad = () => {
                     <div className="p-fluid formgrid grid">
                         <div className="field col-12 md:col-6">
                             <label htmlFor="nombre">Nombre</label>
-                            <InputText id="nombre" type="text" />
+                            <InputText id="nombre" value={guarda.name} type="text" />
                         </div>
                         <div className="field col-12 md:col-6">
                             <label htmlFor="apellidos">Apellido(s)</label>
-                            <InputText id="apellidos" type="text" />
+                            <InputText id="apellidos" value={guarda.last_name} type="text" />
                         </div>
                         <div className="field col-12 md:col-6">
                             <label htmlFor="correo_electronico">Correo electrónico</label>
-                            <InputText id="correo_electronico" type="email" />
+                            <InputText id="correo_electronico" value={guarda.email} type="email" />
                         </div>
                         <div className="field col-12 md:col-6">
                             <label htmlFor="identificacion">Identificación</label>
-                            <InputText id="identificacion" type="text" />
+                            <InputText id="identificacion" value={guarda.dni} type="text" />
                         </div>
                         <div className="field col-12">
                             <label htmlFor="telefono">Teléfono</label>
-                            <InputText id="telefono" type="tel" rows="4" />
+                            <InputText id="telefono" value={guarda.phone} type="tel" rows="4" />
+                        </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>