From c27fd4cd2dc1ddbf0ec2ca4a53dc6b334af28208 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Sun, 14 Jul 2024 21:26:46 +0200
Subject: [PATCH] Changes

---
 components/OwnFields.vue          |  23 ++
 components/ProfileDropdown.vue    |   2 +
 layouts/default.vue               |   4 +
 nuxt.config.ts                    |   1 +
 pages/contracts/[mode]/[[id]].vue | 557 ++++++++++++++++--------------
 pages/customers/[mode]/[[id]].vue |  11 +-
 pages/index.vue                   |  12 +-
 pages/tasks/[mode]/[[id]].vue     |  44 ++-
 8 files changed, 363 insertions(+), 291 deletions(-)
 create mode 100644 components/OwnFields.vue

diff --git a/components/OwnFields.vue b/components/OwnFields.vue
new file mode 100644
index 0000000..d2c76fb
--- /dev/null
+++ b/components/OwnFields.vue
@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  resource: {
+    required: true,
+    type: String
+  },
+  elementId: {
+    required: true,
+    type: String
+  },
+  edit: {
+    type: Boolean
+  }
+})
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/ProfileDropdown.vue b/components/ProfileDropdown.vue
index 5714b56..4d4d0b2 100644
--- a/components/ProfileDropdown.vue
+++ b/components/ProfileDropdown.vue
@@ -5,6 +5,8 @@ const supabase = useSupabaseClient()
 //const tenant = ref(dataStore.currentTenant)
 
 const selectedProfile = ref(dataStore.activeProfile.id)
+
+
 </script>
 
 <template>
diff --git a/layouts/default.vue b/layouts/default.vue
index b9330f7..09f0f50 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -372,6 +372,10 @@ let links = computed(() => {
           label: "Text Vorlagen",
           to: "/settings/texttemplates",
           icon: "i-heroicons-clipboard-document-list"
+        },{
+          label: "Eigene Felder",
+          to: "/settings/ownfields",
+          icon: "i-heroicons-clipboard-document-list"
         },{
           label: "Firmeneinstellungen",
           to: "/settings/tenant",
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e6c835d..e520ce5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -6,6 +6,7 @@ export default defineNuxtConfig({
             enabled: true
         }
     },
+    ssr:false,
     imports: {
         dirs: ['stores']
     },
diff --git a/pages/contracts/[mode]/[[id]].vue b/pages/contracts/[mode]/[[id]].vue
index df6f291..14d299f 100644
--- a/pages/contracts/[mode]/[[id]].vue
+++ b/pages/contracts/[mode]/[[id]].vue
@@ -37,12 +37,15 @@ const itemInfo = ref({
   name: "",
   customer: null,
   active: true,
+  ownFields: {}
 })
 
 //Functions
 const setupPage = async () => {
-  if(mode.value === "show" || mode.value === "edit"){
+  if(mode.value === "show" ){
     itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*, customer(id,name)")
+  } else if (mode.value === "edit"){
+    itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*")
   }
 
 
@@ -110,296 +113,324 @@ setupPage()
       </UButton>
     </template>
   </UDashboardNavbar>
-  <UTabs
-      v-if="itemInfo.id && mode === 'show'"
-      :items="[{label: 'Informationen'}, {label: 'Dokumente'}]"
-    class="p-5"
-      v-model="openTab"
-  >
-    <template #item="{item}">
-      <div v-if="item.label === 'Informationen'" class="flex mt-5">
-        <div class="w-1/2 mr-5">
-          <UCard>
-            <div class="text-wrap">
-              <p>Kundennummer: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
-              Beschreibung:<br>
-              {{itemInfo.description}}<br>
-            </div>
-          </UCard>
+  <UDashboardPanelContent>
+    <UTabs
+        v-if="itemInfo.id && mode === 'show'"
+        :items="[{label: 'Informationen'}, {label: 'Dokumente'}]"
+        class="p-5"
+        v-model="openTab"
+    >
+      <template #item="{item}">
+        <div v-if="item.label === 'Informationen'" class="flex mt-5">
+          <div class="w-1/2 mr-5">
+            <UCard>
+              <div class="text-wrap">
+                <p>Kundennummer: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
+                Eigene Felder: {{itemInfo.ownFields}}<br>
+                Beschreibung:<br>
+                {{itemInfo.description}}<br>
+              </div>
+            </UCard>
+          </div>
+          <div class="w-1/2">
+            <UCard class="h-full">
+              <HistoryDisplay
+                  type="contract"
+                  v-if="itemInfo"
+                  :element-id="itemInfo.id"
+                  :render-headline="true"
+              />
+            </UCard>
+
+          </div>
+
+
+
+
+          <!--        <UBadge
+                      v-if="itemInfo.active"
+                  >
+                    Vertrag aktiv
+                  </UBadge>
+                  <UBadge
+                      v-else
+                      color="red"
+                  >
+                    Vertrag gesperrt
+                  </UBadge>-->
+
+
+
+
         </div>
-        <div class="w-1/2">
-          <UCard class="h-full">
-            <HistoryDisplay
-                type="contract"
-                v-if="itemInfo"
-                :element-id="itemInfo.id"
-                :render-headline="true"
+        <div v-else-if="item.label === 'Dokumente'">
+          <UCard class="mt-5">
+            <Toolbar>
+              <DocumentUpload
+                  type="contract"
+                  :element-id="itemInfo.id"
+              />
+            </Toolbar>
+            <DocumentList
+                :documents="dataStore.getDocumentsByContractId(itemInfo.id)"
             />
           </UCard>
 
         </div>
 
 
+      </template>
+    </UTabs>
+    <UForm v-else-if="mode == 'edit' || mode == 'create'" class="p-5" >
+      <div class="mx-auto w-4/5">
+        <div class="flex flex-row justify-around">
+          <div class="w-1/2">
+            <UDivider>Vertragsdaten</UDivider>
+            <UFormGroup
+                label="Name:"
+            >
+              <UInput
+                  v-model="itemInfo.name"
+              />
+            </UFormGroup>
+
+            <UFormGroup
+                label="Kunde:"
+            >
+              <USelectMenu
+                  v-model="itemInfo.customer"
+                  option-attribute="name"
+                  value-attribute="id"
+                  :options="dataStore.customers"
+                  @change="itemInfo.contact = null"
+                  searchable
+                  :search-attributes="['name']"
+              >
+                <template #label>
+                  {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kein Kunde ausgewählt" }}
+                </template>
+              </USelectMenu>
+            </UFormGroup>
+            <UFormGroup
+                label="Ansprechpartner:"
+                v-if="itemInfo.customer"
+            >
+              <USelectMenu
+                  v-model="itemInfo.contact"
+                  option-attribute="fullName"
+                  value-attribute="id"
+                  :options="dataStore.getContactsByCustomerId(itemInfo.customer)"
+                  searchable
+                  :search-attributes="['name']"
+              >
+                <template #label>
+                  {{dataStore.getContactById(itemInfo.contact) ? dataStore.getContactById(itemInfo.contact).fullName : "Kein Ansprechpartner ausgewählt" }}
+                </template>
+              </USelectMenu>
+            </UFormGroup>
+
+            <InputGroup>
+              <UFormGroup
+                  label="Vertrag aktiv:"
+              >
+                <UCheckbox
+                    v-model="itemInfo.active"
+                />
+              </UFormGroup>
+              <UFormGroup
+                  label="Vertrag wiederkehrend:"
+              >
+                <UCheckbox
+                    v-model="itemInfo.recurring"
+                />
+              </UFormGroup>
+            </InputGroup>
 
 
-<!--        <UBadge
-            v-if="itemInfo.active"
+            <InputGroup>
+              <UFormGroup
+                  label="Vertragsstart:"
+                  class="mt-2"
+              >
+                <UPopover :popper="{ placement: 'bottom-start' }">
+                  <UButton
+                      icon="i-heroicons-calendar-days-20-solid"
+                      :label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                      variant="outline"
+                  />
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker v-model="itemInfo.startDate" @close="close" />
+                  </template>
+                </UPopover>
+              </UFormGroup>
+              <UFormGroup
+                  label="Vertragsende(voraussichtlich):"
+                  class="mt-2"
+              >
+                <UPopover :popper="{ placement: 'bottom-start' }">
+                  <UButton
+                      icon="i-heroicons-calendar-days-20-solid"
+                      :label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                      variant="outline"
+                  />
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker v-model="itemInfo.endDate" @close="close" />
+                  </template>
+                </UPopover>
+              </UFormGroup>
+            </InputGroup>
+
+            <UFormGroup
+                label="mindest Vertragslaufzeit:"
+            >
+              <USelectMenu
+                  :options="['12 Monate','24 Monate','36 Monate','48 Monate']"
+                  v-model="itemInfo.duration"
+              />
+            </UFormGroup>
+
+            <UFormGroup
+                label="Datum der Unterzeichnung:"
+                class="mt-2"
+            >
+              <UPopover :popper="{ placement: 'bottom-start' }">
+                <UButton
+                    icon="i-heroicons-calendar-days-20-solid"
+                    :label="itemInfo.signDate ? dayjs(itemInfo.signDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                    variant="outline"
+                />
+
+                <template #panel="{ close }">
+                  <LazyDatePicker v-model="itemInfo.signDate" @close="close" />
+                </template>
+              </UPopover>
+            </UFormGroup>
+          </div>
+          <div class=" ml-5 w-1/2">
+            <UDivider>Abrechnung</UDivider>
+            <UFormGroup
+                label="Rechnungsversand:"
+            >
+              <USelectMenu
+                  :options="['E-Mail', 'Post']"
+                  v-model="itemInfo.invoiceDispatch"
+              >
+
+              </USelectMenu>
+            </UFormGroup>
+            <UFormGroup
+                label="Zahlungsart:"
+            >
+              <USelectMenu
+                  :options="['Einzug', 'Überweisung']"
+                  v-model="itemInfo.paymentType"
+              >
+
+              </USelectMenu>
+            </UFormGroup>
+            <UFormGroup
+                label="Sepa Mandat"
+            >
+              <InputGroup>
+                <UPopover :popper="{ placement: 'bottom-start' }">
+                  <UButton
+                      icon="i-heroicons-calendar-days-20-solid"
+                      :label="itemInfo.sepaDate ? dayjs(itemInfo.sepaDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                      variant="outline"
+                  />
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker v-model="itemInfo.sepaDate" @close="close" />
+                  </template>
+                </UPopover>
+                <UInput
+                    placeholder="Mandatsreferenz"
+                    class="flex-auto"
+                    v-model="itemInfo.sepaRef"
+                />
+              </InputGroup>
+
+            </UFormGroup>
+            <UFormGroup
+                label="Kontodaten:"
+            >
+              <InputGroup>
+                <UInput
+                    v-model="itemInfo.bankingIban"
+                    placeholder="IBAN"
+                    class="w-1/2"
+                />
+                <UInput
+                    v-model="itemInfo.bankingOwner"
+                    class="w-1/2"
+                    placeholder="Inhaber"
+                />
+              </InputGroup>
+
+            </UFormGroup>
+            <UFormGroup
+                label="Bankdaten:"
+            >
+              <InputGroup>
+                <UInput
+                    v-model="itemInfo.bankingName"
+                    placeholder="Name"
+                    class="w-1/2"
+                />
+                <UInput
+                    v-model="itemInfo.bankingBIC"
+                    placeholder="BIC"
+                    class="w-1/2"
+                />
+              </InputGroup>
+
+            </UFormGroup>
+          </div>
+        </div>
+        <UFormGroup
+            label="Notizen:"
         >
-          Vertrag aktiv
-        </UBadge>
-        <UBadge
-            v-else
-            color="red"
-        >
-          Vertrag gesperrt
-        </UBadge>-->
-
-
-
-
-      </div>
-      <div v-else-if="item.label === 'Dokumente'">
-        <UCard class="mt-5">
-          <Toolbar>
-            <DocumentUpload
-                type="contract"
-                :element-id="itemInfo.id"
-            />
-          </Toolbar>
-          <DocumentList
-              :documents="dataStore.getDocumentsByContractId(itemInfo.id)"
+          <UTextarea
+              v-model="itemInfo.notes"
+              rows="6"
+              maxrows="12"
           />
-        </UCard>
+        </UFormGroup>
 
-      </div>
+        <div
+            v-if="dataStore.ownTenant.ownFields"
+        >
+          <UDivider
+              class="mt-3"
+          >Eigene Felder</UDivider>
 
-
-    </template>
-  </UTabs>
-  <UForm v-else-if="mode == 'edit' || mode == 'create'" class="p-5" >
-    <div class="mx-auto w-4/5">
-      <div class="flex flex-row justify-around">
-        <div class="w-1/2">
-          <UDivider>Vertragsdaten</UDivider>
           <UFormGroup
-              label="Name:"
+              v-for="field in dataStore.ownTenant.ownFields.contracts"
+              :key="field.key"
+              :label="field.label"
           >
             <UInput
-                v-model="itemInfo.name"
+                v-if="field.type === 'text'"
+                v-model="itemInfo.ownFields[field.key]"
             />
-          </UFormGroup>
-
-          <UFormGroup
-              label="Kunde:"
-          >
             <USelectMenu
-                v-model="itemInfo.customer"
-                option-attribute="name"
-                value-attribute="id"
-                :options="dataStore.customers"
-                @change="itemInfo.contact = null"
-                searchable
-                :search-attributes="['name']"
-            >
-              <template #label>
-                {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kein Kunde ausgewählt" }}
-              </template>
-            </USelectMenu>
-          </UFormGroup>
-          <UFormGroup
-              label="Ansprechpartner:"
-              v-if="itemInfo.customer"
-          >
-            <USelectMenu
-                v-model="itemInfo.contact"
-                option-attribute="fullName"
-                value-attribute="id"
-                :options="dataStore.getContactsByCustomerId(itemInfo.customer)"
-                searchable
-                :search-attributes="['name']"
-            >
-              <template #label>
-                {{dataStore.getContactById(itemInfo.contact) ? dataStore.getContactById(itemInfo.contact).fullName : "Kein Ansprechpartner ausgewählt" }}
-              </template>
-            </USelectMenu>
-          </UFormGroup>
-
-          <InputGroup>
-            <UFormGroup
-                label="Vertrag aktiv:"
-            >
-              <UCheckbox
-                  v-model="itemInfo.active"
-              />
-            </UFormGroup>
-            <UFormGroup
-                label="Vertrag wiederkehrend:"
-            >
-              <UCheckbox
-                  v-model="itemInfo.recurring"
-              />
-            </UFormGroup>
-          </InputGroup>
-
-
-          <InputGroup>
-            <UFormGroup
-                label="Vertragsstart:"
-                class="mt-2"
-            >
-              <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton
-                    icon="i-heroicons-calendar-days-20-solid"
-                    :label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('DD.MM.YYYY') : 'Datum auswählen'"
-                    variant="outline"
-                />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker v-model="itemInfo.startDate" @close="close" />
-                </template>
-              </UPopover>
-            </UFormGroup>
-            <UFormGroup
-                label="Vertragsende(voraussichtlich):"
-                class="mt-2"
-            >
-              <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton
-                    icon="i-heroicons-calendar-days-20-solid"
-                    :label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('DD.MM.YYYY') : 'Datum auswählen'"
-                    variant="outline"
-                />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker v-model="itemInfo.endDate" @close="close" />
-                </template>
-              </UPopover>
-            </UFormGroup>
-          </InputGroup>
-
-          <UFormGroup
-              label="mindest Vertragslaufzeit:"
-          >
-            <USelectMenu
-                :options="['12 Monate','24 Monate','36 Monate','48 Monate']"
-                v-model="itemInfo.duration"
+                v-else-if="field.type === 'select'"
+                :options="field.options"
+                v-model="itemInfo.ownFields[field.key]"
             />
           </UFormGroup>
-
-          <UFormGroup
-              label="Datum der Unterzeichnung:"
-              class="mt-2"
-          >
-            <UPopover :popper="{ placement: 'bottom-start' }">
-              <UButton
-                  icon="i-heroicons-calendar-days-20-solid"
-                  :label="itemInfo.signDate ? dayjs(itemInfo.signDate).format('DD.MM.YYYY') : 'Datum auswählen'"
-                  variant="outline"
-              />
-
-              <template #panel="{ close }">
-                <LazyDatePicker v-model="itemInfo.signDate" @close="close" />
-              </template>
-            </UPopover>
-          </UFormGroup>
-        </div>
-        <div class=" ml-5 w-1/2">
-          <UDivider>Abrechnung</UDivider>
-          <UFormGroup
-              label="Rechnungsversand:"
-          >
-            <USelectMenu
-                :options="['E-Mail', 'Post']"
-                v-model="itemInfo.invoiceDispatch"
-            >
-
-            </USelectMenu>
-          </UFormGroup>
-          <UFormGroup
-              label="Zahlungsart:"
-          >
-            <USelectMenu
-                :options="['Einzug', 'Überweisung']"
-                v-model="itemInfo.paymentType"
-            >
-
-            </USelectMenu>
-          </UFormGroup>
-          <UFormGroup
-              label="Sepa Mandat"
-          >
-            <InputGroup>
-              <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton
-                    icon="i-heroicons-calendar-days-20-solid"
-                    :label="itemInfo.sepaDate ? dayjs(itemInfo.sepaDate).format('DD.MM.YYYY') : 'Datum auswählen'"
-                    variant="outline"
-                />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker v-model="itemInfo.sepaDate" @close="close" />
-                </template>
-              </UPopover>
-              <UInput
-                  placeholder="Mandatsreferenz"
-                  class="flex-auto"
-                  v-model="itemInfo.sepaRef"
-              />
-            </InputGroup>
-
-          </UFormGroup>
-          <UFormGroup
-              label="Kontodaten:"
-          >
-            <InputGroup>
-              <UInput
-                  v-model="itemInfo.bankingIban"
-                  placeholder="IBAN"
-                  class="w-1/2"
-              />
-              <UInput
-                  v-model="itemInfo.bankingOwner"
-                  class="w-1/2"
-                  placeholder="Inhaber"
-              />
-            </InputGroup>
-
-          </UFormGroup>
-          <UFormGroup
-              label="Bankdaten:"
-          >
-            <InputGroup>
-              <UInput
-                  v-model="itemInfo.bankingName"
-                  placeholder="Name"
-                  class="w-1/2"
-              />
-              <UInput
-                  v-model="itemInfo.bankingBIC"
-                  placeholder="BIC"
-                  class="w-1/2"
-              />
-            </InputGroup>
-
-          </UFormGroup>
         </div>
       </div>
-      <UFormGroup
-          label="Notizen:"
-      >
-        <UTextarea
-            v-model="itemInfo.notes"
-            rows="6"
-            maxrows="12"
-        />
-      </UFormGroup>
-    </div>
 
 
 
 
 
     </UForm>
+  </UDashboardPanelContent>
+
 </template>
 
 <style scoped>
diff --git a/pages/customers/[mode]/[[id]].vue b/pages/customers/[mode]/[[id]].vue
index d667cb9..c960714 100644
--- a/pages/customers/[mode]/[[id]].vue
+++ b/pages/customers/[mode]/[[id]].vue
@@ -58,15 +58,6 @@ const editItem = async () => {
   await router.push(`/customers/edit/${itemInfo.value.id}`)
 }
 
-const cancelEditorCreate = () => {
-  if(itemInfo.value) {
-    router.push(`/customers/show/${itemInfo.value.id}`)
-  } else {
-    router.push(`/customers`)
-  }
-
-}
-
 const setCityByZip = async () => {
     itemInfo.value.infoData.city = await useZipCheck(itemInfo.value.infoData.zip)
 }
@@ -108,7 +99,7 @@ setupPage()
         Erstellen
       </UButton>
       <UButton
-          @click="cancelEditorCreate"
+          @click="itemInfo ? router.push(`/customers/show/${itemInfo.id}`) : router.push(`/customers`)"
           color="red"
           class="ml-2"
           v-if="mode === 'edit' || mode === 'create'"
diff --git a/pages/index.vue b/pages/index.vue
index 7118afe..77d32ba 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,13 +20,14 @@
         >
           <p v-for="time in dataStore.getStartedWorkingTimes()"><UIcon name="i-heroicons-check"/>{{dataStore.getProfileById(time.profile).fullName}}</p>
         </UDashboardCard>
-<!--        <UDashboardCard
+<!--TODO: Fix Card Table overflowing        <UDashboardCard
           title="Offene Aufgaben"
           v-if="dataStore.getOpenTasksCount > 0"
           class="w-1/2 h-1/2"
         >
           <UTable
             :rows="dataStore.tasks.filter(i => i.categorie !== 'Erledigt' && (i.profile === dataStore.activeProfile.id ||!i.profile))"
+            @select="(row) => router.push(`/tasks/show/${row.id}`)"
             :columns="[
                 {
                   key: 'categorie',
@@ -36,7 +37,13 @@
                   label: 'Name'
                 },
             ]"
-          ></UTable>
+          >
+            <template #categorie-data="{row}">
+              <span v-if="row.categorie === 'Dringend'" class="text-rose-500">{{row.categorie}}</span>
+              <span v-else-if="row.categorie === 'In Bearbeitung'" class="text-primary-500">{{row.categorie}}</span>
+              <span v-else>{{row.categorie}}</span>
+            </template>
+          </UTable>
         </UDashboardCard>-->
 
       </UDashboardPanelContent>
@@ -51,6 +58,7 @@ definePageMeta({
 
 const dataStore = useDataStore()
 const toast = useToast()
+const router = useRouter()
 
 const { isNotificationsSlideoverOpen } = useDashboard()
 const items = [[{
diff --git a/pages/tasks/[mode]/[[id]].vue b/pages/tasks/[mode]/[[id]].vue
index e03ae88..7b7fc3c 100644
--- a/pages/tasks/[mode]/[[id]].vue
+++ b/pages/tasks/[mode]/[[id]].vue
@@ -9,8 +9,6 @@ const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
 
-let currentItem = ref(null)
-
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
@@ -22,11 +20,9 @@ const categories = ["Offen", "In Bearbeitung", "Dringed", "Erledigt"]
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem.value = dataStore.getTaskById(Number(useRoute().params.id))
+    itemInfo.value = dataStore.getTaskById(Number(useRoute().params.id))
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem.value
-
   if(mode.value === "create") {
     let query = route.query
     if(query.project) itemInfo.value.project = Number(query.project)
@@ -34,17 +30,17 @@ const setupPage = () => {
 
   }
 
-  if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
+  if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 }
 
 
 const editItem = async () => {
-  router.push(`/tasks/edit/${currentItem.value.id}`)
+  router.push(`/tasks/edit/${itemInfo.value.id}`)
 }
 
 const cancelEditorCreate = () => {
-  if(currentItem.value) {
-    router.push(`/tasks/show/${currentItem.value.id}`)
+  if(itemInfo.value) {
+    router.push(`/tasks/show/${itemInfo.value.id}`)
   } else {
     router.push(`/tasks/`)
   }
@@ -55,7 +51,23 @@ setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Aufgabe erstellen' : 'Aufgabe bearbeiten')">
+  <UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Aufgabe erstellen' : 'Aufgabe bearbeiten')">
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/tasks`)"
+      >
+        Aufgaben
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          :class="['text-xl','font-medium'/*, ... itemInfo.categorie === 'Erledigt' ? ['text-primary'] : ['text-rose-500']*/]"
+      >{{itemInfo ? `Aufgabe: ${itemInfo.name}` : (mode === 'create' ? 'Aufgabe erstellen' : 'Aufgabe bearbeiten')}}</h1>
+      
+    </template>
     <template #right>
       <UButton
           v-if="mode === 'edit'"
@@ -87,7 +99,7 @@ setupPage()
   </UDashboardNavbar>
   <UTabs
       :items="[{label: 'Informationen'},{label: 'Logbuch'}]"
-      v-if="currentItem && mode === 'show'"
+      v-if="itemInfo && mode === 'show'"
       class="p-5"
   >
     <template #item="{item}">
@@ -96,17 +108,17 @@ setupPage()
 
 
           <div class="truncate">
-            <p>Kategorie: {{currentItem.categorie}}</p>
-            <p v-if="currentItem.project">Projekt: <nuxt-link :to="`/projects/show/${currentItem.project}`">{{dataStore.getProjectById(currentItem.project).name}}</nuxt-link></p>
-            <p>Beschreibung: <br><pre v-html="currentItem.description"></pre></p>
+            <p>Kategorie: {{itemInfo.categorie}}</p>
+            <p v-if="itemInfo.project">Projekt: <nuxt-link :to="`/projects/show/${itemInfo.project}`">{{dataStore.getProjectById(itemInfo.project).name}}</nuxt-link></p>
+            <p>Beschreibung: <br><pre v-html="itemInfo.description"></pre></p>
           </div>
 
         </div>
         <div v-else-if="item.label === 'Logbuch'">
           <HistoryDisplay
               type="task"
-              v-if="currentItem"
-              :element-id="currentItem.id"
+              v-if="itemInfo"
+              :element-id="itemInfo.id"
           />
         </div>
       </UCard>