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/BaseFamilyRoute.tsx

@@ -5,12 +5,14 @@ import {
   mdiCrowd,
   mdiFamilyTree,
   mdiFileTree,
+  mdiHomeGroup,
   mdiHumanMaleFemale,
   mdiLockCheck,
   mdiPlus,
   mdiRefresh,
 } from "@mdi/js";
 import Icon from "@mdi/react";
+import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
 import HomeIcon from "@mui/icons-material/Home";
 import {
   Box,
@@ -184,6 +186,24 @@ export function BaseFamilyRoute(): React.ReactElement {
                   </>
                 )}
 
+                {family?.enable_accommodations && (
+                  <>
+                    <Divider sx={{ my: 1 }} />
+                    <ListSubheader component="div">Logements</ListSubheader>
+
+                    <FamilyLink
+                      icon={<HomeIcon />}
+                      label="Accueil"
+                      uri="accommodations"
+                    />
+                    <FamilyLink
+                      icon={<CalendarMonthIcon />}
+                      label="Réservations"
+                      uri="accommodations/reservations"
+                    />
+                  </>
+                )}
+
                 <Divider sx={{ my: 1 }} />
                 <ListSubheader component="div">Administration</ListSubheader>
 
@@ -207,6 +227,14 @@ export function BaseFamilyRoute(): React.ReactElement {
                   />
                 )}
 
+                {family?.enable_accommodations && (
+                  <FamilyLink
+                    icon={<Icon path={mdiHomeGroup} size={1} />}
+                    label="Logements"
+                    uri="accommodations/settings"
+                  />
+                )}
+
                 {/* Invitation code */}
 
                 <ListItem

geneit_app/src/widgets/CopyToClipboard.tsx

@@ -0,0 +1,30 @@
+import { ButtonBase } from "@mui/material";
+import { PropsWithChildren } from "react";
+import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
+
+export function CopyToClipboard(
+  p: PropsWithChildren<{ content: string }>
+): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const copy = () => {
+    navigator.clipboard.writeText(p.content);
+    snackbar(`${p.content} a été copié dans le presse papier.`);
+  };
+
+  return (
+    <ButtonBase
+      onClick={copy}
+      style={{
+        display: "inline-block",
+        alignItems: "unset",
+        textAlign: "unset",
+        position: "relative",
+        padding: "0px",
+      }}
+      disableRipple
+    >
+      {p.children}
+    </ButtonBase>
+  );
+}

geneit_app/src/widgets/FamilyCard.tsx

@@ -2,10 +2,14 @@ import { Alert, Card } from "@mui/material";
 import { PropsWithChildren } from "react";
 
 export function FamilyCard(
-  p: PropsWithChildren<{ error?: string; success?: string }>
+  p: PropsWithChildren<{
+    error?: string;
+    success?: string;
+    style?: React.CSSProperties | undefined;
+  }>
 ): React.ReactElement {
   return (
-    <Card style={{ margin: "10px auto", maxWidth: "450px" }}>
+    <Card style={{ ...p.style, margin: "10px auto", maxWidth: "450px" }}>
       {p.error && <Alert severity="error">{p.error}</Alert>}
       {p.success && <Alert severity="success">{p.success}</Alert>}
 

geneit_app/src/widgets/accommodations/BaseAccommodationsRoute.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import {
+  AccommodationListApi,
+  AccommodationsList,
+} from "../../api/accommodations/AccommodationListApi";
+import { CreateAccommodationCalendarURLDialogProvider } from "../../hooks/context_providers/accommodations/CreateAccommodationCalendarURLDialogProvider";
+import { InstallCalendarDialogProvider } from "../../hooks/context_providers/accommodations/InstallCalendarDialogProvider";
+import { UpdateAccommodationDialogProvider } from "../../hooks/context_providers/accommodations/UpdateAccommodationDialogProvider";
+import { UpdateReservationDialogProvider } from "../../hooks/context_providers/accommodations/UpdateReservationDialogProvider";
+import { AsyncWidget } from "../AsyncWidget";
+import { useFamily } from "../BaseFamilyRoute";
+
+interface AccommodationsContext {
+  accommodations: AccommodationsList;
+  reloadAccommodationsList: () => Promise<void>;
+}
+
+const AccommodationsContextK =
+  React.createContext<AccommodationsContext | null>(null);
+
+export function BaseAccommodationsRoute(): React.ReactElement {
+  const family = useFamily();
+
+  const [accommodations, setAccommodations] =
+    React.useState<null | AccommodationsList>(null);
+
+  const loadKey = React.useRef(1);
+
+  const loadPromise = React.useRef<() => void>();
+
+  const load = async () => {
+    setAccommodations(
+      await AccommodationListApi.GetListOfFamily(family.family)
+    );
+  };
+
+  const onReload = async () => {
+    loadKey.current += 1;
+    setAccommodations(null);
+
+    return new Promise<void>((res, _rej) => {
+      loadPromise.current = () => res();
+    });
+  };
+
+  return (
+    <AsyncWidget
+      ready={accommodations !== null}
+      loadKey={`${family.familyId}-${loadKey.current}`}
+      load={load}
+      errMsg="Échec du chargement des informations sur les logements de la famille !"
+      build={() => {
+        if (loadPromise.current != null) {
+          loadPromise.current?.();
+          loadPromise.current = undefined;
+        }
+
+        return (
+          <AccommodationsContextK.Provider
+            value={{
+              accommodations: accommodations!,
+              reloadAccommodationsList: onReload,
+            }}
+          >
+            <UpdateAccommodationDialogProvider>
+              <CreateAccommodationCalendarURLDialogProvider>
+                <InstallCalendarDialogProvider>
+                  <UpdateReservationDialogProvider>
+                    <Outlet />
+                  </UpdateReservationDialogProvider>
+                </InstallCalendarDialogProvider>
+              </CreateAccommodationCalendarURLDialogProvider>
+            </UpdateAccommodationDialogProvider>
+          </AccommodationsContextK.Provider>
+        );
+      }}
+    />
+  );
+}
+
+export function useAccommodations(): AccommodationsContext {
+  return React.useContext(AccommodationsContextK)!;
+}

geneit_app/src/widgets/forms/PropCheckbox.tsx

@@ -5,16 +5,20 @@ export function PropCheckbox(p: {
   label: string;
   checked: boolean | undefined;
   onValueChange: (v: boolean) => void;
+  checkboxAlwaysVisible?: boolean;
 }): React.ReactElement {
-  if (!p.editable && p.checked)
-    return <Typography variant="body2">{p.label}</Typography>;
+  if (!p.checkboxAlwaysVisible) {
+    if (!p.editable && p.checked)
+      return <Typography variant="body2">{p.label}</Typography>;
 
-  if (!p.editable) return <></>;
+    if (!p.editable) return <></>;
+  }
 
   return (
     <FormControlLabel
       control={
         <Checkbox
+          disabled={!p.editable}
           checked={p.checked}
           onChange={(e) => p.onValueChange(e.target.checked)}
         />

geneit_app/src/widgets/forms/PropColorPicker.tsx

@@ -0,0 +1,24 @@
+import { MuiColorInput } from "mui-color-input";
+import { PropEdit } from "./PropEdit";
+
+export function PropColorPicker(p: {
+  editable: boolean;
+  label: string;
+  value?: string;
+  onChange: (v: string | undefined) => void;
+}): React.ReactElement {
+  if (!p.editable) {
+    if (!p.value) return <></>;
+
+    return <PropEdit editable={false} label={p.label} value={`#${p.value}`} />;
+  }
+
+  return (
+    <MuiColorInput
+      value={"#" + (p.value ?? "")}
+      fallbackValue="#ffffff"
+      format="hex"
+      onChange={(_v, c) => p.onChange(c.hex.substring(1))}
+    />
+  );
+}

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>
+    </>
+  );
+}

geneit_app/src/widgets/forms/PropEdit.tsx

@@ -14,6 +14,7 @@ export function PropEdit(p: {
   multiline?: boolean;
   minRows?: number;
   maxRows?: number;
+  helperText?: string;
 }): React.ReactElement {
   if (((!p.editable && p.value) ?? "") === "") return <></>;
 
@@ -44,6 +45,7 @@ export function PropEdit(p: {
           !p.checkValue(p.value)) ||
         false
       }
+      helperText={p.helperText}
     />
   );
 }

geneit_app/src/widgets/forms/PropSelect.tsx

@@ -2,7 +2,7 @@ import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
 import { PropEdit } from "./PropEdit";
 
 export interface SelectOption {
-  value: string;
+  value: string | undefined;
   label: string;
 }
 
@@ -19,6 +19,7 @@ export function PropSelect(p: {
     const value = p.options.find((o) => o.value === p.value)?.label;
     return <PropEdit label={p.label} editable={p.editing} value={value} />;
   }
+
   return (
     <FormControl fullWidth variant="filled" style={{ marginBottom: "15px" }}>
       <InputLabel>{p.label}</InputLabel>

geneit_app/src/widgets/genealogy/BaseGenealogyRoute.tsx

@@ -5,14 +5,14 @@ import { MemberApi, MembersList } from "../../api/genealogy/MemberApi";
 import { AsyncWidget } from "../AsyncWidget";
 import { useFamily } from "../BaseFamilyRoute";
 
-interface FamilyContext {
+interface GenealogyContext {
   members: MembersList;
   couples: CouplesList;
   reloadMembersList: () => Promise<void>;
   reloadCouplesList: () => Promise<void>;
 }
 
-const GenealogyContextK = React.createContext<FamilyContext | null>(null);
+const GenealogyContextK = React.createContext<GenealogyContext | null>(null);
 
 export function BaseGenealogyRoute(): React.ReactElement {
   const family = useFamily();
@@ -68,6 +68,6 @@ export function BaseGenealogyRoute(): React.ReactElement {
   );
 }
 
-export function useGenealogy(): FamilyContext {
+export function useGenealogy(): GenealogyContext {
   return React.useContext(GenealogyContextK)!;
 }