add feedback when moving reservation slot

Author: imperosol

locale/fr/LC_MESSAGES/djangojs.po

@@ -7,7 +7,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-04-22 17:07+0200\n"
+"POT-Creation-Date: 2025-06-30 22:48+0200\n"
 "PO-Revision-Date: 2024-09-17 11:54+0200\n"
 "Last-Translator: Sli <antoine@bartuccio.fr>\n"
 "Language-Team: AE info <ae.info@utbm.fr>\n"
@@ -193,7 +193,7 @@ msgstr "Montrer moins"
 msgid "Show more"
 msgstr "Montrer plus"
 
-#: core/static/bundled/user/family-graph-index.js
+#: core/static/bundled/user/family-graph-index.ts
 msgid "family_tree.%(extension)s"
 msgstr "arbre_genealogique.%(extension)s"
 
@@ -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"

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();
     }
   }

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

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") }}"