Changes

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>