Added HistoryDisplay.vue to Projects and Plants

Visual Restructure in Plants

spaces/pages/plants/[mode]/[[id]].vue

@@ -1,4 +1,6 @@
 <script setup>
+import HistoryDisplay from "~/components/HistoryDisplay.vue";
+
 definePageMeta({
   middleware: "auth"
 })
@@ -14,11 +16,17 @@ let currentItem = null
 
 //Working
 const mode = ref(route.params.mode || "show")
-const itemInfo = ref({
-  name: "",
-  customer: 0,
+const itemInfo = ref({})
 
-})
+const tabItems = [
+  {
+    label: "Informationen"
+  },{
+    label: "Projekte"
+  },{
+    label: "Aufgaben"
+  }
+]
 
 //Functions
 const setupPage = () => {
@@ -88,20 +96,47 @@ setupPage()
 </script>
 
 <template>
-  <UCard v-if="currentItem && mode == 'show'" class="h-full">
+  <UCard v-if="currentItem && mode == 'show'">
     <template #header>
       {{currentItem.name}}
     </template>
 
-    <InputGroup>
-      <UButton
-        @click="router.push(`/projects/create?plant=${currentItem.id}`)"
-      >
-        + Projekt
-      </UButton>
-    </InputGroup>
+    <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>
+      </template>
+    </UTabs>
+
+
+
+
 
-    {{currentItem}}
 
     <template #footer>
       <UButton
@@ -123,7 +158,7 @@ setupPage()
 
 
   </UCard>
-  <UCard v-else-if="mode === 'edit' || mode === 'create'" class="h-full">
+  <UCard v-else-if="mode === 'edit' || mode === 'create'">
     <template #header v-if="mode === 'edit'">
       {{itemInfo.name}}
     </template>
@@ -178,6 +213,12 @@ setupPage()
     </template>
 
   </UCard>
+
+  <HistoryDisplay
+      type="plant"
+      v-if="currentItem"
+      :element-id="currentItem.id"
+  />
 </template>
 
 <style scoped>