From c8ae4587758751835a5f757b4e0391be82088526 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Sun, 28 Nov 2021 22:21:07 +0100
Subject: [PATCH] fix(ui) AgendaView now shows correct events on small devices

---
 src/components/overview/AgendaView.vue | 128 +++++++++++++------------
 1 file changed, 68 insertions(+), 60 deletions(-)

diff --git a/src/components/overview/AgendaView.vue b/src/components/overview/AgendaView.vue
index 7c861cc..087c222 100644
--- a/src/components/overview/AgendaView.vue
+++ b/src/components/overview/AgendaView.vue
@@ -27,7 +27,7 @@
             <q-popup-proxy ref="proxy" transition-show="scale" transition-hide="scale">
               <q-date
                 ref="datepicker"
-                :model-value="selectedDate"
+                :model-value="date(selectedDate)"
                 mask="YYYY-MM-DD"
                 no-unset
                 @update:model-value="updateDate"
@@ -53,7 +53,7 @@
         </div>
       </div>
       <q-calendar-agenda
-        v-model="selectedDate"
+        :model-value="date(realDate)"
         :view="calendarRealView"
         :max-days="calendarDays"
         :weekdays="[1, 2, 3, 4, 5, 6, 0]"
@@ -89,13 +89,14 @@
 
 <script lang="ts">
 import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref } from 'vue';
-import { useEventStore } from '../../store';
-import EventSlot from './slots/EventSlot.vue';
-import { date, QDate, QPopupProxy, useQuasar } from 'quasar';
-import { startOfWeek } from '@flaschengeist/api';
-import EditEvent from '../management/EditEvent.vue';
 import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
+import { date, QDate, QPopupProxy, useQuasar } from 'quasar';
 import { EditableEvent, emptyEvent } from '../../store/models';
+import { startOfWeek } from '@flaschengeist/api';
+import { useEventStore } from '../../store';
+
+import EventSlot from './slots/EventSlot.vue';
+import EditEvent from '../management/EditEvent.vue';
 
 export default defineComponent({
   name: 'AgendaView',
@@ -108,13 +109,30 @@ export default defineComponent({
     const datepicker = ref<QDate>();
     const proxy = ref<QPopupProxy>();
 
-    const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
+    // User selectable (day vs week)
     const calendarView = ref('week');
+    // User selected date
+    const selectedDate = ref(date.buildDate({ hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }));
 
-    const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
-    const calendarDays = computed(() =>
-      calendarView.value == 'day' || quasar.screen.xs ? 1 : quasar.screen.sm ? 3 : 7
+    // Real view depending on the screen size
+    const calendarRealView = computed(() =>
+      calendarView.value === 'day' || quasar.screen.xs || quasar.screen.sm ? 'day' : 'week'
     );
+    const calendarDays = computed(() => {
+      if (calendarView.value == 'day' || quasar.screen.xs) return 1;
+      if (calendarRealView.value == 'week') return 7;
+      return realDate.value.getDay() === 1 ? 3 : 4;
+    });
+
+    const realDate = computed(() => {
+      if (calendarView.value === 'day' || calendarRealView.value === 'week' || quasar.screen.xs)
+        return selectedDate.value;
+
+      const start = startOfWeek(selectedDate.value);
+      if (selectedDate.value.getDay() > 0 && selectedDate.value.getDay() <= 3) return start;
+      else return date.addToDate(start, { days: 3 });
+    });
+
     const events = ref<Agendas>({});
     const editor = ref<EditableEvent>();
 
@@ -154,17 +172,12 @@ export default defineComponent({
     }
 
     async function loadAgendas() {
-      const selected = date.adjustDate(selectedDate.value, {
-        milliseconds: 0,
-        seconds: 0,
-        minutes: 0,
-        hours: 0,
-      });
-      const start = calendarView.value === 'day' ? selected : startOfWeek(selected);
-      const end = date.addToDate(start, { days: calendarDays.value });
+      const from =
+        calendarView.value === 'day' ? selectedDate.value : startOfWeek(selectedDate.value);
+      const to = date.addToDate(from, { days: calendarView.value === 'day' ? 1 : 7 });
 
       events.value = {};
-      const { result } = await store.getEvents({ from: start, to: end });
+      const { result } = await store.getEvents({ from, to });
       result.forEach((event) => {
         const day = event.start.getDay();
 
@@ -175,67 +188,62 @@ export default defineComponent({
       });
     }
 
-    function calendarNext() {
-      selectedDate.value = date.formatDate(
-        date.addToDate(selectedDate.value, { days: calendarDays.value }),
-        'YYYY-MM-DD'
-      );
-      void loadAgendas();
+    function addDays(reverse: boolean) {
+      const oww = Math.floor((startOfWeek(selectedDate.value).getTime() / 1000) * 60 * 60 * 24);
+      selectedDate.value = date.addToDate(realDate.value, {
+        days: reverse ? -1 : calendarDays.value,
+      });
+      if (oww != Math.floor((startOfWeek(selectedDate.value).getTime() / 1000) * 60 * 60 * 24))
+        void loadAgendas();
     }
 
-    function calendarPrev() {
-      selectedDate.value = date.formatDate(
-        date.subtractFromDate(selectedDate.value, { days: calendarDays.value }),
-        'YYYY-MM-DD'
-      );
-      void loadAgendas();
+    function asMonth(value?: Date) {
+      return [
+        'Januar',
+        'Februar',
+        'März',
+        'April',
+        'Mai',
+        'Juni',
+        'Juli',
+        'August',
+        'September',
+        'Oktober',
+        'November',
+        'Dezember',
+        '-',
+      ][value?.getMonth() || 12];
     }
-
-    function asMonth(value: string) {
-      if (value) {
-        return date.formatDate(new Date(value), 'MMMM', {
-          months: [
-            'Januar',
-            'Februar',
-            'März',
-            'April',
-            'Mai',
-            'Juni',
-            'Juli',
-            'August',
-            'September',
-            'Oktober',
-            'November',
-            'Dezember',
-          ],
-        });
-      }
-    }
-    function asYear(value: string) {
-      if (value) {
-        return date.formatDate(new Date(value), 'YYYY');
-      }
+    function asYear(value?: Date) {
+      return value?.getFullYear() || '-';
     }
 
     return {
       asYear,
       asMonth,
       calendarDays,
-      calendarNext,
-      calendarPrev,
+      calendarNext: () => addDays(false),
+      calendarPrev: () => addDays(true),
       calendarRealView,
       calendarView,
       create,
+      date: (d: Date) => date.formatDate(d, 'YYYY-MM-DD'),
       edit,
       editor,
       editDone,
       events,
       datepicker,
       proxy,
+      realDate,
       remove,
       selectedDate,
       updateDate: (ds: string) => {
-        selectedDate.value = ds;
+        selectedDate.value = date.adjustDate(date.extractDate(ds, 'YYYY-MM-DD'), {
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+          milliseconds: 0,
+        });
         proxy.value?.hide();
       },
     };