Changes

spaces/pages/profiles/show/[id].vue

@@ -1,5 +1,12 @@
 <script setup>
 import HistoryDisplay from "~/components/HistoryDisplay.vue";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import isoWeek from "dayjs/plugin/isoWeek"
+import isBetween from "dayjs/plugin/isBetween"
+dayjs.extend(customParseFormat)
+dayjs.extend(isoWeek)
+dayjs.extend(isBetween)
 
 const dataStore = useDataStore()
 const route = useRoute()
@@ -10,7 +17,98 @@ const setupPage = () => {
   if(route.params.id) itemInfo.value = dataStore.getProfileById(route.params.id)
 }
 
+const selectedPresetRange = ref("Dieser Monat")
+const selectedStartDay = ref("")
+const selectedEndDay = ref("")
+
+const changeRange = () => {
+  let selector = "w"
+  let subtract = 0
+
+  if(selectedPresetRange.value === "Diese Woche") {
+    selector = "isoWeek"
+    subtract = 0
+
+  } else if(selectedPresetRange.value === "Dieser Monat") {
+    selector = "M"
+    subtract = 0
+
+  } else if(selectedPresetRange.value === "Dieses Jahr") {
+    selector = "y"
+    subtract = 0
+  } else if(selectedPresetRange.value === "Letzte Woche") {
+    selector = "isoWeek"
+    subtract = 1
+  } else if(selectedPresetRange.value === "Letzter Monat") {
+    selector = "M"
+    subtract = 1
+  } else if(selectedPresetRange.value === "Letztes Jahr") {
+    selector = "y"
+    subtract = 1
+  }
+
+  selectedStartDay.value = dayjs().subtract(subtract,selector).startOf(selector).format("YYYY-MM-DD")
+  selectedEndDay.value = dayjs().subtract(subtract,selector).endOf(selector).format("YYYY-MM-DD")
+
+}
+
+
+const workingTimeInfo = computed(() => {
+
+  let times = dataStore.getWorkingTimesByProfileId(itemInfo.value.id)
+
+  times = times.filter(i => dayjs(i.date).isBetween(selectedStartDay.value,selectedEndDay.value,'day'))
+
+
+  let weekFactor = 4.35
+  let monthlyWorkingHours = itemInfo.value.weeklyWorkingHours * weekFactor
+
+  //Eingreicht
+  let sumWorkingMinutesEingereicht = 0
+  dataStore.getWorkingTimesByProfileId(itemInfo.value.id).filter(i => !i.approved).forEach(time => {
+    const minutes = Math.floor(dayjs(time.end, "HH:mm:ssZ").diff(dayjs(time.start, "HH:mm:ssZ"),'minutes'))
+    sumWorkingMinutesEingereicht = sumWorkingMinutesEingereicht + minutes
+  })
+
+  //Bestätigt
+  let sumWorkingMinutesApproved = 0
+  dataStore.getWorkingTimesByProfileId(itemInfo.value.id).filter(i => i.approved).forEach(time => {
+    const minutes = Math.floor(dayjs(time.end, "HH:mm:ssZ").diff(dayjs(time.start, "HH:mm:ssZ"),'minutes'))
+    sumWorkingMinutesApproved = sumWorkingMinutesApproved + minutes
+  })
+
+
+  //Saldo
+  let saldo = (sumWorkingMinutesApproved / 60).toFixed(2) - monthlyWorkingHours
+  let saldoInOfficial = ((sumWorkingMinutesApproved + sumWorkingMinutesEingereicht) / 60).toFixed(2) - monthlyWorkingHours
+
+
+
+
+  return {
+    monthlyWorkingHours,
+    sumWorkingMinutesEingereicht,
+    sumWorkingMinutesApproved,
+    saldo,
+    saldoInOfficial
+  }
+})
+
+const getDuration = (time) => {
+  const minutes = Math.floor(dayjs(time.end, "HH:mm:ssZ").diff(dayjs(time.start, "HH:mm:ssZ"),'minutes',true))
+  const hours = Math.floor(minutes/60)
+  return {
+    //dezimal: dez,
+    hours: hours,
+    minutes: minutes,
+    composed: `${hours}:${String(minutes % 60).padStart(2,"0")} h`
+  }
+}
+
+
+
 setupPage()
+changeRange()
 
 </script>
 
@@ -97,6 +195,97 @@ setupPage()
               v-if="itemInfo"
               :element-id="itemInfo.id"
           />
+        </div>
+        <div v-if="item.label === 'Zeiterfassung'">
+          <Toolbar>
+            <UFormGroup
+              label="Vorlage:"
+            >
+              <USelectMenu
+                  :options="['Diese Woche', 'Dieser Monat', 'Dieses Jahr', 'Letzte Woche', 'Letzter Monat', 'Letztes Jahr']"
+                  v-model="selectedPresetRange"
+                  @change="changeRange"
+              />
+            </UFormGroup>
+
+            <UFormGroup label="Start:" >
+              <UPopover :popper="{ placement: 'bottom-start' }">
+                <UButton
+                    icon="i-heroicons-calendar-days-20-solid"
+                    :label="selectedStartDay ? dayjs(selectedStartDay).format('DD.MM.YYYY') : 'Datum auswählen'"
+                />
+
+                <template #panel="{ close }">
+                  <LazyDatePicker v-model="selectedStartDay" @close="changeRange" />
+                </template>
+              </UPopover>
+            </UFormGroup>
+            <UFormGroup label="Ende:">
+              <UPopover :popper="{ placement: 'bottom-start' }">
+                <UButton
+                    icon="i-heroicons-calendar-days-20-solid"
+                    :label="selectedEndDay ? dayjs(selectedEndDay).format('DD.MM.YYYY') : 'Datum auswählen'"
+                />
+
+                <template #panel="{ close }">
+                  <LazyDatePicker v-model="selectedEndDay" @close="changeRange" />
+                </template>
+              </UPopover>
+            </UFormGroup>
+          </Toolbar>
+          <div class="truncate">
+            <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>Inoffizielles Saldo: {{workingTimeInfo.saldoInOfficial}} h</p>
+            <p>Saldo: {{workingTimeInfo.saldo}} h</p>
+          </div>
+
+          <UTable
+            :rows="dataStore.getWorkingTimesByProfileId(dataStore.getOwnProfile.id)"
+            :columns="[
+                {
+                  key: 'state',
+                  label: 'Status'
+                }, {
+                  key: 'date',
+                  label: 'Datum'
+                }, {
+                  key: 'start',
+                  label: 'Start'
+                }, {
+                  key: 'end',
+                  label: 'Ende'
+                }, {
+                  key: 'duration',
+                  label: 'Dauer'
+                }, {
+                  key: 'notes',
+                  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 #date-data="{row}">
+              {{dayjs(row.date).format("DD.MM.YYYY")}}
+            </template>
+
+            <template #start-data="{row}">
+              {{dayjs(row.start, "HH:mm:ssZ").format("HH:mm")}} Uhr
+            </template>
+            <template #end-data="{row}">
+              {{dayjs(row.end, "HH:mm:ssZ").format("HH:mm")}} Uhr
+            </template>
+            <template #duration-data="{row}">
+              {{getDuration(row).composed}}
+            </template>
+          </UTable>
+
+
         </div>
         <div v-if="item.label === 'Vertragsdaten'">
           <Toolbar>
@@ -115,6 +304,14 @@ setupPage()
                 v-model="itemInfo.weeklyWorkingHours"
               />
             </UFormGroup>
+            <UFormGroup
+              label="Durchschnittliche Arbeitstage pro Woche"
+              class="flex-auto"
+            >
+              <UInput
+                v-model="itemInfo.weeklyWorkingDays"
+              />
+            </UFormGroup>
             <UFormGroup
               label="Urlaubstage"
               class="flex-auto"