Added HistoryDisplay.vue to Projects and Plants

Visual Restructure in Plants

spaces/components/HistoryDisplay.vue

@@ -23,9 +23,13 @@ const historyItems = computed(() => {
   let items = []
 
   if(type === "customer") {
-    items = dataStore.getHistoryItemsByCustomer(elementId)
+    items = dataStore.historyItems.filter(i => i.customer === elementId)
   } else if(type === "vendor") {
-    items = dataStore.getHistoryItemsByVendor(elementId)
+    items = dataStore.historyItems.filter(i => i.vendor === elementId)
+  } else if(type === "project") {
+    items = dataStore.historyItems.filter(i => i.project === elementId)
+  } else if(type === "plant") {
+    items = dataStore.historyItems.filter(i => i.plant === elementId)
   }
 
   return items.reverse()
@@ -41,6 +45,12 @@ const addHistoryItem = async () => {
 
   if(type === "customer") {
     addHistoryItemData.value.customer = elementId
+  } else if(type === "vendor") {
+    addHistoryItemData.value.vendor = elementId
+  } else if(type === "project") {
+    addHistoryItemData.value.project = elementId
+  } else if(type === "plant") {
+    addHistoryItemData.value.plant = elementId
   }
 
 

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({
+const itemInfo = ref({})
-  name: "",
-  customer: 0,
 
-})
+const tabItems = [
+  {
+    label: "Informationen"
+  },{
+    label: "Projekte"
+  },{
+    label: "Aufgaben"
+  }
+]
 
 //Functions
 const setupPage = () => {
@@ -88,11 +96,17 @@ setupPage()
 </script>
 
 <template>
-  <UCard v-if="currentItem && mode == 'show'" class="h-full">
+  <UCard v-if="currentItem && mode == 'show'">
     <template #header>
       {{currentItem.name}}
     </template>
 
+    <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}`)"
@@ -101,7 +115,28 @@ setupPage()
             </UButton>
           </InputGroup>
 
-    {{currentItem}}
+          <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>
+
+
+
+
+
 
     <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>

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

@@ -1,5 +1,6 @@
 <script setup>
 import dayjs from "dayjs";
+import HistoryDisplay from "~/components/HistoryDisplay.vue";
 
 definePageMeta({
   middleware: "auth"
@@ -536,6 +537,12 @@ setupPage()
     </template>
 
   </UCard>
+
+  <HistoryDisplay
+      type="project"
+      v-if="currentItem"
+      :element-id="currentItem.id"
+  />
 </template>
 
 <style scoped>

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

@@ -14,11 +14,7 @@ let currentItem = null
 
 //Working
 const mode = ref(route.params.mode || "show")
-const itemInfo = ref({
+const itemInfo = ref({})
-  title: "",
-  customer: 0,
-
-})
 const categories = ["Offen", "In Bearbeitung", "Dringed", "Erledigt"]
 
 //Functions

spaces/stores/data.ts

@@ -265,14 +265,12 @@ export const useDataStore = defineStore('data', () => {
         return tasks.value.filter(item => item.project === projectId)
     })
 
-
+    const getTasksByPlantId = computed(() => (plantId:string) => {
-
+        return tasks.value.filter(item => item.plant === plantId)
-    const getHistoryItemsByCustomer = computed(() => (customerId:string) => {
-        return historyItems.value.filter(item => item.customer === customerId)
     })
 
-    const getHistoryItemsByVendor = computed(() => (vendorId:string) => {
+    const getProjectsByPlantId = computed(() => (plantId:string) => {
-        return historyItems.value.filter(item => item.vendor === vendorId)
+        return projects.value.filter(item => item.plant === plantId)
     })
 
     const getIncomingInvoicesByVehicleId = computed(() => (vehicleId:string) => {
@@ -519,10 +517,10 @@ export const useDataStore = defineStore('data', () => {
         getDocumentsByProjectId,
         getTimesByProjectId,
         getTasksByProjectId,
+        getTasksByPlantId,
+        getProjectsByPlantId,
         getMovementsBySpaceId,
         getStockByProductId,
-        getHistoryItemsByCustomer,
-        getHistoryItemsByVendor,
         getIncomingInvoicesByVehicleId,
         getEventTypes,
         getTimeTypes,