add feedback when moving reservation slot

Author: imperosol

locale/fr/LC_MESSAGES/djangojs.po

@@ -259,6 +259,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

@@ -8,7 +8,6 @@ import enLocale from "@fullcalendar/core/locales/en-gb";
 import frLocale from "@fullcalendar/core/locales/fr";
 import interactionPlugin, { type EventResizeDoneArg } from "@fullcalendar/interaction";
 import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
-
 import { paginated } from "#core:utils/api";
 import { inheritHtmlElement, registerComponent } from "#core:utils/web-components";
 import {
@@ -19,8 +18,6 @@ import {
   type SlotSchema,
 } from "#openapi";
 import type { SlotSelectedEventArg } from "#reservation:reservation/types";
-import interactionPlugin from "@fullcalendar/interaction";
-import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
 
 @registerComponent("room-scheduler")
 export class RoomScheduler extends inheritHtmlElement("div") {
@@ -76,17 +73,15 @@ export class RoomScheduler extends inheritHtmlElement("div") {
    * Send a request to the API to change
    * 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());
+  async changeReservation(args: EventDropArg | EventResizeDoneArg) {
     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();
     }
   }
@@ -134,6 +129,7 @@ export class RoomScheduler extends inheritHtmlElement("div") {
       selectConstraint: { start: new Date() },
       nowIndicator: true,
       eventDrop: this.changeReservation,
+      eventResize: this.changeReservation,
     });
     this.scheduler.render();
   }

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