[ported] AgendaView button for current week / day

Ported from flaschengeist-frontend @a59f7788511f9ce4fd4522621c82b389809ac7ab

src/components/overview/AgendaView.vue

@@ -16,7 +16,6 @@
       </div>
     </q-card>
   </q-dialog>
-  <q-page padding>
   <q-card>
     <div style="max-width: 1800px; width: 100%">
       <div class="bg-primary text-white q-my-sm shadow-2 row justify-center">
@@ -25,23 +24,15 @@
           <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
+            <q-popup-proxy transition-show="scale" transition-hide="scale">
+              <q-date
+                ref="datepicker"
+                v-model="selectedDate"
                 v-close-popup
-                      label="OK"
-                      color="primary"
-                      flat
-                      @click="saveNewSelectedDate"
-                    />
-                  </div>
-                </q-date>
+                mask="YYYY-MM-DD"
+                no-unset
+                ><q-btn v-close-popup label="jetzt" dense flat @click="datepicker?.setToday()"
+              /></q-date>
             </q-popup-proxy>
           </q-btn>
           <q-separator vertical />
@@ -69,11 +60,11 @@
         locale="de-de"
         style="height: 100%; min-height: 400px"
       >
-          <template #head-day-label="{scope: {timestamp}}">
-            {{timestamp.day}}
+        <template #head-day-label="{ scope: { timestamp } }">
+          {{ timestamp.day }}
           <q-menu>
             <q-list style="min-width: 100px">
-                <q-item exact :to="{name: 'new-event', query: {date: timestamp.date}}">
+              <q-item exact :to="{ name: 'new-event', query: { date: timestamp.date } }">
                 <q-item-section>Neue Veranstaltung</q-item-section>
               </q-item>
             </q-list>
@@ -94,14 +85,13 @@
       </q-calendar-agenda>
     </div>
   </q-card>
-  </q-page>
 </template>
 
 <script lang="ts">
 import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref } from 'vue';
 import { useEventStore } from '../../store';
 import EventSlot from './slots/EventSlot.vue';
-import { date, useQuasar } from 'quasar';
+import { date, QDate, useQuasar } from 'quasar';
 import { startOfWeek } from '@flaschengeist/api';
 import EditEvent from '../management/EditEvent.vue';
 import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
@@ -114,13 +104,14 @@ export default defineComponent({
     const store = useEventStore();
     const quasar = useQuasar();
 
+    const datepicker = ref<QDate>();
+
     const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
-    const proxyDate = ref('');
     const calendarView = ref('week');
 
     const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
     const calendarDays = computed(() =>
-      (calendarView.value == 'day' || quasar.screen.xs) ? 1 : quasar.screen.sm ? 3 : 7
+      calendarView.value == 'day' || quasar.screen.xs ? 1 : quasar.screen.sm ? 3 : 7
     );
     const events = ref<Agendas>({});
     const editor = ref<FG.Event | undefined>(undefined);
@@ -158,7 +149,12 @@ export default defineComponent({
     }
 
     async function loadAgendas() {
-      const selected = date.adjustDate(selectedDate.value, {milliseconds: 0, seconds: 0, minutes: 0, hours: 0});
+      const selected = date.adjustDate(selectedDate.value, {
+        milliseconds: 0,
+        seconds: 0,
+        minutes: 0,
+        hours: 0,
+      });
       const start = calendarRealView.value === 'day' ? selected : startOfWeek(selected);
       const end = date.addToDate(start, { days: calendarDays.value });
 
@@ -190,13 +186,6 @@ export default defineComponent({
       void loadAgendas();
     }
 
-    function updateProxy() {
-      proxyDate.value = selectedDate.value;
-    }
-    function saveNewSelectedDate() {
-      proxyDate.value = date.formatDate(proxyDate.value, 'YYYY-MM-DD');
-      selectedDate.value = proxyDate.value;
-    }
     function asMonth(value: string) {
       if (value) {
         return date.formatDate(new Date(value), 'MMMM', {
@@ -226,20 +215,18 @@ export default defineComponent({
     return {
       asYear,
       asMonth,
-      selectedDate,
+      calendarDays,
+      calendarNext,
+      calendarPrev,
+      calendarRealView,
+      calendarView,
       edit,
       editor,
       editDone,
       events,
-      calendarNext,
-      calendarPrev,
-      updateProxy,
-      saveNewSelectedDate,
-      proxyDate,
+      datepicker,
       remove,
-      calendarDays,
-      calendarView,
-      calendarRealView,
+      selectedDate,
     };
   },
 });