Implemented Fullcalendar

spaces/app.vue

@@ -27,6 +27,11 @@ const navLinks = [
     link: "tasks",
     icon: "i-heroicons-rectangle-stack"
   },
+  {
+    label: "Plantafel",
+    link: "planningBoard",
+    icon: "i-heroicons-calendar-days"
+  },
   {
     label: "Kunden",
     link: "customers",

spaces/nuxt.config.ts

@@ -25,5 +25,6 @@ export default defineNuxtConfig({
     },
   },
 
+
 })
 

spaces/package.json

@@ -17,6 +17,12 @@
     "vue-router": "^4.2.5"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.10",
+    "@fullcalendar/daygrid": "^6.1.10",
+    "@fullcalendar/interaction": "^6.1.10",
+    "@fullcalendar/resource": "^6.1.10",
+    "@fullcalendar/resource-timeline": "^6.1.10",
+    "@fullcalendar/vue3": "^6.1.10",
     "@nuxt/ui": "^2.11.0",
     "@nuxtjs/strapi": "^1.9.3",
     "@pinia/nuxt": "^0.5.1",
@@ -27,7 +33,6 @@
     "nuxt-editorjs": "^1.0.4",
     "papaparse": "^5.4.1",
     "pinia": "^2.1.7",
-    "sass": "^1.69.5",
     "uuidv4": "^6.2.13"
   }
 }

spaces/pages/calendar/planningBoard.vue

@@ -1,28 +0,0 @@
-<script setup>
-/*import '@bryntum/scheduler'
-import { BryntumScheduler } from '@bryntum/scheduler-vue-3'
-import '@bryntum/scheduler/scheduler.material.css'
-const config = reactive({
-  startDate: new Date(2024,0,1,6),
-  endDate: new Date(2024,0,1,20),
-  viewPreset: "hourAndDay",
-  rowHeight: 50,
-  columns: [{text: "Name", field: "name", width: 130}]
-})*/
-
-</script>
-
-<template>
-  <div>
-<!--    <bryntum-scheduler
-        :width="800"
-        :height="600"
-        start-date="2023-04-16"
-        end-date="2023-05-15"
-    ></bryntum-scheduler>-->
-  </div>
-</template>
-
-<style scoped>
-
-</style>

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>

spaces/stores/data.ts

@@ -4,11 +4,17 @@ import {createClient} from '@supabase/supabase-js'
 
 const supabase = createClient('https://uwppvcxflrcsibuzsbil.supabase.co','eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InV3cHB2Y3hmbHJjc2lidXpzYmlsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDA5MzgxOTQsImV4cCI6MjAxNjUxNDE5NH0.CkxYSQH0uLfwx9GVUlO6AYMU2FMLAxGMrwEKvyPv7Oo')
 
-
 // @ts-ignore
 export const useDataStore = defineStore('data', {
     state: () => ({
         loaded: false,
+        ownTenant: {
+            calendarConfig: {
+                eventTypes: [] as any[]
+            }
+        },
+        profiles: [] as any[],
+        events: [] as any[],
         customers: [] as any[],
         tasks: [] as any[],
         projects: [] as any[],
@@ -20,10 +26,14 @@ export const useDataStore = defineStore('data', {
         movements: [] as any[],
         forms: [] as any[],
         formSubmits: [] as any[],
-        contact: [] as any[]
+        contacts: [] as any[],
+        vehicles: [] as any[],
     }),
     actions: {
         async fetchData() {
+            await this.fetchOwnTenant()
+            await this.fetchProfiles()
+            await this.fetchEvents()
             await this.fetchCustomers()
             await this.fetchTasks()
             await this.fetchForms()
@@ -34,8 +44,22 @@ export const useDataStore = defineStore('data', {
             await this.fetchDocuments()
             await this.fetchMovements()
             await this.fetchSpaces()
+            await this.fetchVehicles()
             this.loaded = true
         },
+        async fetchOwnTenant() {
+            //TODO: Tenant ID Dynamisch machen
+            // @ts-ignore
+            this.ownTenant = (await supabase.from("tenants").select().eq('id', 1)).data[0]
+        },
+        async fetchProfiles() {
+            // @ts-ignore
+            this.profiles = (await supabase.from("profiles").select()).data
+        },
+        async fetchEvents() {
+            // @ts-ignore
+            this.events = (await supabase.from("events").select()).data
+        },
         async fetchCustomers() {
             // @ts-ignore
             this.customers = (await supabase.from("customers").select().order('customerNumber', {ascending: true})).data
@@ -72,6 +96,10 @@ export const useDataStore = defineStore('data', {
             // @ts-ignore
             this.movements = (await supabase.from("movements").select()).data
         },
+        async fetchVehicles() {
+            // @ts-ignore
+            this.vehicles = (await supabase.from("vehicles").select()).data
+        },
         async fetchDocuments() {
             // @ts-ignore
             this.documents = (await supabase.from("documents").select()).data
@@ -87,6 +115,35 @@ export const useDataStore = defineStore('data', {
         movementsBySpace: (state) => (spaceId:number) => state.movements.filter(move => move.spaceId === spaceId),
         getProductById: (state) => (productId:number) => state.products.find(product => product.id === productId),
         getProjectById: (state) => (projectId:number) => state.projects.find(project => project.id === projectId),
-        getFormSubmitsWithLabelProp: (state) => (state.formSubmits.map(submit => {return{...submit, label: submit.id}}))
+        getFormSubmitsWithLabelProp: (state) => (state.formSubmits.map(submit => {return{...submit, label: submit.id}})),
+        getResources: (state) => {
+            return [
+                ...state.profiles.map(profile => {
+                    return {
+                        type: 'person',
+                        title: profile.firstName + ' ' + profile.lastName,
+                        id: profile.id
+                    }
+                }),
+                ...state.vehicles.map(vehicle => {
+                    return {
+                        type: 'vehicle',
+                        title: vehicle.licensePlate,
+                        id: vehicle.licensePlate
+                    }
+                })
+            ]
+        },
+        getEvents: (state) => {
+            return [
+                ...state.events.map(event => {
+                    return {
+                        ...event,
+                        backgroundColor: state.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.type).color
+                    }
+                }),
+            ]
+        },
+        getEventTypes: (state) => state.ownTenant.calendarConfig.eventTypes
     }
 })