Refactor Reservations into new store

src/App.vue

@@ -7,6 +7,7 @@ import { defineComponent, onMounted } from 'vue';
 import { useScheduleStore } from './stores/schedule';
 import { useBoatStore } from './stores/boat';
 import { useAuthStore } from './stores/auth';
+import { useReservationStore } from './stores/reservation';
 
 defineComponent({
   name: 'OYS Borrow-a-Boat',
@@ -16,7 +17,7 @@ onMounted(async () => {
   await useAuthStore().init();
   await useScheduleStore().fetchIntervalTemplates();
   await useScheduleStore().fetchIntervals();
-  await useScheduleStore().fetchReservations();
+  await useReservationStore().fetchReservations();
   await useBoatStore().fetchBoats();
 });
 </script>

src/components/ResourceScheduleViewerComponent.vue

@@ -114,7 +114,7 @@ import {
   parsed,
 } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import { useScheduleStore } from 'src/stores/schedule';
+import { useReservationStore } from 'src/stores/reservation';
 import { date } from 'quasar';
 import { computed } from 'vue';
 import type { StatusTypes } from 'src/stores/schedule.types';
@@ -146,7 +146,7 @@ const statusLookup = {
 
 const calendar = ref();
 const boatStore = useBoatStore();
-const scheduleStore = useScheduleStore();
+const reservationStore = useReservationStore();
 const selectedDate = ref(today());
 const duration = ref(1);
 
@@ -172,7 +172,7 @@ function monthFormatter() {
 }
 
 function getEvents(scope: ResourceIntervalScope) {
-  const resourceEvents = scheduleStore.getBoatReservations(
+  const resourceEvents = reservationStore.getBoatReservations(
     parseDate(date.extractDate(selectedDate.value, 'YYYY-MM-DD')) as Timestamp,
     scope.resource.$id
   );

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -79,8 +79,10 @@ import { useScheduleStore } from 'src/stores/schedule';
 import { useAuthStore } from 'src/stores/auth';
 import { Interval, Reservation } from 'src/stores/schedule.types';
 import { storeToRefs } from 'pinia';
+import { useReservationStore } from 'src/stores/reservation';
 
 const scheduleStore = useScheduleStore();
+const reservationStore = useReservationStore();
 const { boats } = storeToRefs(useBoatStore());
 const selectedBlock = defineModel<Interval | null>();
 const selectedDate = ref(today());
@@ -187,7 +189,7 @@ function getBoatBlocks(scope: DayBodyScope): Interval[] {
 function getBoatReservations(scope: DayBodyScope): Reservation[] {
   const boat = boats.value[scope.columnIndex];
   return boat
-    ? scheduleStore.getBoatReservations(scope.timestamp, boat.$id)
+    ? reservationStore.getBoatReservations(scope.timestamp, boat.$id)
     : [];
 }
 

src/pages/schedule/BoatReservationPage.vue

@@ -101,9 +101,9 @@ import { ref, computed, watch } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import { date } from 'quasar';
-import { useScheduleStore } from 'src/stores/schedule';
 import { Interval } from 'src/stores/schedule.types';
 import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
+import { getNewId } from 'src/utils/misc';
 
 interface BookingForm {
   bookingId: string;
@@ -118,10 +118,9 @@ interface BookingForm {
 const auth = useAuthStore();
 const dateFormat = 'MMM D, YYYY h:mm A';
 const resourceView = ref(true);
-const scheduleStore = useScheduleStore();
 const timeblock = ref<Interval>();
 const bookingForm = ref<BookingForm>({
-  bookingId: scheduleStore.getNewId(),
+  bookingId: getNewId(),
   name: auth.currentUser?.name,
   boat: <Boat | undefined>undefined,
   startDate: date.formatDate(new Date(), dateFormat),

src/pages/schedule/BoatScheduleView.vue

@@ -52,10 +52,10 @@
 </template>
 
 <script setup lang="ts">
-import { useScheduleStore } from 'src/stores/schedule';
+import { useReservationStore } from 'src/stores/reservation';
 import { Reservation } from 'src/stores/schedule.types';
 import { ref } from 'vue';
-const scheduleStore = useScheduleStore();
+const reservationStore = useReservationStore();
 import { TimestampOrNull, parsed, today } from '@quasar/quasar-ui-qcalendar';
 import { QCalendarDay } from '@quasar/quasar-ui-qcalendar';
 import { date } from 'quasar';
@@ -87,7 +87,7 @@ function slotStyle(
 }
 
 function reservationEvents(timestamp: Timestamp) {
-  return scheduleStore.getBoatReservations(timestamp);
+  return reservationStore.getBoatReservations(timestamp);
 }
 function onMoved(data: Event) {
   console.log('onMoved', data);

src/pages/schedule/ManageCalendar.vue

@@ -145,9 +145,9 @@ import {
   blocksOverlapped,
   buildInterval,
   useScheduleStore,
-  buildISODate,
 } from 'src/stores/schedule';
 import { onMounted, ref } from 'vue';
+import { buildISODate } from 'src/utils/misc';
 import type {
   Interval,
   IntervalTemplate,

src/stores/reservation.ts

@@ -0,0 +1,84 @@
+import { defineStore } from 'pinia';
+import type { Reservation } from './schedule.types';
+import { ref } from 'vue';
+import { AppwriteIds, databases } from 'src/boot/appwrite';
+import { Timestamp, parsed } from '@quasar/quasar-ui-qcalendar';
+
+export const useReservationStore = defineStore('reservation', () => {
+  const reservations = ref<Reservation[]>([]);
+
+  const getConflictingReservations = (
+    resource: string,
+    start: Date,
+    end: Date
+  ): Reservation[] => {
+    const overlapped = reservations.value.filter(
+      (entry: Reservation) =>
+        entry.resource == resource &&
+        new Date(entry.start) < end &&
+        new Date(entry.end) > start
+    );
+    return overlapped;
+  };
+
+  const isResourceTimeOverlapped = (
+    resource: string,
+    start: Date,
+    end: Date
+  ): boolean => {
+    return getConflictingReservations(resource, start, end).length > 0;
+  };
+
+  const isReservationOverlapped = (res: Reservation): boolean => {
+    return isResourceTimeOverlapped(
+      res.resource,
+      new Date(res.start),
+      new Date(res.end)
+    );
+  };
+
+  const addOrCreateReservation = (reservation: Reservation) => {
+    const index = reservations.value.findIndex(
+      (res) => res.id == reservation.id
+    );
+    index != -1
+      ? (reservations.value[index] = reservation)
+      : reservations.value.push(reservation);
+  };
+  async function fetchReservations() {
+    try {
+      const response = await databases.listDocuments(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.reservation
+      );
+      reservations.value = response.documents as Reservation[];
+    } catch (error) {
+      console.error('Failed to fetch timeblocks', error);
+    }
+  }
+
+  const getBoatReservations = (
+    searchDate: Timestamp,
+    boat?: string
+  ): Reservation[] => {
+    const result = reservations.value.filter((x) => {
+      return (
+        ((parsed(x.start)?.date == searchDate.date ||
+          parsed(x.end)?.date == searchDate.date) && // Part of reservation falls on day
+          x.resource != undefined && // A boat is defined
+          !boat) ||
+        x.resource == boat // A specific boat has been passed, and matches
+      );
+    });
+    return result;
+  };
+
+  return {
+    getBoatReservations,
+    fetchReservations,
+    addOrCreateReservation,
+    isReservationOverlapped,
+    isResourceTimeOverlapped,
+    getConflictingReservations,
+  };
+});

src/stores/schedule.ts

@@ -8,14 +8,10 @@ import {
   compareDate,
 } from '@quasar/quasar-ui-qcalendar';
 
-import {
-  Reservation,
-  IntervalTemplate,
-  TimeTuple,
-  Interval,
-} from './schedule.types';
+import { IntervalTemplate, TimeTuple, Interval } from './schedule.types';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
 import { ID, Models } from 'appwrite';
+import { buildISODate } from 'src/utils/misc';
 
 export function arrayToTimeTuples(arr: string[]) {
   const timeTuples: TimeTuple[] = [];
@@ -65,10 +61,6 @@ export function copyIntervalTemplate(
   };
 }
 
-export function buildISODate(date: string, time: string | null): string {
-  return new Date(date + 'T' + time || '00:00').toISOString();
-}
-
 export function buildInterval(
   resource: Boat,
   time: TimeTuple,
@@ -86,7 +78,6 @@ export function buildInterval(
 
 export const useScheduleStore = defineStore('schedule', () => {
   // TODO: Implement functions to dynamically pull this data.
-  const reservations = ref<Reservation[]>([]);
   const timeblocks = ref<Interval[]>([]);
   const timeblockTemplates = ref<IntervalTemplate[]>([]);
 
@@ -108,34 +99,6 @@ export const useScheduleStore = defineStore('schedule', () => {
     });
   };
 
-  async function fetchReservations() {
-    try {
-      const response = await databases.listDocuments(
-        AppwriteIds.databaseId,
-        AppwriteIds.collection.reservation
-      );
-      reservations.value = response.documents as Reservation[];
-    } catch (error) {
-      console.error('Failed to fetch timeblocks', error);
-    }
-  }
-
-  const getBoatReservations = (
-    searchDate: Timestamp,
-    boat?: string
-  ): Reservation[] => {
-    const result = reservations.value.filter((x) => {
-      return (
-        ((parsed(x.start)?.date == searchDate.date ||
-          parsed(x.end)?.date == searchDate.date) && // Part of reservation falls on day
-          x.resource != undefined && // A boat is defined
-          !boat) ||
-        x.resource == boat // A specific boat has been passed, and matches
-      );
-    });
-    return result;
-  };
-
   async function fetchIntervals() {
     try {
       const response = await databases.listDocuments(
@@ -182,53 +145,6 @@ export const useScheduleStore = defineStore('schedule', () => {
   //   return scheduleStore.getConflictingReservations(boat, start, end);
   // };
 
-  const getConflictingReservations = (
-    resource: string,
-    start: Date,
-    end: Date
-  ): Reservation[] => {
-    const overlapped = reservations.value.filter(
-      (entry: Reservation) =>
-        entry.resource == resource &&
-        new Date(entry.start) < end &&
-        new Date(entry.end) > start
-    );
-    return overlapped;
-  };
-
-  const isResourceTimeOverlapped = (
-    resource: string,
-    start: Date,
-    end: Date
-  ): boolean => {
-    return getConflictingReservations(resource, start, end).length > 0;
-  };
-
-  const isReservationOverlapped = (res: Reservation): boolean => {
-    return isResourceTimeOverlapped(
-      res.resource,
-      new Date(res.start),
-      new Date(res.end)
-    );
-  };
-
-  const getNewId = (): string => {
-    return [...Array(20)]
-      .map(() => Math.floor(Math.random() * 16).toString(16))
-      .join('');
-    // Trivial placeholder
-    //return Math.max(...reservations.value.map((item) => item.id)) + 1;
-  };
-
-  const addOrCreateReservation = (reservation: Reservation) => {
-    const index = reservations.value.findIndex(
-      (res) => res.id == reservation.id
-    );
-    index != -1
-      ? (reservations.value[index] = reservation)
-      : reservations.value.push(reservation);
-  };
-
   const createInterval = async (interval: Interval) => {
     try {
       const response = await databases.createDocument(
@@ -326,20 +242,12 @@ export const useScheduleStore = defineStore('schedule', () => {
   };
 
   return {
-    reservations,
     timeblocks,
     timeblockTemplates,
-    getBoatReservations,
-    getConflictingReservations,
-    addOrCreateReservation,
-    isReservationOverlapped,
-    isResourceTimeOverlapped,
-    fetchReservations,
     getIntervalsForDate,
     getIntervals,
     fetchIntervals,
     fetchIntervalTemplates,
-    getNewId,
     createInterval,
     updateInterval,
     deleteInterval,

src/utils/misc.ts

@@ -0,0 +1,11 @@
+export function buildISODate(date: string, time: string | null): string {
+  return new Date(date + 'T' + time || '00:00').toISOString();
+}
+
+export function getNewId(): string {
+  return [...Array(20)]
+    .map(() => Math.floor(Math.random() * 16).toString(16))
+    .join('');
+  // Trivial placeholder
+  //return Math.max(...reservations.value.map((item) => item.id)) + 1;
+}