144 lines
3.8 KiB
Vue
144 lines
3.8 KiB
Vue
<script setup>
|
|
import dayjs from "dayjs";
|
|
|
|
|
|
const dataStore = useDataStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const toast = useToast()
|
|
const id = ref(route.params.id ? route.params.id : null )
|
|
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({
|
|
startDate: new Date(),
|
|
endDate: new Date(),
|
|
profile: dataStore.activeProfile.id
|
|
})
|
|
const oldItemInfo = ref({})
|
|
|
|
const setupPage = () => {
|
|
if(route.params.id && mode.value === 'edit') {
|
|
itemInfo.value = dataStore.getWorkingTimeById(Number(route.params.id))
|
|
//setStartEnd()
|
|
}
|
|
oldItemInfo.value = itemInfo.value
|
|
}
|
|
|
|
/*const setStartEnd = () => {
|
|
console.log("test")
|
|
console.log(String(itemInfo.value.date).split("T")[0])
|
|
itemInfo.value.date = String(itemInfo.value.date).split("T")[0]
|
|
itemInfo.value.start = new Date(itemInfo.value.date + "T" + itemInfo.value.start)
|
|
itemInfo.value.end = new Date(itemInfo.value.date + "T" + itemInfo.value.end)
|
|
}*/
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar
|
|
:title="mode === 'show' ? `Anwesenheit: ${itemInfo.profile}` : (itemInfo.id ? 'Anwesenheit bearbeiten' :'Anwesenheit erstellen')"
|
|
>
|
|
<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.id ? 'Anwesenheite bearbeiten' : 'Anwesenheit erstellen'}}</h1>
|
|
</template>
|
|
<template #right>
|
|
<UButton
|
|
color="rose"
|
|
v-if="mode === 'edit'"
|
|
@click="router.push('/workingtimes')"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
<UButton
|
|
v-if="mode === 'edit' && itemInfo.id"
|
|
@click="dataStore.updateItem('workingtimes',itemInfo)"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-if="mode === 'edit' && itemInfo.id"
|
|
@click="dataStore.updateItem('workingtimes',{...itemInfo, approved: true})"
|
|
>
|
|
Genehmigen & Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else-if="mode === 'edit' && !itemInfo.id"
|
|
@click="dataStore.createNewItem('workingtimes',itemInfo)"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UForm class="p-5">
|
|
<UFormGroup
|
|
label="Mitarbeiter:"
|
|
>
|
|
<USelectMenu
|
|
:options="dataStore.profiles"
|
|
v-model="itemInfo.profile"
|
|
option-attribute="fullName"
|
|
value-attribute="id"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup label="Start:">
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton
|
|
icon="i-heroicons-calendar-days-20-solid"
|
|
:label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('HH:mm') : 'Datum auswählen'"
|
|
variant="outline"
|
|
/>
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="itemInfo.startDate" @close="itemInfo.endDate = itemInfo.startDate" mode="dateTime"/>
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Ende:">
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton
|
|
variant="outline"
|
|
icon="i-heroicons-calendar-days-20-solid"
|
|
:label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('HH:mm') : 'Datum auswählen'"
|
|
/>
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="itemInfo.endDate" @close="close" mode="time"/>
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Genehmigt:"
|
|
>
|
|
<UCheckbox
|
|
v-model="itemInfo.approved"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Notizen:"
|
|
>
|
|
<UTextarea
|
|
v-model="itemInfo.notes"
|
|
/>
|
|
</UFormGroup>
|
|
</UForm>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |