Fix bug

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -71,7 +71,7 @@
                 ">
                 {{ getUserName(reservation.user) || 'loading...' }}
                 <br />
-                <q-chip>{{ reservation.reason }}</q-chip>
+                <q-chip class="gt-md">{{ reservation.reason }}</q-chip>
               </div>
             </div>
           </template>

src/pages/schedule/ListBookingsPage.vue

@@ -1,7 +1,28 @@
 <template>
+  <q-card
+    clas="q-ma-md"
+    bordered
+    v-if="!reservations">
+    <q-card-section>
+      <div class="text-h6">You don't have any bookings!</div>
+      <div class="text-h8">Why don't you go make one?</div>
+    </q-card-section>
+    <q-card-actions>
+      <q-btn
+        color="primary"
+        icon="event"
+        :size="`1.25em`"
+        label="Book Now"
+        rounded
+        class="full-width"
+        :align="'left'"
+        to="/schedule/book" />
+    </q-card-actions>
+  </q-card>
   <template
-    v-for="(booking, index) in sortedBookings"
-    :key="booking.$id">
+    v-else
+    v-for="(reservation, index) in sortedBookings"
+    :key="reservation.$id">
     <q-toolbar
       class="bg-secondary glossy text-white"
       v-if="showMarker(index, sortedBookings)">
@@ -9,20 +30,23 @@
     </q-toolbar>
     <q-card
       bordered
-      :class="isPast(booking.end) ? 'text-blue-grey-6' : ''"
+      :class="isPast(reservation.end) ? 'text-blue-grey-6' : ''"
       class="q-ma-md">
       <q-card-section>
         <div class="row items-center no-wrap">
           <div class="col">
             <div class="text-h6">
-              {{ boatStore.getBoatById(booking.resource)?.name }}
+              {{ boatStore.getBoatById(reservation.resource)?.name }}
             </div>
             <div class="text-subtitle2">
-              <p>Start: {{ formatDate(booking.start) }}</p>
-              <p>End: {{ formatDate(booking.end) }}</p>
+              <p>
+                Start: {{ formatDate(reservation.start) }}
+                <br />
+                End: {{ formatDate(reservation.end) }}
+              </p>
             </div>
           </div>
-          <div class="col-auto">
+          <!-- <div class="col-auto">
             <q-btn
               color="grey-7"
               round
@@ -33,45 +57,84 @@
                 auto-close>
                 <q-list>
                   <q-item clickable>
-                    <q-item-section>Remove Card</q-item-section>
+                    <q-item-section>remove card</q-item-section>
                   </q-item>
                   <q-item clickable>
-                    <q-item-section>Send Feedback</q-item-section>
+                    <q-item-section>send feedback</q-item-section>
                   </q-item>
                   <q-item clickable>
-                    <q-item-section>Share</q-item-section>
+                    <q-item-section>share</q-item-section>
                   </q-item>
                 </q-list>
               </q-menu>
             </q-btn>
-          </div>
+          </div> -->
         </div>
       </q-card-section>
 
-      <q-card-section>Some more information here...</q-card-section>
+      <!-- <q-card-section>Some more information here...</q-card-section> -->
 
       <q-separator />
 
-      <q-card-actions>
-        <q-btn flat>Action 1</q-btn>
-        <q-btn flat>Action 2</q-btn>
+      <q-card-actions v-if="!isPast(reservation.end)">
+        <q-btn
+          flat
+          @click="modifyReservation(reservation)">
+          Modify
+        </q-btn>
+        <q-btn
+          flat
+          @click="cancelReservation(reservation)">
+          Cancel
+        </q-btn>
       </q-card-actions>
     </q-card>
   </template>
+  <q-dialog v-model="cancelDialog">
+    <q-card>
+      <q-card-section class="row items-center">
+        <q-avatar
+          icon="stop"
+          color="negative"
+          text-color="white" />
+        <span class="q-ml-sm">
+          This will delete your reservation for
+          {{ boatStore.getBoatById(currentReservation?.resource) }} on
+          {{ formatDate(currentReservation?.start) }}
+        </span>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+          flat
+          label="Cancel"
+          color="primary"
+          v-close-popup />
+        <q-btn
+          flat
+          label="Delete"
+          color="negative"
+          @click="reservationStore.deleteReservation(Reservation)"
+          v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { useBoatStore } from 'src/stores/boat';
 import { useReservationStore } from 'src/stores/reservation';
 import { Reservation } from 'src/stores/schedule.types';
 import { formatDate } from 'src/utils/schedule';
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 const reservationStore = useReservationStore();
-const bookings = reservationStore.getUserReservations();
+const reservations = reservationStore.getUserReservations();
 const boatStore = useBoatStore();
+const currentReservation = ref<Reservation>();
+const cancelDialog = ref(false);
 
 const sortedBookings = computed(() =>
-  bookings.value
+  reservations.value
     ?.slice()
     .sort((a, b) => new Date(b.start).getTime() - new Date(a.start).getTime())
 );
@@ -100,6 +163,15 @@ const showMarker = (
   );
 };
 
+const cancelReservation = (reservation: Reservation) => {
+  currentReservation.value = reservation;
+  cancelDialog.value = true;
+};
+
+const modifyReservation = (reservation: Reservation) => {
+  return reservation;
+};
+
 onMounted(() => {
   boatStore.fetchBoats();
   reservationStore.fetchUserReservations();

src/stores/boat.ts

@@ -39,8 +39,9 @@ export const useBoatStore = defineStore('boat', () => {
     }
   }
 
-  const getBoatById = (id: string): Boat | null => {
-    return boats.value.find((b) => b.$id === id) || null;
+  const getBoatById = (id: string | null | undefined): Boat | null => {
+    if (!id) return null;
+    return boats.value?.find((b) => b.$id === id) || null;
   };
 
   return { boats, fetchBoats, getBoatById };

src/stores/reservation.ts

@@ -60,6 +60,32 @@ export const useReservationStore = defineStore('reservation', () => {
     }
   };
 
+  const deleteReservation = async (
+    reservation: string | Reservation | null | undefined
+  ) => {
+    if (!reservation) return false;
+    let id;
+    if (typeof reservation === 'string') {
+      id = reservation;
+    } else if ('$id' in reservation && typeof reservation.$id === 'string') {
+      id = reservation.$id;
+    } else {
+      return false;
+    }
+
+    try {
+      await databases.deleteDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.interval,
+        id
+      );
+      reservations.value.delete(id);
+      console.info(`Deleted reservation: ${id}`);
+    } catch (e) {
+      console.error('Error deleting reservation: ' + e);
+    }
+  };
+
   // Set the loading state for dates
   const setDateLoaded = (start: Date, end: Date, state: LoadingTypes) => {
     if (start > end) return [];
@@ -160,6 +186,7 @@ export const useReservationStore = defineStore('reservation', () => {
   return {
     getReservationsByDate,
     createReservation,
+    deleteReservation,
     fetchReservationsForDateRange,
     isReservationOverlapped,
     isResourceTimeOverlapped,