Make customers searchable.

lang/de/customer.php

@@ -13,6 +13,7 @@ return [
 
     'Customers' => 'Kunden',
     'Customer' => 'Kunde',
+    'Search customer' => 'Kunden suchen',
     'Add new customer' => 'Neuer Kunde',
     'Edit existing customer' => 'Bestehenden Kunden bearbeiten',
     'Edit existing address' => 'Bestehende Adresse bearbeiten',

resources/views/customer/index.blade.php

@@ -29,12 +29,26 @@
             <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                 <div class="max-w" x-data="customerForm()">
                     <section>
-                        <header>
+                        <header class="grid grid-cols-2">
                             <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                 {{ __('customer.Existing customers') }}
                             </h2>
+                            <div class="flex flex-row items-center gap-8">
+                                <x-input-label for="search_customer" :value="__('common.Search')"/>
+                                <x-text-input id="search_customer" name="search_customer" type="text"
+                                              class="mt-1 block w-full"
+                                              x-ref="search_customer"
+                                              autofocus
+                                              placeholder="{{ __('customer.Search customer') }}"
+                                              x-on:keydown.window.prevent.slash="$refs.search_customer.focus()"
+                                              x-model="search_customer"/>
+                            </div>
                         </header>
 
+                        <p class="text-red-600 font-bold" x-text="message" x-show="error"></p>
+                        <p x-show="success" x-transition
+                           class="text-sm text-green-600 dark:text-green-400">{{ __('form.Saved') }}</p>
+
                         <div class="flex flex-row mt-4">
                             <div class="w-11/12 grid grid-cols-3">
                                 <div class="font-bold border-b-2">{{ __('common.Name') }}</div>
@@ -44,7 +58,7 @@
                             <div class="w-1/12 border-b-2"></div>
                         </div>
 
-                        <template x-for="(customer, index) in customers">
+                        <template x-for="(customer, index) in getFilteredCustomers()">
                             <div class="even:bg-gray-100 odd:bg-white hover:bg-gray-400 flex flex-row">
                                 <div class="w-11/12 grid grid-cols-3"
                                      :class="(customer.deleted_at == null) ? 'cursor-pointer' : 'line-through';"
@@ -91,6 +105,7 @@
     function customerForm() {
         return {
             customers: [],
+            search_customer: '',
 
             success: false,
             error: false,
@@ -109,14 +124,26 @@
 
             },
 
+            getFilteredCustomers() {
+                if (this.search_customer === '') {
+                    return this.customers;
+                }
+                return this.customers.filter((customer) => {
+                    return customer.name
+                        .replace(/ /g, '')
+                        .toLowerCase()
+                        .includes(this.search_customer.replace(/ /g, '').toLowerCase())
+                });
+            },
             deleteCustomer(index) {
                 let vm = this;
-                axios.delete('/customer/' + this.customers[index].id)
+                let customer_key = Object.keys(this.customers).find(key => (this.customers[key].id == this.getFilteredCustomers()[index].id));
+                axios.delete('/customer/' + this.customers[customer_key].id)
                     .then(function (response) {
                         vm.error = false;
                         vm.success = true;
                         vm.message = '';
-                        vm.customers[index].deleted_at = 0;
+                        vm.customers[customer_key].deleted_at = 0;
                         window.setTimeout(function () {
                             vm.success = false;
                         }, 1000);
@@ -130,12 +157,13 @@
 
             restoreCustomer(index) {
                 let vm = this;
-                axios.get('/customer/' + this.customers[index].id + '/restore')
+                let customer_key = Object.keys(this.customers).find(key => (this.customers[key].id == this.getFilteredCustomers()[index].id));
+                axios.get('/customer/' + this.customers[customer_key].id + '/restore')
                     .then(function (response) {
                         vm.error = false;
                         vm.success = true;
                         vm.message = '';
-                        vm.customers[index].deleted_at = null;
+                        vm.customers[customer_key].deleted_at = null;
                         window.setTimeout(function () {
                             vm.success = false;
                         }, 1000);