[ported] AgendaView button for current week / day

Ported from flaschengeist-frontend @a59f7788511f9ce4fd4522621c82b389809ac7ab

src/components/overview/AgendaView.vue

@@ -16,92 +16,82 @@
       </div>
     </q-card>
   </q-dialog>
-  <q-page padding>
+  <q-card>
-    <q-card>
+    <div style="max-width: 1800px; width: 100%">
-      <div style="max-width: 1800px; width: 100%">
+      <div class="bg-primary text-white q-my-sm shadow-2 row justify-center">
-        <div class="bg-primary text-white q-my-sm shadow-2 row justify-center">
+        <div class="col-xs-12 col-sm-9 row justify-center items-center">
-          <div class="col-xs-12 col-sm-9 row justify-center items-center">
+          <q-btn flat dense icon="mdi-chevron-left" title="previous" @click="calendarPrev" />
-            <q-btn flat dense icon="mdi-chevron-left" title="previous" @click="calendarPrev" />
+          <q-separator vertical />
-            <q-separator vertical />
+          <q-btn flat dense
-            <q-btn flat dense
+            >{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
-              >{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
+            <q-popup-proxy transition-show="scale" transition-hide="scale">
-              <q-popup-proxy
+              <q-date
-                transition-show="scale"
+                ref="datepicker"
-                transition-hide="scale"
+                v-model="selectedDate"
-                @before-show="updateProxy"
+                v-close-popup
-              >
+                mask="YYYY-MM-DD"
-                <q-date v-model="proxyDate">
+                no-unset
-                  <div class="row items-center justify-end q-gutter-sm">
+                ><q-btn v-close-popup label="jetzt" dense flat @click="datepicker?.setToday()"
-                    <q-btn v-close-popup label="Cancel" color="primary" flat />
+              /></q-date>
-                    <q-btn
+            </q-popup-proxy>
-                      v-close-popup
+          </q-btn>
-                      label="OK"
+          <q-separator vertical />
-                      color="primary"
+          <q-btn flat dense icon="mdi-chevron-right" title="next" @click="calendarNext" />
-                      flat
+        </div>
-                      @click="saveNewSelectedDate"
+        <div class="col-xs-12 col-sm-3 text-center">
-                    />
+          <q-btn-toggle
-                  </div>
+            v-if="$q.screen.gt.xs"
-                </q-date>
+            v-model="calendarView"
-              </q-popup-proxy>
+            flat
-            </q-btn>
+            stretch
-            <q-separator vertical />
+            toggle-color="black"
-            <q-btn flat dense icon="mdi-chevron-right" title="next" @click="calendarNext" />
+            :options="[
-          </div>
+              { label: 'Tag', value: 'day' },
-          <div class="col-xs-12 col-sm-3 text-center">
+              { label: 'Woche', value: 'week' },
-            <q-btn-toggle
+            ]"
-              v-if="$q.screen.gt.xs"
+          />
-              v-model="calendarView"
+        </div>
-              flat
+      </div>
-              stretch
+      <q-calendar-agenda
-              toggle-color="black"
+        v-model="selectedDate"
-              :options="[
+        :view="calendarRealView"
-                { label: 'Tag', value: 'day' },
+        :max-days="calendarDays"
-                { label: 'Woche', value: 'week' },
+        :weekdays="[1, 2, 3, 4, 5, 6, 0]"
-              ]"
+        locale="de-de"
+        style="height: 100%; min-height: 400px"
+      >
+        <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-section>Neue Veranstaltung</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </template>
+        <template #day="{ scope: { timestamp } }">
+          <div itemref="" class="q-pa-sm" style="min-height: 200px">
+            <event-slot
+              v-for="(agenda, index) in events[timestamp.weekday]"
+              :key="index"
+              v-model="events[timestamp.weekday][index]"
+              class="q-mb-sm"
+              @remove-event="remove"
+              @edit-event="edit"
             />
           </div>
-        </div>
+        </template>
-        <q-calendar-agenda
+      </q-calendar-agenda>
-          v-model="selectedDate"
+    </div>
-          :view="calendarRealView"
+  </q-card>
-          :max-days="calendarDays"
-          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
-          locale="de-de"
-          style="height: 100%; min-height: 400px"
-        >
-          <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-section>Neue Veranstaltung</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </template>
-          <template #day="{ scope: { timestamp } }">
-            <div itemref="" class="q-pa-sm" style="min-height: 200px">
-              <event-slot
-                v-for="(agenda, index) in events[timestamp.weekday]"
-                :key="index"
-                v-model="events[timestamp.weekday][index]"
-                class="q-mb-sm"
-                @remove-event="remove"
-                @edit-event="edit"
-              />
-            </div>
-          </template>
-        </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,
+      datepicker,
-      calendarPrev,
-      updateProxy,
-      saveNewSelectedDate,
-      proxyDate,
       remove,
-      calendarDays,
+      selectedDate,
-      calendarView,
-      calendarRealView,
     };
   },
 });