From 2a086f373c831946347dbd1b7c8615a70a95f0df Mon Sep 17 00:00:00 2001
From: fabianlinkflink <81305859+fabianlinkflink@users.noreply.github.com>
Date: Fri, 10 Jan 2025 16:56:31 +0100
Subject: [PATCH] Assembly and epd usage (#111)

*Combined assembly and epd

* Mixed Material usage supported
---
 .gitignore                                    |  1 +
 .../Mapping/MaterialMappingModal.vue          | 24 ++++++++++-----
 src/components/Mapping/MaterialTable.vue      |  3 +-
 src/components/Misc/SearchBar.vue             | 30 ++++++++++++++++---
 src/components/Navbar.vue                     |  2 +-
 5 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index faa6052..8d820d8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,4 @@ firebase.json
 .env.sentry-build-plugin
 package-lock.json
 serviceAccountKey.json
+codebase.md
diff --git a/src/components/Mapping/MaterialMappingModal.vue b/src/components/Mapping/MaterialMappingModal.vue
index 3160a2b..1283877 100644
--- a/src/components/Mapping/MaterialMappingModal.vue
+++ b/src/components/Mapping/MaterialMappingModal.vue
@@ -65,7 +65,7 @@
                   <!-- Search Bar and Table -->
                   <div class="relative mt-1 flex-1 px-4 sm:px-6">
                     <SearchBar
-                      :data="materials"
+                      :data="combinedMaterials"
                       :filterParam="productFilterParams"
                       :sortingParam="sortingParameters"
                       @update:data="handleFilteredData"
@@ -85,7 +85,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import {
   Dialog,
@@ -101,7 +101,7 @@ import MaterialTable from '@/components/Mapping/MaterialTable.vue'
 import SearchBar from '@/components/Misc/SearchBar.vue'
 
 import type { NestedGroup } from '@/models/filters'
-import type { Product } from '@/models/material'
+import type { Product, Assembly } from '@/models/material'
 import { useMaterialStore } from '@/stores/material'
 
 export default defineComponent({
@@ -121,7 +121,9 @@ export default defineComponent({
     const materialStore = useMaterialStore()
 
     const materials = storeToRefs(materialStore).materials
-    const filteredMaterial = ref<Product[]>([])
+    const assemblies = storeToRefs(materialStore).assemblies
+
+    const filteredMaterial = ref<(Product | Assembly)[]>([])
 
     const { selectedGroup } = storeToRefs(projectStore)
     const { mappingModalOpen} = storeToRefs(navStore)
@@ -141,8 +143,8 @@ export default defineComponent({
         displayName: 'Material Type',
       },
       {
-        paramName: 'unit',
-        displayName: 'Unit',
+        paramName: 'isAssembly',
+        displayName: 'Assembly',
       },
     ]
     const sortingParameters = [
@@ -161,15 +163,20 @@ export default defineComponent({
     ]
 
     const searchQuery = ref('')
-    // If no data selected or available show this instead, this should never happen so can remove from final version
+    // If no data selected or available show this instead, mostly for debug
     const emptyGroup: NestedGroup = {
       id: 'empty',
       name: 'No group selected',
       children: [],
       objects: [],
     }
+
+    const combinedMaterials = computed(() => [
+      ...materials.value,
+      ...assemblies.value,
+    ])
     
-    const handleFilteredData = (newData: Product[]) => {
+    const handleFilteredData = (newData: (Product | Assembly)[]) => {
       filteredMaterial.value = newData
     }
 
@@ -183,6 +190,7 @@ export default defineComponent({
       searchQuery,
       emptyGroup,
       materials,
+      combinedMaterials,
       filteredMaterial,
       productFilterParams,
       sortingParameters,
diff --git a/src/components/Mapping/MaterialTable.vue b/src/components/Mapping/MaterialTable.vue
index e3c5d94..afd6e89 100644
--- a/src/components/Mapping/MaterialTable.vue
+++ b/src/components/Mapping/MaterialTable.vue
@@ -58,7 +58,6 @@ import { useMaterialStore } from '@/stores/material'
 import type { Product, Assembly } from '@/models/material'
 
 // This component just shows the values of the material list, it does not modify it
-// TODO: Move this from props to store?
 export default defineComponent({
   name: 'MaterialTable',
   components: {
@@ -66,7 +65,7 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Array as () => Product[] | Assembly[],
+      type: Array as () => (Product | Assembly)[],
       required: true,
     },
   },
diff --git a/src/components/Misc/SearchBar.vue b/src/components/Misc/SearchBar.vue
index 7f9e574..c6185a3 100644
--- a/src/components/Misc/SearchBar.vue
+++ b/src/components/Misc/SearchBar.vue
@@ -100,6 +100,7 @@ import { getNestedPropertyValue } from '@/utils/material'
 
 import { Source } from '@/models/material'
 import { getEnumEntries } from '@/utils/dataUtils'
+import { isAssembly } from '@/utils/EPDUtils'
 
 import {
   Menu,
@@ -131,7 +132,7 @@ export default defineComponent({
   },
   props: {
     data: {
-      //This is set as Product Assembly since its used for that now, can be anything
+      //This is set as Product Assembly, can be both
       type: Array as () => (Product | Assembly)[],
       required: true,
     },
@@ -163,7 +164,6 @@ export default defineComponent({
       const optionsSet = new Set()
 
       // Manual check for source enum so we set name instead
-      // TODO: Make dynamic for all enums
       if (paramName === 'source') {
         return getEnumEntries(Source).map((entry) => ({
           label: entry.label,
@@ -172,6 +172,14 @@ export default defineComponent({
         }))
       }
 
+      // Check for Assembly filtering then we make custom entries
+      if (paramName === 'isAssembly') {
+        return [
+          { label: 'Assembly', value: 'assembly', selected: selectedFilters.value[paramName]?.includes('assembly') },
+          { label: 'Product', value: 'product', selected: selectedFilters.value[paramName]?.includes('product') },
+        ]
+      }
+
       props.data.forEach((item) => {
         const value = getNestedPropertyValue(item, paramName)
         if (value !== undefined) {
@@ -187,11 +195,12 @@ export default defineComponent({
     
     const filteredData = computed(() => {
       return props.data.filter((item) => {
-        // Common filtering logic
+        // Search logic
         const matchesSearch = item.name
           .toLowerCase()
           .includes(searchQuery.value.toLowerCase());
 
+        // Parameter matching logic
         const matchesFilters = Object.entries(selectedFilters.value).every(
           ([key, selectedOptions]) => {
             if (selectedOptions.length === 0) return true;
@@ -200,10 +209,23 @@ export default defineComponent({
             return selectedOptions.includes(value);
           }
         )
-        return matchesSearch && matchesFilters
+        
+        let isAssemblyMatch = true
+        // More custom check for assembly logic
+        if (selectedFilters.value.isAssembly) {
+          const itemType = isAssembly(item) ? 'assembly' : 'product'
+          isAssemblyMatch =
+            selectedFilters.value.isAssembly.length === 0 ||
+            selectedFilters.value.isAssembly.includes(itemType)
+        } 
+
+
+        return matchesSearch && matchesFilters && isAssemblyMatch
       })
     })
 
+    
+
     const sortedData = computed(() => {
       const dataToSort = [...filteredData.value]
       if (sorting.value.parameter) {
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index f67c66e..f268a36 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -38,7 +38,7 @@
                   step.name == navigationStore.activePage 
                     ? 'border-green-500 text-gray-900' 
                     : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700', 
-                    'inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium'
+                    'inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium cursor-pointer'
                 ]"
                 @click="handleNavigation(step)"
               >