Sorted out reactivity with storeToRefs

src/stores/boat.ts

@@ -1,7 +1,7 @@
 import { Models } from 'appwrite';
 import { defineStore } from 'pinia';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 // const boatSource = null;
 
@@ -25,7 +25,7 @@ export interface Boat extends Models.Document {
 }
 
 export const useBoatStore = defineStore('boat', () => {
-  const boatData = ref<Boat[]>([]);
+  const boats = ref<Boat[]>([]);
 
   async function fetchBoats() {
     try {
@@ -33,18 +33,11 @@ export const useBoatStore = defineStore('boat', () => {
         AppwriteIds.databaseId,
         AppwriteIds.collection.boat
       );
-      boatData.value = response.documents as Boat[];
+      boats.value = response.documents as Boat[];
     } catch (error) {
       console.error('Failed to fetch boats', error);
     }
   }
 
-  const boats = computed(() => {
-    if (!boatData.value) {
-      fetchBoats();
-    }
-    return boatData;
-  });
-
   return { boats, fetchBoats };
 });

src/stores/sampledata/schedule.ts

@@ -11,7 +11,7 @@ import type {
   StatusTypes,
   Reservation,
   TimeBlockTemplate,
-  Timeblock,
+  TimeBlock,
   TimeTuple,
 } from '../schedule.types';
 
@@ -36,18 +36,18 @@ export const templateB: TimeBlockTemplate = {
   ],
 };
 
-export function getSampleTimeBlocks(): Timeblock[] {
+export function getSampleTimeBlocks(): TimeBlock[] {
   // Hard-code 30 days worth of blocks, for now.  Make them random templates
   const boats = useBoatStore().boats;
-  const result: Timeblock[] = [];
+  const result: TimeBlock[] = [];
   const tsToday: Timestamp = parseTimestamp(today()) as Timestamp;
 
   for (let i = 0; i <= 30; i++) {
     const template = templateB;
     result.push(
-      ...boats.value
-        .map((b): Timeblock[] => {
-          return template.blocks.map((t: TimeTuple): Timeblock => {
+      ...boats
+        .map((b): TimeBlock[] => {
+          return template.blocks.map((t: TimeTuple): TimeBlock => {
             return {
               $id: 'id' + Math.random().toString(32).slice(2),
               boatId: b.$id,
@@ -127,7 +127,7 @@ export function getSampleReservations(): Reservation[] {
   };
 
   return sampleData.map((entry): Reservation => {
-    const boat = <Boat>boatStore.boats.value.find((b) => b.$id == entry.boat);
+    const boat = <Boat>boatStore.boats.find((b) => b.$id == entry.boat);
     return {
       id: entry.id,
       user: entry.user,

src/stores/schedule.ts

@@ -12,7 +12,7 @@ import {
   Reservation,
   TimeBlockTemplate,
   TimeTuple,
-  Timeblock,
+  TimeBlock,
 } from './schedule.types';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
 import { ID, Models } from 'appwrite';
@@ -43,7 +43,7 @@ export function timeTuplesOverlapped(tuples: TimeTuple[]): Interval[] {
   });
 }
 
-export function blocksOverlapped(blocks: Timeblock[] | Interval[]): Interval[] {
+export function blocksOverlapped(blocks: TimeBlock[] | Interval[]): Interval[] {
   return Array.from(
     new Set(
       blocks
@@ -61,7 +61,7 @@ export function buildTimeBlock(
   resource: Boat,
   time: TimeTuple,
   blockDate: string
-): Timeblock {
+): TimeBlock {
   /* When the time zone offset is absent, date-only forms are interpreted
      as a UTC time and date-time forms are interpreted as local time. */
   const result = {
@@ -75,10 +75,10 @@ export function buildTimeBlock(
 export const useScheduleStore = defineStore('schedule', () => {
   // TODO: Implement functions to dynamically pull this data.
   const reservations = ref<Reservation[]>([]);
-  const timeblocks = ref<Timeblock[]>([]);
+  const timeblocks = ref<TimeBlock[]>([]);
   const timeblockTemplates = ref<TimeBlockTemplate[]>([]);
 
-  const getTimeblocks = (date: Timestamp, boat: Boat): Timeblock[] => {
+  const getTimeBlocks = (date: Timestamp, boat: Boat): TimeBlock[] => {
     return timeblocks.value.filter((block) => {
       return (
         compareDate(parseDate(new Date(block.start)) as Timestamp, date) &&
@@ -86,7 +86,7 @@ export const useScheduleStore = defineStore('schedule', () => {
       );
     });
   };
-  const getTimeblocksForDate = (date: string): Timeblock[] => {
+  const getTimeBlocksForDate = (date: string): TimeBlock[] => {
     // TODO: This needs to actually make sure we have the dates we need, stay in sync, etc.
     return timeblocks.value.filter((b) => {
       return compareDate(
@@ -117,7 +117,7 @@ export const useScheduleStore = defineStore('schedule', () => {
         AppwriteIds.databaseId,
         AppwriteIds.collection.timeBlock
       );
-      timeblocks.value = response.documents as Timeblock[];
+      timeblocks.value = response.documents as TimeBlock[];
     } catch (error) {
       console.error('Failed to fetch timeblocks', error);
     }
@@ -141,7 +141,7 @@ export const useScheduleStore = defineStore('schedule', () => {
       console.error('Failed to fetch timeblock templates', error);
     }
   }
-  // const getConflicts = (timeblock: Timeblock, boat: Boat) => {
+  // const getConflicts = (timeblock: TimeBlock, boat: Boat) => {
   //   const start = date.buildDate({
   //     hour: timeblock.start.hour,
   //     minute: timeblock.start.minute,
@@ -200,7 +200,7 @@ export const useScheduleStore = defineStore('schedule', () => {
       : reservations.value.push(reservation);
   };
 
-  const createTimeblock = async (block: Timeblock) => {
+  const createTimeBlock = async (block: TimeBlock) => {
     try {
       const response = await databases.createDocument(
         AppwriteIds.databaseId,
@@ -208,9 +208,58 @@ export const useScheduleStore = defineStore('schedule', () => {
         ID.unique(),
         block
       );
-      timeblocks.value.push(response as Timeblock);
+      timeblocks.value.push(response as TimeBlock);
     } catch (e) {
-      console.log('Error creating Timeblock: ' + e);
+      console.error('Error creating TimeBlock: ' + e);
+    }
+  };
+
+  const createTimeBlockTemplate = async (template: TimeBlockTemplate) => {
+    try {
+      const response = await databases.createDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.timeBlockTemplate,
+        ID.unique(),
+        { name: template.name, timeTuple: template.timeTuples.flat(2) }
+      );
+      timeblockTemplates.value.push(response as TimeBlockTemplate);
+    } catch (e) {
+      console.error('Error updating TimeBlockTemplate: ' + e);
+    }
+  };
+  const deleteTimeBlockTemplate = async (id: string) => {
+    try {
+      await databases.deleteDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.timeBlockTemplate,
+        id
+      );
+      timeblockTemplates.value = timeblockTemplates.value.filter(
+        (template) => template.$id !== id
+      );
+    } catch (e) {
+      console.error('Error deleting TimeBlockTemplate: ' + e);
+    }
+  };
+  const updateTimeBlockTemplate = async (
+    template: TimeBlockTemplate,
+    id: string
+  ) => {
+    try {
+      const response = await databases.updateDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.timeBlockTemplate,
+        id,
+        {
+          name: template.name,
+          timeTuple: template.timeTuples.flat(2),
+        }
+      );
+      timeblockTemplates.value = timeblockTemplates.value.map((b) =>
+        b.$id !== id ? b : (response as TimeBlockTemplate)
+      );
+    } catch (e) {
+      console.error('Error updating TimeBlockTemplate: ' + e);
     }
   };
 
@@ -220,13 +269,16 @@ export const useScheduleStore = defineStore('schedule', () => {
     timeblockTemplates,
     getBoatReservations,
     getConflictingReservations,
-    getTimeblocksForDate,
-    getTimeblocks,
+    getTimeBlocksForDate,
+    getTimeBlocks,
     fetchTimeBlocks,
     fetchTimeBlockTemplates,
     getNewId,
     addOrCreateReservation,
-    createTimeblock,
+    createTimeBlock,
+    createTimeBlockTemplate,
+    deleteTimeBlockTemplate,
+    updateTimeBlockTemplate,
     isReservationOverlapped,
     isResourceTimeOverlapped,
   };

src/stores/schedule.types.ts

@@ -18,7 +18,7 @@ export interface Reservation {
    objects in here? */
 
 export type TimeTuple = [start: string, end: string];
-export type Timeblock = Partial<Models.Document> & {
+export type TimeBlock = Partial<Models.Document> & {
   boatId: string;
   start: string;
   end: string;