Many improvements. Still no reactivity on List

2024-06-02 08:48:14 -04:00
parent 387af2e6ce
commit 9104ccab0f
16 changed files with 395 additions and 289 deletions
--- a/src/pages/schedule/BoatScheduleView.vue
+++ b/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>
--- a/src/pages/schedule/ListReservationsPage.vue
+++ b/src/pages/schedule/ListReservationsPage.vue
@@ -22,7 +22,7 @@
      class="q-pa-none">
      <q-card
        clas="q-ma-md"
-        v-if="!reservationStore.futureUserReservations.length">
+        v-if="!futureUserReservations.length">
        <q-card-section>
          <div class="text-h6">You don't have any upcoming bookings!</div>
          <div class="text-h8">Why don't you go make one?</div>
@@ -41,7 +41,7 @@
      </q-card>
      <div v-else>
        <div
-          v-for="reservation in reservationStore.futureUserReservations"
+          v-for="reservation in sortedUserReservations"
          :key="reservation.$id">
          <ReservationCardComponent :modelValue="reservation" />
        </div>
@@ -51,7 +51,7 @@
      name="past"
      class="q-pa-none">
      <div
-        v-for="reservation in reservationStore.pastUserReservations"
+        v-for="reservation in pastUserReservations"
        :key="reservation.$id">
        <ReservationCardComponent :modelValue="reservation" />
      </div>
@@ -63,7 +63,9 @@ import { useReservationStore } from 'src/stores/reservation';
 import ReservationCardComponent from 'src/components/scheduling/ReservationCardComponent.vue';
 import { ref } from 'vue';

-const reservationStore = useReservationStore();
+const { sortedUserReservations, futureUserReservations, pastUserReservations } =
+  useReservationStore();
+
 const tab = ref('upcoming');

 // const showMarker = (
--- a/src/pages/schedule/ManageCalendar.vue
+++ b/src/pages/schedule/ManageCalendar.vue
@@ -1,8 +1,13 @@
 <template>
  <div class="fit row wrap justify-start items-start content-start">
    <div class="q-pa-md">
-      <div class="scheduler" style="max-width: 1200px">
-        <NavigationBar @next="onNext" @today="onToday" @prev="onPrev" />
+      <div
+        class="scheduler"
+        style="max-width: 1200px">
+        <NavigationBar
+          @next="onNext"
+          @today="onToday"
+          @prev="onPrev" />
        <q-calendar-scheduler
          ref="calendar"
          v-model="selectedDate"
@@ -18,8 +23,7 @@
          :drag-leave-func="onDragLeave"
          :drop-func="onDrop"
          day-min-height="50px"
-          cell-width="150px"
-        >
+          cell-width="150px">
          <template #day="{ scope }">
            <div
              v-if="filteredIntervals(scope.timestamp, scope.resource).length"
@@ -29,15 +33,13 @@
                justify-content: space-evenly;
                align-items: center;
                font-size: 12px;
-              "
-            >
+              ">
              <template
                v-for="block in sortedIntervals(
                  scope.timestamp,
                  scope.resource
                )"
-                :key="block.id"
-              >
+                :key="block.id">
                <q-chip class="cursor-pointer">
                  {{ date.formatDate(block.start, 'HH:mm') }} -
                  {{ date.formatDate(block.end, 'HH:mm') }}
@@ -77,46 +79,53 @@
                          ).toISOString())
                      "
                    />
-                  </q-popup-edit>--> </q-chip
-                ><q-btn
+                  </q-popup-edit>-->
+                </q-chip>
+                <q-btn
                  size="xs"
                  icon="delete"
                  round
-                  @click="deleteBlock(block)"
-                />
+                  @click="deleteBlock(block)" />
              </template>
            </div>
          </template>
        </q-calendar-scheduler>
      </div>
    </div>
-    <div class="q-pa-md" style="width: 400px">
-      <q-list padding bordered class="rounded-borders">
+    <div
+      class="q-pa-md"
+      style="width: 400px">
+      <q-list
+        padding
+        bordered
+        class="rounded-borders">
        <q-item>
          <q-item-section>
            <q-item-label overline>Availability Templates</q-item-label>
-            <q-item-label caption
-              >Drag and drop a template to a boat / date to create booking
-              availability</q-item-label
-            >
+            <q-item-label caption>
+              Drag and drop a template to a boat / date to create booking
+              availability
+            </q-item-label>
          </q-item-section>
        </q-item>
        <q-card-actions align="right">
-          <q-btn label="Add Template" color="primary" @click="createTemplate" />
+          <q-btn
+            label="Add Template"
+            color="primary"
+            @click="createTemplate" />
        </q-card-actions>
-        <q-item v-if="newTemplate.$id === 'unsaved'"
-          ><IntervalTemplateComponent
+        <q-item v-if="newTemplate.$id === 'unsaved'">
+          <IntervalTemplateComponent
            :model-value="newTemplate"
            :edit="true"
            @cancel="resetNewTemplate"
-            @saved="resetNewTemplate"
-        /></q-item>
+            @saved="resetNewTemplate" />
+        </q-item>
        <q-separator spaced />
        <IntervalTemplateComponent
          v-for="template in intervalTemplates"
          :key="template.$id"
-          :model-value="template"
-        />
+          :model-value="template" />
      </q-list>
    </div>
  </div>
@@ -127,16 +136,23 @@
      </q-card-section>
      <q-card-section class="q-pt-none">
        Conflicting times! Please delete overlapped items!
-        <q-chip v-for="item in overlapped" :key="item.index"
-          >{{ boats.find((b) => b.$id === item.boatId)?.name }}:
+        <q-chip
+          v-for="item in overlapped"
+          :key="item.index">
+          {{ boats.find((b) => b.$id === item.boatId)?.name }}:
          {{ date.formatDate(item.start, 'hh:mm') }} -
          {{ date.formatDate(item.end, 'hh:mm') }}
        </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>
+        <q-btn
+          flat
+          label="OK"
+          color="primary"
+          v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>

 <script setup lang="ts">
@@ -146,7 +162,7 @@ import {
  today,
 } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import { useScheduleStore } from 'src/stores/schedule';
+import { useIntervalStore } from 'src/stores/interval';
 import { onMounted, ref } from 'vue';
 import type {
  Interval,
@@ -158,12 +174,14 @@ import IntervalTemplateComponent from 'src/components/scheduling/IntervalTemplat
 import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
 import { storeToRefs } from 'pinia';
 import { buildInterval, intervalsOverlapped } from 'src/utils/schedule';
+import { useIntervalTemplateStore } from 'src/stores/intervalTemplate';

 const selectedDate = ref(today());
 const { fetchBoats } = useBoatStore();
-const scheduleStore = useScheduleStore();
+const intervalStore = useIntervalStore();
+const intervalTemplateStore = useIntervalTemplateStore();
 const { boats } = storeToRefs(useBoatStore());
-const intervalTemplates = scheduleStore.getIntervalTemplates();
+const intervalTemplates = intervalTemplateStore.getIntervalTemplates();
 const calendar = ref();
 const overlapped = ref();
 const alert = ref(false);
@@ -182,11 +200,11 @@ const newTemplate = ref<IntervalTemplate>({

 onMounted(async () => {
  await fetchBoats();
-  await scheduleStore.fetchIntervalTemplates();
+  await intervalTemplateStore.fetchIntervalTemplates();
 });

 const filteredIntervals = (date: Timestamp, boat: Boat) => {
-  return scheduleStore.getIntervals(date, boat);
+  return intervalStore.getIntervals(date, boat);
 };

 const sortedIntervals = (date: Timestamp, boat: Boat) => {
@@ -207,11 +225,11 @@ function createTemplate() {
 }
 function createIntervals(boat: Boat, templateId: string, date: string) {
  const intervals = intervalsFromTemplate(boat, templateId, date);
-  intervals.forEach((interval) => scheduleStore.createInterval(interval));
+  intervals.forEach((interval) => intervalStore.createInterval(interval));
 }

 function getIntervals(date: Timestamp, boat: Boat) {
-  return scheduleStore.getIntervals(date, boat);
+  return intervalStore.getIntervals(date, boat);
 }

 function intervalsFromTemplate(
@@ -219,7 +237,7 @@ function intervalsFromTemplate(
  templateId: string,
  date: string
 ): Interval[] {
-  const template = scheduleStore
+  const template = intervalTemplateStore
    .getIntervalTemplates()
    .value.find((t) => t.$id === templateId);
  return template
@@ -231,7 +249,7 @@ function intervalsFromTemplate(

 function deleteBlock(block: Interval) {
  if (block.$id) {
-    scheduleStore.deleteInterval(block.$id);
+    intervalStore.deleteInterval(block.$id);
  }
 }

--- a/src/pages/schedule/ScheduleIndexPage.vue
+++ b/src/pages/schedule/ScheduleIndexPage.vue
@@ -1,16 +1,17 @@
 <template>
  <q-page padding>
-    <q-item v-for="link in navlinks" :key="link.name">
+    <q-item
+      v-for="link in navlinks"
+      :key="link.name">
      <q-btn
        :icon="link.icon"
-        color="primary"
+        :color="link.color ? link.color : 'primary'"
        size="1.25em"
        :to="link.to"
        :label="link.name"
        rounded
        class="full-width"
-        align="left"
-      />
+        align="left" />
    </q-item>
  </q-page>
 </template>