Add an accommodations reservations module #188
@ -137,6 +137,7 @@ export function UpdateReservationDialog(p: {
|
||||
});
|
||||
}}
|
||||
minDate={Math.floor(new Date().getTime() / 1000) - 3600 * 24 * 60}
|
||||
canSetMiddleDay
|
||||
/>
|
||||
|
||||
<PropDateInput
|
||||
@ -150,6 +151,7 @@ export function UpdateReservationDialog(p: {
|
||||
});
|
||||
}}
|
||||
minDate={reservation?.start}
|
||||
canSetMiddleDay
|
||||
/>
|
||||
|
||||
{conflicts && conflicts.length > 0 && (
|
||||
|
@ -139,6 +139,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
||||
<Checkbox
|
||||
checked={showValidated}
|
||||
onChange={(_ev, v) => setShowValidated(v)}
|
||||
color="success"
|
||||
/>
|
||||
}
|
||||
label="Validées"
|
||||
@ -148,6 +149,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
||||
<Checkbox
|
||||
checked={showRejected}
|
||||
onChange={(_ev, v) => setShowRejected(v)}
|
||||
color="error"
|
||||
/>
|
||||
}
|
||||
label="Rejetées"
|
||||
@ -157,6 +159,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
||||
<Checkbox
|
||||
checked={showPending}
|
||||
onChange={(_ev, v) => setShowPending(v)}
|
||||
color="info"
|
||||
/>
|
||||
}
|
||||
label="En attente de validation"
|
||||
@ -239,7 +242,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
||||
headerToolbar={{
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "dayGridMonth,dayGridWeek,listWeek",
|
||||
right: "dayGridMonth,dayGridWeek,dayGridDay,listWeek",
|
||||
}}
|
||||
select={onSelect}
|
||||
events={visibleReservations?.map((r) => {
|
||||
@ -251,7 +254,6 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
||||
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
|
||||
|
@ -21,6 +21,5 @@ export function fmtUnixDateFullCalendar(time: number): string {
|
||||
.toString(10)
|
||||
.padStart(2, "0")}`;
|
||||
|
||||
console.info(d, s);
|
||||
return s;
|
||||
}
|
||||
|
@ -5,6 +5,7 @@ import dayjs from "dayjs";
|
||||
import "dayjs/locale/fr";
|
||||
import { fmtUnixDate } from "../../utils/time_utils";
|
||||
import { PropEdit } from "./PropEdit";
|
||||
import { Checkbox, FormControlLabel } from "@mui/material";
|
||||
|
||||
export function PropDateInput(p: {
|
||||
editable: boolean;
|
||||
@ -14,7 +15,17 @@ export function PropDateInput(p: {
|
||||
lastSecOfDay?: boolean;
|
||||
minDate?: number;
|
||||
maxDate?: number;
|
||||
canSetMiddleDay?: boolean;
|
||||
}): React.ReactElement {
|
||||
// Check for mid-day value
|
||||
let isMidDay = false;
|
||||
if (p.value) {
|
||||
const d = new Date(p.value * 1000);
|
||||
isMidDay =
|
||||
d.getHours() === 12 && d.getMinutes() === 0 && d.getSeconds() === 0;
|
||||
}
|
||||
|
||||
// Shift value
|
||||
let shiftV = p.value;
|
||||
if (shiftV && p.lastSecOfDay) {
|
||||
const d = new Date(shiftV * 1000);
|
||||
@ -39,22 +50,55 @@ export function PropDateInput(p: {
|
||||
const maxDate = p.maxDate ? dayjs(new Date(p.maxDate * 1000)) : undefined;
|
||||
|
||||
return (
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
|
||||
<DatePicker
|
||||
label={p.label}
|
||||
value={value}
|
||||
onChange={(v) => {
|
||||
if (v && p.lastSecOfDay) {
|
||||
v.set("hours", 23);
|
||||
v.set("minutes", 59);
|
||||
v.set("seconds", 59);
|
||||
}
|
||||
p.onChange?.(v ? v.unix() : undefined);
|
||||
}}
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
/>
|
||||
<>
|
||||
<div style={{ height: "10px" }}></div>
|
||||
</LocalizationProvider>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
|
||||
<DatePicker
|
||||
label={p.label}
|
||||
value={value}
|
||||
onChange={(v) => {
|
||||
if (v && p.lastSecOfDay) {
|
||||
v = v.set("hours", 23);
|
||||
v = v.set("minutes", 59);
|
||||
v = v.set("seconds", 59);
|
||||
}
|
||||
p.onChange?.(v ? v.unix() : undefined);
|
||||
}}
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
{p.canSetMiddleDay && (
|
||||
<FormControlLabel
|
||||
disabled={!p.value}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={isMidDay}
|
||||
onChange={(_ev, midDay) => {
|
||||
let v = value;
|
||||
if (midDay) {
|
||||
v = v.set("hours", 12);
|
||||
v = v.set("minutes", 0);
|
||||
v = v.set("seconds", 0);
|
||||
} else if (p.lastSecOfDay) {
|
||||
v = v.set("hours", 23);
|
||||
v = v.set("minutes", 59);
|
||||
v = v.set("seconds", 59);
|
||||
} else {
|
||||
v = v.set("hours", 0);
|
||||
v = v.set("minutes", 0);
|
||||
v = v.set("seconds", 0);
|
||||
}
|
||||
console.log(midDay, v, v.get("hours"));
|
||||
|
||||
p.onChange(v.unix());
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="Mi-journée"
|
||||
/>
|
||||
)}
|
||||
<div style={{ height: "30px" }}></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user