From 4cc93395a769bfeddb1ff289b56dcae80272c6ac Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Mon, 30 Jun 2025 22:50:44 +0200
Subject: [PATCH] add feedback when moving reservation slot

---
 locale/fr/LC_MESSAGES/djangojs.po                |  4 ++++
 .../components/room-scheduler-index.ts           |  8 +++-----
 .../reservation/slot-reservation-index.ts        | 16 ++++++++++++++++
 reservation/templates/reservation/schedule.jinja |  8 ++++++++
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/locale/fr/LC_MESSAGES/djangojs.po b/locale/fr/LC_MESSAGES/djangojs.po
index 5cf06d0e..28358104 100644
--- a/locale/fr/LC_MESSAGES/djangojs.po
+++ b/locale/fr/LC_MESSAGES/djangojs.po
@@ -255,6 +255,10 @@ msgstr "La réorganisation des types de produit a échoué avec le code : %d"
 msgid "Rooms"
 msgstr "Salles"
 
+#: reservation/static/bundled/reservation/slot-reservation-index.ts
+msgid "This slot has been successfully moved"
+msgstr "Ce créneau a été bougé avec succès"
+
 #: sas/static/bundled/sas/pictures-download-index.ts
 msgid "pictures.%(extension)s"
 msgstr "photos.%(extension)s"
diff --git a/reservation/static/bundled/reservation/components/room-scheduler-index.ts b/reservation/static/bundled/reservation/components/room-scheduler-index.ts
index 3f2a5554..b31ff0e2 100644
--- a/reservation/static/bundled/reservation/components/room-scheduler-index.ts
+++ b/reservation/static/bundled/reservation/components/room-scheduler-index.ts
@@ -76,16 +76,14 @@ export class RoomScheduler extends inheritHtmlElement("div") {
    * the start and the duration of a reservation slot
    */
   async changeReservation(args: EventDropArg) {
-    const duration = new Date(args.event.end.getTime() - args.event.start.getTime());
     const response = await reservationslotUpdateSlot({
       // biome-ignore lint/style/useNamingConvention: api is snake_case
       path: { slot_id: Number.parseInt(args.event.id) },
-      body: {
-        start_at: args.event.startStr,
-        end_at: args.event.endStr,
-      },
+      // biome-ignore lint/style/useNamingConvention: api is snake_case
+      body: { start_at: args.event.startStr, end_at: args.event.endStr },
     });
     if (response.response.ok) {
+      document.dispatchEvent(new CustomEvent("reservationSlotChanged"));
       this.scheduler.refetchEvents();
     }
   }
diff --git a/reservation/static/bundled/reservation/slot-reservation-index.ts b/reservation/static/bundled/reservation/slot-reservation-index.ts
index c6aa730d..2bde9c2a 100644
--- a/reservation/static/bundled/reservation/slot-reservation-index.ts
+++ b/reservation/static/bundled/reservation/slot-reservation-index.ts
@@ -1,3 +1,4 @@
+import { AlertMessage } from "#core:utils/alert-message";
 import type { SlotSelectedEventArg } from "#reservation:reservation/types";
 
 document.addEventListener("alpine:init", () => {
@@ -20,4 +21,19 @@ document.addEventListener("alpine:init", () => {
       );
     },
   }));
+
+  /**
+   * Component that will catch events sent from the scheduler
+   * to display success messages accordingly.
+   */
+  Alpine.data("scheduleMessages", () => ({
+    alertMessage: new AlertMessage({ defaultDuration: 2000 }),
+    init() {
+      document.addEventListener("reservationSlotChanged", (_event: CustomEvent) => {
+        this.alertMessage.display(gettext("This slot has been successfully moved"), {
+          success: true,
+        });
+      });
+    },
+  }));
 });
diff --git a/reservation/templates/reservation/schedule.jinja b/reservation/templates/reservation/schedule.jinja
index a2bd538a..9e3233cf 100644
--- a/reservation/templates/reservation/schedule.jinja
+++ b/reservation/templates/reservation/schedule.jinja
@@ -13,6 +13,14 @@
 
 {% block content %}
   <h2 class="margin-bottom">{% trans %}Room reservation{% endtrans %}</h2>
+  <p
+    x-data="scheduleMessages"
+    class="alert snackbar"
+    :class="alertMessage.success ? 'alert-green' : 'alert-red'"
+    x-show="alertMessage.open"
+    x-transition.duration.500ms
+    x-text="alertMessage.content"
+  ></p>
   <room-scheduler
     locale="{{ LANGUAGE_CODE }}"
     can_edit_slot="{{ user.has_perm("reservation.change_reservationslot") }}"