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

<template>
  <q-page padding>
    <q-card>
      <template>
        <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
                >{{ selectedDate | toMonth }} {{ selectedDate | toYear }}
                <q-popup-proxy
                  @before-show="updateProxy"
                  transition-show="scale"
                  transition-hide="scale"
                >
                  <q-date v-model="proxyDate">
                    <div class="row items-center justify-end q-gutter-sm">
                      <q-btn label="Cancel" color="primary" flat v-close-popup />
                      <q-btn
                        label="OK"
                        color="primary"
                        flat
                        @click="saveNewSelectedDate(proxyDate)"
                        v-close-popup
                      />
                    </div>
                  </q-date>
                </q-popup-proxy>
              </q-btn>
              <q-separator vertical />
              <q-btn flat dense label="Next" @click="calendarNext" />
            </div>
          </q-toolbar>
          <q-calendar
            v-model="selectedDate"
            view="week-agenda"
            :weekdays="[1, 2, 3, 4, 5, 6, 0]"
            locale="de-de"
            style="height: 100%; min-height: 400px;"
            ref="calendar"
          >
            <template #day-body="{ timestamp }" style="min-height: 200px;">
              <template !v-if="getAgenda(timestamp)" style="min-height: 200px;"> </template>
              <template v-for="agenda in getAgenda(timestamp)">
                <eventslot :event="agenda" :key="agenda.id" />
              </template>
            </template>
          </q-calendar>
        </div>
      </template>
    </q-card>
  </q-page>
</template>

<script lang="ts">
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { computed, defineComponent, onBeforeMount, ref } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { ScheduleInterface } from '../../store/schedule';
import Eventslot from './slots/EventSlot.vue';
import { date } from 'quasar';
export default defineComponent({
  name: 'AgendaView',
  components: { Eventslot },
  filters: {
    toMonth: function(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'
          ]
        });
      }
    },
    toYear: function(value: string) {
      if (value) {
        return date.formatDate(new Date(value), 'YYYY');
      }
    }
  },
  setup(_, { root }) {
    const store = <Store<StateInterface>>root.$store;
    const state = <ScheduleInterface>store.state.schedule;
    const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
    const proxyDate = ref('');
    const events2 = computed(() => {
      console.log(state.events);
      let agenda: Agendas = {};
      state.events
        .filter(event => {
          const thisWeek = date.formatDate(new Date(selectedDate.value), 'w');
          console.log(thisWeek, date.formatDate(event.start, 'w'));
          return date.formatDate(event.start, 'w') == thisWeek;
        })
        .forEach(event => {
          let day = event.start.getDay();
          console.log('event', event, day, !agenda[day]);
          if (!agenda[day]) {
            agenda[day] = [];
          }
          agenda[day].push(event);
        });
      console.log('finish agenda:', agenda);
      return agenda;
    });

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

    onBeforeMount(() => {
      void store.dispatch('schedule/getEvents');
      // void store.dispatch('schedule/getJobTypes');
    });
    function getAgenda(this: any, day: { weekday: string }) {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
      return this.events2[parseInt(day.weekday, 10)];
    }

    function calendarNext(this: any) {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      return this.$refs.calendar.next();
    }

    function calendarPrev(this: any) {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      return this.$refs.calendar.prev();
    }
    function updateProxy(this: any) {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
      proxyDate.value = selectedDate.value;
    }
    function saveNewSelectedDate(this: any) {
      proxyDate.value = date.formatDate(proxyDate.value, 'YYYY-MM-DD');
      selectedDate.value = proxyDate.value;
    }
    return {
      selectedDate,
      events2,
      getAgenda,
      calendarNext,
      calendarPrev,
      updateProxy,
      saveNewSelectedDate,
      proxyDate
    };
  }
});
</script>

<style></style>