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="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 } }" style="min-height: 200px">
            <template v-if="!events[timestamp.weekday]" style="min-height: 200px"> </template>
            <template v-for="agenda in events[timestamp.weekday]" :key="agenda.id">
              <eventslot :event="agenda" />
            </template>
          </template>
        </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';

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

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

    const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
    const calendarDays = computed(() =>
      calendarView.value == 'day' ? 1 : windowWidth.value < 1000 ? 3 : 7
    );
    const events = ref<Agendas>({});

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

    onBeforeMount(async () => {
      window.addEventListener('resize', () => {
        windowWidth.value = window.innerWidth;
      });

      await loadAgendas();
    });

    async function loadAgendas() {
      const selected = new Date(selectedDate.value);
      const start = calendarRealView.value === 'day' ? selected : startOfWeek(selected);
      const end = date.addToDate(start, { days: calendarDays.value });

      events.value = {};
      const list = await store.getEvents({ from: start, to: end });
      list.forEach((event) => {
        const day = event.start.getDay();

        if (!events.value[day]) {
          events.value[day] = [];
        }
        events.value[day].push(event);
      });
    }

    function calendarNext() {
      calendar.value?.next();
      void loadAgendas();
    }

    function calendarPrev() {
      calendar.value?.prev();
      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', {
          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,
      calendarNext,
      calendarPrev,
      updateProxy,
      saveNewSelectedDate,
      proxyDate,
      calendarDays,
      calendarView,
      calendarRealView,
    };
  },
});
</script>

<style></style>