src/components/admin/club/calendar/CreateCalendarModal.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Termintyp erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <Listbox v-model="selectedType" name="type">
+          <ListboxLabel>Termintyp</ListboxLabel>
+          <div class="relative mt-1">
+            <ListboxButton
+              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+            >
+              <span class="block truncate w-full text-start">
+                {{
+                  calendarTypes.length != 0 ? (selectedType?.type ?? "bitte auswählen") : "keine Auswahl vorhanden"
+                }}</span
+              >
+              <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+              >
+                <ListboxOption v-if="calendarTypes.length == 0" disabled as="template">
+                  <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
+                    <span :class="['font-normal', 'block truncate']">keine Auswahl vorhanden</span>
+                  </li>
+                </ListboxOption>
+                <ListboxOption
+                  v-slot="{ active, selected }"
+                  v-for="type in calendarTypes"
+                  :key="type.id"
+                  :value="type"
+                  as="template"
+                >
+                  <li
+                    :class="[
+                      active ? 'bg-red-200 text-amber-900' : 'text-gray-900',
+                      'relative cursor-default select-none py-2 pl-10 pr-4',
+                    ]"
+                  >
+                    <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{ type.type }}</span>
+                    <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
+                      <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+      </div>
+      <div>
+        <label for="title">Titel</label>
+        <input type="text" id="title" required />
+      </div>
+      <div>
+        <label for="content">Beschreibung (optional)</label>
+        <textarea id="content" class="h-18"></textarea>
+      </div>
+      <div class="flex flex-row gap-2 items-center">
+        <input
+          type="checkbox"
+          id="allDay"
+          :checked="data.allDay"
+          @change="(e) => (allDay = (e.target as HTMLInputElement).checked)"
+        />
+        <label for="allDay">ganztägig</label>
+      </div>
+      <div v-if="!allDay" class="flex flex-row gap-2">
+        <div class="w-full">
+          <label for="starttime">Startzeit</label>
+          <input type="datetime-local" id="starttime" required :value="data.start.split(':00+')[0]" />
+        </div>
+        <div class="w-full">
+          <label for="endtime">Endzeit</label>
+          <input type="datetime-local" id="endtime" required :value="data.end.split(':00+')[0]" />
+        </div>
+      </div>
+      <div v-else class="flex flex-row gap-2">
+        <div class="w-full">
+          <label for="startdate">Startdatum</label>
+          <input type="date" id="startdate" required :value="data.start" />
+        </div>
+        <div class="w-full">
+          <label for="enddate">Enddatum</label>
+          <input type="date" id="enddate" required :value="data.end" />
+        </div>
+      </div>
+      <div>
+        <label for="location">Ort (optional)</label>
+        <input type="text" id="location" />
+      </div>
+
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button
+          primary-outline
+          @click="closeModal"
+          :disabled="status != null && status != 'loading' && status?.status != 'failed'"
+        >
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useCalendarStore } from "@/stores/admin/calendar";
+import type { CreateCalendarViewModel } from "@/viewmodels/admin/calendar.models";
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useCalendarTypeStore } from "@/stores/admin/calendarType";
+import type { CalendarTypeViewModel } from "@/viewmodels/admin/calendarType.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+      allDay: false,
+      selectedType: undefined as undefined | CalendarTypeViewModel,
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useCalendarTypeStore, ["calendarTypes"]),
+  },
+  mounted() {
+    this.allDay = this.data.allDay;
+    this.fetchCalendarTypes();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useCalendarStore, ["createCalendar"]),
+    ...mapActions(useCalendarTypeStore, ["fetchCalendarTypes"]),
+    triggerCreate(e: any) {
+      if (!this.selectedType) return;
+      let formData = e.target.elements;
+      let createCalendar: CreateCalendarViewModel = {
+        typeId: this.selectedType.id,
+        starttime: this.allDay
+          ? new Date(new Date(formData.startdate.value).setHours(0, 0, 0, 0))
+          : formData.starttime.value,
+        endtime: this.allDay
+          ? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999))
+          : formData.endtime.value,
+        title: formData.title.value,
+        content: formData.content.value,
+        location: formData.location.value,
+        allDay: this.allDay,
+      };
+      this.createCalendar(createCalendar)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/club/calendar/DeleteCalendarModal.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Termin {{ calendar?.title }} löschen?</p>
+    </div>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
+        unwiederuflich löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useCalendarStore } from "@/stores/admin/calendar";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useCalendarStore, ["calendars"]),
+    calendar() {
+      return this.calendars.find((r) => r.id == this.data);
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useCalendarStore, ["deleteCalendar"]),
+    triggerDelete() {
+      this.deleteCalendar(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/settings/calendarType/DeleteCalendarTypeModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full md:max-w-md">
     <div class="flex flex-col items-center">
-      <p class="text-xl font-medium">Termintyp {{ communicationType?.type }} löschen?</p>
+      <p class="text-xl font-medium">Termintyp {{ calendarType?.type }} löschen?</p>
     </div>
     <br />
 
@@ -29,7 +29,7 @@ import { useModalStore } from "@/stores/modal";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
+import { useCalendarTypeStore } from "@/stores/admin/calendarType";
 </script>
 
 <script lang="ts">
@@ -47,16 +47,16 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useModalStore, ["data"]),
-    ...mapState(useCommunicationTypeStore, ["communicationTypes"]),
+    ...mapState(useCalendarTypeStore, ["calendarTypes"]),
-    communicationType() {
+    calendarType() {
-      return this.communicationTypes.find((r) => r.id == this.data);
+      return this.calendarTypes.find((r) => r.id == this.data);
     },
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useCommunicationTypeStore, ["deleteCommunicationType"]),
+    ...mapActions(useCalendarTypeStore, ["deleteCalendarType"]),
     triggerDelete() {
-      this.deleteCommunicationType(this.data)
+      this.deleteCalendarType(this.data)
         .then(() => {
           this.status = { status: "success" };
           this.timeout = setTimeout(() => {

src/stores/admin/calendar.ts

@@ -0,0 +1,77 @@
+import { defineStore } from "pinia";
+import type {
+  CreateCalendarViewModel,
+  UpdateCalendarViewModel,
+  CalendarViewModel,
+} from "@/viewmodels/admin/calendar.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useCalendarStore = defineStore("calendar", {
+  state: () => {
+    return {
+      calendars: [] as Array<CalendarViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      loadingFields: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  getters: {
+    formattedItems: (state) => {
+      return state.calendars.map((c) => ({
+        id: c.id,
+        title: c.title,
+        start: c.starttime,
+        end: c.endtime,
+        backgroundColor: c.type.color,
+      }));
+    },
+  },
+  actions: {
+    fetchCalendars() {
+      this.loading = "loading";
+      http
+        .get("/admin/calendar/items")
+        .then((result) => {
+          this.calendars = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchCalendarById(id: number): Promise<AxiosResponse<any, any>> {
+      return http.get(`/admin/calendar/item/${id}`);
+    },
+    async createCalendar(calendar: CreateCalendarViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/calendar/item`, {
+        starttime: calendar.starttime,
+        endtime: calendar.endtime,
+        title: calendar.title,
+        content: calendar.content,
+        allDay: calendar.allDay,
+        location: calendar.location,
+        typeId: calendar.typeId,
+      });
+      this.fetchCalendars();
+      return result;
+    },
+    async updateActiveCalendar(calendar: UpdateCalendarViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/calendar/item/${calendar.id}`, {
+        starttime: calendar.starttime,
+        endtime: calendar.endtime,
+        title: calendar.title,
+        content: calendar.content,
+        allDay: calendar.allDay,
+        location: calendar.location,
+        typeId: calendar.typeId,
+      });
+      this.fetchCalendars();
+      return result;
+    },
+    async deleteCalendar(calendar: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/calendar/item/${calendar}`);
+      this.fetchCalendars();
+      return result;
+    },
+  },
+});

src/viewmodels/admin/calendar.models.ts

@@ -1,11 +1,35 @@
 import type { CalendarTypeViewModel } from "./calendarType.models";
 
 export interface CalendarViewModel {
-  id: number;
+  id: string;
-  date: Date;
   starttime: Date;
   endtime: Date;
   title: string;
   content: string;
+  location: string;
+  allDay: boolean;
+  createdAt: Date;
+  updatedAt: Date;
   type: CalendarTypeViewModel;
 }
+
+export interface CreateCalendarViewModel {
+  starttime: Date;
+  endtime: Date;
+  title: string;
+  content: string;
+  location: string;
+  allDay: boolean;
+  typeId: string;
+}
+
+export interface UpdateCalendarViewModel {
+  id: string;
+  starttime: Date;
+  endtime: Date;
+  title: string;
+  content: string;
+  location: string;
+  allDay: boolean;
+  typeId: string;
+}

src/viewmodels/admin/calendarType.models.ts

@@ -1,5 +1,5 @@
 export interface CalendarTypeViewModel {
-  id: number;
+  id: string;
   type: string;
   nscdr: boolean;
   color: string;
@@ -12,7 +12,7 @@ export interface CreateCalendarTypeViewModel {
 }
 
 export interface UpdateCalendarTypeViewModel {
-  id: number;
+  id: string;
   type: string;
   nscdr: boolean;
   color: string;

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

@@ -14,21 +14,27 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
 import { mapActions, mapState } from "pinia";
+import { useModalStore } from "@/stores/modal";
 import MainTemplate from "@/templates/Main.vue";
 import FullCalendar from "@fullcalendar/vue3";
 import deLocale from "@fullcalendar/core/locales/de";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
+import { useCalendarStore } from "../../../../stores/admin/calendar";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data() {
-    return {
+    return {};
-      calendarOptions: {
+  },
+  computed: {
+    ...mapState(useCalendarStore, ["formattedItems"]),
+    calendarOptions() {
+      return {
         locale: deLocale,
         plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
         initialView: "dayGridMonth",
@@ -47,17 +53,36 @@ export default defineComponent({
         displayEventTime: true,
         nowIndicator: true,
         weekText: "KW",
+        allDaySlot: false,
+        events: this.formattedItems,
         select: this.select,
         eventClick: this.eventClick,
-      },
+      };
-    };
+    },
+  },
+  mounted() {
+    this.fetchCalendars();
   },
   methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    ...mapActions(useCalendarStore, ["fetchCalendars"]),
     select(e: any) {
       console.log("s", e);
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))),
+        {
+          start: e.startStr,
+          end: e.endStr,
+          allDay: e.allDay,
+        }
+      );
     },
     eventClick(e: any) {
       console.log("ec", e);
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/DeleteCalendarModal.vue"))),
+        e.event.id
+      );
     },
   },
 });