201 lines
3.9 KiB
Vue
201 lines
3.9 KiB
Vue
<script setup>
|
|
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
const dataStore = useDataStore()
|
|
const supabase = useSupabaseClient()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const toast = useToast()
|
|
const id = ref(route.params.id ? route.params.id : null )
|
|
|
|
const editor = useEditor({
|
|
content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
|
|
extensions: [TiptapStarterKit],
|
|
});
|
|
|
|
let currentItem = null
|
|
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({})
|
|
|
|
const tabItems = [
|
|
{
|
|
label: "Informationen"
|
|
},{
|
|
label: "Projekte"
|
|
},{
|
|
label: "Aufgaben"
|
|
},{
|
|
label: "Dokumentation"
|
|
}
|
|
]
|
|
|
|
//Functions
|
|
const setupPage = () => {
|
|
if(mode.value === "show" || mode.value === "edit"){
|
|
currentItem = dataStore.getPlantById(Number(useRoute().params.id))
|
|
}
|
|
|
|
if(mode.value === "edit") itemInfo.value = currentItem
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const editItem = async () => {
|
|
router.push(`/plants/edit/${currentItem.id}`)
|
|
setupPage()
|
|
}
|
|
|
|
const cancelEditorCreate = () => {
|
|
mode.value = "show"
|
|
itemInfo.value = {
|
|
id: 0,
|
|
infoData: {}
|
|
}
|
|
}
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UCard v-if="currentItem && mode == 'show'">
|
|
<template #header>
|
|
{{currentItem.name}}
|
|
</template>
|
|
|
|
<UTabs :items="tabItems">
|
|
<template #item="{item}">
|
|
<div v-if="item.label === 'Informationen'">
|
|
{{currentItem}}
|
|
</div>
|
|
<div v-else-if="item.label === 'Projekte'">
|
|
<InputGroup>
|
|
<UButton
|
|
@click="router.push(`/projects/create?plant=${currentItem.id}`)"
|
|
>
|
|
+ Projekt
|
|
</UButton>
|
|
</InputGroup>
|
|
|
|
<UTable
|
|
:rows="dataStore.getProjectsByPlantId(currentItem.id)"
|
|
>
|
|
|
|
</UTable>
|
|
|
|
</div>
|
|
<div v-else-if="item.label === 'Aufgaben'">
|
|
|
|
<UTable
|
|
:rows="dataStore.getTasksByPlantId(currentItem.id)"
|
|
>
|
|
|
|
</UTable>
|
|
</div>
|
|
<div v-if="item.label === 'Dokumentation'">
|
|
|
|
<Editor/>
|
|
|
|
</div>
|
|
</template>
|
|
</UTabs>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<template #footer>
|
|
<UButton
|
|
v-if="mode == 'show' && currentItem.id"
|
|
@click="editItem"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
<UButton
|
|
color="red"
|
|
class="ml-2"
|
|
disabled
|
|
>
|
|
Archivieren
|
|
</UButton>
|
|
<!-- TODO: Kunde archivieren -->
|
|
</template>
|
|
|
|
|
|
|
|
</UCard>
|
|
<UCard v-else-if="mode === 'edit' || mode === 'create'">
|
|
<template #header v-if="mode === 'edit'">
|
|
{{itemInfo.name}}
|
|
</template>
|
|
|
|
<UFormGroup
|
|
label="Name:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.name"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Kundennummer:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.customer"
|
|
:options="dataStore.customers"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
searchable
|
|
:search-attributes="['name']"
|
|
>
|
|
<template #label>
|
|
{{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
|
|
|
|
<template #footer>
|
|
<UButton
|
|
v-if="mode == 'edit'"
|
|
@click="dataStore.updateItem('plants',itemInfo)"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else-if="mode == 'create'"
|
|
@click="dataStore.createNewItem('plants', itemInfo)"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
<UButton
|
|
@click="cancelEditorCreate"
|
|
color="red"
|
|
class="ml-2"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
</template>
|
|
|
|
</UCard>
|
|
|
|
<HistoryDisplay
|
|
type="plant"
|
|
v-if="currentItem"
|
|
:element-id="currentItem.id"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |