Display the reservations
This commit is contained in:
parent
3cdfc4d3c7
commit
a7016f4782
@ -11,7 +11,6 @@ import {
|
|||||||
FormControlLabel,
|
FormControlLabel,
|
||||||
FormGroup,
|
FormGroup,
|
||||||
FormLabel,
|
FormLabel,
|
||||||
Typography,
|
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
|
import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
|
||||||
@ -23,6 +22,7 @@ import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
|
|||||||
import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
|
import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
|
||||||
import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
|
import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
|
||||||
import { useUpdateAccommodationReservation } from "../../../hooks/context_providers/accommodations/UpdateReservationDialogProvider";
|
import { useUpdateAccommodationReservation } from "../../../hooks/context_providers/accommodations/UpdateReservationDialogProvider";
|
||||||
|
import { fmtUnixDateFullCalendar } from "../../../utils/time_utils";
|
||||||
import { AsyncWidget } from "../../../widgets/AsyncWidget";
|
import { AsyncWidget } from "../../../widgets/AsyncWidget";
|
||||||
import { useFamily } from "../../../widgets/BaseFamilyRoute";
|
import { useFamily } from "../../../widgets/BaseFamilyRoute";
|
||||||
import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
|
import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
|
||||||
@ -67,6 +67,24 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
setUsers(null);
|
setUsers(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const visibleReservations = React.useMemo(() => {
|
||||||
|
return reservations?.filter((r) => {
|
||||||
|
if (!showValidated && r.validated === true) return false;
|
||||||
|
if (!showPending && r.validated === null) return false;
|
||||||
|
if (!showRejected && r.validated === false) return false;
|
||||||
|
if (hiddenPeople.has(r.user_id)) return false;
|
||||||
|
if (hiddenAccommodations.has(r.accommodation_id)) return false;
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
}, [
|
||||||
|
showValidated,
|
||||||
|
showRejected,
|
||||||
|
showPending,
|
||||||
|
hiddenPeople,
|
||||||
|
hiddenAccommodations,
|
||||||
|
reservations,
|
||||||
|
]);
|
||||||
|
|
||||||
const onSelect = async (d: DateSelectArg) => {
|
const onSelect = async (d: DateSelectArg) => {
|
||||||
try {
|
try {
|
||||||
const resa = await updateReservation(
|
const resa = await updateReservation(
|
||||||
@ -123,7 +141,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
onChange={(_ev, v) => setShowValidated(v)}
|
onChange={(_ev, v) => setShowValidated(v)}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label="Validé"
|
label="Validées"
|
||||||
/>
|
/>
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
control={
|
control={
|
||||||
@ -132,7 +150,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
onChange={(_ev, v) => setShowRejected(v)}
|
onChange={(_ev, v) => setShowRejected(v)}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label="Rejetés"
|
label="Rejetées"
|
||||||
/>
|
/>
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
control={
|
control={
|
||||||
@ -224,6 +242,25 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
right: "dayGridMonth,dayGridWeek,listWeek",
|
right: "dayGridMonth,dayGridWeek,listWeek",
|
||||||
}}
|
}}
|
||||||
select={onSelect}
|
select={onSelect}
|
||||||
|
events={visibleReservations?.map((r) => {
|
||||||
|
const a = accommodations.accommodations.get(
|
||||||
|
r.accommodation_id
|
||||||
|
)!;
|
||||||
|
const u = users?.find((u) => u.user_id === r.user_id);
|
||||||
|
return {
|
||||||
|
title: `${u?.user_name} - ${a.name}`,
|
||||||
|
start: fmtUnixDateFullCalendar(r.reservation_start),
|
||||||
|
end: fmtUnixDateFullCalendar(r.reservation_end),
|
||||||
|
allDay: true,
|
||||||
|
color: a.color ? "#" + a.color : undefined,
|
||||||
|
borderColor:
|
||||||
|
r.validated === true
|
||||||
|
? "green"
|
||||||
|
: r.validated === false
|
||||||
|
? "red dotted"
|
||||||
|
: "grey dotted",
|
||||||
|
};
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -4,3 +4,23 @@
|
|||||||
export function fmtUnixDate(time: number): string {
|
export function fmtUnixDate(time: number): string {
|
||||||
return new Date(time * 1000).toLocaleString("fr-FR");
|
return new Date(time * 1000).toLocaleString("fr-FR");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get formatted UNIX date for Full Calendar
|
||||||
|
*/
|
||||||
|
export function fmtUnixDateFullCalendar(time: number): string {
|
||||||
|
const d = new Date(time * 1000);
|
||||||
|
|
||||||
|
const s = `${d.getFullYear()}-${(d.getMonth() + 1)
|
||||||
|
.toString(10)
|
||||||
|
.padStart(2, "0")}-${d.getDate().toString(10).padStart(2, "0")}T${d
|
||||||
|
.getHours()
|
||||||
|
.toString(10)
|
||||||
|
.padStart(2, "0")}:${d.getMinutes().toString(10).padStart(2, "0")}:${d
|
||||||
|
.getSeconds()
|
||||||
|
.toString(10)
|
||||||
|
.padStart(2, "0")}`;
|
||||||
|
|
||||||
|
console.info(d, s);
|
||||||
|
return s;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user