Fix booking update and reactivity

src/components/BoatReservationComponent.vue

@@ -221,9 +221,9 @@ const onSubmit = async () => {
     )
   ) {
     // TODO: Make a proper validator
-    return;
+    return false;
   }
-  const reservation = <Reservation>{
+  const newReservation = <Reservation>{
     resource: booking.interval.resource,
     start: booking.interval.start,
     end: booking.interval.end,
@@ -231,6 +231,7 @@ const onSubmit = async () => {
     status: 'confirmed',
     reason: booking.reason,
     comment: booking.comment,
+    $id: reservation.value?.$id,
   };
   const status = $q.notify({
     color: 'secondary',
@@ -243,11 +244,11 @@ const onSubmit = async () => {
     group: false,
   });
   try {
-    const r = await reservationStore.createReservation(reservation);
+    const r = await reservationStore.createOrUpdateReservation(newReservation);
     status({
       color: 'positive',
       icon: 'cloud_done',
-      message: `Booking successful: ${
+      message: `Booking ${newReservation.$id ? 'updated' : 'created'}: ${
         boatStore.getBoatById(r.resource)?.name
       } at ${formatDate(r.start)}`,
       spinner: false,

src/pages/schedule/ListReservationsPage.vue

@@ -41,7 +41,7 @@
       </q-card>
       <div v-else>
         <div
-          v-for="reservation in sortedUserReservations"
+          v-for="reservation in futureUserReservations"
           :key="reservation.$id">
           <ReservationCardComponent :modelValue="reservation" />
         </div>
@@ -61,10 +61,11 @@
 <script setup lang="ts">
 import { useReservationStore } from 'src/stores/reservation';
 import ReservationCardComponent from 'src/components/scheduling/ReservationCardComponent.vue';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
-const { sortedUserReservations, futureUserReservations, pastUserReservations } =
-  useReservationStore();
+const { futureUserReservations, pastUserReservations } = useReservationStore();
+
+onMounted(() => useReservationStore().fetchUserReservations());
 
 const tab = ref('upcoming');
 

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,