geneit_app/src/api/accommodations/AccommodationsReservationsApi.tsx

@@ -118,6 +118,23 @@ export class AccommodationsReservationsApi {
     return new AccommodationsReservationsList(data);
   }
 
+  /**
+   * Update a reservation
+   */
+  static async Update(
+    family: Family,
+    r: UpdateAccommodationReservation
+  ): Promise<void> {
+    await APIClient.exec({
+      method: "PATCH",
+      uri: `/family/${family.family_id}/accommodations/reservation/${r.reservation_id}`,
+      jsonData: {
+        start: r.start,
+        end: r.end,
+      },
+    });
+  }
+
   /**
    * Delete a reservation
    */

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

@@ -5,6 +5,7 @@ import interactionPlugin from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
 import FullCalendar from "@fullcalendar/react";
 import DeleteIcon from "@mui/icons-material/Delete";
+import EditIcon from "@mui/icons-material/Edit";
 import {
   Alert,
   Avatar,
@@ -172,6 +173,44 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
     });
   };
 
+  const changeReservation = async (r: AccommodationReservation) => {
+    try {
+      const ac = accommodations.accommodations.get(r.accommodation_id);
+      if (
+        ac?.need_validation &&
+        !(await confirm(
+          "Voulez-vous vraiment changer cette réservation ? Celle-ci devra être de nouveau validée !"
+        ))
+      )
+        return;
+
+      const newResa = await updateReservation(
+        {
+          reservation_id: r.id,
+          accommodation_id: r.accommodation_id,
+          start: r.reservation_start,
+          end: r.reservation_end,
+        },
+        false
+      );
+
+      if (!newResa) return;
+
+      setActiveEvent(undefined);
+      loadingMessage.show("Mise à jour de la réservation en cours...");
+
+      await AccommodationsReservationsApi.Update(family.family, newResa);
+
+      reload();
+      snackbar("La réservation a été mise à jour avec succès !");
+    } catch (e) {
+      console.error("Failed to update a reservation!", e);
+      alert("Échec de la mise à jour de la réservation!");
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
   const deleteReservation = async (r: AccommodationReservation) => {
     try {
       if (
@@ -428,16 +467,27 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                 </CardContent>
                 <CardActions disableSpacing>
                   {user.user.id === activeEvent?.reservation.user_id && (
-                    <Tooltip title="Supprimer la réservation" arrow>
-                      <IconButton
-                        color="error"
-                        onClick={() =>
-                          deleteReservation(activeEvent?.reservation)
-                        }
-                      >
-                        <DeleteIcon />
-                      </IconButton>
-                    </Tooltip>
+                    <>
+                      <Tooltip title="Modifer les dates de réservation" arrow>
+                        <IconButton
+                          onClick={() =>
+                            changeReservation(activeEvent?.reservation)
+                          }
+                        >
+                          <EditIcon />
+                        </IconButton>
+                      </Tooltip>
+                      <Tooltip title="Supprimer la réservation" arrow>
+                        <IconButton
+                          color="error"
+                          onClick={() =>
+                            deleteReservation(activeEvent?.reservation)
+                          }
+                        >
+                          <DeleteIcon />
+                        </IconButton>
+                      </Tooltip>
+                    </>
                   )}
                 </CardActions>
               </Card>