From 6e6b45e0cc62fbb7c83ffda07798f5fcc6f87d68 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Mon, 17 Jun 2024 21:51:23 +0200
Subject: [PATCH] Add calendar interactions

---
 geneit_app/package-lock.json                  |  9 +++++
 geneit_app/package.json                       |  1 +
 .../AccommodationsReservationsRoute.tsx       | 36 +++++++++++--------
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/geneit_app/package-lock.json b/geneit_app/package-lock.json
index f0db38d..4a49568 100644
--- a/geneit_app/package-lock.json
+++ b/geneit_app/package-lock.json
@@ -14,6 +14,7 @@
         "@fontsource/roboto": "^5.0.13",
         "@fullcalendar/core": "^6.1.14",
         "@fullcalendar/daygrid": "^6.1.14",
+        "@fullcalendar/interaction": "^6.1.14",
         "@fullcalendar/list": "^6.1.14",
         "@fullcalendar/react": "^6.1.14",
         "@mdi/js": "^7.2.96",
@@ -1077,6 +1078,14 @@
         "@fullcalendar/core": "~6.1.14"
       }
     },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "6.1.14",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.14.tgz",
+      "integrity": "sha512-rXum5XCjq+WEPNctFeYL/JKZGeU2rlxrElygocdMegcrIBJQW5hnWWVE+i4/1dOmUKF80CbGVlXUyYXoqK2eFg==",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.14"
+      }
+    },
     "node_modules/@fullcalendar/list": {
       "version": "6.1.14",
       "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.14.tgz",
diff --git a/geneit_app/package.json b/geneit_app/package.json
index 6505f4e..ce72f20 100644
--- a/geneit_app/package.json
+++ b/geneit_app/package.json
@@ -10,6 +10,7 @@
     "@fontsource/roboto": "^5.0.13",
     "@fullcalendar/core": "^6.1.14",
     "@fullcalendar/daygrid": "^6.1.14",
+    "@fullcalendar/interaction": "^6.1.14",
     "@fullcalendar/list": "^6.1.14",
     "@fullcalendar/react": "^6.1.14",
     "@mdi/js": "^7.2.96",
diff --git a/geneit_app/src/routes/family/accommodations/AccommodationsReservationsRoute.tsx b/geneit_app/src/routes/family/accommodations/AccommodationsReservationsRoute.tsx
index f03c005..4bcb28f 100644
--- a/geneit_app/src/routes/family/accommodations/AccommodationsReservationsRoute.tsx
+++ b/geneit_app/src/routes/family/accommodations/AccommodationsReservationsRoute.tsx
@@ -1,3 +1,16 @@
+import { DateSelectArg } from "@fullcalendar/core";
+import frLocale from "@fullcalendar/core/locales/fr";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import listPlugin from "@fullcalendar/list";
+import FullCalendar from "@fullcalendar/react";
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+} from "@mui/material";
 import React from "react";
 import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
 import {
@@ -7,19 +20,7 @@ import {
 import { AsyncWidget } from "../../../widgets/AsyncWidget";
 import { useFamily } from "../../../widgets/BaseFamilyRoute";
 import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
-import {
-  FormControl,
-  FormLabel,
-  FormGroup,
-  FormControlLabel,
-  Checkbox,
-  FormHelperText,
-} from "@mui/material";
 import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
-import FullCalendar from "@fullcalendar/react";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import frLocale from "@fullcalendar/core/locales/fr";
-import listPlugin from "@fullcalendar/list";
 
 export function AccommodationsReservationsRoute(): React.ReactElement {
   const loadKey = React.useRef(1);
@@ -55,6 +56,10 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
     setUsers(null);
   };
 
+  const onSelect = (d: DateSelectArg) => {
+    console.info(d);
+  };
+
   return (
     <>
       <FamilyPageTitle title="Réservation" />
@@ -64,7 +69,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
         errMsg="Echec du chargement de la liste des réservations !"
         build={() => (
           <div style={{ display: "flex", flexDirection: "row" }}>
-            <div style={{ flex: 2, maxWidth: "350px" }}>
+            <div style={{ flex: 1, maxWidth: "250px" }}>
               {/* Invitation status */}
               <FormControl
                 sx={{ m: 3 }}
@@ -163,7 +168,9 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
             {/* The calendar */}
             <div style={{ flex: 5 }}>
               <FullCalendar
-                plugins={[dayGridPlugin, listPlugin]}
+                editable={true}
+                selectable={true}
+                plugins={[dayGridPlugin, listPlugin, interactionPlugin]}
                 initialView="dayGridMonth"
                 height="700px"
                 locale={frLocale}
@@ -172,6 +179,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                   center: "title",
                   right: "dayGridMonth,dayGridWeek,listWeek",
                 }}
+                select={onSelect}
               />
             </div>
           </div>