ri-st/project
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Make invoices and payments searchable. Extend payments overview.

Browse Source
This commit is contained in:
Christian Steinle
2025-05-13 11:32:21 +02:00
parent e4238bfda6
commit 5deef877ba
3 changed files with 81 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/Models/Payment.php
View File

@@ -54,7 +54,7 @@ class Payment extends Model
*/ */
public function invoice(): BelongsTo public function invoice(): BelongsTo
{ {
return $this->belongsTo(Invoice::class); return $this->belongsTo(Invoice::class)->with(['customer']);
} }
} }

41
resources/views/invoice/index.blade.php
View File

@@ -36,11 +36,23 @@
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"> <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('invoice.Existing invoices') }} {{ __('invoice.Existing invoices') }}
</h2> </h2>
<div class="flex flex-row space-x-4 items-center mt-4"> <div class="grid grid-cols-2">
<x-input-label for="from" :value="__('invoice.From')"/> <div class="flex flex-row space-x-4 items-center mt-4">
<x-text-input type="date" id="from" name="from" x-model="from" x-on:change="fetchInvoices()"/> <x-input-label for="from" :value="__('invoice.From')"/>
<x-input-label for="end" :value="__('invoice.End')"/> <x-text-input type="date" id="from" name="from" x-model="from" x-on:change="fetchInvoices()"/>
<x-text-input type="date" id="end" name="end" x-model="end" 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> </div>
</header> </header>
@@ -53,7 +65,7 @@
<div class="w-1/12 font-bold border-b-2 text-right">{{ __('common.Created at') }}</div> <div class="w-1/12 font-bold border-b-2 text-right">{{ __('common.Created at') }}</div>
</summary> </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"> <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='/invoice/' + invoice.id;"> <summary class="cursor-pointer flex flex-row w-full" @click="window.location.href='/invoice/' + invoice.id;">
<div class="w-1/6" x-text="invoice.number"></div> <div class="w-1/6" x-text="invoice.number"></div>
@@ -96,6 +108,7 @@
from: "{{ $first }}", from: "{{ $first }}",
end: "{{ $last }}", end: "{{ $last }}",
invoices: [], invoices: [],
search_invoice: '',
sum: 0, sum: 0,
tax: 0, tax: 0,
@@ -115,6 +128,22 @@
}) })
}, },
getFilteredInvoices() {
if (this.search_invoice === '') {
return this.invoices;
}
return this.invoices.filter((invoice) => {
return invoice.customer.name
.replace(/ /g, '')
.toLowerCase()
.includes(this.search_invoice.replace(/ /g, '').toLowerCase())
|| invoice.number
.replace(/ /g, '')
.toLowerCase()
.includes(this.search_invoice.replace(/ /g, '').toLowerCase())
});
},
calculateSum() { calculateSum() {
this.sum = 0; this.sum = 0;
this.tax = 0; this.tax = 0;

58
resources/views/payment/index.blade.php
View File

@@ -35,28 +35,43 @@
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"> <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('invoice.Existing payments') }} {{ __('invoice.Existing payments') }}
</h2> </h2>
<div class="flex flex-row space-x-4 items-center mt-4"> <div class="grid grid-cols-2">
<x-input-label for="from" :value="__('invoice.From')"/> <div class="flex flex-row space-x-4 items-center mt-4">
<x-text-input type="date" id="from" name="from" x-model="from" x-on:change="fetchPayments()"/> <x-input-label for="from" :value="__('invoice.From')"/>
<x-input-label for="end" :value="__('invoice.End')"/> <x-text-input type="date" id="from" name="from" x-model="from" x-on:change="fetchPayments()"/>
<x-text-input type="date" id="end" name="end" x-model="end" x-on:change="fetchPayments()"/> <x-input-label for="end" :value="__('invoice.End')"/>
<x-text-input type="date" id="end" name="end" x-model="end" x-on:change="fetchPayments()"/>
</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> </div>
</header> </header>
<summary class="flex flex-row w-full mt-4"> <summary class="flex flex-row w-full mt-4">
<div class="w-1/4 font-bold border-b-2">{{ __('invoice.Invoice Number') }}</div> <div class="w-1/6 font-bold border-b-2">{{ __('invoice.Invoice Number') }}</div>
<div class="w-1/4 font-bold border-b-2">{{ __('common.Name') }}</div>
<div class="w-1/4 font-bold border-b-2">{{ __('invoice.State') }}</div> <div class="w-1/4 font-bold border-b-2">{{ __('invoice.State') }}</div>
<div class="w-1/4 text-right font-bold border-b-2 text-right">{{ __('invoice.Sum') }}</div> <div class="w-1/6 text-right font-bold border-b-2 text-right">{{ __('invoice.Sum') }}</div>
<div class="w-1/4 text-right font-bold border-b-2 text-right">{{ __('invoice.Paid at') }}</div> <div class="w-1/6 text-right font-bold border-b-2 text-right">{{ __('invoice.Paid at') }}</div>
</summary> </summary>
<template x-for="payment in payments"> <template x-for="payment in getFilteredInvoices()">
<details class="even:bg-gray-100 odd:bg-white hover:bg-gray-400"> <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='/payment/' + payment.id + '/edit';"> <summary class="cursor-pointer flex flex-row w-full" @click="window.location.href='/payment/' + payment.id + '/edit';">
<div class="w-1/4" x-text="payment.invoice.number"></div> <div class="w-1/6" x-text="payment.invoice.number"></div>
<div class="w-1/4" x-text="payment.invoice.customer.name"></div>
<div class="w-1/4" x-text="payment.localized_state"></div> <div class="w-1/4" x-text="payment.localized_state"></div>
<div class="w-1/4 text-right" x-text="payment.paid_amount + ' €'"></div> <div class="w-1/6 text-right" x-text="payment.paid_amount + ' €'"></div>
<div class="w-1/4 text-right" x-text="payment.date"></div> <div class="w-1/6 text-right" x-text="payment.date"></div>
</summary> </summary>
</details> </details>
</template> </template>
@@ -90,6 +105,7 @@
from: "{{ $first }}", from: "{{ $first }}",
end: "{{ $last }}", end: "{{ $last }}",
payments: [], payments: [],
search_invoice: '',
sum: 0, sum: 0,
tax: 0, tax: 0,
@@ -109,10 +125,26 @@
}) })
}, },
getFilteredInvoices() {
if (this.search_invoice === '') {
return this.payments;
}
return this.payments.filter((payment) => {
return payment.invoice.customer.name
.replace(/ /g, '')
.toLowerCase()
.includes(this.search_invoice.replace(/ /g, '').toLowerCase())
|| payment.invoice.number
.replace(/ /g, '')
.toLowerCase()
.includes(this.search_invoice.replace(/ /g, '').toLowerCase())
});
},
calculateSum() { calculateSum() {
this.sum = 0; this.sum = 0;
this.tax = 0; this.tax = 0;
for (const [key, payment] of Object.entries(this.payments)) { for (const [key, payment] of Object.entries(this.getFilteredInvoices())) {
this.sum += parseFloat(payment.paid_amount); this.sum += parseFloat(payment.paid_amount);
this.tax += payment.invoice.tax * payment.paid_amount / payment.invoice.sum; this.tax += payment.invoice.tax * payment.paid_amount / payment.invoice.sum;
} }