Sorted out reactivity with storeToRefs

src/pages/schedule/ManageCalendar.vue

@@ -2,10 +2,11 @@
   <div class="fit row wrap justify-start items-start content-start">
     <div class="col-9 q-pa-md">
       <div class="scheduler">
+        <NavigationBar @next="onNext" @today="onToday" @prev="onPrev" />
         <q-calendar-scheduler
           ref="calendar"
           v-model="selectedDate"
-          v-model:model-resources="resources"
+          v-model:model-resources="boats"
           resource-key="$id"
           resource-label="name"
           view="week"
@@ -22,9 +23,7 @@
         >
           <template #day="{ scope }">
             <div
-              v-if="
-                scheduleStore.getTimeblocks(scope.timestamp, scope.resource)
-              "
+              v-if="getTimeBlocks(scope.timestamp, scope.resource)"
               style="
                 display: flex;
                 flex: 1 0 auto;
@@ -35,13 +34,10 @@
               "
             >
               <template
-                v-for="event in scheduleStore.getTimeblocks(
-                  scope.timestamp,
-                  scope.resource
-                )"
+                v-for="event in getTimeBlocks(scope.timestamp, scope.resource)"
                 :key="event.id"
               >
-                <q-chip square icon="schedule">
+                <q-chip clickable square icon="schedule">
                   {{ date.formatDate(event.start, 'HH:mm') }} -
                   {{ date.formatDate(event.end, 'HH:mm') }}</q-chip
                 >
@@ -62,6 +58,9 @@
             >
           </q-item-section>
         </q-item>
+        <q-card-actions align="right">
+          <q-btn label="Add Template" color="primary" @click="addTemplate" />
+        </q-card-actions>
         <q-separator spaced />
         <q-expansion-item
           v-for="template in timeblockTemplates"
@@ -74,72 +73,10 @@
           draggable="true"
           @dragstart="onDragStart($event, template)"
         >
-          <q-card>
-            <q-card-section>
-              <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-card-section>
-            <div class="row justify-end q-pa-sm">
-              <q-btn
-                v-if="!editable"
-                color="primary"
-                icon="edit"
-                label="Edit"
-                @click="editable = !editable"
-              />
-              <q-btn
-                v-if="editable"
-                color="accent"
-                icon="save"
-                label="Save"
-                @click="saveTemplate($event, template)"
-              />
-            </div>
-          </q-card> </q-expansion-item
+          <TimeBlockTemplateComponent
+            :model-value="template"
+          /> </q-expansion-item
       ></q-list>
-      <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>
     </div>
   </div>
 </template>
@@ -151,42 +88,35 @@ import {
   today,
 } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import {
-  buildTimeBlock,
-  timeTuplesOverlapped,
-  useScheduleStore,
-} from 'src/stores/schedule';
+import { buildTimeBlock, useScheduleStore } from 'src/stores/schedule';
 import { onMounted, ref } from 'vue';
 import type { TimeBlockTemplate, TimeTuple } from 'src/stores/schedule.types';
 import { date } from 'quasar';
+import TimeBlockTemplateComponent from 'src/components/scheduling/TimeBlockTemplateComponent.vue';
+import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
+import { storeToRefs } from 'pinia';
 
 const selectedDate = ref(today());
-const scheduleStore = useScheduleStore();
-const boatStore = useBoatStore();
-const resources = boatStore.boats;
-const timeblockTemplates = scheduleStore.timeblockTemplates;
-const editable = ref(false);
-const alert = ref(false);
-const overlapped = ref<{ start: string; end: string }[]>();
+const { fetchBoats } = useBoatStore();
+const { getTimeBlocks, fetchTimeBlocks, fetchTimeBlockTemplates } =
+  useScheduleStore();
+const { boats } = storeToRefs(useBoatStore());
+const { timeblockTemplates } = storeToRefs(useScheduleStore());
+const calendar = ref();
 
 onMounted(async () => {
-  await boatStore.fetchBoats();
-  await scheduleStore.fetchTimeBlockTemplates();
-  await scheduleStore.fetchTimeBlockTemplates();
+  await fetchBoats();
+  await fetchTimeBlocks();
+  await fetchTimeBlockTemplates();
 });
 
-const saveTemplate = (evt: Event, template: TimeBlockTemplate) => {
-  overlapped.value = timeTuplesOverlapped(template.timeTuples);
-  console.log(overlapped.value);
-  alert.value = overlapped.value.length > 0;
-  editable.value = false;
-  console.log(evt, template);
-};
-
-function createTimeblock(boat: Boat, templateId: string, date: string) {
-  const timeBlock = timeblockTemplates.find((t) => t.$id === templateId);
+function addTemplate() {
+  timeblockTemplates.value.push({ name: 'New Template', timeTuples: [] });
+}
+function createTimeBlock(boat: Boat, templateId: string, date: string) {
+  const timeBlock = timeblockTemplates.value.find((t) => t.$id === templateId);
   timeBlock?.timeTuples.map((tb: TimeTuple) =>
-    scheduleStore.createTimeblock(buildTimeBlock(boat, tb, date))
+    useScheduleStore().createTimeBlock(buildTimeBlock(boat, tb, date))
   );
 }
 
@@ -236,13 +166,23 @@ function onDrop(
     const templateId = e.dataTransfer.getData('ID');
     const date = scope.timestamp.date;
     if (type === 'head-day') {
-      resources.value.map((r) => createTimeblock(r, templateId, date));
+      boats.value.map((r) => createTimeBlock(r, templateId, date));
     } else {
-      createTimeblock(scope.resource, templateId, date);
+      createTimeBlock(scope.resource, templateId, date);
     }
   }
   if (e.target instanceof HTMLDivElement)
     e.target.classList.remove('bg-secondary');
   return false;
 }
+
+function onToday() {
+  calendar.value.moveToToday();
+}
+function onPrev() {
+  calendar.value.prev();
+}
+function onNext() {
+  calendar.value.next();
+}
 </script>