informacion guardas de seguridad
This commit is contained in:
parent
52cdf9f899
commit
33d1a328a5
|
@ -46,6 +46,7 @@ const GuardasSeguridad = () => {
|
||||||
const [changeStatusGuardDialog, setChangeStatusGuardDialog] = useState(false);
|
const [changeStatusGuardDialog, setChangeStatusGuardDialog] = useState(false);
|
||||||
const [guardDialog, setGuardDialog] = useState(false);
|
const [guardDialog, setGuardDialog] = useState(false);
|
||||||
const [submitted, setSubmitted] = useState(false);
|
const [submitted, setSubmitted] = useState(false);
|
||||||
|
const [formGuardDialog, setFormGuardDialog] = useState(false);
|
||||||
|
|
||||||
|
|
||||||
async function listaGuardasF() {
|
async function listaGuardasF() {
|
||||||
|
@ -179,7 +180,7 @@ const GuardasSeguridad = () => {
|
||||||
console.log(`Ocurrió un error con el servicio: ${response.status}`);
|
console.log(`Ocurrió un error con el servicio: ${response.status}`);
|
||||||
else
|
else
|
||||||
return response.json();
|
return response.json();
|
||||||
}).then(function() {
|
}).then(function () {
|
||||||
let _guarda = listaGuardas.filter(val => val._id !== guarda._id);
|
let _guarda = listaGuardas.filter(val => val._id !== guarda._id);
|
||||||
setListaGuardas(_guarda);
|
setListaGuardas(_guarda);
|
||||||
setDeleteGuardaDialog(false);
|
setDeleteGuardaDialog(false);
|
||||||
|
@ -251,13 +252,29 @@ const GuardasSeguridad = () => {
|
||||||
|
|
||||||
const editGuard = (guard) => {
|
const editGuard = (guard) => {
|
||||||
setGuarda(guard);
|
setGuarda(guard);
|
||||||
console.log(guard);
|
setFormGuardDialog(true)
|
||||||
setSaveButtonTitle("Actualizar");
|
setSaveButtonTitle("Actualizar");
|
||||||
}
|
}
|
||||||
|
|
||||||
const cancelEdit = () => {
|
const cancelEdit = () => {
|
||||||
setGuarda(emptyGuarda);
|
setGuarda(emptyGuarda);
|
||||||
setSaveButtonTitle("Registrar");
|
setSaveButtonTitle("Registrar");
|
||||||
|
setFormGuardDialog(false)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const openNewGuard = () => {
|
||||||
|
setGuarda(emptyGuarda);
|
||||||
|
setFormGuardDialog(true)
|
||||||
|
setSubmitted(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hideFormGuardDialog = () => {
|
||||||
|
setSubmitted(false);
|
||||||
|
setFormGuardDialog(false)
|
||||||
|
setGuarda(emptyGuarda);
|
||||||
|
setSaveButtonTitle('Registrar');
|
||||||
}
|
}
|
||||||
|
|
||||||
const actionsGuard = (rowData) => {
|
const actionsGuard = (rowData) => {
|
||||||
|
@ -300,6 +317,12 @@ const GuardasSeguridad = () => {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div className="my-2">
|
<div className="my-2">
|
||||||
|
<Button
|
||||||
|
label="Agregar Guarda"
|
||||||
|
icon="pi pi-plus"
|
||||||
|
className="p-button-primary mr-2"
|
||||||
|
onClick={openNewGuard}
|
||||||
|
/>
|
||||||
<Button label="Eliminar"
|
<Button label="Eliminar"
|
||||||
icon="pi pi-trash"
|
icon="pi pi-trash"
|
||||||
className="p-button-danger"
|
className="p-button-danger"
|
||||||
|
@ -372,6 +395,22 @@ const GuardasSeguridad = () => {
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const formGuardDialogFooter = (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
label={`${saveButtonTitle}`}
|
||||||
|
icon="pi pi-check"
|
||||||
|
className="p-button-primary"
|
||||||
|
onClick={registrarGuarda}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
label="Cerrar"
|
||||||
|
icon="pi pi-times"
|
||||||
|
className="p-button-text"
|
||||||
|
onClick={hideFormGuardDialog}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
const headerName = (
|
const headerName = (
|
||||||
<>
|
<>
|
||||||
|
@ -472,7 +511,7 @@ const GuardasSeguridad = () => {
|
||||||
body={statusBodyTemplate}
|
body={statusBodyTemplate}
|
||||||
style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
|
style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
|
||||||
</Column>
|
</Column>
|
||||||
<Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsGuard}></Column>
|
<Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsGuard}></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
<Dialog
|
<Dialog
|
||||||
visible={guardDialog}
|
visible={guardDialog}
|
||||||
|
@ -484,30 +523,22 @@ const GuardasSeguridad = () => {
|
||||||
onHide={hideGuardDialog}>
|
onHide={hideGuardDialog}>
|
||||||
<div className='container text-center'>
|
<div className='container text-center'>
|
||||||
<div className='row my-4'>
|
<div className='row my-4'>
|
||||||
<div className=" col-4 md:col-4">
|
<div className=" col-6 md:col-6">
|
||||||
<p>Nombre</p>
|
|
||||||
<div className="p-0 col-2 md:col-2" style={{ margin: '0 auto' }}>
|
|
||||||
<div className="p-inputgroup align-items-center justify-content-evenly">
|
|
||||||
<i className="pi pi-user icon-khaki"></i>
|
<i className="pi pi-user icon-khaki"></i>
|
||||||
<p>{guarda.name}</p>
|
<p><strong>Nombre Completo</strong></p>
|
||||||
</div>
|
<div className="p-0 col-12 md:col-12" style={{ margin: '0 auto' }}>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className=" col-4 md:col-4">
|
|
||||||
<p>Apellido(s)</p>
|
|
||||||
<div className="p-0 col-6 md:col-6" style={{ margin: '0 auto' }}>
|
|
||||||
<div className="p-inputgroup align-items-center justify-content-evenly">
|
<div className="p-inputgroup align-items-center justify-content-evenly">
|
||||||
<i className="pi pi-user icon-khaki"></i>
|
<p>{guarda.name + ' ' + guarda.last_name}</p>
|
||||||
<p>{guarda.last_name}</p>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div className=" col-6 col-md-6 md:col-6">
|
||||||
</div>
|
|
||||||
<div className=" col-4 col-md-4 md:col-4">
|
|
||||||
<p>Identificación</p>
|
|
||||||
<div className="p-0 col-10 md:col-10" style={{ margin: '0 auto' }}>
|
|
||||||
<div className="p-inputgroup align-items-center justify-content-evenly">
|
|
||||||
<i className="pi pi-id-card icon-khaki"></i>
|
<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>{guarda.dni}</p>
|
<p>{guarda.dni}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -517,21 +548,22 @@ const GuardasSeguridad = () => {
|
||||||
<div className='row my-5 justify-content-center'>
|
<div className='row my-5 justify-content-center'>
|
||||||
</div>
|
</div>
|
||||||
<div className='row my-5 justify-content-center'>
|
<div className='row my-5 justify-content-center'>
|
||||||
<div className=" col-4 md:col-4">
|
<div className=" col-6 md:col-6">
|
||||||
<p>Teléfono</p>
|
|
||||||
<div className="p-0 col-10 md:col-10">
|
|
||||||
<div className="p-inputgroup align-items-center justify-content-evenly">
|
|
||||||
<i className="pi pi-phone icon-khaki"></i>
|
<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>{guarda.phone}</p>
|
<p>{guarda.phone}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className=" col-6 md:col-6">
|
<div className=" col-6 md:col-6">
|
||||||
<p>Correo Electrónico</p>
|
|
||||||
<div className="p-0 col-10 md:col-10" style={{ margin: '0 auto' }}>
|
|
||||||
<div className="p-inputgroup align-items-center justify-content-evenly">
|
|
||||||
<i className="pi pi-envelope icon-khaki"></i>
|
<i className="pi pi-envelope icon-khaki"></i>
|
||||||
|
|
||||||
|
<p><strong>Correo Electrónico</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>{guarda.email}</p>
|
<p>{guarda.email}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -573,11 +605,14 @@ const GuardasSeguridad = () => {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</div>
|
<Dialog
|
||||||
</div>
|
visible={formGuardDialog}
|
||||||
<div className="col-12">
|
style={{ width: '750px' }}
|
||||||
<div className="card">
|
header='Mantenimiento de Guarda de Seguridad'
|
||||||
<h5>Registro de un Guarda de Seguridad</h5>
|
modal
|
||||||
|
footer={formGuardDialogFooter}
|
||||||
|
onHide={hideFormGuardDialog}
|
||||||
|
>
|
||||||
<div className="p-fluid formgrid grid">
|
<div className="p-fluid formgrid grid">
|
||||||
<div className="field col-12 md:col-6">
|
<div className="field col-12 md:col-6">
|
||||||
<label htmlFor="name">Nombre</label>
|
<label htmlFor="name">Nombre</label>
|
||||||
|
@ -641,25 +676,12 @@ const GuardasSeguridad = () => {
|
||||||
&& <small className="p-invalid">Número de teléfono es requerido.</small>}
|
&& <small className="p-invalid">Número de teléfono es requerido.</small>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{
|
|
||||||
display: "flex",
|
</div>
|
||||||
justifyContent: "center",
|
</Dialog>
|
||||||
gap: "10px",
|
|
||||||
width: "100%"
|
|
||||||
}}>
|
|
||||||
<Button
|
|
||||||
label={`${saveButtonTitle}`}
|
|
||||||
onClick={registrarGuarda}
|
|
||||||
/>
|
|
||||||
{saveButtonTitle === 'Actualizar' && (
|
|
||||||
<Button
|
|
||||||
label="Cancel"
|
|
||||||
onClick={cancelEdit}
|
|
||||||
className="p-button-danger" />)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue