[events] AgendaView button for current week / day

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,20 +20,12 @@
       </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
+        <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-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 />
@@ -38,14 +34,23 @@
                   label="OK"
                   color="primary"
                   flat
-                      @click="saveNewSelectedDate(proxyDate)"
+                  @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 dense label="Next" @click="calendarNext" />
+          <q-btn
+            flat
+            dense
+            :label="calendarView == 'day' ? 'Heute' : 'Diese Woche'"
+            @click="calendarNow"
+          />
+          <q-separator vertical />
+          <q-btn flat dense label="Weiter" @click="calendarNext" />
         </div>
         <!-- <q-space /> -->
 
@@ -83,15 +88,14 @@
       </q-calendar-agenda>
     </div>
   </q-card>
-  </q-page>
 </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,
     };
   },
 });