Add previous page functionality to deployment index

This commit adds the functionality to navigate to the previous page in the deployment index. It includes changes to the `Index.php` and `index.blade.php` files.
This commit is contained in:
Andras Bacsai 2024-01-29 13:06:26 +01:00
parent b56c7c34cb
commit de3a7b6eca
2 changed files with 42 additions and 6 deletions

View File

@ -15,6 +15,7 @@ class Index extends Component
public int $skip = 0;
public int $default_take = 40;
public bool $show_next = false;
public bool $show_prev = false;
public ?string $pull_request_id = null;
protected $queryString = ['pull_request_id'];
public function mount()
@ -60,15 +61,30 @@ public function reload_deployments()
{
$this->load_deployments();
}
public function previous_page(?int $take = null)
{
public function load_deployments(int|null $take = null)
if ($take) {
$this->skip = $this->skip - $take;
}
$this->skip = $this->skip - $this->default_take;
if ($this->skip < 0) {
$this->show_prev = false;
$this->skip = 0;
}
$this->load_deployments();
}
public function next_page(?int $take = null)
{
if ($take) {
$this->skip = $this->skip + $take;
}
$take = $this->default_take;
['deployments' => $deployments, 'count' => $count] = $this->application->deployments($this->skip, $take);
$this->show_prev = true;
$this->load_deployments();
}
public function load_deployments()
{
['deployments' => $deployments, 'count' => $count] = $this->application->deployments($this->skip, $this->default_take);
$this->deployments = $deployments;
$this->deployments_count = $count;
$this->show_pull_request_only();

View File

@ -6,9 +6,29 @@
@if ($skip == 0) wire:poll.5000ms='reload_deployments' @endif>
<div class="flex items-end gap-2 pt-4">
<h2>Deployments <span class="text-xs">({{ $deployments_count }})</span></h2>
@if ($show_prev)
<x-forms.button wire:click="previous_page({{ $default_take }})"><svg class="w-6 h-6" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m14 6l-6 6l6 6z" />
</svg></x-forms.button>
@else
<x-forms.button disabled><svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m14 6l-6 6l6 6z" />
</svg></x-forms.button>
@endif
@if ($show_next)
<x-forms.button wire:click="load_deployments({{ $default_take }})">Next Page
</x-forms.button>
<x-forms.button wire:click="next_page({{ $default_take }})"><svg class="w-6 h-6" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m10 18l6-6l-6-6z" />
</svg></x-forms.button>
@else
<x-forms.button disabled><svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m10 18l6-6l-6-6z" />
</svg></x-forms.button>
@endif
</div>
<form class="flex items-end gap-2">