Changed to new Layout System
This commit is contained in:
@@ -9,7 +9,6 @@ definePageMeta({
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
@@ -53,17 +52,7 @@ const setupPage = () => {
|
||||
if(mode.value === "create") {
|
||||
let query = route.query
|
||||
if(query.customer) itemInfo.value.customer = Number(query.customer)
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const editItem = async () => {
|
||||
await router.push(`/plants/edit/${currentItem.value.id}`)
|
||||
setupPage()
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
@@ -79,171 +68,122 @@ setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1
|
||||
class="mb-3 truncate font-bold text-2xl"
|
||||
v-if="currentItem "
|
||||
>Objekt: {{currentItem.name}}</h1>
|
||||
<div v-if="currentItem && mode == 'show'">
|
||||
<UTabs :items="tabItems">
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5">
|
||||
<div v-if="item.label === 'Informationen'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
v-if="mode == 'show' && currentItem.id"
|
||||
@click="editItem"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
|
||||
<div class="text-wrap">
|
||||
<p>Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
|
||||
</div>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Objekt erstellen' : 'Objekt bearbeiten')">
|
||||
<template #right>
|
||||
<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"
|
||||
v-if="mode === 'edit' || mode === 'create'"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="mode === 'show'"
|
||||
@click="router.push(`/plants/edit/${currentItem.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UTabs
|
||||
:items="tabItems"
|
||||
v-if="mode === 'show'"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5">
|
||||
<div v-if="item.label === 'Informationen'">
|
||||
<div class="text-wrap">
|
||||
<p>Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Logbuch'">
|
||||
<HistoryDisplay
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Logbuch'">
|
||||
<HistoryDisplay
|
||||
type="plant"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Projekte'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/projects/create?plant=${currentItem.id}`)"
|
||||
>
|
||||
+ Projekt
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
|
||||
<UTable
|
||||
:rows="dataStore.getProjectsByPlantId(currentItem.id)"
|
||||
:columns="[{key: 'name', label: 'Name'}]"
|
||||
@select="(row) => router.push(`/projects/show/${row.id}`)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Aufgaben'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/tasks/create?plant=${currentItem.id}`)"
|
||||
>
|
||||
+ Aufgabe
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<UTable
|
||||
:rows="dataStore.getTasksByPlantId(currentItem.id)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
|
||||
:columns="[{key: 'name', label: 'Name'},{key: 'categore', label: 'Kategorie'}]"
|
||||
@select="(row) => router.push(`/tasks/show/${row.id}`)"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Dokumente'" class="space-y-3">
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="plant"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Projekte'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/projects/create?plant=${currentItem.id}`)"
|
||||
>
|
||||
+ Projekt
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
</Toolbar>
|
||||
|
||||
<UTable
|
||||
:rows="dataStore.getProjectsByPlantId(currentItem.id)"
|
||||
:columns="[{key: 'name', label: 'Name'}]"
|
||||
@select="(row) => router.push(`/projects/show/${row.id}`)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
|
||||
>
|
||||
<DocumentList :documents="dataStore.getDocumentsByPlantId(currentItem.id)"/>
|
||||
|
||||
</UTable>
|
||||
</div>
|
||||
<div v-if="item.label === 'Dokumentation'">
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Aufgaben'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/tasks/create?plant=${currentItem.id}`)"
|
||||
>
|
||||
+ Aufgabe
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<UTable
|
||||
:rows="dataStore.getTasksByPlantId(currentItem.id)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
|
||||
:columns="[{key: 'name', label: 'Name'},{key: 'categore', label: 'Kategorie'}]"
|
||||
@select="(row) => router.push(`/tasks/show/${row.id}`)"
|
||||
>
|
||||
<Editor/>
|
||||
|
||||
</UTable>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Dokumente'" class="space-y-3">
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="plant"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</Toolbar>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- <UModal
|
||||
v-model="uploadModalOpen"
|
||||
>
|
||||
<UCard class="p-4">
|
||||
</template>
|
||||
</UTabs>
|
||||
|
||||
<template #header>
|
||||
Datei hochladen
|
||||
</template>
|
||||
<div v-if="currentItem && mode == 'show'">
|
||||
|
||||
<UFormGroup
|
||||
label="Datei:"
|
||||
>
|
||||
<UInput
|
||||
type="file"
|
||||
id="fileUploadInput"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<!– <UFormGroup
|
||||
label="Name:"
|
||||
class="mt-3"
|
||||
>
|
||||
<UInput
|
||||
v-model="fileUploadFormData.name"
|
||||
/>
|
||||
</UFormGroup>–>
|
||||
<UFormGroup
|
||||
label="Tags:"
|
||||
class="mt-3"
|
||||
>
|
||||
<USelectMenu
|
||||
multiple
|
||||
searchable
|
||||
searchable-placeholder="Suchen..."
|
||||
:options="tags"
|
||||
v-model="fileUploadFormData.tags"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<!–<UFormGroup
|
||||
label="Ordner:"
|
||||
class="mt-3"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="folders"
|
||||
v-model="fileUploadFormData.folder"
|
||||
value-attribute="label"
|
||||
|
||||
/>
|
||||
</UFormGroup>–>
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
class="mt-3"
|
||||
@click="uploadFiles"
|
||||
>Hochladen</UButton>
|
||||
</template>
|
||||
|
||||
|
||||
</UCard>
|
||||
|
||||
</UModal>-->
|
||||
|
||||
<DocumentList :documents="dataStore.getDocumentsByPlantId(currentItem.id)"/>
|
||||
|
||||
</div>
|
||||
<div v-if="item.label === 'Dokumentation'">
|
||||
|
||||
<Editor/>
|
||||
|
||||
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
</template>
|
||||
</UTabs>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <UCard v-if="currentItem && mode == 'show'">
|
||||
<template #header>
|
||||
{{currentItem.name}}
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
</UCard>-->
|
||||
<UCard v-else-if="mode === 'edit' || mode === 'create'">
|
||||
<template #header v-if="mode === 'edit'">
|
||||
{{itemInfo.name}}
|
||||
</template>
|
||||
|
||||
<UForm
|
||||
v-else-if="mode === 'edit' || mode === 'create'"
|
||||
class="p-5"
|
||||
>
|
||||
<UFormGroup
|
||||
label="Name:"
|
||||
>
|
||||
@@ -268,34 +208,7 @@ setupPage()
|
||||
</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>
|
||||
|
||||
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user