Many Changes

spaces/pages/customers/index.vue

@@ -2,10 +2,19 @@
   <div id="main">
     <!-- TODO: Kontakte erstellen und dem Kunden zuweisen    -->
 
-    <UButton @click="router.push(`/customers/create/`)">+ Kunde</UButton>
+    <div class="flex items-center gap-1">
+      <UButton @click="router.push(`/customers/create/`)">+ Kunde</UButton>
+
+      <UInput
+          v-model="searchString"
+          placeholder="Suche..."
+      />
+    </div>
+
+
 
     <UTable
-        :rows="customers"
+        :rows="filteredRows"
         :columns="customerColumns"
         @select="selectCustomer"
 
@@ -20,6 +29,7 @@ definePageMeta({
   middleware: "auth"
 })
 
+
 const router = useRouter()
 const {customers } = storeToRefs(useDataStore())
 const mode = ref("show")
@@ -42,6 +52,21 @@ const selectCustomer = (customer) => {
   console.log(customer)
   router.push(`/customers/show/${customer.id} `)
 }
+
+
+const searchString = ref('')
+
+const filteredRows = computed(() => {
+  if(!searchString.value) {
+    return customers.value
+  }
+
+  return customers.value.filter(item => {
+    return Object.values(item).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
+})
 </script>
 
 <style scoped>