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,43 +304,44 @@ changeRange()
           />
 
           <template #panel="{ close }">
-            <LazyDatePicker v-model="selectedEndDay" @close="openTab = 0" />
+            <LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" />
           </template>
         </UPopover>
       </UFormGroup>
     </template>
   </UDashboardToolbar>
-  <UTabs
+  <UDashboardPanelContent>
-      :items="[{label: 'Information'},{label: 'Bericht'}]"
+    <UTabs
-      class="p-5 h-100"
+        :items="[{label: 'Information'},{label: 'Bericht'}]"
-      @change="onTabChange"
+        @change="onTabChange"
-      v-model="openTab"
+        v-model="openTab"
-  >
+    >
-    <template #item="{item}">
+      <template #item="{item}">
-      <div v-if="item.label === 'Information'">
+        <div v-if="item.label === 'Information'">
-        <UCard class="truncate my-5">
+          <UCard class="truncate my-5" v-if="workingTimeInfo">
-          <template #header>
+            <template #header>
-            Zusammenfassung
+              Zusammenfassung
-          </template>
+            </template>
-          <p>Eingreicht: {{Math.floor(workingTimeInfo.sumWorkingMinutesEingereicht/60)}}:{{String(workingTimeInfo.sumWorkingMinutesEingereicht % 60).padStart(2,"0")}} h</p>
+            <p>Eingreicht: {{Math.floor(workingTimeInfo.sumWorkingMinutesEingereicht/60)}}:{{String(workingTimeInfo.sumWorkingMinutesEingereicht % 60).padStart(2,"0")}} h</p>
-          <p>Genehmigt: {{Math.floor(workingTimeInfo.sumWorkingMinutesApproved/60)}}:{{String(workingTimeInfo.sumWorkingMinutesApproved % 60).padStart(2,"0")}} h</p>
+            <p>Genehmigt: {{Math.floor(workingTimeInfo.sumWorkingMinutesApproved/60)}}:{{String(workingTimeInfo.sumWorkingMinutesApproved % 60).padStart(2,"0")}} h</p>
-          <p>Feiertagsausgleich: {{Math.floor(workingTimeInfo.sumWorkingMinutesRecreationDays/60)}}:{{String(workingTimeInfo.sumWorkingMinutesRecreationDays % 60).padStart(2,"0")}} h / {{workingTimeInfo.sumRecreationDays}} Tage</p>
+            <p>Feiertagsausgleich: {{Math.floor(workingTimeInfo.sumWorkingMinutesRecreationDays/60)}}:{{String(workingTimeInfo.sumWorkingMinutesRecreationDays % 60).padStart(2,"0")}} h / {{workingTimeInfo.sumRecreationDays}} Tage</p>
-          <p>Urlaubs-/Berufsschulausgleich: {{Math.floor(workingTimeInfo.sumWorkingMinutesVacationDays/60)}}:{{String(workingTimeInfo.sumWorkingMinutesVacationDays % 60).padStart(2,"0")}} h / {{workingTimeInfo.sumVacationDays}} Tage</p>
+            <p>Urlaubs-/Berufsschulausgleich: {{Math.floor(workingTimeInfo.sumWorkingMinutesVacationDays/60)}}:{{String(workingTimeInfo.sumWorkingMinutesVacationDays % 60).padStart(2,"0")}} h / {{workingTimeInfo.sumVacationDays}} Tage</p>
-          <p>Soll Stunden: {{Math.floor(workingTimeInfo.workingMinutesTarget/60)}}:{{String(workingTimeInfo.workingMinutesTarget % 60 ).padStart(2,"0")}} h</p>
+            <p>Soll Stunden: {{Math.floor(workingTimeInfo.workingMinutesTarget/60)}}:{{String(workingTimeInfo.workingMinutesTarget % 60 ).padStart(2,"0")}} h</p>
 
-          <!--         <p>Abwesend: </p>
+            <!--         <p>Abwesend: </p>
 
-                   <p>Ausgleich:</p>
+                     <p>Ausgleich:</p>
-         -->
+           -->
-          <p>Inoffizielles Saldo(eingereichte Stunden): {{Math.sign(workingTimeInfo.saldoInOfficial) === 1 ? "" : "-"}}{{Math.floor(Math.abs(workingTimeInfo.saldoInOfficial/60))}}:{{String(Math.abs(workingTimeInfo.saldoInOfficial)  % 60).padStart(2,"0")}} h</p>
+            <p>Inoffizielles Saldo(eingereichte Stunden): {{Math.sign(workingTimeInfo.saldoInOfficial) === 1 ? "" : "-"}}{{Math.floor(Math.abs(workingTimeInfo.saldoInOfficial/60))}}:{{String(Math.abs(workingTimeInfo.saldoInOfficial)  % 60).padStart(2,"0")}} h</p>
-          <p>Saldo(genehmigte Stunden): {{Math.sign(workingTimeInfo.saldo) === 1 ? "" : "-"}}{{Math.floor(Math.abs(workingTimeInfo.saldo/60))}}:{{String(Math.abs(workingTimeInfo.saldo)  % 60).padStart(2,"0")}} h</p>
+            <p>Saldo(genehmigte Stunden): {{Math.sign(workingTimeInfo.saldo) === 1 ? "" : "-"}}{{Math.floor(Math.abs(workingTimeInfo.saldo/60))}}:{{String(Math.abs(workingTimeInfo.saldo)  % 60).padStart(2,"0")}} h</p>
-        </UCard>
+          </UCard>
 
-        <div style="overflow-y: scroll; height: 45vh">
+          <div style="overflow-y: scroll; height: 45vh">
-          <UTable
+            <UTable
-              :rows="workingTimeInfo.times"
+                v-if="workingTimeInfo"
-              @select="(row) => router.push(`/workingtimes/edit/${row.id}`)"
+                :rows="workingTimeInfo.times"
-              :columns="[
+                @select="(row) => router.push(`/workingtimes/edit/${row.id}`)"
+                :columns="[
                 {
                   key: 'state',
                   label: 'Status'
@@ -350,45 +362,40 @@ changeRange()
                   label: 'Notizen'
                 }
             ]"
-          >
+            >
-            <template #profile-data="{row}">
+              <template #profile-data="{row}">
-              {{profileStore.profiles.find(profile => profile.id === row.profile) ? profileStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
+                {{profileStore.profiles.find(profile => profile.id === row.profile) ? profileStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
-            </template>
+              </template>
-            <template #approved-data="{row}">
+              <template #approved-data="{row}">
-              <span v-if="row.approved" class="text-primary-500">Ja</span>
+                <span v-if="row.approved" class="text-primary-500">Ja</span>
-              <span v-else class="text-rose-600">Nein</span>
+                <span v-else class="text-rose-600">Nein</span>
-            </template>
+              </template>
+
+              <template #start-data="{row}">
+                {{dayjs(row.startDate).format("HH:mm DD.MM.YY")}} Uhr
+              </template>
+              <template #end-data="{row}">
+                {{dayjs(row.endDate).format("HH:mm DD.MM.YY")}} Uhr
+              </template>
+              <template #duration-data="{row}">
+                {{getDuration(row).composed}}
+              </template>
+            </UTable>
+          </div>
+
 
-            <template #start-data="{row}">
-              {{dayjs(row.startDate).format("HH:mm DD.MM.YY")}} Uhr
-            </template>
-            <template #end-data="{row}">
-              {{dayjs(row.endDate).format("HH:mm DD.MM.YY")}} Uhr
-            </template>
-            <template #duration-data="{row}">
-              {{getDuration(row).composed}}
-            </template>
-          </UTable>
         </div>
-
+        <div v-else-if="item.label === 'Bericht'">
-
+          <UProgress animation="carousel" v-if="!showDocument"/>
-      </div>
+          <object
-      <div v-else-if="item.label === 'Bericht'">
+              :data="uri"
-        <UProgress animation="carousel" v-if="!showDocument"/>
+              v-else
-        <object
+              type="application/pdf"
-            :data="uri"
+              class="w-full previewDocument"
-            v-else
+          />
-            type="application/pdf"
+        </div>
-            class="w-full previewDocument"
+      </template>
-        />
+    </UTabs>
-      </div>
-    </template>
-  </UTabs>
-
-
-  <UDashboardPanelContent>
-
-
   </UDashboardPanelContent>
 </template>