informacion guardas de seguridad

This commit is contained in:
Mariela 2022-09-01 02:09:26 -06:00
parent 52cdf9f899
commit 33d1a328a5
1 changed files with 74 additions and 52 deletions

View File

@ -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() {
@ -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>
); );
}; };