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

Merge pull request #204 from DeimosPr4/US-30-ReservarÁreacomúnparainquilinoV2 

reservar areas comun
This commit is contained in:
Eduardo Quiros 2022-08-28 12:16:52 +00:00 committed by GitHub
parent 0df8c84a92 395086122d
commit 27f3616ea5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 386 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
api-gateway/src/app.controller.ts
View File

@ -505,24 +505,24 @@ export class AppController {
@Post('reservation/createReservation') @Post('reservation/createReservation')
createReservation( createReservation(
@Body('start_time') start_time: string, @Body('date') date: string,
@Body('finish_time') finish_time: string, @Body('time') time: string,
@Body('status') status: string, @Body('status') status: string,
@Body('date_entry') date_entry: Date, @Body('date_entry') date_entry: Date,
@Body('user_id') user_id: string, @Body('user_id') user_id: string,
@Body('common_area_id') common_area_id: string, @Body('common_area_id') common_area_id: string,
@Body('common_area_name') common_area_name: string, @Body('common_area_name') common_area_name: string,
@Body('communty_id') communty_id: string, @Body('community_id') community_id: string,
) { ) {
return this.appService.createReservation( return this.appService.createReservation(
start_time, date,
finish_time, time,
status, status,
date_entry, date_entry,
user_id, user_id,
common_area_id, common_area_id,
common_area_name, common_area_name,
communty_id, community_id,
); );
} }

8
api-gateway/src/app.service.ts
View File

@ -613,14 +613,14 @@ export class AppService {
// ====================== RESERVATIONS =============================== // ====================== RESERVATIONS ===============================
//POST parameter from API //POST parameter from API
createReservation(start_time: string, finish_time: string, status: string, createReservation(date: string, time: string, status: string,
date_entry: Date, user_id: string, common_area_id: string, date_entry: Date, user_id: string, common_area_id: string,
common_area_name: string, communty_id: string) { common_area_name: string, community_id: string) {
const pattern = { cmd: 'createReservation' }; const pattern = { cmd: 'createReservation' };
const payload = { const payload = {
start_time: start_time, finish_time: finish_time, status: status, date: date, time: time, status: status,
date_entry: date_entry, user_id: user_id, common_area_id: common_area_id, date_entry: date_entry, user_id: user_id, common_area_id: common_area_id,
common_area_name: common_area_name, communty_id: communty_id common_area_name: common_area_name, community_id: community_id
}; };
return this.clientReservationApp return this.clientReservationApp
.send<string>(pattern, payload) .send<string>(pattern, payload)

2
servicio-reservaciones/src/reservations/reservations.service.ts
View File

@ -14,8 +14,6 @@ export class ReservationsService {
) {} ) {}
create(reservation: ReservationDocument) { create(reservation: ReservationDocument) {
console.log(reservation);
return this.reservationModel.create(reservation); return this.reservationModel.create(reservation);
} }

4
servicio-reservaciones/src/schemas/reservation.schema.ts
View File

@ -6,10 +6,10 @@ export type ReservationDocument = Reservation & Document;
@Schema({ collection: 'reservations' }) @Schema({ collection: 'reservations' })
export class Reservation { export class Reservation {
@Prop() @Prop()
start_time: string; date: Date;
@Prop() @Prop()
finish_time: string; time: string;
@Prop() @Prop()
status: string; status: string;

2
web-ui/web-react/public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="es">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Katoikia</title> <title>Katoikia</title>

4
web-ui/web-react/src/AppFooter.js
View File

@ -13,8 +13,8 @@ export const AppFooter = (props) => {
height="20" height="20"
className="mr-2" className="mr-2"
/> />
by por
<span className="font-medium ml-2">PrimeReact</span> <span className="font-medium ml-2">Deimos</span>
</div> </div>
); );
}; };

1
web-ui/web-react/src/components/AdministradoresComunidad.js
View File

@ -316,7 +316,6 @@ const AdministradoresComunidad = () => {
detail: 'Administrador de comunidad actualizado', detail: 'Administrador de comunidad actualizado',
life: 3000, life: 3000,
}) })
toast.current.show({ severity: 'success', summary: 'Exito', detail: 'Administrador de Comunidad de vivienda Actualizada', life: 3000 });
listaAdmin(); listaAdmin();
setCommunityId(''); setCommunityId('');

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

@ -17,8 +17,8 @@ import { useCookies } from 'react-cookie';
const Reservations = () => { const Reservations = () => {
let emptyReservation = { let emptyReservation = {
_id: null, _id: null,
start_time: '', date: '',
finish_time: '', time: '',
user_id: '', user_id: '',
user_name: '', user_name: '',
common_area_id: '', common_area_id: '',
@ -41,7 +41,15 @@ const Reservations = () => {
const dt = useRef(null); const dt = useRef(null);
const [cookies, setCookies] = useCookies() const [cookies, setCookies] = useCookies()
const [areas, setAreas] = useState([]); const [areas, setAreas] = useState([]);
const [area, setArea] = useState();
const [areaId, setAreaId] = useState();
const [tenants, setTenants] = useState([]); const [tenants, setTenants] = useState([]);
const [tenantId, setTenantId] = useState();
const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar")
const [reservationDialog, setReservationDialog] = useState(false);
const [dateMax, setDateMax] = useState();
const [tenants, setTenants] = useState([]);
async function tenantsList(id) { async function tenantsList(id) {
await fetch(`http://localhost:4000/user/findTenants/${id}`, await fetch(`http://localhost:4000/user/findTenants/${id}`,
@ -67,7 +75,10 @@ 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(
(val) => val.bookable == 1,
) )
setAreas(data) setAreas(data)
}); });
@ -83,6 +94,7 @@ const Reservations = () => {
(val) => val.status != -1, (val) => val.status != -1,
) )
data.map((item) => { data.map((item) => {
item.date = formatDateString(item.date)
if (item.status == '1') { if (item.status == '1') {
item.status_text = 'Activo'; item.status_text = 'Activo';
} else if (item.status == '0') { } else if (item.status == '0') {
@ -105,8 +117,8 @@ const Reservations = () => {
reservations.map((item) => { reservations.map((item) => {
let tenant = tenants.find(item2 => item2._id == item.user_id); let tenant = tenants.find(item2 => item2._id == item.user_id);
if(tenant){ if (tenant) {
item.user_name = tenant.name + ' ' + tenant.last_name; item.user_name = tenant.name + ' ' + tenant.last_name;
} }
}); });
@ -115,12 +127,60 @@ const Reservations = () => {
reservationList(cookies.community_id); reservationList(cookies.community_id);
}, []) }, [])
const saveReservation = () => {
let _reservations = [...reservations];
let _reservation = { ...reservation };
if (_reservation.date && _reservation.time && tenantId && areaId
&& !validationTime()
&& !validationIsSameUser() && !validationIsReservation()) {
_reservation.common_area_name = areas.find(item => item._id == areaId).name;
let tenant = tenants.find(item => item._id == tenantId);
_reservation.user_name = tenant.name + ' ' + tenant.last_name;
_reservation.user_id = tenantId;
_reservation.common_area_id = areaId;
_reservation.community_id = cookies.community_id;
_reservation.date = formatDateString(_reservation.date)
if (_reservation.status == '1') {
_reservation.status_text = 'Activo';
} else if (_reservation.status == '0') {
_reservation.status_text = 'Inactivo';
}
fetch('http://localhost:4000/reservation/createReservation/', {
cache: 'no-cache',
method: 'POST',
body: JSON.stringify(_reservation),
headers: {
'Content-Type': 'application/json'
}
})
.then((response) => {
if (response.status !== 200 && response.status !== 201)
console.log(`Hubo un error en el servicio: ${response.status}`)
else return response.json()
}).then(() => {
_reservations.push(_reservation);
setReservations(_reservations)
toast.current.show({
severity: 'success',
summary: 'Éxito',
detail: 'Reservación realizada',
life: 3000,
});
setReservationDialog(false)
setAreaId('')
setTenantId('')
})
} else {
setSubmitted(true);
}
}
const actionsReservation = (rowData) => { const actionsReservation = (rowData) => {
return ( return (
<div className="actions"> <div className="actions">
<Button <Button
@ -132,9 +192,7 @@ const Reservations = () => {
</div> </div>
); );
}; };
const confirmDeleteReservation = (reservation) => { const confirmDeleteReservation = (reservation) => {
setReservation(reservation); setReservation(reservation);
setDeleteReservationDialog(true); setDeleteReservationDialog(true);
@ -144,10 +202,37 @@ const Reservations = () => {
setDeleteReservationsDialog(true); setDeleteReservationsDialog(true);
}; };
const cancelEdit = () => {
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 = () => { 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"
@ -172,6 +257,18 @@ 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">
@ -188,22 +285,22 @@ const Reservations = () => {
</div> </div>
); );
const headerStartTime = ( const headerDate = (
<> <>
<p> <p>
{' '} {' '}
<FontAwesomeIcon icon={faClockFour} style={{ color: '#C08135' }} /> <FontAwesomeIcon icon={faClockFour} style={{ color: '#C08135' }} />
Hora de Apertura Fecha de Reserva
</p> </p>
</> </>
); );
const headerEndTime = ( const headerTime = (
<> <>
<p> <p>
{' '} {' '}
<FontAwesomeIcon icon={faClockFour} style={{ color: '#D7A86E' }} />{' '} <FontAwesomeIcon icon={faClockFour} style={{ color: '#D7A86E' }} />{' '}
Hora de Cierre Hora de Reserva
</p> </p>
</> </>
); );
@ -250,6 +347,113 @@ const Reservations = () => {
); );
}; };
const onInputChange = (e, name) => {
const val = (e.target && e.target.value) || '';
let _reservation = { ...reservation };
_reservation[`${name}`] = val;
setReservation(_reservation);
};
const onTimeChange = (e) => {
e.target.value.split(':')[1] = "00";
const val = (e.target && e.target.value.split(':')[0]) || '';
let _reservation = { ...reservation };
document.getElementById('time').value = val + ":00";
_reservation['time'] = val + ":00";
setReservation(_reservation);
};
const handleAreas = (e) => {
const getAreaId = e.target.value;
setAreaId(getAreaId);
let area = areas.find(item => item._id == getAreaId);
setArea(area)
}
const handleTenants = (e) => {
const getTenantId = e.target.value;
setTenantId(getTenantId);
}
const aList = areas.map((item) => ({
label: item.name,
value: item._id,
}));
const tList = tenants.map((item) => ({
label: item.name,
value: item._id,
}));
function validationTime() {
let value = true;
const [hourR, minuteR] = reservation.time.split(':');
if (hourR != "") {
const [hourMin, minuteMin] = area.hourMin.split(':');
const [hourMax, minuteMax] = area.hourMax.split(':');
if ((parseInt(hourR) >= parseInt(hourMin)) && (parseInt(hourR) <= parseInt(hourMax))) {
value = false;
}
} else {
value = false;
}
return value;
}
function formatDateString(dateString) {
let date = new Date(dateString).toLocaleDateString("es-CL");
return date;
}
function validationIsReservation() {
if(reservation.date && reservation.time && areaId){
let date1 = new Date(reservation.date).toJSON().split('T')[0];
let date2 = date1.split('-')[2] + '-' + date1.split('-')[1] + '-' +date1.split('-')[0];
let booked = reservations.filter(item => item.common_area_id == areaId
&& item.date == date2
&& item.time == reservation.time);
if (booked.length > 0) {
return true;
} else {
return false;
}
}
}
function validationIsSameUser() {
if(reservation.date && tenantId && areaId){
let date1 = new Date(reservation.date).toJSON().split('T')[0];
let date2 = date1.split('-')[2] + '-' + date1.split('-')[1] + '-' +date1.split('-')[0];
let booked = reservations.filter(item => item.common_area_id == areaId
&& item.date == date2
&& item.user_id == tenantId);
if (booked.length >= 2) {
return true;
} else {
return false;
}
}
}
const getDateMax = () => {
let today = new Date();
today.setDate(today.getDate() + 7)
return today.toJSON().split('T')[0];
}
const getDateMin = () => {
let today = new Date();
today.setDate(today.getDate() - 1)
return today.toJSON().split('T')[0];
}
return ( return (
<div className="grid"> <div className="grid">
<div className="col-12"> <div className="col-12">
@ -284,9 +488,9 @@ const Reservations = () => {
headerStyle={{ width: '3rem' }} headerStyle={{ width: '3rem' }}
></Column> ></Column>
<Column <Column
field="start_time" field="date"
sortable sortable
header={headerStartTime} header={headerDate}
style={{ style={{
flexGrow: 1, flexGrow: 1,
flexBasis: '160px', flexBasis: '160px',
@ -295,9 +499,9 @@ const Reservations = () => {
}} }}
></Column> ></Column>
<Column <Column
field="finish_time" field="time"
sortable sortable
header={headerEndTime} header={headerTime}
style={{ style={{
flexGrow: 1, flexGrow: 1,
flexBasis: '160px', flexBasis: '160px',
@ -339,17 +543,161 @@ const Reservations = () => {
body={actionsReservation} body={actionsReservation}
></Column> ></Column>
</DataTable> </DataTable>
<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-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">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<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-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={getDateMin()}
max={getDateMax()}
type="date"
lang='es-CL'
value={reservation.date}
className={classNames({
'p-invalid': submitted && (reservation.date === ''
|| validationIsReservation()),
})}
/>
</div>
{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) => onTimeChange(e)}
required
autoFocus
type="time"
step='3600'
className={classNames({
'p-invalid': submitted && (reservation.time === ''
|| validationTime() || validationIsReservation()),
})}
/>
</div>
{submitted && reservation.time === '' && (
<small className="p-invalid">Hora es requirido.</small>
)}
{submitted && validationTime() && (
<small className="p-invalid">La hora de inicio debe ser mayor de {area.hourMin} y menor de {area.hourMax} .</small>
)}
{submitted && validationIsReservation() && (
<small className="p-invalid">Ya hay una reservación en la fecha y hora ingresada.</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-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
|| validationIsSameUser())
})}
/>
</div>
{submitted
&& !tenantId
&& <small className="p-invalid">Inquilino es requerido.</small>}
{submitted && validationIsSameUser() && (
<small className="p-invalid">El inquilino no puede reservar más de dos veces el mismo día.</small>
)}
</div>
</div>
<div style={{
display: "flex",
justifyContent: "center",
gap: "10px",
width: "100%"
}}>
<Button
label={`${saveButtonTitle}`}
onClick={saveReservation}
/>
{saveButtonTitle === 'Actualizar' && (
<Button
label="Cancelar"
onClick={cancelEdit}
className="p-button-danger" />)}
</div>
</div>
)}
</Dialog>
</div> </div>
</div> </div>
</div> </div>
); );
} }
export default React.memo(Reservations); export default React.memo(Reservations);