flaschengeist-frontend/src/plugins/schedule/components/overview/AgendaView.vue

<template>
  <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"
            flat
            stretch
            toggle-color=""
            :options="[
              { label: 'Tag', value: 'day' },
              { label: 'Woche', value: 'week' },
            ]"
          />
        </q-toolbar>
        <q-calendar-agenda
          ref="calendar"
          v-model="selectedDate"
          :view="calendarView"
          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
          locale="de-de"
          style="height: 100%; min-height: 400px"
        >
          <template #day="{ scope: { timestamp } }" style="min-height: 200px">
            <template v-if="!getAgenda(timestamp)" style="min-height: 200px"> </template>
            <template v-for="agenda in getAgenda(timestamp)" :key="agenda.id">
              <eventslot :event="agenda" />
            </template>
          </template>
        </q-calendar-agenda>
      </div>
    </q-card>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, ref } from 'vue';
import { useScheduleStore } from '../../store';
import Eventslot from './slots/EventSlot.vue';
import { date } from 'quasar';

export default defineComponent({
  name: 'AgendaView',
  components: { Eventslot },

  setup() {
    const store = useScheduleStore();
    const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
    const proxyDate = ref('');
    const calendar = ref<QCalendar.QCalendar>();
    const calendarView = 'week';
    const events = ref<Agendas>({});

    interface Agendas {
      [index: number]: FG.Event[];
    }

    onBeforeMount(async () => {
      let agenda: Agendas = {};
      console.log('Hier Passiert was');
      const list = await store.getEvents({ from: new Date(selectedDate.value) });
      if (list)
        list.forEach((event) => {
          let day = event.start.getDay();

          if (!agenda[day]) {
            agenda[day] = [];
          }
          agenda[day].push(event);
        });
      console.log('finish agenda:', agenda);
      events.value = agenda;
    });

    function getAgenda(day: { weekday: string }) {
      return events.value[parseInt(day.weekday, 10)];
    }

    function calendarNext() {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
      return calendar.value?.next();
    }

    function calendarPrev() {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
      return calendar.value?.prev();
    }
    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', {
          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');
      }
    }

    return {
      asYear,
      asMonth,
      calendar,
      selectedDate,
      events,
      getAgenda,
      calendarNext,
      calendarPrev,
      updateProxy,
      saveNewSelectedDate,
      proxyDate,
      calendarView,
    };
  },
});
</script>

<style></style>