From a59f7788511f9ce4fd4522621c82b389809ac7ab Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Sun, 28 Mar 2021 03:35:10 +0200
Subject: [PATCH] [events] AgendaView button for current week / day

---
 .../components/overview/AgendaView.vue        | 171 ++++++++++--------
 1 file changed, 92 insertions(+), 79 deletions(-)

diff --git a/src/plugins/schedule/components/overview/AgendaView.vue b/src/plugins/schedule/components/overview/AgendaView.vue
index 3f4e081..9fee7b3 100644
--- a/src/plugins/schedule/components/overview/AgendaView.vue
+++ b/src/plugins/schedule/components/overview/AgendaView.vue
@@ -7,7 +7,11 @@
   >
     <q-card>
       <div class="column">
-        <div class="col" align="right" style="position: sticky; top: 0; z-index: 999">
+        <div
+          class="col"
+          align="right"
+          style="position: sticky; top: 5px; padding-right: 5px; z-index: 999"
+        >
           <q-btn round color="negative" icon="close" dense rounded @click="editDone(false)" />
         </div>
         <div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
@@ -16,82 +20,82 @@
       </div>
     </q-card>
   </q-dialog>
-  <q-page padding>
-    <q-card>
-      <div style="max-width: 1800px; width: 100%">
-        <q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
-          <div class="row justify-center items-center">
-            <q-btn flat dense label="Prev" @click="calendarPrev" />
-            <q-separator vertical />
-            <q-btn flat dense
-              >{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
-              <q-popup-proxy
-                transition-show="scale"
-                transition-hide="scale"
-                @before-show="updateProxy"
-              >
-                <q-date v-model="proxyDate">
-                  <div class="row items-center justify-end q-gutter-sm">
-                    <q-btn v-close-popup label="Cancel" color="primary" flat />
-                    <q-btn
-                      v-close-popup
-                      label="OK"
-                      color="primary"
-                      flat
-                      @click="saveNewSelectedDate(proxyDate)"
-                    />
-                  </div>
-                </q-date>
-              </q-popup-proxy>
-            </q-btn>
-            <q-separator vertical />
-            <q-btn flat dense label="Next" @click="calendarNext" />
-          </div>
-          <!-- <q-space /> -->
-
-          <q-btn-toggle
-            v-model="calendarView"
-            class="row absolute-right"
+  <q-card>
+    <div style="max-width: 1800px; width: 100%">
+      <q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
+        <q-btn flat dense class="row absolute-left q-ml-sm"
+          >{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
+          <q-popup-proxy transition-show="scale" transition-hide="scale" @before-show="updateProxy">
+            <q-date v-model="proxyDate">
+              <div class="row items-center justify-end q-gutter-sm">
+                <q-btn v-close-popup label="Cancel" color="primary" flat />
+                <q-btn
+                  v-close-popup
+                  label="OK"
+                  color="primary"
+                  flat
+                  @click="saveSelectedDate(proxyDate)"
+                />
+              </div>
+            </q-date>
+          </q-popup-proxy>
+        </q-btn>
+        <div class="row justify-center items-center">
+          <q-btn flat dense label="Zurück" @click="calendarPrev" />
+          <q-separator vertical />
+          <q-btn
             flat
-            stretch
-            toggle-color=""
-            :options="[
-              { label: 'Tag', value: 'day' },
-              { label: 'Woche', value: 'week' },
-            ]"
+            dense
+            :label="calendarView == 'day' ? 'Heute' : 'Diese Woche'"
+            @click="calendarNow"
           />
-        </q-toolbar>
-        <q-calendar-agenda
-          v-model="selectedDate"
-          :view="calendarRealView"
-          :max-days="calendarDays"
-          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
-          locale="de-de"
-          style="height: 100%; min-height: 400px"
-        >
-          <template #day="{ scope: { timestamp } }">
-            <div itemref="" class="q-pb-sm" style="min-height: 200px">
-              <eventslot
-                v-for="(agenda, index) in events[timestamp.weekday]"
-                :key="index"
-                v-model="events[timestamp.weekday][index]"
-                @removeEvent="remove"
-                @editEvent="edit"
-              />
-            </div>
-          </template>
-        </q-calendar-agenda>
-      </div>
-    </q-card>
-  </q-page>
+          <q-separator vertical />
+          <q-btn flat dense label="Weiter" @click="calendarNext" />
+        </div>
+        <!-- <q-space /> -->
+
+        <q-btn-toggle
+          v-model="calendarView"
+          class="row absolute-right"
+          flat
+          stretch
+          toggle-color=""
+          :options="[
+            { label: 'Tag', value: 'day' },
+            { label: 'Woche', value: 'week' },
+          ]"
+        />
+      </q-toolbar>
+      <q-calendar-agenda
+        v-model="selectedDate"
+        :view="calendarRealView"
+        :max-days="calendarDays"
+        :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+        locale="de-de"
+        style="height: 100%; min-height: 400px"
+      >
+        <template #day="{ scope: { timestamp } }">
+          <div itemref="" class="q-pb-sm" style="min-height: 200px">
+            <eventslot
+              v-for="(agenda, index) in events[timestamp.weekday]"
+              :key="index"
+              v-model="events[timestamp.weekday][index]"
+              @removeEvent="remove"
+              @editEvent="edit"
+            />
+          </div>
+        </template>
+      </q-calendar-agenda>
+    </div>
+  </q-card>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeMount, ref } from 'vue';
-import { useScheduleStore } from '../../store';
-import Eventslot from './slots/EventSlot.vue';
-import { date } from 'quasar';
 import { startOfWeek } from 'src/utils/datetime';
+import { useScheduleStore } from '../../store';
+import { date } from 'quasar';
+import Eventslot from './slots/EventSlot.vue';
 import EditEvent from '../management/EditEvent.vue';
 
 export default defineComponent({
@@ -183,10 +187,18 @@ export default defineComponent({
       void loadAgendas();
     }
 
+    function calendarNow() {
+      const today = date.formatDate(new Date(), 'YYYY-MM-DD');
+      if (today !== selectedDate.value) {
+        selectedDate.value = today;
+        void loadAgendas();
+      }
+    }
+
     function updateProxy() {
       proxyDate.value = selectedDate.value;
     }
-    function saveNewSelectedDate() {
+    function saveSelectedDate() {
       proxyDate.value = date.formatDate(proxyDate.value, 'YYYY-MM-DD');
       selectedDate.value = proxyDate.value;
     }
@@ -219,20 +231,21 @@ export default defineComponent({
     return {
       asYear,
       asMonth,
-      selectedDate,
+      calendarDays,
+      calendarNext,
+      calendarNow,
+      calendarPrev,
+      calendarRealView,
+      calendarView,
       edit,
       editor,
       editDone,
       events,
-      calendarNext,
-      calendarPrev,
-      updateProxy,
-      saveNewSelectedDate,
       proxyDate,
       remove,
-      calendarDays,
-      calendarView,
-      calendarRealView,
+      saveSelectedDate,
+      selectedDate,
+      updateProxy,
     };
   },
 });