Navigation Tweaks

src/pages/schedule/BoatScheduleView.vue

@@ -1,18 +1,20 @@
 <template>
   <q-page padding>
     <div class="subcontent">
-      <!-- <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" /> -->
-
+      <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" />
       <div class="row justify-center">
-        <q-calendar-day
+        <q-calendar-scheduler
           ref="calendar"
           v-model="selectedDate"
-          view="day"
-          :max-days="3"
+          v-model:model-resources="boatStore.boats"
+          resource-key="$id"
+          resource-label="displayName"
+          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+          view="week"
           bordered
           animated
-          transition-next="slide-left"
-          transition-prev="slide-right"
+          cell-width="150px"
+          day-min-height="50px"
           @change="onChange"
           @moved="onMoved"
           @click-date="onClickDate"
@@ -20,22 +22,11 @@
           @click-interval="onClickInterval"
           @click-head-day="onClickHeadDay"
         >
-          <template
-            #day-body="{
-              scope: { timestamp, timeStartPos, timeDurationHeight },
-            }"
-          >
-            <template
-              v-for="event in reservationEvents(timestamp)"
-              :key="event.id"
-            >
-              <div
-                v-if="event.start !== undefined"
-                class="booking-event"
-                :style="slotStyle(event, timeStartPos, timeDurationHeight)"
-              >
+          <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">
-                  {{ event.user }}
+                  {{ useAuthStore().getUserNameById(event.user) }}
                   <q-tooltip>{{
                     event.start +
                     ' - ' +
@@ -43,9 +34,9 @@
                   }}</q-tooltip>
                 </span>
               </div>
-            </template>
+            </div>
           </template>
-        </q-calendar-day>
+        </q-calendar-scheduler>
       </div>
     </div>
   </q-page>
@@ -53,46 +44,57 @@
 
 <script setup lang="ts">
 import { useReservationStore } from 'src/stores/reservation';
-import { Reservation } from 'src/stores/schedule.types';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { useAuthStore } from 'src/stores/auth';
+
 const reservationStore = useReservationStore();
-import {
-  TimestampOrNull,
-  getDate,
-  parsed,
-  today,
-} from '@quasar/quasar-ui-qcalendar';
-import { QCalendarDay } from '@quasar/quasar-ui-qcalendar';
-import { date } from 'quasar';
+import { getDate, today } from '@quasar/quasar-ui-qcalendar';
+import { QCalendarScheduler } from '@quasar/quasar-ui-qcalendar';
 import { Timestamp } from '@quasar/quasar-ui-qcalendar';
-import { useBoatStore } from 'src/stores/boat';
+import { Boat, useBoatStore } from 'src/stores/boat';
+import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
 
 const selectedDate = ref(today());
 const boatStore = useBoatStore();
+const calendar = ref();
 
-// Method declarations
-
-function slotStyle(
-  event: Reservation,
-  timeStartPos: (time: TimestampOrNull) => string,
-  timeDurationHeight: (minutes: number) => string
-) {
-  const s = {
-    top: '',
-    height: '',
-    'align-items': 'flex-start',
-  };
-  if (timeStartPos && timeDurationHeight) {
-    s.top = timeStartPos(parsed(event.start)) + 'px';
-    s.height =
-      timeDurationHeight(date.getDateDiff(event.end, event.start, 'minutes')) +
-      'px';
-  }
-  return s;
+interface DayScope {
+  timestamp: Timestamp;
+  columnIndex: number;
+  resource: object;
+  resourceIndex: number;
+  indentLevel: number;
+  activeDate: boolean;
+  droppable: boolean;
 }
 
-function reservationEvents(timestamp: Timestamp) {
-  return reservationStore.getReservationsByDate(getDate(timestamp));
+onMounted(() => boatStore.fetchBoats());
+// Method declarations
+
+// function slotStyle(
+//   event: Reservation,
+//   timeStartPos: (time: TimestampOrNull) => string,
+//   timeDurationHeight: (minutes: number) => string
+// ) {
+//   const s = {
+//     top: '',
+//     height: '',
+//     'align-items': 'flex-start',
+//   };
+//   if (timeStartPos && timeDurationHeight) {
+//     s.top = timeStartPos(parsed(event.start)) + 'px';
+//     s.height =
+//       timeDurationHeight(date.getDateDiff(event.end, event.start, 'minutes')) +
+//       'px';
+//   }
+//   return s;
+// }
+
+function boatReservationEvents({ timestamp, resource }: DayScope) {
+  return reservationStore.getReservationsByDate(
+    getDate(timestamp),
+    (resource as Boat).$id
+  );
 }
 function onMoved(data: Event) {
   console.log('onMoved', data);
@@ -112,6 +114,15 @@ function onClickInterval(data: Event) {
 function onClickHeadDay(data: Event) {
   console.log('onClickHeadDay', data);
 }
+function onToday() {
+  calendar.value.moveToToday();
+}
+function onPrev() {
+  calendar.value.prev();
+}
+function onNext() {
+  calendar.value.next();
+}
 </script>
 
 <style lang="sass" scoped>