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

294
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}`,
@ -71,12 +74,12 @@ const Reservations = () => {
.then(data => data.message) .then(data => data.message)
.then(data => { .then(data => {
data = data.filter( data = data.filter(
(val) => val.status != -1 (val) => val.status != -1
) )
data = data.filter( data = data.filter(
(val) => val.bookable == 1, (val) => val.bookable == 1,
) )
setAreas(data) setAreas(data)
}); });
} }
@ -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">
@ -317,7 +368,7 @@ const Reservations = () => {
const [hourMax, minuteMax] = area.hourMax.split(':'); const [hourMax, minuteMax] = area.hourMax.split(':');
if ((parseInt(hourR) >= parseInt(hourMin)) && (parseInt(hourR) <= parseInt(hourMax))) { if ((parseInt(hourR) >= parseInt(hourMin)) && (parseInt(hourR) <= parseInt(hourMax))) {
value = false; value = false;
} }
} else { } else {
value = false; value = false;
} }
@ -423,142 +474,149 @@ 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}
<div className="p-fluid formgrid grid"> onHide={hideNewReservationDialog}
<div className="field col-6 md:col-6"> >
<label htmlFor="common_area_id">Área Común: </label> {reservation && (
<div className="p-0 col-12 md:col-12"> <div className="p-fluid formgrid grid">
<div className="p-inputgroup"> <div className="field col-12 md:col-12">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <label htmlFor="common_area_id">Área Común: </label>
<i className="pi pi-home"></i>
</span>
<Dropdown
placeholder="--Seleccione el Area Común a Reservar--"
id="common_area_id"
value={areaId}
options={aList}
onChange={handleAreas}
required autoFocus
className={
classNames({ 'p-invalid': submitted && !areaId })}
/>
</div>
{submitted
&& !areaId
&& <small className="p-invalid">Área Común es requerida.</small>}
</div>
</div>
{area &&
<>
<div className="field col-3 md:col-3">
<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">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i> <i className="pi pi-home"></i>
</span> </span>
<InputText <Dropdown
id="date" placeholder="--Seleccione el Area Común a Reservar--"
onChange={(e) => onInputChange(e, 'date')} id="common_area_id"
required value={areaId}
autoFocus options={aList}
min={Date()} onChange={handleAreas}
type="date" required autoFocus
lang='es' className={
value={reservation.date} classNames({ 'p-invalid': submitted && !areaId })}
className={classNames({
'p-invalid': submitted && reservation.date === '',
})}
/> />
</div> </div>
{submitted && reservation.date === '' && ( {submitted
<small className="p-invalid">Fecha es requirida.</small> && !areaId
)} && <small className="p-invalid">Área Común es requerida.</small>}
</div> </div>
</div> </div>
{area &&
<>
<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">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText
id="date"
onChange={(e) => onInputChange(e, 'date')}
required
autoFocus
min={new Date().toJSON().split('T')[0]}
type="date"
lang='es'
value={reservation.date}
className={classNames({
'p-invalid': submitted && reservation.date === '',
})}
/>
<div className="field col-3 md:col-3"> </div>
<label htmlFor="name">Hora de Reservación</label> {submitted && reservation.date === '' && (
<small className="p-invalid">Fecha es requirida.</small>
)}
</div>
</div>
<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">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText
id="time"
value={reservation.time}
onChange={(e) => onInputChange(e, 'time')}
required
autoFocus
type="time"
step='3600'
className={classNames({
'p-invalid': submitted && (reservation.time === '' || validationTime()),
})}
/>
</div>
{submitted && reservation.time === '' && (
<small className="p-invalid">Hora es requirido.</small>
)}
{submitted && validationTime() && (
<small className="p-invalid">La hora de inicio debe set mayor de {area.hourMin} y menor de {area.hourMax} .</small>
)}
</div>
</div>
</>
}
<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-0 col-12 md:col-12">
<div className="p-inputgroup"> <div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i> <i className="pi pi-home"></i>
</span> </span>
<InputText <Dropdown
id="time" placeholder="--Seleccione el Inquilino a Reservar--"
value={reservation.time} id="user_id"
onChange={(e) => onInputChange(e, 'time')} value={tenantId}
required options={tList}
autoFocus onChange={handleTenants}
type="time" required autoFocus
step='3600' className={
className={classNames({ classNames({ 'p-invalid': submitted && !tenantId })}
'p-invalid': submitted && (reservation.time === '' || validationTime()),
})}
/> />
</div> </div>
{submitted && reservation.time === '' && ( {submitted
<small className="p-invalid">Hora es requirido.</small> && !tenantId
)} && <small className="p-invalid">Inquilino es requerido.</small>}
{submitted && validationTime() && (
<small className="p-invalid">La hora de inicio debe set mayor de {area.hourMin} y menor de {area.hourMax} .</small>
)}
</div> </div>
</div> </div>
</>
}
<div className="field col-6 md:col-6">
<label htmlFor="user_id">Inquilino: </label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<Dropdown
placeholder="--Seleccione el Inquilino a Reservar--"
id="user_id"
value={tenantId}
options={tList}
onChange={handleTenants}
required autoFocus
className={
classNames({ 'p-invalid': submitted && !tenantId })}
/>
</div>
{submitted
&& !tenantId
&& <small className="p-invalid">Inquilino es requerido.</small>}
</div>
</div>
<div style={{ <div style={{
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
gap: "10px", gap: "10px",
width: "100%" width: "100%"
}}> }}>
<Button <Button
label={`${saveButtonTitle}`} label={`${saveButtonTitle}`}
onClick={saveReservation} onClick={saveReservation}
/> />
{saveButtonTitle === 'Actualizar' && ( {saveButtonTitle === 'Actualizar' && (
<Button <Button
label="Cancelar" label="Cancelar"
onClick={cancelEdit} onClick={cancelEdit}
className="p-button-danger" />)} className="p-button-danger" />)}
</div> </div>
</div> </div>
)}
</Dialog>
</div> </div>
</div> </div>
</div> </div>