Fix booking update and reactivity

src/stores/reservation.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import type { Reservation } from './schedule.types';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
 import { ID, Query } from 'appwrite';
 import { date, useQuasar } from 'quasar';
@@ -61,17 +61,28 @@ export const useReservationStore = defineStore('reservation', () => {
     }
   };
 
-  const createReservation = async (
+  const createOrUpdateReservation = async (
     reservation: Reservation
   ): Promise<Reservation> => {
+    let response;
     try {
-      const response = await databases.createDocument(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.reservation,
-        ID.unique(),
-        reservation
-      );
+      if (reservation.$id) {
+        response = await databases.updateDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collection.reservation,
+          reservation.$id,
+          reservation
+        );
+      } else {
+        response = await databases.createDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collection.reservation,
+          ID.unique(),
+          reservation
+        );
+      }
       reservations.value.set(response.$id, response as Reservation);
+      userReservations.value.set(response.$id, response as Reservation);
       console.info('Reservation booked: ', response);
       return response as Reservation;
     } catch (e) {
@@ -241,10 +252,31 @@ export const useReservationStore = defineStore('reservation', () => {
     return sortedUserReservations.value?.filter((b) => isPast(b.end));
   });
 
+  // Ensure reactivity for computed properties when Map is modified
+  watch(
+    reservations,
+    () => {
+      sortedUserReservations.value;
+      futureUserReservations.value;
+      pastUserReservations.value;
+    },
+    { deep: true }
+  );
+
+  watch(
+    userReservations,
+    () => {
+      sortedUserReservations.value;
+      futureUserReservations.value;
+      pastUserReservations.value;
+    },
+    { deep: true }
+  );
+
   return {
     getReservationsByDate,
     getReservationById,
-    createReservation,
+    createOrUpdateReservation,
     deleteReservation,
     fetchReservationsForDateRange,
     isReservationOverlapped,