Fixed Calendar & Timeline

Fixed AbsenceRequest Manual Selects

components/EntityShow.vue

@@ -414,7 +414,7 @@ const changeActivePhase = async (key) => {
 
             <UTable
               :rows="props.item.createddocuments"
-              :columns="[{key:'documentNumber',label: 'Nummer'},{key:'documentDate',label: 'Datum'},{key:'type',label: 'Typ'},{key:'state',label: 'Status'}]"
+              :columns="[{key:'state',label: 'Status'},{key:'documentNumber',label: 'Nummer'},{key:'documentDate',label: 'Datum'},{key:'type',label: 'Typ'}]"
               @select="(i) => router.push(i.state === 'Entwurf' ? `/createDocument/edit/${i.id}`:`/createDocument/show/${i.id}`)"
             >
               <template #documentDate-data="{row}">

components/MainNav.vue

@@ -167,7 +167,7 @@ const links = computed(() => {
       children: [
         ... role.checkRight("vehicles") ? [{
           label: "Fahrzeuge",
-          to: "/vehicles",
+          to: "/standardEntity/vehicles",
           icon: "i-heroicons-truck"
         }] : [],{
           label: "Fahrten",

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 resources = dataStore.getResources
-const eventTypes = dataStore.getEventTypes
+//const eventTypes = dataStore.getEventTypes
 
+const profileStore = useProfileStore()
 
 //Working
 const newEventData = ref({
@@ -36,34 +38,9 @@ const showEventModal = ref(false)
 const selectedEvent = ref({})
 const selectedResources = ref([])
 
-
+const events = ref([])
-//Functions
+const calendarOptionsGrid = computed(() => {
-const convertResourceIds = () => {
+  return {
-
-  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
-const calendarOptionsGrid = reactive({
     locale: deLocale,
     plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
     headerToolbar: {
@@ -71,8 +48,8 @@ const calendarOptionsGrid = reactive({
       center: 'title',
       right: 'dayGridMonth,timeGridWeek,timeGridDay'
     },
-  initialView: "dayGridMonth",
+    initialView: "timeGridWeek",
-  initialEvents: dataStore.getEvents,
+    initialEvents: events.value,
     nowIndicator: true,
     height: "80vh",
     selectable: true,
@@ -80,22 +57,21 @@ const calendarOptionsGrid = reactive({
     select: function (info) {
       console.log(info)
 
-
+      router.push(`/standardEntity/events/edit/?start=${info.startStr}&end=${info.endStr}&source=grid`)
-    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}`)
+        router.push(`/standardEntity/absencerequests/show/${info.event.id}`)
       } else {
-      router.push(`/events/show/${info.event.id}`)
+        router.push(`/standardEntity/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 : ''">
+    <UDashboardNavbar title="Kalender">
+      <template #center>
+        <h1
+            :class="['text-xl','font-medium']"
+        >Kalender</h1>
+      </template>
       <template #right>
 
       </template>
     </UDashboardNavbar>
-
+  <UDashboardPanelContent>
-  <div v-if="mode === 'grid'" class="p-5">
+    <div v-if="mode === 'grid' && loaded" class="p-5">
       <FullCalendar
           :options="calendarOptionsGrid"
       />
     </div>
-  <div v-else-if="mode === 'timeline'" class="p-5">
+    <div v-else-if="mode === 'timeline' && loaded"  class="p-5">
     <FullCalendar
         :options="calendarOptionsTimeline"
     />
   </div>
+  </UDashboardPanelContent>
+
+
+
 </template>
 
 <style scoped>

stores/data.js

@@ -436,7 +436,12 @@ export const useDataStore = defineStore('data', () => {
                     key: "approved",
                     label: "Genehmigt",
                     inputType: "select",
-                    selectManualOptions: ["Offen","Genehmigt", "Abgelehnt"]
+                    selectValueAttribute: "label",
+                    selectManualOptions: [
+                        {label:"Offen"},
+                        {label:"Genehmigt"},
+                        {label:"Abgelehnt"}
+                    ]
                 },{
                     key: "name",
                     label: "Name",
@@ -455,16 +460,19 @@ export const useDataStore = defineStore('data', () => {
                     key: "reason",
                     label: "Grund",
                     inputType: "select",
-                    selectManualOptions: ["Elternzeit",
+                    selectValueAttribute: "label",
-                        "Kind krank - Kinderbetreuung",
+                    selectManualOptions: [
-                        "Krankheit",
+                        {label:"Urlaub"},
-                        "Krankheit 1 Tag (mit Attest)",
+                        {label:"unbezahlter Urlaub"},
-                        "Krankheit ab 2. Tag (mit Attest)",
+                        {label:"Überstundenausgleich"},
-                        "Mutterschutz",
+                        {label:"Sonderurlaub(bezahlt)"},
-                        "Sonderurlaub (bezahlt)",
+                        {label:"Mutterschutz"},
-                        "Überstundenausgleich",
+                        {label:"Krankheit ab 2. Tag (mit Attest)"},
-                        "Unbezahlter Urlaub",
+                        {label:"Krankheit 1 Tag (mit Attest)"},
-                        "Urlaub"]
+                        {label:"Krankheit"},
+                        {label:"Kind krank - Kinderbetreuung"},
+                        {label:"Elternzeit"},
+                    ]
                 },{
                     key: "startDate",
                     label: "Start",
@@ -742,7 +750,7 @@ export const useDataStore = defineStore('data', () => {
                 {
                     key: "towingCapacity",
                     label: "Anhängelast",
-                    unit: "kG",
+                    unit: "Kg",
                     inputType: "number"
                 },
                 {
@@ -1109,7 +1117,7 @@ export const useDataStore = defineStore('data', () => {
                     inputColumn: "Anschaffung"
                 },
                 {
-                    key: "maunfacturer",
+                    key: "manufacturer",
                     label: "Hersteller",
                     inputType: "text",
                     inputColumn: "Anschaffung"
@@ -1817,6 +1825,8 @@ export const useDataStore = defineStore('data', () => {
                     name = "Wöchentliche Arbeitszeit"
                 } else if(key === "licensePlate") {
                     name = "Kennzeichen"
+                }else if(key === "tankSize") {
+                    name = "Tankvolumen"
                 }else if(key === "towingCapacity") {
                     name = "Anhängelast"
                 }else if(key === "color") {
@@ -1973,7 +1983,7 @@ export const useDataStore = defineStore('data', () => {
 
             await generateHistoryItems(dataType, supabaseData[0])
 
-            if(!["statementallocations", "productcategories", "projecttypes", "checks", "profiles","services"].includes(dataType) ){
+            if(!["statementallocations", "productcategories", "projecttypes", "checks", "profiles","services", "inventoryitems"].includes(dataType) ){
                 await eval( dataType + '.value.push(' + JSON.stringify(...supabaseData) + ')')
             }