add feedback when moving reservation slot

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