eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

agregar dialogo para agregar y validaciones básicas

This commit is contained in:
Mariela 2022-08-26 00:30:47 -06:00
parent 2bce41dbc0
commit bd79c3a6a8
1 changed files with 176 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
web-ui/web-react/src/components/Reservaciones.js
View File

@ -46,6 +46,9 @@ const Reservations = () => {
const [tenants, setTenants] = useState([]); const [tenants, setTenants] = useState([]);
const [tenantId, setTenantId] = useState(); const [tenantId, setTenantId] = useState();
const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar") const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar")
const [reservationDialog, setReservationDialog] = useState(false);
async function tenantsList(id) { async function tenantsList(id) {
await fetch(`http://localhost:4000/user/findTenants/${id}`, await fetch(`http://localhost:4000/user/findTenants/${id}`,
@ -124,8 +127,20 @@ const Reservations = () => {
}, []) }, [])
const saveReservation = () => { const saveReservation = () => {
if (reservation.common_area_id) { let _reservations = [...reservations];
let _reservation = { ...reservation };
if ( _reservation.date && _reservation.time && tenantId && areaId && !validationTime()) {
_reservations.push(_reservation);
setReservations(_reservations)
toast.current.show({
severity: 'success',
summary: 'Éxito',
detail: 'Administrador del Sistema Actualizado',
life: 3000,
});
setReservationDialog(false)
} else { } else {
setSubmitted(true); setSubmitted(true);
} }
@ -162,12 +177,34 @@ const Reservations = () => {
setReservation(emptyReservation); setReservation(emptyReservation);
setSaveButtonTitle('Registrar'); setSaveButtonTitle('Registrar');
setAreaId(''); setAreaId('');
setTenantId('');
} }
const hideNewReservationDialog = () => {
setSubmitted(false);
setReservationDialog(false);
setReservation(emptyReservation);
setAreaId('');
setTenantId('');
};
const openNewReservation = () => {
setReservation(emptyReservation);
setReservationDialog(true);
setSubmitted(false);
};
const leftToolbarTemplate = () => { const leftToolbarTemplate = () => {
return ( return (
<React.Fragment> <React.Fragment>
<div className="my-2"> <div className="my-2">
<Button
label="Nueva Reservación"
icon="pi pi-plus"
className="p-button-success mr-2"
onClick={openNewReservation}
/>
<Button <Button
label="Eliminar" label="Eliminar"
icon="pi pi-trash" icon="pi pi-trash"
@ -176,6 +213,7 @@ const Reservations = () => {
disabled={!selectedReservations || !selectedReservations.length} disabled={!selectedReservations || !selectedReservations.length}
/> />
</div> </div>
</React.Fragment> </React.Fragment>
); );
}; };
@ -192,6 +230,19 @@ const Reservations = () => {
); );
}; };
const reservationDialogFooter = (
<>
<Button
label="Cerrar"
icon="pi pi-times"
className="p-button-text"
onClick={hideNewReservationDialog}
/>
</>
);
const header = ( const header = (
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center"> <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<h5 className="m-0"> <h5 className="m-0">
@ -423,15 +474,18 @@ const Reservations = () => {
body={actionsReservation} body={actionsReservation}
></Column> ></Column>
</DataTable> </DataTable>
<Dialog
visible={reservationDialog}
</div> style={{ width: '650px' }}
</div> header="Reservar Área para Inquilino"
<div className="col-12"> modal
<div className="card"> className="p-fluid"
<h5>Reservar Área para Inquilino</h5> footer={reservationDialogFooter}
onHide={hideNewReservationDialog}
>
{reservation && (
<div className="p-fluid formgrid grid"> <div className="p-fluid formgrid grid">
<div className="field col-6 md:col-6"> <div className="field col-12 md:col-12">
<label htmlFor="common_area_id">Área Común: </label> <label htmlFor="common_area_id">Área Común: </label>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup"> <div className="p-inputgroup">
@ -456,7 +510,7 @@ const Reservations = () => {
</div> </div>
{area && {area &&
<> <>
<div className="field col-3 md:col-3"> <div className="field col-6 md:col-6">
<label htmlFor="name">Fecha</label> <label htmlFor="name">Fecha</label>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup"> <div className="p-inputgroup">
@ -468,7 +522,7 @@ const Reservations = () => {
onChange={(e) => onInputChange(e, 'date')} onChange={(e) => onInputChange(e, 'date')}
required required
autoFocus autoFocus
min={Date()} min={new Date().toJSON().split('T')[0]}
type="date" type="date"
lang='es' lang='es'
value={reservation.date} value={reservation.date}
@ -484,7 +538,7 @@ const Reservations = () => {
</div> </div>
</div> </div>
<div className="field col-3 md:col-3"> <div className="field col-6 md:col-6">
<label htmlFor="name">Hora de Reservación</label> <label htmlFor="name">Hora de Reservación</label>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup"> <div className="p-inputgroup">
@ -516,7 +570,7 @@ const Reservations = () => {
</div> </div>
</> </>
} }
<div className="field col-6 md:col-6"> <div className="field col-12 md:col-12">
<label htmlFor="user_id">Inquilino: </label> <label htmlFor="user_id">Inquilino: </label>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup"> <div className="p-inputgroup">
@ -557,8 +611,12 @@ const Reservations = () => {
className="p-button-danger" />)} className="p-button-danger" />)}
</div> </div>
</div> </div>
)}
</Dialog>
</div> </div>
</div> </div>
</div> </div>