From 286de46e3dad829732c096577b35ce1cf0462e65 Mon Sep 17 00:00:00 2001
From: chris <christiansteinle@arcor.de>
Date: Thu, 13 Feb 2025 17:41:39 +0100
Subject: [PATCH] Make incoming invoices searchable.

---
 lang/de/incoming.php                     |  1 +
 resources/views/incoming/index.blade.php | 56 ++++++++++++++++++++----
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/lang/de/incoming.php b/lang/de/incoming.php
index d502a68..1a43e01 100644
--- a/lang/de/incoming.php
+++ b/lang/de/incoming.php
@@ -12,6 +12,7 @@ return [
     */
 
     'Incoming' => 'Eingang',
+    'Search invoice' => 'Rechnung suchen',
     'Add new invoice' => 'Neue Eingangsrechnung manuell anlegen',
     'Add new invoice by clicking add' => 'Neue Eingangsrechnung durch Klick auf "Anlegen" erstellen. Die Daten zur Rechnung müssen händisch eingegeben werden.',
     'Upload new invoice' => 'Neue Eingangsrechnung hochladen',
diff --git a/resources/views/incoming/index.blade.php b/resources/views/incoming/index.blade.php
index d198ba8..b148709 100644
--- a/resources/views/incoming/index.blade.php
+++ b/resources/views/incoming/index.blade.php
@@ -23,7 +23,9 @@
                                 {{ __("incoming.Add new invoice by clicking add") }}
                             </p>
                         </header>
-                        <a class="mt-6 inline-block" href="{{ route('incoming.create') }}"><x-primary-button>{{ __('form.Add') }}</x-primary-button></a>
+                        <a class="mt-6 inline-block" href="{{ route('incoming.create') }}">
+                            <x-primary-button>{{ __('form.Add') }}</x-primary-button>
+                        </a>
                     </section>
                     <section class="w-1/2">
                         <header>
@@ -35,7 +37,9 @@
                                 {{ __("incoming.Upload new xml invoice by clicking upload") }}
                             </p>
                         </header>
-                        <a class="mt-6 inline-block" href="{{ route('incoming.upload') }}"><x-primary-button>{{ __('form.Upload') }}</x-primary-button></a>
+                        <a class="mt-6 inline-block" href="{{ route('incoming.upload') }}">
+                            <x-primary-button>{{ __('form.Upload') }}</x-primary-button>
+                        </a>
                     </section>
                 </div>
             </div>
@@ -47,11 +51,26 @@
                             <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                 {{ __('incoming.Existing invoices') }}
                             </h2>
-                            <div class="flex flex-row space-x-4 items-center mt-4">
-                                <x-input-label for="from" :value="__('invoice.From')"/>
-                                <x-text-input type="date" id="from" name="from" x-model="from" x-on:change="fetchInvoices()"/>
-                                <x-input-label for="end" :value="__('invoice.End')"/>
-                                <x-text-input type="date" id="end" name="end" x-model="end" x-on:change="fetchInvoices()"/>
+                            <div class="grid grid-cols-2">
+                                <div class="flex flex-row space-x-4 items-center mt-4">
+                                    <x-input-label for="from" :value="__('invoice.From')"/>
+                                    <x-text-input type="date" id="from" name="from" x-model="from"
+                                                  x-on:change="fetchInvoices()"/>
+                                    <x-input-label for="end" :value="__('invoice.End')"/>
+                                    <x-text-input type="date" id="end" name="end" x-model="end"
+                                                  x-on:change="fetchInvoices()"/>
+                                </div>
+                                <div class="flex flex-row items-center gap-8">
+                                    <x-input-label for="search_invoice" :value="__('common.Search')"/>
+                                    <x-text-input id="search_invoice" name="search_invoice" type="text"
+                                                  class="mt-1 block w-full"
+                                                  x-ref="search_invoice"
+                                                  autofocus
+                                                  placeholder="{{ __('incoming.Search invoice') }}"
+                                                  x-on:keydown.window.prevent.slash="$refs.search_invoice.focus()"
+                                                  x-model="search_invoice"/>
+                                </div>
+
                             </div>
                         </header>
 
@@ -63,9 +82,10 @@
                             <div class="w-1/12 font-bold border-b-2 text-right">{{ __('common.Paid at') }}</div>
                         </summary>
 
-                        <template x-for="invoice in invoices">
+                        <template x-for="invoice in getFilteredInvoices()">
                             <details class="even:bg-gray-100 odd:bg-white hover:bg-gray-400">
-                                <summary class="cursor-pointer flex flex-row w-full" @click="window.location.href='/incoming/' + invoice.id + '/edit';">
+                                <summary class="cursor-pointer flex flex-row w-full"
+                                         @click="window.location.href='/incoming/' + invoice.id + '/edit';">
                                     <div class="w-1/3" x-text="invoice.invoice_number"></div>
                                     <div class="w-1/3" x-text="invoice.supplier.name"></div>
                                     <div class="w-1/6 text-right" x-text="invoice.gross + ' €'"></div>
@@ -108,6 +128,8 @@
             from: "{{ $first }}",
             end: "{{ $last }}",
             invoices: [],
+            search_invoice: '',
+
 
             init() {
                 this.fetchInvoices();
@@ -125,6 +147,22 @@
                     })
             },
 
+            getFilteredInvoices() {
+                if (this.search_invoice === '') {
+                    return this.invoices;
+                }
+                return this.invoices.filter((invoice) => {
+                    return invoice.supplier.name
+                            .replace(/ /g, '')
+                            .toLowerCase()
+                            .includes(this.search_invoice.replace(/ /g, '').toLowerCase())
+                        || invoice.invoice_number
+                            .replace(/ /g, '')
+                            .toLowerCase()
+                            .includes(this.search_invoice.replace(/ /g, '').toLowerCase())
+                });
+            },
+
             calculateSum() {
                 this.net = 0;
                 this.gross = 0;