Changes

pages/workingtimes/evaluate/[id].vue

@@ -17,12 +17,19 @@ dayjs.extend(isSameOrBefore)
 const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const route = useRoute()
+const router = useRouter()
 
 const itemInfo = ref({})
 const oldItemInfo = ref({})
-const setupPage = () => {
+
+const workingtimes = ref([])
+
+
+const setupPage = async () => {
   if(route.params.id) itemInfo.value = dataStore.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
+
 }
 
 const selectedPresetRange = ref("Dieser Monat")
@@ -58,11 +65,12 @@ const changeRange = () => {
   selectedStartDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).startOf(selector).format("YYYY-MM-DD")
   selectedEndDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).endOf(selector).format("YYYY-MM-DD")
 
+  openTab.value = 0
 }
 
 const workingTimeInfo = computed(() => {
 
-  let times = dataStore.getWorkingTimesByProfileId(route.params.id)
+  let times = workingtimes.value
 
   //times = times.filter(i => dayjs(i.date).isBetween(dayjs(selectedStartDay.value).subtract(1,"days"),selectedEndDay.value,'day') && i.end)
   times = times.filter(i => dayjs(i.startDate).isSameOrAfter(selectedStartDay.value) && dayjs(i.endDate).isSameOrBefore(selectedEndDay.value))
@@ -133,6 +141,12 @@ const generateEvaluation = async () => {
   await generateDocument()
 }
 
+const openTab = ref(0)
+const onTabChange = async (index) => {
+  if(index === 1) {
+    await generateEvaluation()
+  }
+}
 
 
 setupPage()
@@ -208,7 +222,7 @@ changeRange()
           />
 
           <template #panel="{ close }">
-            <LazyDatePicker v-model="selectedStartDay" @close="changeRange" />
+            <LazyDatePicker v-model="selectedStartDay" @close="openTab = 0" />
           </template>
         </UPopover>
       </UFormGroup>
@@ -220,42 +234,46 @@ changeRange()
           />
 
           <template #panel="{ close }">
-            <LazyDatePicker v-model="selectedEndDay" @close="changeRange" />
+            <LazyDatePicker v-model="selectedEndDay" @close="openTab = 0" />
           </template>
         </UPopover>
       </UFormGroup>
     </template>
-    <template #right>
-      <UButton
-        @click="generateEvaluation"
-      >
-        Bericht erstellen
-      </UButton>
-    </template>
   </UDashboardToolbar>
   <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'">
-        <div class="truncate p-5">
+        <UCard class="truncate my-5">
+          <template #header>
+            Zusammenfassung
+          </template>
           <p>Eingreicht: {{Math.floor(workingTimeInfo.sumWorkingMinutesEingereicht/60)}}:{{String(workingTimeInfo.sumWorkingMinutesEingereicht % 60).padStart(2,"0")}} h</p>
           <p>Bestätigt: {{Math.floor(workingTimeInfo.sumWorkingMinutesApproved/60)}}:{{String(workingTimeInfo.sumWorkingMinutesApproved % 60).padStart(2,"0")}} h</p>
           <p>Soll Stunden: {{workingTimeInfo.monthlyWorkingHours}} h</p>
-          <p>Abwesend: </p>
-          <p>Ausgleich:</p>
+          <!--         <p>Abwesend: </p>
+
+                   <p>Ausgleich:</p>
+         -->
           <p>Inoffizielles Saldo: {{workingTimeInfo.saldoInOfficial}} h</p>
           <p>Saldo: {{workingTimeInfo.saldo}} h</p>
-        </div>
+        </UCard>
 
-
-        <UTable
-            :rows="dataStore.getWorkingTimesByProfileId(itemInfo.id)"
-            :columns="[
+        <div style="overflow-y: scroll; height: 45vh">
+          <UTable
+              :rows="workingTimeInfo.times"
+              @select="(row) => router.push(`/workingtimes/edit/${row.id}`)"
+              :columns="[
                 {
                   key: 'state',
                   label: 'Status'
+                }, {
+                  key: 'approved',
+                  label: 'Genehmigt'
                 }, {
                   key: 'start',
                   label: 'Start'
@@ -270,26 +288,34 @@ changeRange()
                   label: 'Notizen'
                 }
             ]"
-        >
-          <template #profile-data="{row}">
-            {{dataStore.profiles.find(profile => profile.id === row.profile) ? dataStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
-          </template>
+          >
+            <template #profile-data="{row}">
+              {{dataStore.profiles.find(profile => profile.id === row.profile) ? dataStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
+            </template>
+            <template #approved-data="{row}">
+              <span v-if="row.approved" class="text-primary-500">Ja</span>
+              <span v-else class="text-rose-600">Nein</span>
+            </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"/>
         <object
             :data="uri"
-            v-if="showDocument"
+            v-else
             type="application/pdf"
             class="w-full previewDocument"
         />