Many Changes

Introduced Plants
Some Polishing
Some Resources got Query Params
Extended GlobalSearch.vue
Removed Jobs

spaces/pages/projects/index.vue

@@ -1,63 +1,28 @@
 <template>
-  <div id="main">
-    <UButton @click="showCreateProject = true">+ Projekt</UButton>
-    <UModal v-model="showCreateProject">
-      <UCard>
-        <template #header>
-          Projekt erstellen
-        </template>
+  <InputGroup>
+    <UButton @click="router.push(`/projects/create/`)">+ Projekt</UButton>
 
-        <UFormGroup
-            label="Name:"
-        >
-          <UInput
-              v-model="createProjectData.name"
-          />
-        </UFormGroup>
-        <UFormGroup
-            label="Kunde:"
-        >
-          <USelectMenu
-              v-model="createProjectData.customer"
-              :options="dataStore.customers"
-              option-attribute="name"
-              value-attribute="id"
-              searchable
-              :search-attributes="['name']"
-          />
-        </UFormGroup>
-        <UFormGroup
-            label="Notizen:"
-        >
-          <UTextarea
-              v-model="createProjectData.notes"
-          />
-        </UFormGroup>
-
-        <template #footer>
-          <UButton
-              @click="createProject"
-          >
-            Erstellen
-          </UButton>
-        </template>
-      </UCard>
-    </UModal>
-    <!-- TODO: USelect im Modal anpassen -->
-    <UTable
-        :rows="dataStore.projects"
-        :columns="projectColumns"
-        @select="selectProject"
-
-    >
-      <template #customer-data="{row}">
-        {{dataStore.customers.find(customer => customer.id == row.customer ) ? dataStore.customers.find(customer => customer.id == row.customer ).name : row.id}}
-      </template>
+    <UInput
+        v-model="searchString"
+        placeholder="Suche..."
+    />
+  </InputGroup>
 
 
-    </UTable>
-  </div>
 
+  <UTable
+      :rows="filteredRows"
+      @select="selectItem"
+      :columns="itemColumns"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+  >
+    <template #customer-data="{row}">
+      {{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ""}}
+    </template>
+    <template #plant-data="{row}">
+      {{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : ""}}
+    </template>
+  </UTable>
 </template>
 
 <script setup>
@@ -65,78 +30,57 @@
 definePageMeta({
   middleware: "auth"
 })
-
 const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const router = useRouter()
 
-const projectColumns = [
+const itemColumns = [
   {
-    key: 'measure',
-    label: "Gewerk",
-    sortable: true
-  },
-  {
-    key: 'name',
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "customer",
-    label: "Kundennummer",
-    sortable: true
+    key: "measure",
+    label: "Gewerk"
+  },{
+    key: "name",
+    label: "Name"
   },
   {
     key: "notes",
     label: "Notizen",
     sortable: true
+  },
+  {
+    key: "customer",
+    label: "Kunde",
+    sortable: true
+  },
+  {
+    key: "plant",
+    label: "Anlage",
+    sortable: true
   }
 ]
 
-const selectProject = (project) => {
-  router.push(`/projects/${project.id} `)
+const selectItem = (item) => {
+  console.log(item)
+  router.push(`/projects/show/${item.id} `)
 }
 
-const showCreateProject = ref(false)
-const createProjectData = ref({
-  phases: []
+const searchString = ref('')
+
+const filteredRows = computed(() => {
+  if(!searchString.value) {
+    return dataStore.projects
+  }
+
+  return dataStore.projects.filter(product => {
+    return Object.values(product).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
 })
 
-let selectedItem = ref({})
-
-const selectItem = (item) => {
-  selectedItem.value = item
-  console.log(item)
-}
-
-const createProject = async () => {
-  const {data,error} = await supabase
-      .from("projects")
-      .insert([createProjectData.value])
-      .select()
-
-  if(error) console.log(error)
-
-  showCreateProject.value = false
-  createProjectData.value = {phases: []}
-  dataStore.fetchProjects()
-
-
-}
 
 </script>
 
 <style scoped>
-/*#main {
-  display: flex;
-  flex-direction: row;
-}
-#left {
-  width: 25vw;
-}
 
-#right {
-  width: 60vw;
-  padding-left: 3vw;
-}*/
 </style>