Add an accommodations reservations module (#188)

Add a new module to enable accommodations reservation

![](https://gitea.communiquons.org/attachments/de1f5b12-0a93-40f8-b29d-97665daa6fd5)

Reviewed-on: #188

geneit_app/src/widgets/forms/PropDateInput.tsx

@@ -0,0 +1,103 @@
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+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;
+  label: string;
+  value: number | undefined;
+  onChange: (v: number | undefined) => void;
+  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);
+    if (d.getHours() === 0) {
+      shiftV -= 1;
+    }
+  }
+
+  if (!p.editable) {
+    if (!shiftV) return <></>;
+
+    return (
+      <PropEdit editable={false} label={p.label} value={fmtUnixDate(shiftV)} />
+    );
+  }
+
+  const value = dayjs(
+    shiftV && p.value! > 0 ? new Date(shiftV * 1000) : undefined
+  );
+
+  const minDate = p.minDate ? dayjs(new Date(p.minDate * 1000)) : undefined;
+  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 = 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);
+                }
+
+                p.onChange(v.unix());
+              }}
+            />
+          }
+          label="Mi-journée"
+        />
+      )}
+      <div style={{ height: "30px" }}></div>
+    </>
+  );
+}