Simplify pagination

This commit is contained in:
Jonathan Reinink 2021-02-27 08:36:45 -05:00
parent 13ce803840
commit 6ea4d09092
6 changed files with 26 additions and 88 deletions

View File

@ -20,7 +20,7 @@ class ContactsController extends Controller
->orderByName()
->filter(Request::only('search', 'trashed'))
->paginate()
->transform(function ($contact) {
->through(function ($contact) {
return [
'id' => $contact->id,
'name' => $contact->name,

View File

@ -18,7 +18,15 @@ class OrganizationsController extends Controller
->orderBy('name')
->filter(Request::only('search', 'trashed'))
->paginate()
->only('id', 'name', 'phone', 'city', 'deleted_at'),
->through(function ($organization) {
return [
'id' => $organization->id,
'name' => $organization->name,
'phone' => $organization->phone,
'city' => $organization->city,
'deleted_at' => $organization->deleted_at,
];
}),
]);
}

View File

@ -2,10 +2,6 @@
namespace App\Providers;
use Illuminate\Pagination\LengthAwarePaginator;
use Illuminate\Pagination\UrlWindow;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\ServiceProvider;
use League\Glide\Server;
@ -18,12 +14,6 @@ class AppServiceProvider extends ServiceProvider
* @return void
*/
public function register()
{
$this->registerGlide();
$this->registerLengthAwarePaginator();
}
protected function registerGlide()
{
$this->app->bind(Server::class, function ($app) {
return Server::create([
@ -35,75 +25,13 @@ class AppServiceProvider extends ServiceProvider
});
}
protected function registerLengthAwarePaginator()
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
$this->app->bind(LengthAwarePaginator::class, function ($app, $values) {
return new class(...array_values($values)) extends LengthAwarePaginator {
public function only(...$attributes)
{
return $this->transform(function ($item) use ($attributes) {
return $item->only($attributes);
});
}
public function transform($callback)
{
$this->items->transform($callback);
return $this;
}
public function toArray()
{
return [
'data' => $this->items->toArray(),
'links' => $this->links(),
];
}
public function links($view = null, $data = [])
{
$this->appends(Request::all());
$window = UrlWindow::make($this);
$elements = array_filter([
$window['first'],
is_array($window['slider']) ? '...' : null,
$window['slider'],
is_array($window['last']) ? '...' : null,
$window['last'],
]);
return Collection::make($elements)->flatMap(function ($item) {
if (is_array($item)) {
return Collection::make($item)->map(function ($url, $page) {
return [
'url' => $url,
'label' => $page,
'active' => $this->currentPage() === $page,
];
});
} else {
return [
[
'url' => null,
'label' => '...',
'active' => false,
],
];
}
})->prepend([
'url' => $this->previousPageUrl(),
'label' => 'Previous',
'active' => false,
])->push([
'url' => $this->nextPageUrl(),
'label' => 'Next',
'active' => false,
]);
}
};
});
//
}
}

View File

@ -58,7 +58,7 @@
</tr>
</table>
</div>
<pagination :links="contacts.links" />
<pagination class="mt-6" :links="contacts.links" />
</div>
</template>

View File

@ -50,7 +50,7 @@
</tr>
</table>
</div>
<pagination :links="organizations.links" />
<pagination class="mt-6" :links="organizations.links" />
</div>
</template>

View File

@ -1,9 +1,11 @@
<template>
<div class="mt-6 -mb-1 flex flex-wrap">
<template v-for="(link, key) in links">
<div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded text-gray-400" :class="{ 'ml-auto': link.label === 'Next' }">{{ link.label }}</div>
<inertia-link v-else :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500" :class="{ 'bg-white': link.active, 'ml-auto': link.label === 'Next' }" :href="link.url">{{ link.label }}</inertia-link>
</template>
<div v-if="links.length > 3">
<div class="flex flex-wrap -mb-1">
<template v-for="(link, key) in links">
<div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded text-gray-400" v-html="link.label" />
<inertia-link v-else :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500" :class="{ 'bg-white': link.active }" :href="link.url" v-html="link.label" />
</template>
</div>
</div>
</template>