geneit_app/src/api/accommodations/AccommodationsReservationsApi.tsx

@@ -64,6 +64,25 @@ export interface UpdateAccommodationReservation {
 }
 
 export class AccommodationsReservationsApi {
+  /**
+   * Create a new reservation
+   */
+  static async Create(
+    family: Family,
+    reservation: UpdateAccommodationReservation
+  ): Promise<AccommodationReservation> {
+    return (
+      await APIClient.exec({
+        method: "POST",
+        uri: `/family/${family.family_id}/accommodations/reservations/accommodation/${reservation.accommodation_id}/create`,
+        jsonData: {
+          start: reservation.start,
+          end: reservation.end,
+        },
+      })
+    ).data;
+  }
+
   /**
    * Get the entire list of accommodations of a family
    */

geneit_app/src/dialogs/accommodations/UpdateReservationDialog.tsx

@@ -5,7 +5,6 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Typography,
 } from "@mui/material";
 import React from "react";
 import {
@@ -14,11 +13,11 @@ import {
   UpdateAccommodationReservation,
 } from "../../api/accommodations/AccommodationsReservationsApi";
 import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
+import { fmtUnixDate } from "../../utils/time_utils";
 import { useFamily } from "../../widgets/BaseFamilyRoute";
 import { useAccommodations } from "../../widgets/accommodations/BaseAccommodationsRoute";
 import { PropDateInput } from "../../widgets/forms/PropDateInput";
 import { PropSelect } from "../../widgets/forms/PropSelect";
-import { fmtUnixDate } from "../../utils/time_utils";
 
 export function UpdateReservationDialog(p: {
   open: boolean;
@@ -121,7 +120,11 @@ export function UpdateReservationDialog(p: {
               return { label: a.name, value: a.id.toString() };
             }
           )}
-          value={reservation?.accommodation_id?.toString()}
+          value={
+            reservation?.accommodation_id === -1
+              ? ""
+              : reservation?.accommodation_id?.toString()
+          }
         />
 
         <PropDateInput

geneit_app/src/routes/family/accommodations/AccommodationsReservationsRoute.tsx

@@ -17,6 +17,9 @@ import {
   AccommodationsReservationsApi,
   AccommodationsReservationsList,
 } from "../../../api/accommodations/AccommodationsReservationsApi";
+import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
+import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
+import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
 import { useUpdateAccommodationReservation } from "../../../hooks/context_providers/accommodations/UpdateReservationDialogProvider";
 import { AsyncWidget } from "../../../widgets/AsyncWidget";
 import { useFamily } from "../../../widgets/BaseFamilyRoute";
@@ -24,6 +27,10 @@ import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
 import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
 
 export function AccommodationsReservationsRoute(): React.ReactElement {
+  const snackbar = useSnackbar();
+  const alert = useAlert();
+  const loadingMessage = useLoadingMessage();
+
   const loadKey = React.useRef(1);
 
   const family = useFamily();
@@ -58,18 +65,31 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
     setUsers(null);
   };
 
-  const onSelect = (d: DateSelectArg) => {
-    // TODO : render this functional
-    // TODO : handle busy case
-    console.info(d);
-    updateReservation(
-      {
-        accommodation_id: -1,
-        start: Math.floor(d.start.getTime() / 1000),
-        end: Math.floor(d.end.getTime() / 1000),
-      },
-      true
-    );
+  const onSelect = async (d: DateSelectArg) => {
+    try {
+      const resa = await updateReservation(
+        {
+          accommodation_id: -1,
+          start: Math.floor(d.start.getTime() / 1000),
+          end: Math.floor(d.end.getTime() / 1000),
+        },
+        true
+      );
+
+      if (!resa) return;
+
+      loadingMessage.show("Création de la réservation en cours...");
+
+      await AccommodationsReservationsApi.Create(family.family, resa);
+
+      reload();
+      snackbar("La réservation a été créée avec succès !");
+    } catch (e) {
+      console.error("Failed to create a reservation!", e);
+      alert("Échec de la création de la réservation!");
+    } finally {
+      loadingMessage.hide();
+    }
   };
 
   return (