Fixed Calendar & Timeline

Fixed AbsenceRequest Manual Selects
2024-12-31 23:40:12 +01:00
parent 4ef7d410f4
commit 6989dd61f7
4 changed files with 326 additions and 87 deletions
--- a/pages/calendar/[mode].vue
+++ b/pages/calendar/[mode].vue
@@ -6,6 +6,7 @@ import timeGridPlugin from "@fullcalendar/timegrid"
 import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
 import interactionPlugin from "@fullcalendar/interaction";
 import dayjs from "dayjs";
+import profiles from "~/components/columnRenderings/profiles.vue";

 definePageMeta({
  middleware: "auth"
@@ -17,9 +18,10 @@ const router = useRouter()
 const mode = ref(route.params.mode || "grid")
 const supabase = useSupabaseClient()
 const dataStore = useDataStore()
-const resources = dataStore.getResources
-const eventTypes = dataStore.getEventTypes
+//const resources = dataStore.getResources
+//const eventTypes = dataStore.getEventTypes

+const profileStore = useProfileStore()

 //Working
 const newEventData = ref({
@@ -36,66 +38,40 @@ const showEventModal = ref(false)
 const selectedEvent = ref({})
 const selectedResources = ref([])

+const events = ref([])
+const calendarOptionsGrid = computed(() => {
+  return {
+    locale: deLocale,
+    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+    headerToolbar: {
+      left: 'prev,next today',
+      center: 'title',
+      right: 'dayGridMonth,timeGridWeek,timeGridDay'
+    },
+    initialView: "timeGridWeek",
+    initialEvents: events.value,
+    nowIndicator: true,
+    height: "80vh",
+    selectable: true,
+    weekNumbers: true,
+    select: function (info) {
+      console.log(info)

-//Functions
-const convertResourceIds = () => {
-
-  newEventData.value.resources = selectedResources.value.map(i => {
-    /*if(i.type !== 'Mitarbeiter') {
-      return {id: Number(i.id.split('-')[1]), type: i.type}
-    } else {
-      return {id: i.id, type: i.type}
-    }*/
-
-    if((String(i).match(/-/g) || []).length > 1) {
-      return {type: "Mitarbeiter", id: i}
-    } else {
-
-      if(i.split('-')[0] === 'I') {
-        return {id: Number(i.split('-')[1]), type: "Inventar"}
-      } else if(i.split('-')[0] === 'F') {
-        return {id: Number(i.split('-')[1]), type: "Fahrzeug"}
+      router.push(`/standardEntity/events/edit/?start=${info.startStr}&end=${info.endStr}&source=grid`)
+    },
+    eventClick: function (info) {
+      console.log(info)
+      if (info.event.title.startsWith("Abw.:")) {
+        router.push(`/standardEntity/absencerequests/show/${info.event.id}`)
+      } else {
+        router.push(`/standardEntity/events/show/${info.event.id}`)
      }
-    }

-
-  })
-}
-
-//Calendar Config
-const calendarOptionsGrid = reactive({
-  locale: deLocale,
-  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
-  headerToolbar: {
-    left: 'prev,next today',
-    center: 'title',
-    right: 'dayGridMonth,timeGridWeek,timeGridDay'
-  },
-  initialView: "dayGridMonth",
-  initialEvents: dataStore.getEvents,
-  nowIndicator: true,
-  height: "80vh",
-  selectable: true,
-  weekNumbers: true,
-  select: function(info) {
-    console.log(info)
-
-
-    router.push(`/events/edit/?start=${info.startStr}&end=${info.endStr}&source=grid`)
-
-  },
-  eventClick: function (info){
-    console.log(info)
-    if(info.event.title.startsWith("Abw.:")){
-      router.push(`/absencerequests/show/${info.event.id}`)
-    } else {
-      router.push(`/events/show/${info.event.id}`)
-    }
-
-  },
+    },
+  }
 })

-const calendarOptionsTimeline = reactive({
+const calendarOptionsTimeline = ref({
  schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
  locale: deLocale,
  plugins: [resourceTimelinePlugin, interactionPlugin],
@@ -106,7 +82,11 @@ const calendarOptionsTimeline = reactive({
    center: 'title',
    right: 'resourceTimelineDay,resourceTimeline3Hours,resourceTimelineMonth'
  },
-  initialEvents: dataStore.getEventsByResource,
+  initialEvents: [{
+    title:"Test",
+    resourceId:"F-27",
+    start:"2025-01-01"
+  }],
  selectable: true,
  select: function (info) {
    router.push(`/events/edit/?start=${info.startStr}&end=${info.endStr}&resources=${JSON.stringify([info.resource.id])}&source=timeline`)
@@ -115,12 +95,12 @@ const calendarOptionsTimeline = reactive({
    if(info.event.title.startsWith("Abw.:")){
      router.push(`/absencerequests/show/${info.event.id}`)
    } else {
-      router.push(`/events/show/${info.event.id}`)
+      router.push(`/standardEntity/events/show/${info.event.id}`)
    }
  },
  resourceGroupField: "type",
  resourceOrder: "-type",
-  resources: resources,
+  resources: [],
  nowIndicator:true,
  views: {
    resourceTimeline3Hours: {
@@ -146,25 +126,274 @@ const calendarOptionsTimeline = reactive({
  height: '80vh',
 })

+const loaded = ref(false)
+const setupPage = async () => {
+  let tempData = await useSupabaseSelect("events", "*, vehicles(*), inventoryitems(*)")
+  let absencerequests = await useSupabaseSelect("absencerequests", "*")
+  let projects = await useSupabaseSelect("projects", "*")
+  let inventoryitems = await useSupabaseSelect("inventoryitems", "*")
+  let profiles = await useSupabaseSelect("profiles", "*")
+  let vehicles = await useSupabaseSelect("vehicles", "*")
+
+  /*events.value = [
+    ...tempData.map(event => {
+      let eventColor = profileStore.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.eventtype).color
+
+      let title = ""
+      if (event.name) {
+        title = event.name
+      } else if (event.project) {
+        projects.find(i => i.id === event.project) ? projects.find(i => i.id === event.project).name : ""
+      }
+
+      return {
+        ...event,
+        start: event.startDate,
+        end: event.endDate,
+        title: title,
+        borderColor: eventColor,
+        textColor: eventColor,
+        backgroundColor: "black"
+      }
+    }),
+    ...absencerequests.map(absence => {
+      return {
+        id: absence.id,
+        resourceId: absence.user,
+        resourceType: "person",
+        title: `Abw.: ${absence.reason}`,
+        start: dayjs(absence.start).toDate(),
+        end: dayjs(absence.end).add(1, 'day').toDate(),
+        allDay: true,
+      }
+    })
+  ]*/
+
+  calendarOptionsGrid.value.initialEvents = [
+    ...tempData.map(event => {
+      let eventColor = profileStore.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.eventtype).color
+
+      let title = ""
+      if (event.name) {
+        title = event.name
+      } else if (event.project) {
+        projects.find(i => i.id === event.project) ? projects.find(i => i.id === event.project).name : ""
+      }
+
+      return {
+        ...event,
+        start: event.startDate,
+        end: event.endDate,
+        title: title,
+        borderColor: eventColor,
+        textColor: eventColor,
+        backgroundColor: "black"
+      }
+    }),
+    ...absencerequests.map(absence => {
+      return {
+        id: absence.id,
+        resourceId: absence.user,
+        resourceType: "person",
+        title: `Abw.: ${absence.reason}`,
+        start: dayjs(absence.start).toDate(),
+        end: dayjs(absence.end).add(1, 'day').toDate(),
+        allDay: true,
+      }
+    })
+  ]
+
+  calendarOptionsTimeline.value.resources = [
+    ...profiles.filter(i => i.tenant === profileStore.currentTenant).map(profile => {
+      return {
+        type: 'Mitarbeiter',
+        title: profile.fullName,
+        id: profile.id
+      }
+    }),
+    ...vehicles.map(vehicle => {
+      return {
+        type: 'Fahrzeug',
+        title: vehicle.licensePlate,
+        id: `F-${vehicle.id}`
+      }
+    }),
+    ...inventoryitems.filter(i=> i.usePlanning).map(item => {
+      return {
+        type: 'Inventar',
+        title: item.name,
+        id: `I-${item.id}`
+      }
+    })
+  ]
+  console.log(calendarOptionsTimeline.value.resources)
+
+/*
+  calendarOptionsTimeline.value.initialEvents = [
+      ...events.value.map(event => {
+        let eventColor = profileStore.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.eventtype).color
+
+        let title = ""
+        if (event.name) {
+          title = event.name
+        } else if (event.project) {
+          projects.find(i => i.id === event.project) ? projects.find(i => i.id === event.project).name : ""
+        }
+
+        let resource = ""
+        let resourceType = ""
+
+
+
+        return {
+          ...event,
+          start: event.startDate,
+          end: event.endDate,
+          title: title,
+          borderColor: eventColor,
+          textColor: eventColor,
+          backgroundColor: "black"
+        }
+      })
+  ]
+*/
+
+  let tempEvents = []
+
+  tempData.forEach(event => {
+    console.log(event)
+    let eventColor = profileStore.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.eventtype).color
+
+    let title = ""
+    if (event.name) {
+      title = event.name
+    } else if (event.project) {
+      projects.find(i => i.id === event.project) ? projects.find(i => i.id === event.project).name : ""
+    }
+
+    let returnData = {
+      title: title,
+      borderColor: eventColor,
+      textColor: eventColor,
+      backgroundColor: "black",
+      start: event.startDate,
+      end: event.endDate,
+      resourceIds: [],
+      entrytype: "event"
+    }
+
+
+    if(event.profiles.length > 0) {
+      console.log("Profiles found")
+      event.profiles.forEach(profile => {
+        returnData.resourceIds.push(profile)
+      })
+    }
+
+    if(event.vehicles.length > 0) {
+      console.log("Vehicles found")
+      event.vehicles.forEach(vehicle => {
+        returnData.resourceIds.push(`F-${vehicle.id}`)
+      })
+    }
+
+    if(event.inventoryitems.length > 0) {
+      console.log("Inventoryitems found")
+      event.inventoryitems.forEach(inventoryitem => {
+        returnData.resourceIds.push(`I-${inventoryitem.id}`)
+      })
+    }
+
+    tempEvents.push(returnData)
+
+  })
+
+  absencerequests.forEach(absencerequest => {
+    let returnData = {
+      title: absencerequest.name,
+      backgroundColor: "black",
+      start: absencerequest.startDate,
+      end: absencerequest.endDate,
+      resourceIds: [absencerequest.profile],
+      entrytype: "absencerequest",
+      allDay: true,
+    }
+
+    tempEvents.push(returnData)
+  })
+
+  calendarOptionsTimeline.value.initialEvents = tempEvents
+  console.log(calendarOptionsTimeline.value)
+
+  loaded.value = true
+
+}
+
+setupPage()
+
+
+//Functions
+/*
+const convertResourceIds = () => {
+
+  newEventData.value.resources = selectedResources.value.map(i => {
+    /!*if(i.type !== 'Mitarbeiter') {
+      return {id: Number(i.id.split('-')[1]), type: i.type}
+    } else {
+      return {id: i.id, type: i.type}
+    }*!/
+
+    if((String(i).match(/-/g) || []).length > 1) {
+      return {type: "Mitarbeiter", id: i}
+    } else {
+
+      if(i.split('-')[0] === 'I') {
+        return {id: Number(i.split('-')[1]), type: "Inventar"}
+      } else if(i.split('-')[0] === 'F') {
+        return {id: Number(i.split('-')[1]), type: "Fahrzeug"}
+      }
+    }
+
+
+  })
+}
+*/
+
+
+
+
+//Calendar Config
+
+
+
 </script>

 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.name : ''">
-    <template #right>
+    <UDashboardNavbar title="Kalender">
+      <template #center>
+        <h1
+            :class="['text-xl','font-medium']"
+        >Kalender</h1>
+      </template>
+      <template #right>

-    </template>
-  </UDashboardNavbar>
-
-  <div v-if="mode === 'grid'" class="p-5">
-    <FullCalendar
-        :options="calendarOptionsGrid"
-    />
-  </div>
-  <div v-else-if="mode === 'timeline'" class="p-5">
+      </template>
+    </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <div v-if="mode === 'grid' && loaded" class="p-5">
+      <FullCalendar
+          :options="calendarOptionsGrid"
+      />
+    </div>
+    <div v-else-if="mode === 'timeline' && loaded"  class="p-5">
    <FullCalendar
        :options="calendarOptionsTimeline"
    />
  </div>
+  </UDashboardPanelContent>
+
+
+
 </template>

 <style scoped>