291 lines
10 KiB
Vue
291 lines
10 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 bis heute")
|
|
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)
|
|
console.log(workingTimeInfo.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 === "Dieser Monat bis heute") {
|
|
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")
|
|
if(selectedPresetRange.value === "Dieser Monat bis heute") {
|
|
selectedEndDay.value = dayjs().format("YYYY-MM-DD")
|
|
} else {
|
|
selectedEndDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).endOf(selector).format("YYYY-MM-DD")
|
|
|
|
}
|
|
|
|
openTab.value = 0
|
|
loadWorkingTimeInfo()
|
|
}
|
|
|
|
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 = (await supabase.from("letterheads").select().eq("tenant",profileStore.currentTenant)).data[0].path
|
|
console.log(path)
|
|
|
|
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>
|
|
|
|
</UDashboardNavbar>
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<UFormGroup
|
|
label="Vorlage:"
|
|
>
|
|
<USelectMenu
|
|
:options="['Dieser Monat bis heute','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>Krankheitsausgleich: {{Math.floor(workingTimeInfo.sumWorkingMinutesSickDays/60)}}:{{String(workingTimeInfo.sumWorkingMinutesSickDays % 60).padStart(2,"0")}} h / {{workingTimeInfo.sumSickDays}} Tage</p>
|
|
<p>Soll Stunden: {{Math.floor(workingTimeInfo.timeSpanWorkingMinutes/60)}}:{{String(workingTimeInfo.timeSpanWorkingMinutes % 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}`)"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Anwesenheiten anzuzeigen` }"
|
|
: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> |