ff-admin/src/views/admin/club/calendar/Calendar.vue

<template>
  <MainTemplate>
    <template #topBar>
      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
        <h1 class="font-bold text-xl h-8">Kalender</h1>
        <div class="flex flex-row gap-2">
          <PlusIcon
            class="text-gray-500 h-5 w-5 cursor-pointer"
            @click="select({ start: '', end: '', allDay: false })"
          />
          <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
        </div>
      </div>
    </template>
    <template #diffMain>
      <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
        <CustomCalendar :items="formattedItems" @date-select="select" @event-select="eventClick" />
      </div>
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import { defineComponent, markRaw, defineAsyncComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useModalStore } from "@/stores/modal";
import MainTemplate from "@/templates/Main.vue";
import { useCalendarStore } from "@/stores/admin/club/calendar";
import { useAbilityStore } from "@/stores/ability";
import { LinkIcon, PlusIcon } from "@heroicons/vue/24/outline";
import CustomCalendar from "@/components/CustomCalendar.vue";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {};
  },
  computed: {
    ...mapState(useCalendarStore, ["formattedItems"]),
    ...mapState(useAbilityStore, ["can"]),
  },
  mounted() {
    this.fetchCalendars();
  },
  methods: {
    ...mapActions(useModalStore, ["openModal"]),
    ...mapActions(useCalendarStore, ["fetchCalendars"]),
    select({ start, end, allDay }: { start: string; end: string; allDay: boolean }) {
      if (!this.can("create", "club", "calendar")) return;
      this.openModal(
        markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))),
        {
          start,
          end,
          allDay,
        }
      );
    },
    eventClick(id: string) {
      if (!this.can("update", "club", "calendar")) return;
      this.openModal(
        markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/UpdateCalendarModal.vue"))),
        id
      );
    },
    openLinkModal(e: any) {
      this.openModal(
        markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CalendarLinkModal.vue")))
      );
    },
  },
});
</script>