From e1a784ef45c7d8cb7500df9f25a24ecba016c541 Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Mon, 29 Apr 2024 12:22:57 -0400
Subject: [PATCH] Add swipe

---
 .../scheduling/boat/BoatScheduleTableComponent.vue       | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/scheduling/boat/BoatScheduleTableComponent.vue b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
index 9e88ac8..232fed1 100644
--- a/src/components/scheduling/boat/BoatScheduleTableComponent.vue
+++ b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="q-px-sm">
+  <div>
     <CalendarHeaderComponent v-model="selectedDate" />
     <div class="boat-schedule-table-component">
       <QCalendarDay
         ref="calendar"
-        class="q-pt-xs"
+        class="q-pa-xs"
         flat
         animated
         dense
@@ -16,6 +16,7 @@
         v-model="selectedDate"
         :column-count="boats.length"
         @change="scrollToEvent()"
+        v-touch-swipe.left.right="handleSwipe"
       >
         <template #head-day="{ scope }">
           <div style="text-align: center; font-weight: 800">
@@ -56,6 +57,7 @@ import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 import { ref, reactive, computed } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import { Timeblock, useScheduleStore } from 'src/stores/schedule';
+import { TouchSwipeValue } from 'quasar';
 
 const scheduleStore = useScheduleStore();
 const boatStore = useBoatStore();
@@ -69,6 +71,9 @@ const boats = boatStore.boats;
 
 const calendar = ref<QCalendarDay | null>(null);
 
+function handleSwipe(event: Event) {
+  event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
+}
 function blockStyles(
   block: Timeblock,
   timeStartPos: (t: string) => string,