Can middle day reservations
This commit is contained in:
parent
a7016f4782
commit
b4a360c492
@ -137,6 +137,7 @@ export function UpdateReservationDialog(p: {
|
|||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
minDate={Math.floor(new Date().getTime() / 1000) - 3600 * 24 * 60}
|
minDate={Math.floor(new Date().getTime() / 1000) - 3600 * 24 * 60}
|
||||||
|
canSetMiddleDay
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<PropDateInput
|
<PropDateInput
|
||||||
@ -150,6 +151,7 @@ export function UpdateReservationDialog(p: {
|
|||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
minDate={reservation?.start}
|
minDate={reservation?.start}
|
||||||
|
canSetMiddleDay
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{conflicts && conflicts.length > 0 && (
|
{conflicts && conflicts.length > 0 && (
|
||||||
|
@ -139,6 +139,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
<Checkbox
|
<Checkbox
|
||||||
checked={showValidated}
|
checked={showValidated}
|
||||||
onChange={(_ev, v) => setShowValidated(v)}
|
onChange={(_ev, v) => setShowValidated(v)}
|
||||||
|
color="success"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label="Validées"
|
label="Validées"
|
||||||
@ -148,6 +149,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
<Checkbox
|
<Checkbox
|
||||||
checked={showRejected}
|
checked={showRejected}
|
||||||
onChange={(_ev, v) => setShowRejected(v)}
|
onChange={(_ev, v) => setShowRejected(v)}
|
||||||
|
color="error"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label="Rejetées"
|
label="Rejetées"
|
||||||
@ -157,6 +159,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
<Checkbox
|
<Checkbox
|
||||||
checked={showPending}
|
checked={showPending}
|
||||||
onChange={(_ev, v) => setShowPending(v)}
|
onChange={(_ev, v) => setShowPending(v)}
|
||||||
|
color="info"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label="En attente de validation"
|
label="En attente de validation"
|
||||||
@ -239,7 +242,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
headerToolbar={{
|
headerToolbar={{
|
||||||
left: "prev,next today",
|
left: "prev,next today",
|
||||||
center: "title",
|
center: "title",
|
||||||
right: "dayGridMonth,dayGridWeek,listWeek",
|
right: "dayGridMonth,dayGridWeek,dayGridDay,listWeek",
|
||||||
}}
|
}}
|
||||||
select={onSelect}
|
select={onSelect}
|
||||||
events={visibleReservations?.map((r) => {
|
events={visibleReservations?.map((r) => {
|
||||||
@ -251,7 +254,6 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
|
|||||||
title: `${u?.user_name} - ${a.name}`,
|
title: `${u?.user_name} - ${a.name}`,
|
||||||
start: fmtUnixDateFullCalendar(r.reservation_start),
|
start: fmtUnixDateFullCalendar(r.reservation_start),
|
||||||
end: fmtUnixDateFullCalendar(r.reservation_end),
|
end: fmtUnixDateFullCalendar(r.reservation_end),
|
||||||
allDay: true,
|
|
||||||
color: a.color ? "#" + a.color : undefined,
|
color: a.color ? "#" + a.color : undefined,
|
||||||
borderColor:
|
borderColor:
|
||||||
r.validated === true
|
r.validated === true
|
||||||
|
@ -21,6 +21,5 @@ export function fmtUnixDateFullCalendar(time: number): string {
|
|||||||
.toString(10)
|
.toString(10)
|
||||||
.padStart(2, "0")}`;
|
.padStart(2, "0")}`;
|
||||||
|
|
||||||
console.info(d, s);
|
|
||||||
return s;
|
return s;
|
||||||
}
|
}
|
||||||
|
@ -5,6 +5,7 @@ import dayjs from "dayjs";
|
|||||||
import "dayjs/locale/fr";
|
import "dayjs/locale/fr";
|
||||||
import { fmtUnixDate } from "../../utils/time_utils";
|
import { fmtUnixDate } from "../../utils/time_utils";
|
||||||
import { PropEdit } from "./PropEdit";
|
import { PropEdit } from "./PropEdit";
|
||||||
|
import { Checkbox, FormControlLabel } from "@mui/material";
|
||||||
|
|
||||||
export function PropDateInput(p: {
|
export function PropDateInput(p: {
|
||||||
editable: boolean;
|
editable: boolean;
|
||||||
@ -14,7 +15,17 @@ export function PropDateInput(p: {
|
|||||||
lastSecOfDay?: boolean;
|
lastSecOfDay?: boolean;
|
||||||
minDate?: number;
|
minDate?: number;
|
||||||
maxDate?: number;
|
maxDate?: number;
|
||||||
|
canSetMiddleDay?: boolean;
|
||||||
}): React.ReactElement {
|
}): 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;
|
let shiftV = p.value;
|
||||||
if (shiftV && p.lastSecOfDay) {
|
if (shiftV && p.lastSecOfDay) {
|
||||||
const d = new Date(shiftV * 1000);
|
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;
|
const maxDate = p.maxDate ? dayjs(new Date(p.maxDate * 1000)) : undefined;
|
||||||
|
|
||||||
return (
|
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>
|
<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