483 lines
13 KiB
Vue
483 lines
13 KiB
Vue
<script setup>
|
|
import axios from "axios"
|
|
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"
|
|
import DocumentList from "~/components/DocumentList.vue";
|
|
import DocumentUpload from "~/components/DocumentUpload.vue";
|
|
dayjs.extend(customParseFormat)
|
|
dayjs.extend(isoWeek)
|
|
dayjs.extend(isBetween)
|
|
|
|
const dataStore = useDataStore()
|
|
const profileStore = useProfileStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const supabase = useSupabaseClient()
|
|
const toast = useToast()
|
|
|
|
const itemInfo = ref({
|
|
weeklyRegularWorkingHours: {}
|
|
})
|
|
const oldItemInfo = ref({})
|
|
|
|
const setupPage = async () => {
|
|
|
|
if(route.params.id) {
|
|
itemInfo.value = await useSupabaseSelectSingle("profiles",route.params.id,"*, documents(*), checks(*)")
|
|
}
|
|
|
|
if(itemInfo.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
|
|
}
|
|
|
|
setupPage()
|
|
|
|
const emailSignature = ref(profileStore.activeProfile.emailSignature)
|
|
const tiptapLoaded = ref(false)
|
|
const contentSaved = ref(true)
|
|
const contentChanged = async (content) => {
|
|
emailSignature.value = content.html
|
|
if(tiptapLoaded.value === true) {
|
|
contentSaved.value = false
|
|
} else {
|
|
tiptapLoaded.value = true
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const saveSignature = async () => {
|
|
const {data,error} = await supabase.from("profiles").update({emailSignature: emailSignature.value}).eq("id", profileStore.activeProfile.id)
|
|
|
|
if(error) {
|
|
toast.add({title: "Fehler beim Speichern der Signatur", color:"rose"})
|
|
}
|
|
else {
|
|
contentSaved.value = true
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const addToNewsletter = async () => {
|
|
const {data,error} = await axios({
|
|
url: "https://newsletter.fedeo.io/api/public/subscription",
|
|
method: "post",
|
|
data: {
|
|
email: profileStore.activeProfile.email,
|
|
name: profileStore.activeProfile.name,
|
|
list_uuids: ["b97453fd-14b2-4b25-8f9b-b83847317ea3"],
|
|
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
const calcWeeklyWorkingHours = () => {
|
|
itemInfo.value.weeklyWorkingHours =
|
|
itemInfo.value.weeklyRegularWorkingHours[1] +
|
|
itemInfo.value.weeklyRegularWorkingHours[2] +
|
|
itemInfo.value.weeklyRegularWorkingHours[3] +
|
|
itemInfo.value.weeklyRegularWorkingHours[4] +
|
|
itemInfo.value.weeklyRegularWorkingHours[5] +
|
|
itemInfo.value.weeklyRegularWorkingHours[6] +
|
|
itemInfo.value.weeklyRegularWorkingHours[7]
|
|
}
|
|
|
|
const colorMode = useColorMode()
|
|
const isLight = computed({
|
|
get() {
|
|
return colorMode.value !== 'dark'
|
|
},
|
|
set() {
|
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
|
}
|
|
})
|
|
|
|
const saveProfile = async () => {
|
|
let data = {...itemInfo.value, fullName: itemInfo.value.firstName + ' ' + itemInfo.value.lastName}
|
|
delete data.checks
|
|
delete data.documents
|
|
|
|
await dataStore.updateItem('profiles',data,oldItemInfo.value)
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar
|
|
:title="itemInfo.fullName"
|
|
>
|
|
<template #left>
|
|
<UButton
|
|
icon="i-heroicons-chevron-left"
|
|
variant="outline"
|
|
@click="router.push(`/profiles`)"
|
|
>
|
|
Mitarbeiter
|
|
</UButton>
|
|
</template>
|
|
<template #center>
|
|
<h1
|
|
v-if="itemInfo"
|
|
:class="['text-xl','font-medium'/*, ... true ? ['text-primary'] : ['text-rose-500']*/]"
|
|
>{{itemInfo ? `Mitarbeiter: ${itemInfo.fullName}` : ''}}</h1>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UTabs
|
|
v-if="itemInfo.id"
|
|
class="p-5"
|
|
:items="[
|
|
{
|
|
label: 'Informationen'
|
|
},{
|
|
label: 'Logbuch'
|
|
},/*{
|
|
label: 'Zeiterfassung'
|
|
},*/{
|
|
label: 'Vertragsdaten'
|
|
},{
|
|
label: 'Dokumente'
|
|
},{
|
|
label: 'Überprüfungen'
|
|
}
|
|
]"
|
|
>
|
|
<template #item="{item}">
|
|
<UCard class="mt-5">
|
|
<div v-if="item.label === 'Informationen'">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="saveProfile"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
</Toolbar>
|
|
<InputGroup class="w-full">
|
|
<UFormGroup
|
|
label="Anrede"
|
|
class="w-60"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.salutation"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Vorname"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.firstName"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Nachname"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.lastName"
|
|
/>
|
|
</UFormGroup>
|
|
</InputGroup>
|
|
<InputGroup class="w-full">
|
|
<UFormGroup
|
|
label="Mitarbeiternummer"
|
|
class="w-60"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.employeeNumber"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="E-Mail"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.email"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Benutzername"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.username"
|
|
/>
|
|
</UFormGroup>
|
|
</InputGroup>
|
|
<InputGroup class="w-full">
|
|
<UFormGroup
|
|
label="Festnetz Telefon"
|
|
class="w-60"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.fixedTel"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Handy"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.mobileTel"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Geburtstag:"
|
|
>
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton
|
|
icon="i-heroicons-calendar-days-20-solid"
|
|
:label="itemInfo.birthday ? dayjs(itemInfo.birthday).format('DD.MM.YYYY') : 'Datum auswählen'"
|
|
variant="outline"
|
|
/>
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="itemInfo.birthday" />
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
</InputGroup>
|
|
<InputGroup class="w-full">
|
|
<UFormGroup
|
|
label="Kleidergröße Oberteil"
|
|
class="w-60"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.clothingSizeTop"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Kleidergröße Hose"
|
|
class="w-60"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.clothingSizeBottom"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Schuhgröße"
|
|
class="w-60"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.clothingSizeShoe"
|
|
/>
|
|
</UFormGroup>
|
|
</InputGroup>
|
|
|
|
<UDivider class="my-5" v-if="profileStore.activeProfile.id === itemInfo.id">
|
|
Helligkeitseinstellung
|
|
</UDivider>
|
|
|
|
<UButton
|
|
v-if="profileStore.activeProfile.id === itemInfo.id"
|
|
:icon="isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
|
|
color="white"
|
|
variant="outline"
|
|
aria-label="Theme"
|
|
@click="isLight = !isLight"
|
|
>
|
|
{{!isLight ? "Hell" : "Dunkel"}}
|
|
</UButton>
|
|
|
|
<UDivider class="my-5">
|
|
E-Mail Signatur
|
|
</UDivider>
|
|
|
|
<UButton
|
|
variant="outline"
|
|
v-if="!contentSaved"
|
|
@click="saveSignature"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
|
|
<Tiptap
|
|
@updateContent="contentChanged"
|
|
:preloadedContent="emailSignature"
|
|
/>
|
|
|
|
<UDivider>Newsletter</UDivider>
|
|
|
|
<!-- <UButton
|
|
@click="addToNewsletter"
|
|
variant="outline"
|
|
>
|
|
In Newsletter eintragen
|
|
</UButton>-->
|
|
|
|
</div>
|
|
<div v-if="item.label === 'Logbuch'">
|
|
<HistoryDisplay
|
|
type="profile"
|
|
v-if="itemInfo"
|
|
:element-id="itemInfo.id"
|
|
/>
|
|
</div>
|
|
<div v-if="item.label === 'Vertragsdaten'">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="saveProfile"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
</Toolbar>
|
|
<InputGroup class="w-full">
|
|
<UFormGroup
|
|
label="Eintrittsdatum:"
|
|
>
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton
|
|
icon="i-heroicons-calendar-days-20-solid"
|
|
:label="itemInfo.entryDate ? dayjs(itemInfo.entryDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
|
variant="outline"
|
|
/>
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="itemInfo.entryDate" />
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
</InputGroup>
|
|
<InputGroup class="w-full">
|
|
<UFormGroup
|
|
label="Wöchentliche Arbeitszeit"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.weeklyWorkingHours"
|
|
type="number"
|
|
/>
|
|
</UFormGroup>
|
|
<!-- <UFormGroup
|
|
label="Durchschnittliche Arbeitstage pro Woche"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.weeklyWorkingDays"
|
|
/>
|
|
</UFormGroup>-->
|
|
<UFormGroup
|
|
label="Urlaubstage"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.annualPaidLeaveDays"
|
|
/>
|
|
</UFormGroup>
|
|
</InputGroup>
|
|
<UDivider class="my-3">Regelarbeitszeiten</UDivider>
|
|
<InputGroup class="w-full">
|
|
<UFormGroup
|
|
label="Montag"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.weeklyRegularWorkingHours[1]"
|
|
type="number"
|
|
@change="calcWeeklyWorkingHours"
|
|
|
|
/>
|
|
</UFormGroup><UFormGroup
|
|
label="Dienstag"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.weeklyRegularWorkingHours[2]"
|
|
type="number"
|
|
@change="calcWeeklyWorkingHours"
|
|
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Mittwoch"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.weeklyRegularWorkingHours[3]"
|
|
type="number"
|
|
@change="calcWeeklyWorkingHours"
|
|
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Donnerstag"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.weeklyRegularWorkingHours[4]"
|
|
type="number"
|
|
@change="calcWeeklyWorkingHours"
|
|
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Freitag"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.weeklyRegularWorkingHours[5]"
|
|
type="number"
|
|
@change="calcWeeklyWorkingHours"
|
|
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Samstag"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.weeklyRegularWorkingHours[6]"
|
|
type="number"
|
|
@change="calcWeeklyWorkingHours"
|
|
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Sonntag"
|
|
class="flex-auto"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.weeklyRegularWorkingHours[7]"
|
|
type="number"
|
|
@change="calcWeeklyWorkingHours"
|
|
|
|
/>
|
|
</UFormGroup>
|
|
</InputGroup>
|
|
</div>
|
|
<div v-else-if="item.label === 'Dokumente'">
|
|
<DocumentUpload
|
|
type="profile"
|
|
:element-id="itemInfo.id"
|
|
/>
|
|
|
|
<DocumentList :documents="dataStore.getDocumentsByProfileId(itemInfo.id)"/>
|
|
</div>
|
|
<div v-else-if="item.label === 'Überprüfungen'">
|
|
<UTable
|
|
:rows="itemInfo.checks"
|
|
:columns="[{key:'name',label: 'Name'},{key:'rhythm',label: 'Rhythmus'},{key:'description',label: 'Beschreibung'}]"
|
|
class="w-full"
|
|
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
|
@select="(i) => router.push(`/checks/show/${i.id}`) "
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Überprüfungen anzuzeigen' }"
|
|
>
|
|
<template #rhythm-data="{row}">
|
|
{{row.distance}}
|
|
<span v-if="row.distanceUnit === 'dayjs'">Tage</span>
|
|
<span v-if="row.distanceUnit === 'years'">Jahre</span>
|
|
</template>
|
|
</UTable>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
</UTabs>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |