Introduced New Projecttypes and Phase Display

pages/projects/index.vue

@@ -26,7 +26,20 @@
       <UCheckbox
           label="Abgeschlossene anzeigen"
           v-model="showFinished"
+          class="mt-1"
       />
+      <USelectMenu
+          class="ml-3 w-36"
+        v-model="selectedTypes"
+        :options="projecttypes"
+        value-attribute="id"
+        option-attribute="name"
+        multiple
+      >
+        <template #label>
+          Typen
+        </template>
+      </USelectMenu>
     </template>
 
     <template #right>
@@ -60,6 +73,9 @@
       <span class="text-primary-500 font-bold" v-if="row === filteredRows[selectedItem]">{{row.name}}</span>
       <span v-else>{{row.name}}</span>
     </template>
+    <template #projecttype-data="{row}">
+      {{row.projecttype.name}}
+    </template>
     <template #phase-data="{row}">
       {{getActivePhaseLabel(row)}}
     </template>
@@ -117,9 +133,13 @@ const router = useRouter()
 
 const items = ref([])
 const selectedItem = ref(0)
+const projecttypes = ref([])
+const selectedTypes = ref([])
 
 const setupPage = async () => {
-  items.value = await useSupabaseSelect("projects","*, customer (name), plant(name)","projectNumber")
+  items.value = await useSupabaseSelect("projects","*, customer (name), plant(name), projecttype(name, id)","projectNumber")
+  projecttypes.value = await useSupabaseSelect("projecttypes","*")
+  selectedTypes.value = projecttypes.value.map(i => i.id)
 }
 
 setupPage()
@@ -129,6 +149,10 @@ const templateColumns = [
     key: "projectNumber",
     label: "Projektnummer"
   },
+  {
+    key: "projecttype",
+    label: "Typ"
+  },
   {
     key: "phase",
     label: "Phase"
@@ -198,10 +222,11 @@ const filteredRows = computed(() => {
     temp = temp.filter(i => i.phaseLabel !== "Abgeschlossen")
   }
 
+  temp = temp.filter(i => selectedTypes.value.includes(i.projecttype.id))
+
   if(!searchString.value) {
     return temp
   }
-
   return useSearch(searchString.value, temp)
 })
 </script>