Changes

2024-10-18 08:58:11 +02:00
parent 8dbf43b672
commit a905b1f966
9 changed files with 165 additions and 70 deletions
--- a/pages/workingtimes/evaluate/[id].vue
+++ b/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"
        />
--- a/pages/workingtimes/index.vue
+++ b/pages/workingtimes/index.vue
@@ -24,10 +24,22 @@ const timeInfo = ref({

 const filterUser = ref(dataStore.activeProfile.id || "")

+const workingtimes = ref([])
+
+const setupPage = async () => {
+  workingtimes.value = (await supabase.from("workingtimes").select().eq("profile",filterUser.value).order("startDate",{ascending: false})).data
+}
+
+setupPage()
+
+
+
+
+

 const filteredRows = computed(() => {

-  let times = dataStore.workingtimes
+  let times = workingtimes.value

  times = times.filter(i => i.profile === filterUser.value)

@@ -61,6 +73,11 @@ const columns = [
    label: "Status",
    sortable:true
  },
+  {
+    key: "approved",
+    label: "Genehmigt",
+    sortable:true
+  },
  {
    key: "profile",
    label: "Mitarbeiter",
@@ -181,6 +198,7 @@ const getDuration = (time) => {
          option-attribute="fullName"
          value-attribute="id"
          v-model="filterUser"
+          @change="setupPage"
      >
        <template #label>
          {{dataStore.getProfileById(filterUser) ? dataStore.getProfileById(filterUser).fullName : "Kein Benutzer ausgewählt"}}
@@ -222,41 +240,29 @@ const getDuration = (time) => {
    </UAlert>
  </div>

-
-
-  
  <UTable
      class="mt-3"
      :columns="columns"
      :rows="filteredRows"
      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
      @select="(row) => {
-        router.push(`/workingtimes/edit/${row.id}`)
-        /*configTimeMode = '[mode]';
-        itemInfo = row;
-        showConfigTimeModal = true*/}"
+        router.push(`/workingtimes/edit/${row.id}`)}"
  >
-<!--    <template #state-data="{row}">
-                <span
-                    v-if="row.state === 'Entwurf'"
-                    class="text-rose-500"
-                >{{row.state}}</span>
-      <span
-          v-if="row.state === 'Eingereicht'"
-          class="text-cyan-500"
-      >{{row.state}}</span>
-      <span
-          v-if="row.state === 'Bestätigt'"
-          class="text-primary-500"
-      >{{row.state}}</span>
-    </template>-->
+    <template #expand="{ row }">
+      <div class="p-4">
+        <pre>{{ row }}</pre>
+      </div>
+    </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 #date-data="{row}">
      {{dayjs(row.startDate).format("DD.MM.YYYY")}}
    </template>
-
    <template #startDate-data="{row}">
      {{dayjs(row.startDate).format("HH:mm")}} Uhr
    </template>