agregar dialogo para agregar y validaciones básicas
This commit is contained in:
Mariela
parent
2bce41dbc0
commit
bd79c3a6a8
|
|
@ -46,6 +46,9 @@ const Reservations = () => {
|
|||
const [tenants, setTenants] = useState([]);
|
||||
const [tenantId, setTenantId] = useState();
|
||||
const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar")
|
||||
const [reservationDialog, setReservationDialog] = useState(false);
|
||||
|
||||
|
||||
|
||||
async function tenantsList(id) {
|
||||
await fetch(`http://localhost:4000/user/findTenants/${id}`,
|
||||
|
|
@ -124,8 +127,20 @@ const Reservations = () => {
|
|||
}, [])
|
||||
|
||||
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 {
|
||||
setSubmitted(true);
|
||||
}
|
||||
|
|
@ -162,12 +177,34 @@ const Reservations = () => {
|
|||
setReservation(emptyReservation);
|
||||
setSaveButtonTitle('Registrar');
|
||||
setAreaId('');
|
||||
setTenantId('');
|
||||
}
|
||||
|
||||
const hideNewReservationDialog = () => {
|
||||
setSubmitted(false);
|
||||
setReservationDialog(false);
|
||||
setReservation(emptyReservation);
|
||||
setAreaId('');
|
||||
setTenantId('');
|
||||
};
|
||||
|
||||
const openNewReservation = () => {
|
||||
setReservation(emptyReservation);
|
||||
setReservationDialog(true);
|
||||
setSubmitted(false);
|
||||
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="my-2">
|
||||
<Button
|
||||
label="Nueva Reservación"
|
||||
icon="pi pi-plus"
|
||||
className="p-button-success mr-2"
|
||||
onClick={openNewReservation}
|
||||
/>
|
||||
<Button
|
||||
label="Eliminar"
|
||||
icon="pi pi-trash"
|
||||
|
|
@ -176,6 +213,7 @@ const Reservations = () => {
|
|||
disabled={!selectedReservations || !selectedReservations.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</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 = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 className="m-0">
|
||||
|
|
@ -423,15 +474,18 @@ const Reservations = () => {
|
|||
body={actionsReservation}
|
||||
></Column>
|
||||
</DataTable>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Reservar Área para Inquilino</h5>
|
||||
<Dialog
|
||||
visible={reservationDialog}
|
||||
style={{ width: '650px' }}
|
||||
header="Reservar Área para Inquilino"
|
||||
modal
|
||||
className="p-fluid"
|
||||
footer={reservationDialogFooter}
|
||||
onHide={hideNewReservationDialog}
|
||||
>
|
||||
{reservation && (
|
||||
<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>
|
||||
<div className="p-0 col-12 md:col-12">
|
||||
<div className="p-inputgroup">
|
||||
|
|
@ -456,7 +510,7 @@ const Reservations = () => {
|
|||
</div>
|
||||
{area &&
|
||||
<>
|
||||
<div className="field col-3 md:col-3">
|
||||
<div className="field col-6 md:col-6">
|
||||
<label htmlFor="name">Fecha</label>
|
||||
<div className="p-0 col-12 md:col-12">
|
||||
<div className="p-inputgroup">
|
||||
|
|
@ -468,7 +522,7 @@ const Reservations = () => {
|
|||
onChange={(e) => onInputChange(e, 'date')}
|
||||
required
|
||||
autoFocus
|
||||
min={Date()}
|
||||
min={new Date().toJSON().split('T')[0]}
|
||||
type="date"
|
||||
lang='es'
|
||||
value={reservation.date}
|
||||
|
|
@ -484,7 +538,7 @@ const Reservations = () => {
|
|||
</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>
|
||||
<div className="p-0 col-12 md:col-12">
|
||||
<div className="p-inputgroup">
|
||||
|
|
@ -516,7 +570,7 @@ const Reservations = () => {
|
|||
</div>
|
||||
</>
|
||||
}
|
||||
<div className="field col-6 md:col-6">
|
||||
<div className="field col-12 md:col-12">
|
||||
<label htmlFor="user_id">Inquilino: </label>
|
||||
<div className="p-0 col-12 md:col-12">
|
||||
<div className="p-inputgroup">
|
||||
|
|
@ -557,8 +611,12 @@ const Reservations = () => {
|
|||
className="p-button-danger" />)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Dialog>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue