Many improvements. Still no reactivity on List

src/pages/schedule/BoatScheduleView.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-page padding>
-    <q-card class="subcontent">
+  <q-page>
+    <q-card class="row">
       <navigation-bar
         @today="onToday"
         @prev="onPrev"
@@ -13,8 +13,10 @@
         resource-label="displayName"
         :weekdays="[1, 2, 3, 4, 5, 6, 0]"
         :view="$q.screen.gt.md ? 'week' : 'day'"
-        bordered
+        v-touch-swipe.mouse.left.right="handleSwipe"
+        :max-days="$q.screen.lt.sm ? 3 : 7"
         animated
+        style="--calendar-resources-width: 2em"
         day-min-height="50px"
         @change="onChange"
         @moved="onMoved"
@@ -24,19 +26,26 @@
         @click-head-day="onClickHeadDay">
         <template #day="{ scope }">
           <div
-            v-for="event in boatReservationEvents(scope)"
-            :key="event.id">
-            <div
-              v-if="event.start !== undefined"
-              class="booking-event">
-              <span class="title q-calendar__ellipsis">
-                {{ useAuthStore().getUserNameById(event.user) }} @
-                {{ renderTime(event.start) }}
-                <q-tooltip>
-                  {{ renderTime(event.start) + ' - ' + renderTime(event.end) }}
-                </q-tooltip>
-              </span>
-            </div>
+            v-for="interval in getSortedIntervals(
+              scope.timestamp,
+              scope.resource
+            )"
+            :key="interval.$id"
+            class="row q-pb-xs">
+            <q-badge
+              multi-line
+              class="col-12"
+              :transparent="interval.user != undefined"
+              :color="interval.user ? 'secondary' : 'primary'"
+              :id="interval.id">
+              {{
+                interval.user
+                  ? useAuthStore().getUserNameById(interval.user)
+                  : 'Available'
+              }}
+              <br />
+              {{ formatTime(interval.start) }} - {{ formatTime(interval.end) }}
+            </q-badge>
           </div>
         </template>
       </q-calendar-scheduler>
@@ -46,7 +55,7 @@
 
 <script setup lang="ts">
 import { useReservationStore } from 'src/stores/reservation';
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 
 const reservationStore = useReservationStore();
@@ -56,27 +65,31 @@ import { Timestamp } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
 import { useQuasar } from 'quasar';
+import { formatTime } from 'src/utils/schedule';
+import { useIntervalStore } from 'src/stores/interval';
+import { Interval } from 'src/stores/schedule.types';
 
 const selectedDate = ref(today());
 const boatStore = useBoatStore();
 const calendar = ref();
 const $q = useQuasar();
+const { getAvailableIntervals } = useIntervalStore();
 
-interface DayScope {
-  timestamp: Timestamp;
-  columnIndex: number;
-  resource: object;
-  resourceIndex: number;
-  indentLevel: number;
-  activeDate: boolean;
-  droppable: boolean;
-}
+// interface DayScope {
+//   timestamp: Timestamp;
+//   columnIndex: number;
+//   resource: object;
+//   resourceIndex: number;
+//   indentLevel: number;
+//   activeDate: boolean;
+//   droppable: boolean;
+// }
 
-const renderTime = (dateString: string) => {
-  const date = new Date(dateString);
-  return date.toLocaleTimeString();
+const getSortedIntervals = (timestamp: Timestamp, boat?: Boat): Interval[] => {
+  return getAvailableIntervals(timestamp, boat)
+    .concat(boatReservationEvents(timestamp, boat))
+    .sort((a, b) => Date.parse(a.start) - Date.parse(b.start));
 };
-onMounted(() => boatStore.fetchBoats());
 // Method declarations
 
 // function slotStyle(
@@ -98,7 +111,14 @@ onMounted(() => boatStore.fetchBoats());
 //   return s;
 // }
 
-function boatReservationEvents({ timestamp, resource }: DayScope) {
+function handleSwipe({ ...event }) {
+  event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
+}
+function boatReservationEvents(
+  timestamp: Timestamp,
+  resource: Boat | undefined
+) {
+  if (!resource) return [];
   return reservationStore.getReservationsByDate(
     getDate(timestamp),
     (resource as Boat).$id
@@ -132,25 +152,3 @@ function onNext() {
   calendar.value.next();
 }
 </script>
-
-<style lang="sass" scoped>
-
-.booking-event
-  position: absolute
-  font-size: 12px
-  justify-content: space-evenly
-  margin: 0 1px
-  text-overflow: ellipsis
-  overflow: hidden
-  color: white
-  max-width: 100%
-  background: #027BE3FF
-  cursor: pointer
-
-.title
-  position: relative
-  display: flex
-  justify-content: center
-  align-items: center
-  height: 100%
-</style>