Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-07-09 03:14:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

improve loading states (#66)

Browse Source
This commit is contained in:
Benjamin Beganović 2024-07-09 04:02:54 +02:00 committed by GitHub
parent e63598271b
commit 18cd647e43
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/Livewire/Flow2/PaymentMethod.php
View File

@ -30,7 +30,7 @@ class PaymentMethod extends Component
public $amount = 0; public $amount = 0;
public function placeholder() public function placeholder()
{ {
return <<<'HTML' return <<<'HTML'
<div class="flex items-center justify-center min-h-screen"> <div class="flex items-center justify-center min-h-screen">
@ -42,9 +42,20 @@ class PaymentMethod extends Component
HTML; HTML;
} }
public function handleSelect(string $company_gateway_id, string $gateway_type_id, string $amount)
{
$this->isLoading = true;
$this->dispatch(
event: 'payment-method-selected',
company_gateway_id: $company_gateway_id,
gateway_type_id: $gateway_type_id,
amount: $amount,
);
}
public function mount() public function mount()
{ {
$this->variables = $this->getContext()['variables']; $this->variables = $this->getContext()['variables'];
$this->amount = array_sum(array_column($this->getContext()['payable_invoices'], 'amount')); $this->amount = array_sum(array_column($this->getContext()['payable_invoices'], 'amount'));
@ -52,10 +63,9 @@ class PaymentMethod extends Component
$this->methods = $this->getContext()['invitation']->contact->client->service()->getPaymentMethods($this->amount); $this->methods = $this->getContext()['invitation']->contact->client->service()->getPaymentMethods($this->amount);
if(count($this->methods) == 1) { if (count($this->methods) == 1) {
$this->dispatch('singlePaymentMethodFound', company_gateway_id: $this->methods[0]['company_gateway_id'], gateway_type_id: $this->methods[0]['gateway_type_id'], amount: $this->amount); $this->dispatch('singlePaymentMethodFound', company_gateway_id: $this->methods[0]['company_gateway_id'], gateway_type_id: $this->methods[0]['gateway_type_id'], amount: $this->amount);
} } else {
else {
$this->isLoading = false; $this->isLoading = false;
$this->dispatch('loadingCompleted'); $this->dispatch('loadingCompleted');
} }

2
app/Livewire/Flow2/RequiredFields.php
View File

@ -103,6 +103,8 @@ class RequiredFields extends Component
public function handleSubmit(array $data) public function handleSubmit(array $data)
{ {
$this->is_loading = true;
$rff = new RFFService( $rff = new RFFService(
fields: $this->fields, fields: $this->fields,
database: $this->getContext()['db'], database: $this->getContext()['db'],

30
resources/views/portal/ninja2020/flow2/payment-method.blade.php
View File

@ -1,26 +1,28 @@
<div class="flex flex-col p-4 rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden px-4 py-5 bg-white sm:gap-4 sm:px-6" <div class="flex flex-col p-4 rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden px-4 py-5 bg-white sm:gap-4 sm:px-6"
x-data="{ isLoading: @entangle('isLoading') }"> x-data="{ isLoading: @entangle('isLoading') }">
<svg x-show="isLoading" wire:loading class="animate-spin h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" <p class="font-semibold tracking-tight group flex items-center gap-2 text-lg">{{ ctrans('texts.payment_methods') }}
fill="none" viewBox="0 0 24 24"> </p>
<svg id="spinner" wire:loading class="animate-spin h-5 w-5 text-primary"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" <path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"> d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path> </path>
</svg> </svg>
<p class="font-semibold tracking-tight group flex items-center gap-2 text-lg">{{ ctrans('texts.payment_methods') }} @unless($isLoading)
</p> <div class="my-3 flex flex-col space-y-3">
@foreach($methods as $index => $method)
<div class="my-3 flex flex-col space-y-3"> <button wire:loading.remove
@foreach($methods as $index => $method) class="flex px-4 py-3 border rounded-lg lg:-mb-1 hover:shadow-sm transition duration-300"
<button wire:loading.remove wire:click="handleSelect('{{ $method['company_gateway_id'] }}', '{{ $method['gateway_type_id'] }}', '{{ $amount }}')"
class="flex px-4 py-3 border rounded-lg lg:-mb-1 hover:shadow-sm transition duration-300" <span>{{ $method['label'] }}</span>
@click="$wire.dispatch('payment-method-selected', { company_gateway_id: {{ $method['company_gateway_id'] }}, gateway_type_id: {{ $method['gateway_type_id'] }}, amount: {{ $amount }} })"> </button>
<span>{{ $method['label'] }}</span> @endforeach
</button> </div>
@endforeach @endunless
</div>
@script @script
<script> <script>