179 lines
4.0 KiB
Vue
179 lines
4.0 KiB
Vue
<script setup>
|
|
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
|
import DocumentList from "~/components/DocumentList.vue";
|
|
import DocumentUpload from "~/components/DocumentUpload.vue";
|
|
import {useSupabaseSelect} from "~/composables/useSupabase.js";
|
|
import dayjs from "dayjs";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
defineShortcuts({
|
|
'backspace': () => {
|
|
router.push("/servicecategories")
|
|
},
|
|
'arrowleft': () => {
|
|
if(openTab.value > 0){
|
|
openTab.value -= 1
|
|
}
|
|
},
|
|
'arrowright': () => {
|
|
if(openTab.value < 3) {
|
|
openTab.value += 1
|
|
}
|
|
},
|
|
})
|
|
|
|
const dataStore = useDataStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const toast = useToast()
|
|
const id = ref(route.params.id ? route.params.id : null )
|
|
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({})
|
|
const openTab = ref(0)
|
|
|
|
//Functions
|
|
const setupPage = async () => {
|
|
if(mode.value === "show" || mode.value === "edit"){
|
|
itemInfo.value = await useSupabaseSelectSingle("servicecategories",route.params.id,"*")
|
|
}
|
|
|
|
|
|
}
|
|
|
|
const cancelEditorCreate = () => {
|
|
if(itemInfo.value) {
|
|
router.push(`/servicecategories/show/${itemInfo.value.id}`)
|
|
} else {
|
|
router.push(`/servicecategories/`)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
setupPage()
|
|
</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(`/servicecategories`)"
|
|
>
|
|
Leistungskategorien
|
|
</UButton>
|
|
</template>
|
|
<template #center>
|
|
<h1
|
|
v-if="itemInfo"
|
|
class="text-xl font-medium"
|
|
>{{itemInfo.name ? `Leistungskategorie: ${itemInfo.name}` : (mode === 'create' ? 'Leistungskategorie erstellen' : 'Leistungskategorie bearbeiten')}}</h1>
|
|
</template>
|
|
<template #right>
|
|
<UButton
|
|
v-if="mode === 'edit'"
|
|
@click="dataStore.updateItem('servicecategories',itemInfo)"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else-if="mode === 'create'"
|
|
@click="dataStore.createNewItem('servicecategories',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=" router.push(`/servicecategories/edit/${itemInfo.id}`)"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
<UTabs
|
|
:items="[{label: 'Informationen'}]"
|
|
v-if="mode === 'show' && itemInfo"
|
|
class="p-5"
|
|
v-model="openTab"
|
|
>
|
|
<template #item="{item}">
|
|
<div v-if="item.label === 'Informationen'" class="mr-5 flex flex-row">
|
|
<div class="w-1/2 mr-5">
|
|
<UCard>
|
|
<table class="w-full">
|
|
<tr>
|
|
<td>Name: </td>
|
|
<td>{{itemInfo.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Beschreibung:</td>
|
|
<td>{{itemInfo.description}}</td>
|
|
</tr>
|
|
</table>
|
|
</UCard>
|
|
</div>
|
|
<div class="w-1/2">
|
|
<UCard>
|
|
<HistoryDisplay
|
|
type="product"
|
|
v-if="itemInfo"
|
|
:element-id="itemInfo.id"
|
|
render-headline
|
|
/>
|
|
</UCard>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
</UTabs>
|
|
<UForm
|
|
v-else-if="mode == 'edit' || mode == 'create'"
|
|
class="p-5"
|
|
>
|
|
<UFormGroup
|
|
label="Name:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.name"
|
|
autofocus
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Beschreibung:"
|
|
>
|
|
<UTextarea
|
|
v-model="itemInfo.description"
|
|
/>
|
|
</UFormGroup>
|
|
</UForm>
|
|
</template>
|
|
|
|
<style scoped>
|
|
td {
|
|
border-bottom: 1px solid lightgrey;
|
|
vertical-align: top;
|
|
padding-bottom: 0.15em;
|
|
padding-top: 0.15em;
|
|
}
|
|
</style> |