Many Changes

spaces/pages/vendorinvoices/index.vue

@@ -1,73 +1,80 @@
 <template>
   <div id="main">
-    <div id="left">
-
-      <router-link to="/vendorinvoices/edit"><UButton>+ Lieferantenrechnung</UButton></router-link>
-
-
-
-      <a v-for="item in dataStore.getVendorInvoiceList" @click="selectItem(item)">
-        <UCard class="listItem">
-          <UBadge>{{item.id}}</UBadge> {{item.date}}
-        </UCard>
-      </a>
-
 
+    <div class="flex items-center gap-1">
+      <UButton @click="router.push(`/vendorinvoices/create/`)">+ Eingangsrechnung</UButton>
 
+      <UInput
+          v-model="searchString"
+          placeholder="Suche..."
+      />
     </div>
-    <div id="right">
-
-      <UCard v-if="selectedItem.id">
-        <template #header>
-          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.name}}
-        </template>
-        <UTable :rows="selectedItem.lineItems"></UTable>
-        {{selectedItem}}
 
 
-      </UCard>
-    </div>
+
+    <UTable
+        :rows="filteredRows"
+        :columns="itemColumns"
+        @select="selectItem"
+
+    />
+
+
+
   </div>
 </template>
 
 <script setup>
 
-import {useDataStore} from "~/stores/data.ts";
-import {storeToRefs} from "pinia"
+definePageMeta({
+  middleware: "auth"
+})
 
 
-const showCreateProject = ref(false)
-const showCreateCustomer = ref(false)
-const projectData = ref({})
+const router = useRouter()
+const {vendorInvoices } = storeToRefs(useDataStore())
+const mode = ref("show")
 
+const itemColumns = [
+  {
+    key: 'vendor',
+    label: "Lieferantennr.",
+    sortable: true
+  },
+  {
+    key: "reference",
+    label: "Referenz",
+    sortable: true
+  },
+  {
+    key: "date",
+    label: "Datum",
+    sortable: true
+  }
+]
 
-const dataStore = useDataStore()
-
-const {projects} = storeToRefs(dataStore)
-const {addCustomer} = dataStore
-const {addProject} = dataStore
-let selectedItem = ref({})
 
 const selectItem = (item) => {
-  selectedItem.value = item
   console.log(item)
+  router.push(`/vendorinvoices/show/${item.id} `)
 }
 
+
+const searchString = ref('')
+
+const filteredRows = computed(() => {
+  if(!searchString.value) {
+    return vendorInvoices.value
+  }
+
+  return vendorInvoices.value.filter(item => {
+    return Object.values(item).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
+})
 </script>
 
 <style scoped>
-#main {
-  display: flex;
-  flex-direction: row;
-}
-#left {
-  width: 25vw;
-}
-
-#right {
-  width: 60vw;
-  padding-left: 3vw;
-}
-
 
 </style>