Can middle day reservations
All checks were successful
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is passing

This commit is contained in:
Pierre HUBERT 2024-06-20 22:45:34 +02:00
parent a7016f4782
commit b4a360c492
4 changed files with 66 additions and 19 deletions

View File

@ -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 && (

View File

@ -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

View File

@ -21,6 +21,5 @@ export function fmtUnixDateFullCalendar(time: number): string {
.toString(10)
.padStart(2, "0")}`;
console.info(d, s);
return s;
}

View File

@ -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 (
<>
<div style={{ height: "10px" }}></div>
<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);
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}
/>
<div style={{ height: "10px" }}></div>
</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>
</>
);
}