Some Changes

pages/services/[mode]/[[id]].vue

@@ -3,14 +3,28 @@ definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  'backspace': () => {
+    router.push("/services")
+  },
+  '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 )
 
-let currentItem = ref(null)
-
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
@@ -18,30 +32,20 @@ const itemInfo = ref({
     tags: []
 })
 
+const openTab = ref(0)
+
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem.value = dataStore.getServiceById(Number(useRoute().params.id))
-  }
-
-  if(mode.value === "edit") itemInfo.value = currentItem.value
-}
-
-const cancelEditorCreate = () => {
-  if(currentItem.value) {
-    router.push(`/services/show/${currentItem.value.id}`)
-  } else {
-    router.push(`/services/`)
+    itemInfo.value = dataStore.getServiceById(Number(useRoute().params.id))
   }
 }
 
-
-
 setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Leistung erstellen' : 'Leistung bearbeiten')">
+  <UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Leistung erstellen' : 'Leistung bearbeiten')">
     <template #right>
       <UButton
           v-if="mode === 'edit'"
@@ -56,7 +60,7 @@ setupPage()
         Erstellen
       </UButton>
       <UButton
-          @click="cancelEditorCreate"
+          @click="itemInfo.value ? router.push(`/services/show/${itemInfo.value.id}`) : router.push(`/services/`)"
           color="red"
           class="ml-2"
           v-if="mode === 'edit' || mode === 'create'"
@@ -65,7 +69,7 @@ setupPage()
       </UButton>
       <UButton
           v-if="mode === 'show'"
-          @click="router.push(`/services/edit/${currentItem.id}`)"
+          @click="router.push(`/services/edit/${itemInfo.id}`)"
       >
         Bearbeiten
       </UButton>
@@ -75,6 +79,7 @@ setupPage()
     :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Dokumente'}]"
     v-if="mode === 'show'"
     class="p-5"
+    v-model="openTab"
   >
     <template #item="{item}">
       <UCard class="mt-5">
@@ -82,9 +87,9 @@ setupPage()
           v-if="item.label === 'Informationen'"
         >
           <div class="truncate">
-            <p v-if="currentItem.sellingPrice">Verkaufspreis: {{String(Number(currentItem.sellingPrice).toFixed(2)).replace(".",",")}} €</p>
+            <p v-if="itemInfo.sellingPrice">Verkaufspreis: {{String(Number(itemInfo.sellingPrice).toFixed(2)).replace(".",",")}} €</p>
             <p>Beschreibung:</p>
-            <pre>{{currentItem.description}}</pre>
+            <pre>{{itemInfo.description}}</pre>
           </div>
 
 
@@ -94,14 +99,14 @@ setupPage()
         >
           <HistoryDisplay
               type="product"
-              v-if="currentItem"
-              :element-id="currentItem.id"
+              v-if="itemInfo"
+              :element-id="itemInfo.id"
           />
         </div>
         <div
           v-if="item.label === 'Bestand'"
         >
-          Bestand: {{dataStore.getStockByProductId(currentItem.id)}} {{dataStore.units.find(unit => unit.id === currentItem.unit) ? dataStore.units.find(unit => unit.id === currentItem.unit).name : ""}}
+          Bestand: {{dataStore.getStockByProductId(itemInfo.id)}} {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : ""}}
 
         </div>
         <div
@@ -110,12 +115,12 @@ setupPage()
           <Toolbar>
             <DocumentUpload
                 type="product"
-                :element-id="currentItem.id"
+                :element-id="itemInfo.id"
             />
           </Toolbar>
 
 
-          <DocumentList :documents="dataStore.getDocumentsByProductId(currentItem.id)"/>
+          <DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
         </div>
       </UCard>
     </template>