Implemented Fullcalendar

spaces/pages/planningBoard.vue

@@ -0,0 +1,141 @@
+<script setup>
+import FullCalendar from "@fullcalendar/vue3"
+import dayGridPlugin from '@fullcalendar/daygrid'
+import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
+import deLocale from '@fullcalendar/core/locales/de'
+import interactionPlugin from '@fullcalendar/interaction'
+
+const supabase = useSupabaseClient()
+
+const {getResources, getEvents, getEventTypes, fetchEvents} = useDataStore()
+const resources = getResources
+const eventTypes = getEventTypes
+const events = getEvents
+
+const openNewEventModal = ref(false)
+const newEventData = ref({
+  resourceId: "",
+  resourceType: "",
+  title: "",
+  type: "Umsetzung",
+  start: "",
+  end: null
+})
+const createEvent = async () => {
+  const {data,error} = await supabase
+      .from("events")
+      .insert([newEventData.value])
+      .select()
+
+  if(error) console.log(error)
+
+  openNewEventModal.value = false
+  newEventData.value = {}
+  fetchEvents()
+}
+
+
+const calendarOptions = reactive({
+  schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
+  locale: deLocale,
+  plugins: [resourceTimelinePlugin, interactionPlugin],
+  initialView: "resourceTimelineDay",
+  headerToolbar: {
+    left: 'prev,next',
+    center: 'title',
+    right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
+  },
+  initialEvents: events,
+  selectable: true,
+  select: function (info) {
+    //console.log(info)
+    newEventData.value.resourceId = info.resource.id
+    newEventData.value.resourceType = info.resource.extendedProps.type
+    newEventData.value.start = info.startStr
+    newEventData.value.end = info.endStr
+    openNewEventModal.value = true
+  },
+  resourceGroupField: "type",
+  resources: resources,
+  nowIndicator:true
+})
+
+</script>
+
+<template>
+  <div>
+    <UModal
+      v-model="openNewEventModal"
+    >
+      <UCard>
+        <template #header>
+          Neuen Termin erstellen
+        </template>
+
+        <UFormGroup
+          label="Resource:"
+        >
+          <USelectMenu
+            v-model="newEventData.resourceId"
+            :options="resources"
+            value-attribute="id"
+            option-attribute="title"
+          >
+            <template #label>
+              <span>{{ resources.find(resource => resource.id === newEventData.resourceId).title }}</span>
+            </template>
+          </USelectMenu>
+        </UFormGroup>
+        <UFormGroup
+          label="Titel:"
+        >
+          <UInput
+            v-model="newEventData.title"
+          />
+        </UFormGroup>
+        <UFormGroup
+          label="Typ:"
+        >
+          <USelectMenu
+            v-model="newEventData.type"
+            :options="eventTypes"
+            option-attribute="label"
+            value-attribute="label"
+          >
+
+          </USelectMenu>
+        </UFormGroup>
+        <UFormGroup
+          label="Start:"
+        >
+          <UInput
+              v-model="newEventData.start"
+          />
+        </UFormGroup>
+        <UFormGroup
+          label="Ende:"
+        >
+          <UInput
+              v-model="newEventData.end"
+          />
+        </UFormGroup>
+
+        <template #footer>
+          <UButton
+            @click="createEvent"
+          >
+            Erstellen
+          </UButton>
+        </template>
+
+      </UCard>
+    </UModal>
+    <FullCalendar
+      :options="calendarOptions"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>