Sorted out reactivity with storeToRefs

src/components/scheduling/NavigationBar.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="row justify-center">
+    <div class="q-pa-md q-gutter-sm row">
+      <q-btn no-caps class="button" style="margin: 2px" @click="$emit('today')">
+        Today
+      </q-btn>
+      <q-btn no-caps class="button" style="margin: 2px" @click="$emit('prev')">
+        &lt; Prev
+      </q-btn>
+      <q-btn no-caps class="button" style="margin: 2px" @click="$emit('next')">
+        Next &gt;
+      </q-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits(['today', 'prev', 'next']);
+</script>

src/components/scheduling/TimeBlockTemplateComponent.vue

@@ -0,0 +1,129 @@
+<template>
+  <q-card>
+    <q-card-section horizontal>
+      <div>
+        <q-input
+          label="Template name"
+          filled
+          dense
+          v-model="template.name"
+          v-if="editable"
+        />
+        <q-list dense>
+          <q-item v-for="item in template.timeTuples" :key="item[0]">
+            <q-input
+              dense
+              :filled="editable"
+              v-model="item[0]"
+              type="time"
+              label="Start"
+              :readonly="!editable"
+            />
+            <q-input
+              :filled="editable"
+              dense
+              v-model="item[1]"
+              type="time"
+              label="End"
+              :readonly="!editable"
+            /> </q-item></q-list
+        ><q-btn
+          v-if="editable"
+          dense
+          color="primary"
+          size="sm"
+          label="Add interval"
+          @click="template.timeTuples.push(['00:00', '00:00'])"
+        />
+      </div>
+      <q-card-actions align="right" vertical>
+        <q-btn
+          v-if="!editable"
+          color="primary"
+          icon="edit"
+          label="Edit"
+          @click="editable = !editable"
+        />
+        <q-btn
+          v-if="editable"
+          color="primary"
+          icon="save"
+          label="Save"
+          @click="saveTemplate($event, template)"
+        />
+        <q-btn
+          v-if="editable"
+          color="secondary"
+          icon="cancel"
+          label="Cancel"
+          @click="revert"
+        />
+        <q-btn
+          color="negative"
+          icon="delete"
+          label="Delete"
+          @click="deleteTemplate($event, template)"
+        />
+      </q-card-actions>
+    </q-card-section>
+  </q-card>
+  <q-dialog v-model="alert">
+    <q-card>
+      <q-card-section>
+        <div class="text-h6">Overlapped blocks!</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-chip
+          square
+          icon="schedule"
+          v-for="item in overlapped"
+          :key="item.start"
+        >
+          {{ item.start }}-{{ item.end }}</q-chip
+        >
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="OK" color="primary" v-close-popup />
+      </q-card-actions> </q-card
+  ></q-dialog>
+</template>
+
+<script setup lang="ts">
+import { timeTuplesOverlapped, useScheduleStore } from 'src/stores/schedule';
+import { TimeBlockTemplate } from 'src/stores/schedule.types';
+import { ref } from 'vue';
+const editable = ref(false);
+const alert = ref(false);
+const overlapped = ref();
+const scheduleStore = useScheduleStore();
+const template = defineModel<TimeBlockTemplate>({ required: true });
+
+const revert = () => {
+  editable.value = false;
+};
+
+const deleteTemplate = (
+  event: Event,
+  template: TimeBlockTemplate | undefined
+) => {
+  if (template?.$id) scheduleStore.deleteTimeBlockTemplate(template.$id);
+};
+// const edit = () => {
+//   // TODO: Make it so that editing the template does not affect the store.  Need to be able to "cancel" editing, and revert to original data
+// };
+const saveTemplate = (evt: Event, template: TimeBlockTemplate | undefined) => {
+  if (!template) return false;
+  overlapped.value = timeTuplesOverlapped(template.timeTuples);
+  if (overlapped.value.length > 0) {
+    alert.value = true;
+  } else {
+    if (template.$id) {
+      console.log(template.$id);
+      scheduleStore.updateTimeBlockTemplate(template, template.$id);
+    } else {
+      scheduleStore.createTimeBlockTemplate(template);
+    }
+    editable.value = false;
+  }
+};
+</script>

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -14,7 +14,7 @@
         interval-start="06:00"
         :short-interval-label="true"
         v-model="selectedDate"
-        :column-count="boatData.length"
+        :column-count="boats.length"
         v-touch-swipe.left.right="handleSwipe"
       >
         <template #head-day="{ scope }">
@@ -34,12 +34,12 @@
               :id="block.id"
               @click="selectBlock($event, scope, block)"
             >
-              {{ boatData[scope.columnIndex].name }}<br />
+              {{ boats[scope.columnIndex].name }}<br />
               {{ selectedBlock?.$id === block.$id ? 'Selected' : 'Available' }}
             </div>
           </div>
           <!-- <div
-            v-for="r in boatData[scope.columnIndex].reservations"
+            v-for="r in boats[scope.columnIndex].reservations"
             :key="r.id"
           >
             <div
@@ -76,12 +76,12 @@ import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 import { ref, computed } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import { useScheduleStore } from 'src/stores/schedule';
-import { Timeblock } from 'src/stores/schedule.types';
+import { TimeBlock } from 'src/stores/schedule.types';
+import { storeToRefs } from 'pinia';
 
 const scheduleStore = useScheduleStore();
-const boatStore = useBoatStore();
-const boatData = boatStore.boats;
-const selectedBlock = defineModel<Timeblock | null>();
+const { boats } = storeToRefs(useBoatStore());
+const selectedBlock = defineModel<TimeBlock | null>();
 const selectedDate = ref(today());
 
 const calendar = ref<QCalendarDay | null>(null);
@@ -103,7 +103,7 @@ function handleSwipe({ ...event }) {
 // }
 
 function blockStyles(
-  block: Timeblock,
+  block: TimeBlock,
   timeStartPos: (t: string) => string,
   timeDurationHeight: (d: number) => string
 ) {
@@ -116,8 +116,8 @@ function blockStyles(
 }
 
 function getBoatDisplayName(scope: DayBodyScope) {
-  return boatData && boatData.value[scope.columnIndex]
-    ? boatData.value[scope.columnIndex].displayName
+  return boats && boats.value[scope.columnIndex]
+    ? boats.value[scope.columnIndex].displayName
     : '';
 }
 
@@ -154,7 +154,7 @@ interface DayBodyScope {
   timestamp: Timestamp;
 }
 
-function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
+function selectBlock(event: MouseEvent, scope: DayBodyScope, block: TimeBlock) {
   // TODO: Disable blocks before today with updateDisabled and/or comparison
   selectedBlock.value === block
     ? (selectedBlock.value = null)
@@ -162,12 +162,12 @@ function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
 }
 
 interface BoatBlocks {
-  [key: string]: Timeblock[];
+  [key: string]: TimeBlock[];
 }
 
 const boatBlocks = computed((): BoatBlocks => {
   return scheduleStore
-    .getTimeblocksForDate(selectedDate.value)
+    .getTimeBlocksForDate(selectedDate.value)
     .reduce((result, tb) => {
       if (!result[tb.boatId]) result[tb.boatId] = [];
       result[tb.boatId].push(tb);
@@ -175,18 +175,18 @@ const boatBlocks = computed((): BoatBlocks => {
     }, <BoatBlocks>{});
 });
 
-function getBoatBlocks(scope: DayBodyScope): Timeblock[] {
-  return boatData.value[scope.columnIndex]
-    ? boatBlocks.value[boatData.value[scope.columnIndex].$id]
+function getBoatBlocks(scope: DayBodyScope): TimeBlock[] {
+  return boats.value[scope.columnIndex]
+    ? boatBlocks.value[boats.value[scope.columnIndex].$id]
     : [];
 }
 
 // function changeEvent({ start }: { start: string }) {
-// const newBlocks = scheduleStore.getTimeblocksForDate(start);
+// const newBlocks = scheduleStore.getTimeBlocksForDate(start);
 // const reservations = scheduleStore.getBoatReservations(
 //   parsed(start) as Timestamp
 // );
-// boatData.value.map((boat) => {
+// boats.value.map((boat) => {
 //   boat.reservations = reservations.filter(
 //     (reservation) => reservation.resource === boat
 //   );