406 lines
14 KiB
Vue
406 lines
14 KiB
Vue
<script setup>
|
|
import dayjs from "dayjs";
|
|
import customParseFormat from "dayjs/plugin/customParseFormat";
|
|
import isoWeek from "dayjs/plugin/isoWeek";
|
|
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)
|
|
dayjs.extend(isSameOrAfter)
|
|
dayjs.extend(isSameOrBefore)
|
|
|
|
|
|
|
|
const dataStore = useDataStore()
|
|
const profileStore = useProfileStore()
|
|
const supabase = useSupabaseClient()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const itemInfo = ref({})
|
|
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 changeRange = () => {
|
|
let selector = "M"
|
|
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 === "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
|
|
loadWorkingTimeInfo()
|
|
}
|
|
|
|
/*const workingTimeInfo = computed(() => {
|
|
|
|
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).subtract(1,"day").isSameOrBefore(selectedEndDay.value))
|
|
|
|
|
|
let weekFactor = 4.33
|
|
let monthlyWorkingMinutes = itemInfo.value.weeklyWorkingHours * weekFactor * 60
|
|
|
|
let workingMinutesTarget = Math.ceil(Number((Number(dayjs(selectedEndDay.value).add(1,"days").diff(dayjs(selectedStartDay.value),'month',true).toFixed(2)) * 4.33 * itemInfo.value.weeklyWorkingHours * 60).toFixed(2)))
|
|
|
|
|
|
|
|
|
|
|
|
//Eingreicht
|
|
let sumWorkingMinutesEingereicht = 0
|
|
times.forEach(time => {
|
|
const minutes = dayjs(time.endDate).diff(dayjs(time.startDate),'minutes')
|
|
sumWorkingMinutesEingereicht = sumWorkingMinutesEingereicht + minutes
|
|
})
|
|
|
|
//Bestätigt
|
|
let sumWorkingMinutesApproved = 0
|
|
times.filter(i => i.approved).forEach(time => {
|
|
const minutes = dayjs(time.endDate).diff(dayjs(time.startDate),'minutes')
|
|
sumWorkingMinutesApproved = sumWorkingMinutesApproved + minutes
|
|
})
|
|
//console.log(times.filter(i => i.approved).length)
|
|
//console.log(sumWorkingMinutesApproved)
|
|
|
|
let recreationDays = ["2025-01-01","2025-04-18","2025-04-21","2025-05-01","2025-05-29","2025-06-09","2024-10-03","2024-10-31","2024-12-25","2024-12-26"]
|
|
|
|
//Feiertagsausgleich
|
|
let sumWorkingMinutesRecreationDays = 0
|
|
let sumRecreationDays = 0
|
|
recreationDays.filter(i => dayjs(i).isSameOrAfter(selectedStartDay.value) && dayjs(i).isSameOrBefore(selectedEndDay.value)).forEach(day => {
|
|
let compensationTime = itemInfo.value.weeklyRegularWorkingHours[dayjs(day).day()] || 0
|
|
sumWorkingMinutesRecreationDays += compensationTime * 60
|
|
sumRecreationDays++
|
|
})
|
|
|
|
//Urlaubsausgleich
|
|
let sumWorkingMinutesVacationDays = 0
|
|
let sumVacationDays = 0
|
|
let dailyMinutes = (itemInfo.value.weeklyWorkingHours / 6 * 60).toFixed(2)
|
|
|
|
let isBetween = (date,start,end) => {
|
|
return dayjs(date).isSameOrAfter(start) && dayjs(date).isSameOrBefore(end)
|
|
}
|
|
|
|
absencerequests.value.filter(i => (dayjs(i.startDate).isBetween(dayjs(selectedStartDay.value),dayjs(selectedEndDay.value)) || dayjs(i.endDate).isBetween(dayjs(selectedStartDay.value),dayjs(selectedEndDay.value)) ) && (i.reason === "Urlaub" || i.reason === "Berufsschule") && i.approved === "Genehmigt").forEach(absenceRequest => {
|
|
let durationInDays = 0
|
|
|
|
console.log(absenceRequest)
|
|
|
|
if(isBetween(absenceRequest.startDate,selectedStartDay.value,selectedEndDay.value) && isBetween(absenceRequest.endDate,selectedStartDay.value,selectedEndDay.value)) {
|
|
//Full in Range
|
|
console.log("Full in Range")
|
|
durationInDays = dayjs(absenceRequest.endDate).diff(absenceRequest.startDate, "days") + 1
|
|
console.log(durationInDays)
|
|
} else if(isBetween(absenceRequest.startDate,selectedStartDay.value,selectedEndDay.value) && !isBetween(absenceRequest.endDate,selectedStartDay.value,selectedEndDay.value)) {
|
|
//Start in Range
|
|
console.log("Start in Range")
|
|
durationInDays = dayjs(selectedEndDay.value).diff(absenceRequest.startDate, "days") + 1
|
|
} else if(!isBetween(absenceRequest.startDate,selectedStartDay.value,selectedEndDay.value) && isBetween(absenceRequest.endDate,selectedStartDay.value,selectedEndDay.value)) {
|
|
//End in Range
|
|
console.log("End in Range")
|
|
durationInDays = dayjs(absenceRequest.endDate).diff(selectedStartDay.value, "days") + 1
|
|
|
|
}
|
|
sumVacationDays += durationInDays
|
|
sumWorkingMinutesVacationDays += dailyMinutes * durationInDays
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
//Saldo
|
|
let saldo = (sumWorkingMinutesApproved + sumWorkingMinutesRecreationDays +sumWorkingMinutesVacationDays - workingMinutesTarget).toFixed(2)
|
|
let saldoInOfficial = (sumWorkingMinutesEingereicht + sumWorkingMinutesRecreationDays + sumWorkingMinutesVacationDays - workingMinutesTarget).toFixed(2)
|
|
|
|
return {
|
|
monthlyWorkingMinutes,
|
|
workingMinutesTarget,
|
|
sumWorkingMinutesEingereicht,
|
|
sumWorkingMinutesApproved,
|
|
sumWorkingMinutesRecreationDays,
|
|
sumRecreationDays,
|
|
sumWorkingMinutesVacationDays,
|
|
sumVacationDays,
|
|
saldo,
|
|
saldoInOfficial,
|
|
times,
|
|
}
|
|
})*/
|
|
|
|
const getDuration = (time) => {
|
|
const minutes = Math.floor(dayjs(time.endDate).diff(dayjs(time.startDate),'minutes',true))
|
|
const hours = Math.floor(minutes/60)
|
|
return {
|
|
//dezimal: dez,
|
|
hours: hours,
|
|
minutes: minutes,
|
|
composed: `${hours}:${String(minutes % 60).padStart(2,"0")} h`
|
|
}
|
|
}
|
|
|
|
const showDocument = ref(false)
|
|
const uri = ref("")
|
|
const generateDocument = async () => {
|
|
const ownTenant = profileStore.ownTenant
|
|
const path = ownTenant.letterheadConfig["workingTimesEvaluation"]
|
|
|
|
const {data,error} = await supabase.storage.from("files").download(path)
|
|
|
|
uri.value = await useCreateWorkingTimesPdf({
|
|
profile: profileStore.getProfileById(route.params.id).fullName,
|
|
...workingTimeInfo.value}, await data.arrayBuffer())
|
|
//alert(uri.value)
|
|
showDocument.value = true
|
|
}
|
|
|
|
const generateEvaluation = async () => {
|
|
await generateDocument()
|
|
}
|
|
|
|
const openTab = ref(0)
|
|
const onTabChange = async (index) => {
|
|
if(index === 1) {
|
|
await generateEvaluation()
|
|
}
|
|
}
|
|
|
|
|
|
setupPage()
|
|
changeRange()
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar
|
|
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
|
>
|
|
<template #left>
|
|
<UButton
|
|
icon="i-heroicons-chevron-left"
|
|
variant="outline"
|
|
@click="router.push(`/workingtimes`)"
|
|
>
|
|
Anwesenheiten
|
|
</UButton>
|
|
</template>
|
|
<template #center>
|
|
<h1
|
|
v-if="itemInfo"
|
|
:class="['text-xl','font-medium']"
|
|
>{{itemInfo ? `Auswertung Anwesenheiten: ${itemInfo.fullName}` : ``}}</h1>
|
|
</template>
|
|
<template #right>
|
|
<!-- <UButton
|
|
v-if="mode === 'edit'"
|
|
@click="dataStore.updateItem('customers',itemInfo,oldItemInfo)"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else-if="mode === 'create'"
|
|
@click="dataStore.createNewItem('customers',itemInfo)"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
<UButton
|
|
@click="cancelEditorCreate"
|
|
color="red"
|
|
class="ml-2"
|
|
v-if="mode === 'edit' || mode === 'create'"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
<UButton
|
|
v-if="mode === 'show'"
|
|
@click="editItem"
|
|
>
|
|
Bearbeiten
|
|
</UButton>-->
|
|
</template>
|
|
|
|
</UDashboardNavbar>
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<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="loadWorkingTimeInfo" />
|
|
</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="loadWorkingTimeInfo" />
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
</template>
|
|
</UDashboardToolbar>
|
|
<UDashboardPanelContent>
|
|
<UTabs
|
|
:items="[{label: 'Information'},{label: 'Bericht'}]"
|
|
@change="onTabChange"
|
|
v-model="openTab"
|
|
>
|
|
<template #item="{item}">
|
|
<div v-if="item.label === 'Information'">
|
|
<UCard class="truncate my-5" v-if="workingTimeInfo">
|
|
<template #header>
|
|
Zusammenfassung
|
|
</template>
|
|
<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>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>Soll Stunden: {{Math.floor(workingTimeInfo.workingMinutesTarget/60)}}:{{String(workingTimeInfo.workingMinutesTarget % 60 ).padStart(2,"0")}} h</p>
|
|
|
|
<!-- <p>Abwesend: </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>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>
|
|
|
|
<div style="overflow-y: scroll; height: 45vh">
|
|
<UTable
|
|
v-if="workingTimeInfo"
|
|
:rows="workingTimeInfo.times"
|
|
@select="(row) => router.push(`/workingtimes/edit/${row.id}`)"
|
|
:columns="[
|
|
{
|
|
key: 'state',
|
|
label: 'Status'
|
|
}, {
|
|
key: 'approved',
|
|
label: 'Genehmigt'
|
|
}, {
|
|
key: 'start',
|
|
label: 'Start'
|
|
}, {
|
|
key: 'end',
|
|
label: 'Ende'
|
|
}, {
|
|
key: 'duration',
|
|
label: 'Dauer'
|
|
}, {
|
|
key: 'notes',
|
|
label: 'Notizen'
|
|
}
|
|
]"
|
|
>
|
|
<template #profile-data="{row}">
|
|
{{profileStore.profiles.find(profile => profile.id === row.profile) ? profileStore.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>
|
|
|
|
|
|
</div>
|
|
<div v-else-if="item.label === 'Bericht'">
|
|
<UProgress animation="carousel" v-if="!showDocument"/>
|
|
<object
|
|
:data="uri"
|
|
v-else
|
|
type="application/pdf"
|
|
class="w-full previewDocument"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</UTabs>
|
|
</UDashboardPanelContent>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.previewDocument {
|
|
height: 80vh;
|
|
}
|
|
</style> |