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

Build the stuff for payments.

Browse Source
This commit is contained in:
Christian Steinle
2025-01-16 15:34:10 +01:00
parent f120559e3b
commit dcedbc71c4
17 changed files with 670 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
resources/views/payment/create.blade.php Normal file
View File

@@ -0,0 +1,206 @@
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ __('invoice.Create new payment') }}
</h2>
</x-slot>
<div class="py-12" x-data="paymentForm()">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
<!-- Invoice data -->
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
<div class="max-w">
<section>
<header>
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('invoice.Select invoice') }}
</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
{{ __("invoice.Select your invoice for payment") }}
</p>
</header>
<div class="mt-8">
<template x-for="(invoice, index) in invoices" x-bind="invoices">
<div class="cursor-pointer grid grid-cols-4 even:bg-gray-100 odd:bg-white"
:class="invoice.id == invoice_id ? 'font-bold' : ''"
x-on:click="invoice_id = invoice.id;getPayments(index);">
<div x-text="invoice.number"></div>
<div x-text="invoice.customer.name"></div>
<div x-text="invoice.customer.email"></div>
<div x-text="invoice.sum + ' €'"></div>
</div>
</template>
</div>
</section>
</div>
</div>
<!-- Existing payments for selected invoice -->
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg" x-show="payments.length != 0">
<div class="max-w">
<section>
<header>
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
{{ __('invoice.Existing payments for invoice') }}
<span x-text="selected_invoice.number"></span>
</h2>
</header>
<template x-for="(payment, index) in payments">
<div class="w-1/2 grid grid-cols-2 even:bg-gray-100 odd:bg-white">
<div x-text="payment.date"></div>
<div x-text="payment.paid_amount + ' €'"></div>
</div>
</template>
</section>
</div>
</div>
<!-- Payment data -->
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg" x-show="invoice_id != 0">
<div class="max-w">
<section>
<header>
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('invoice.Payment for invoice') }}
<span x-text="selected_invoice.number"></span>
</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
{{ __("invoice.Enter your payment data") }}
</p>
</header>
<form class="mt-6 space-y-6" @submit.prevent="">
<p class="text-red-600 font-bold" x-text="message" x-show="error"></p>
<div>
<x-input-label :value="__('invoice.Payment status?')"/>
<div class="flex flex-row">
<x-input-label class="w-1/4" for="status_full" :value="__('invoice.Payment state full')"/>
<x-text-input id="status_full" name="status" type="radio" class="mt-1"
value="full" required autofocus autocomplete="name"
x-model="payment_data.status"/>
</div>
<div class="flex flex-row">
<x-input-label class="w-1/4" for="status_partial" :value="__('invoice.Payment state partial')"/>
<x-text-input id="status_partial" name="status" type="radio" class="mt-1"
value="partial" required autofocus autocomplete="name"
x-model="payment_data.status"/>
</div>
</div>
<div class="flex flex-row items-center">
<x-input-label class="w-1/4" for="payment_date" :value="__('invoice.Payment date')"/>
<x-text-input id="payment_date" name="payment_date" type="date" class="mt-1"
:value="old('payment_date')" required
x-model="payment_data.payment_date"/>
</div>
<div class="flex flex-row items-center">
<x-input-label class="w-1/4" for="paid_amount" :value="__('invoice.Payment amount')"/>
<x-text-input id="paid_amount" name="paid_amount" type="number" class="mt-1" step="0.01"
:value="old('paid_amount')" required
x-bind:disabled="payment_data.status == 'full'"
x-model="payment_data.paid_amount"/>
</div>
<div class="flex items-center gap-4">
<x-primary-button @click="submit">{{ __('form.Save') }}</x-primary-button>
</div>
</form>
</section>
</div>
</div>
</div>
</div>
</x-app-layout>
<script>
function paymentForm() {
return {
index: 0,
invoice_id: 0,
invoices: [],
payments: [],
selected_invoice: {},
number: '',
sum: 0,
payment_data: {
paid_amount: 0,
status: 'full',
payment_date: "{{ \Illuminate\Support\Facades\Date::now()->addDays(14)->format('Y-m-d') }}"
},
error: false,
message: '',
init() {
let vm = this;
axios.get('/invoice_open')
.then(function(response) {
vm.invoices = response.data;
}).catch(function (error) {
vm.error = true;
vm.message = error.response.data.message;
})
},
getPayments(index) {
this.index = index;
this.selected_invoice = this.invoices[index];
this.number = this.selected_invoice.number;
this.payment_data.invoice_id = this.selected_invoice.id;
let vm = this;
axios.get('/invoice/' + this.invoice_id + '/payment')
.then(function(response) {
vm.payments = response.data;
vm.calculateSum();
}).catch(function(error) {
vm.error = true;
vm.message = error.response.data.message;
})
},
calculateSum() {
this.sum = 0;
for (const [key, payment] of Object.entries(this.payments)) {
this.sum += parseFloat(payment.paid_amount);
}
this.sum = this.sum.toFixed(2)
this.payment_data.paid_amount = (this.selected_invoice.sum - this.sum).toFixed(2);
},
submit() {
let vm = this;
axios.post('/invoice/' + this.invoice_id + '/payment', this.payment_data)
.then(function(response) {
if (vm.payment_data.status === 'full') {
vm.invoice_id = 0;
vm.selected_invoice = {};
vm.invoices.splice(vm.index, 1);
vm.payments = [];
} else {
vm.getPayments(vm.index);
}
}).catch(function (error) {
vm.error = true;
vm.message = error.response.data.message;
})
}
}
}
</script>