Introduced Functions Composable

composables/useFunctions.js

@@ -0,0 +1,27 @@
+import axios from "axios";
+import dayjs from "dayjs";
+
+const baseURL = "https://functions.fedeo.io"
+
+export const useFunctions = () => {
+    const supabase = useSupabaseClient()
+
+    const getWorkingTimesEvaluationData = async (profileId, startDate, endDate) => {
+        const {data:{session:{access_token}}} = await supabase.auth.getSession()
+
+        return (await axios({
+            method: "POST",
+            url: `${baseURL}/functions/workingtimeevaluation`,
+            data: {
+                profile: profileId,
+                startDate: dayjs(startDate).format("YYYY-MM-DD"),
+                endDate: dayjs(endDate).format("YYYY-MM-DD"),
+            },
+            headers: {
+                Authorization: `Bearer ${access_token}`
+            }
+        })).data
+    }
+
+    return {getWorkingTimesEvaluationData}
+}

pages/workingtimes/evaluate/[id].vue

@@ -6,6 +6,7 @@ import isBetween from "dayjs/plugin/isBetween";
 import isSameOrAfter from "dayjs/plugin/isSameOrAfter"
 import isSameOrBefore from "dayjs/plugin/isSameOrBefore"
 import {useCreateWorkingTimesPdf} from "~/composables/useWorkingTimePDFGenerator.js";
+import {useFunctions} from "~/composables/useFunctions.js";
 dayjs.extend(customParseFormat)
 dayjs.extend(isoWeek)
 dayjs.extend(isBetween)
@@ -26,17 +27,26 @@ const oldItemInfo = ref({})
 const workingtimes = ref([])
 const absencerequests = ref([])
 
+const workingTimeInfo = ref(null)
+const selectedPresetRange = ref("Dieser Monat")
+const selectedStartDay = ref("")
+const selectedEndDay = ref("")
 
 const setupPage = async () => {
   if(route.params.id) itemInfo.value = profileStore.getProfileById(route.params.id)
   if(itemInfo.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
   workingtimes.value = (await supabase.from("workingtimes").select().eq("profile",itemInfo.value.id).order("startDate",{ascending:false})).data
   absencerequests.value = (await supabase.from("absencerequests").select().eq("profile",itemInfo.value.id).order("startDate",{ascending: false})).data
+
+  await loadWorkingTimeInfo()
+
+}
+
+const loadWorkingTimeInfo = async () => {
+  workingTimeInfo.value = await useFunctions().getWorkingTimesEvaluationData(route.params.id,selectedStartDay.value,selectedEndDay.value)
+  openTab.value = 0
 }
 
-const selectedPresetRange = ref("Dieser Monat")
-const selectedStartDay = ref("")
-const selectedEndDay = ref("")
 
 const changeRange = () => {
   let selector = "M"
@@ -68,9 +78,10 @@ const changeRange = () => {
   selectedEndDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).endOf(selector).format("YYYY-MM-DD")
 
   openTab.value = 0
+  loadWorkingTimeInfo()
 }
 
-const workingTimeInfo = computed(() => {
+/*const workingTimeInfo = computed(() => {
 
   let times = workingtimes.value
 
@@ -168,7 +179,7 @@ const workingTimeInfo = computed(() => {
     saldoInOfficial,
     times,
   }
-})
+})*/
 
 const getDuration = (time) => {
   const minutes = Math.floor(dayjs(time.endDate).diff(dayjs(time.startDate),'minutes',true))
@@ -281,7 +292,7 @@ changeRange()
           />
 
           <template #panel="{ close }">
-            <LazyDatePicker v-model="selectedStartDay" @close="openTab = 0" />
+            <LazyDatePicker v-model="selectedStartDay" @close="loadWorkingTimeInfo" />
           </template>
         </UPopover>
       </UFormGroup>
@@ -293,21 +304,21 @@ changeRange()
           />
 
           <template #panel="{ close }">
-            <LazyDatePicker v-model="selectedEndDay" @close="openTab = 0" />
+            <LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" />
           </template>
         </UPopover>
       </UFormGroup>
     </template>
   </UDashboardToolbar>
+  <UDashboardPanelContent>
     <UTabs
         :items="[{label: 'Information'},{label: 'Bericht'}]"
-      class="p-5 h-100"
         @change="onTabChange"
         v-model="openTab"
     >
       <template #item="{item}">
         <div v-if="item.label === 'Information'">
-        <UCard class="truncate my-5">
+          <UCard class="truncate my-5" v-if="workingTimeInfo">
             <template #header>
               Zusammenfassung
             </template>
@@ -327,6 +338,7 @@ changeRange()
 
           <div style="overflow-y: scroll; height: 45vh">
             <UTable
+                v-if="workingTimeInfo"
                 :rows="workingTimeInfo.times"
                 @select="(row) => router.push(`/workingtimes/edit/${row.id}`)"
                 :columns="[
@@ -384,11 +396,6 @@ changeRange()
         </div>
       </template>
     </UTabs>
-
-
-  <UDashboardPanelContent>
-
-
   </UDashboardPanelContent>
 </template>