Merge pull request #12 from chrisrhymes/feature/pagination-views

Added pagination views and tests

README.md

@@ -26,6 +26,9 @@ This package also contains authentication views to use with [Laravel Fortify](ht
     * [Notification](#notification)
     * [Tabs](#tabs)
     * [Modal](#modal)
+* [Views](#views)
+    * [Pagination](#pagination)
+    * [Simple Pagination](#simple-pagination)
 * [Auth Views](#auth-views)
 * [Tests](#tests)
 
@@ -354,6 +357,36 @@ There are modal and modal-card components. Both require Alpine.js.
 </x-bbui::modal-card>
 ```
 
+## Views
+
+### Pagination
+
+The pagination view provides next, previous and a pagination list of page numbers. The page numbers are centered between the next and previous page buttons.
+
+You can use the pagination view for the package by setting the view in the `->links()` method, as shown below, or using other methods described in the [Laravel docs](https://laravel.com/docs/8.x/pagination#customizing-the-pagination-view). 
+
+```html
+@php($users = User::paginate())
+
+{{ $users->links('bbui::pagination') }}
+```
+
+For Livewire pagination, use the `bbui::livewire.pagination` view. This replaces the href with the relevant wire:click settings.
+
+### Simple Pagination
+
+The simple pagination view provides next and previous page buttons.
+
+You can use the simple pagination view for the package by setting the view in the `->links()` method, as shown below, or using other methods described in the [Laravel docs](https://laravel.com/docs/8.x/pagination#customizing-the-pagination-view).
+
+```html
+@php($users = User::paginate())
+
+{{ $users->links('bbui::simple-pagination') }}
+```
+
+For Livewire simple pagination, use the `bbui::livewire.simple-pagination` view. This replaces the href with the relevant wire:click settings.
+
 ## Auth Views
 
 If you use Laravel Fortify and want to make use of the package's authentication views then set the below in the boot() method of your `App\Providers\FortifyServiceProvider`

phpunit.xml

@@ -12,6 +12,7 @@
     </testsuite>
   </testsuites>
   <php>
+    <env name="DB_CONNECTION" value="testing"/>
     <env name="CACHE_DRIVER" value="array"/>
   </php>
 </phpunit>

resources/views/livewire/pagination.blade.php

@@ -0,0 +1,48 @@
+<div>
+    @if ($paginator->hasPages())
+        <nav class="pagination">
+
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <a class="pagination-previous" aria-disabled="true" disabled>
+                    @lang('pagination.previous')
+                </a>
+            @else
+                <a class="pagination-previous" wire:click="previousPage" wire:loading.attr="disabled" wire:key="previousPage">
+                    @lang('pagination.previous')
+                </a>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <a class="pagination-next" wire:click="nextPage" wire:loading.attr="disabled" wire:key="nextPage">
+                    @lang('pagination.next')
+                </a>
+            @else
+                <a class="pagination-next" aria-disabled="true" disabled>
+                    @lang('pagination.next')
+                </a>
+            @endif
+
+            <ul class="pagination-list">
+                @foreach ($elements as $element)
+
+                    @if (is_string($element))
+                        <li><span class="pagination-ellipsis">&hellip;</span></li>
+                    @endif
+
+                    @if (is_array($element))
+                        @foreach ($element as $page => $url)
+                            @if ($page == $paginator->currentPage())
+                                <li><a class="pagination-link is-current" aria-label="Goto page {{ $page }}">{{ $page }}</a></li>
+                            @else
+                                <li><a wire:click="goToPage({{ $page }})" wire:key="goToPage{{ $page }}" class="pagination-link" aria-label="Goto page {{ $page }}">{{ $page }}</a></li>
+                            @endif
+                        @endforeach
+                    @endif
+                @endforeach
+            </ul>
+
+        </nav>
+    @endif
+</div>

resources/views/livewire/simple-pagination.blade.php

@@ -0,0 +1,29 @@
+<div>
+    @if ($paginator->hasPages())
+        <nav class="pagination">
+
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <a class="pagination-previous" aria-disabled="true" disabled>
+                    @lang('pagination.previous')
+                </a>
+            @else
+                <a class="pagination-previous" wire:click="previousPage" wire:loading.attr="disabled" wire:key="previousPage">
+                    @lang('pagination.previous')
+                </a>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <a class="pagination-next" wire:click="nextPage" wire:loading.attr="disabled" wire:key="nextPage">
+                    @lang('pagination.next')
+                </a>
+            @else
+                <a class="pagination-next" aria-disabled="true" disabled>
+                    @lang('pagination.next')
+                </a>
+            @endif
+
+        </nav>
+    @endif
+</div>

resources/views/pagination.blade.php

@@ -0,0 +1,36 @@
+@if ($paginator->hasPages())
+    <nav class="pagination is-centered" role="navigation" aria-label="pagination">
+
+        @if ($paginator->onFirstPage())
+            <a class="pagination-previous" disabled>Previous</a>
+        @else
+            <a class="pagination-previous" href="{{ $paginator->previousPageUrl() }}">Previous</a>
+        @endif
+
+        @if ($paginator->hasMorePages())
+            <a class="pagination-next" href="{{ $paginator->nextPageUrl() }}">Next Page</a>
+        @else
+            <a class="pagination-next" disabled>Next Page</a>
+        @endif
+
+        <ul class="pagination-list">
+            @foreach ($elements as $element)
+
+                @if (is_string($element))
+                    <li><span class="pagination-ellipsis">&hellip;</span></li>
+                @endif
+
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li><a class="pagination-link is-current" aria-label="Goto page {{ $page }}">{{ $page }}</a></li>
+                        @else
+                            <li><a href="{{ $url }}" class="pagination-link" aria-label="Goto page {{ $page }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+        </ul>
+
+    </nav>
+@endif

resources/views/simple-pagination.blade.php

@@ -0,0 +1,17 @@
+@if ($paginator->hasPages())
+    <nav class="pagination is-centered" role="navigation" aria-label="pagination">
+
+        @if ($paginator->onFirstPage())
+            <a class="pagination-previous" disabled>Previous</a>
+        @else
+            <a class="pagination-previous" href="{{ $paginator->previousPageUrl() }}">Previous</a>
+        @endif
+
+        @if ($paginator->hasMorePages())
+            <a class="pagination-next" href="{{ $paginator->nextPageUrl() }}">Next Page</a>
+        @else
+            <a class="pagination-next" disabled>Next Page</a>
+        @endif
+
+    </nav>
+@endif

tests/DBTestCase.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Tests;
+
+use Tests\Models\User;
+
+class DBTestCase extends TestCase
+{
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        User::create([
+            'name' => 'Dave',
+            'email' => 'dave@example.com',
+            'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi',
+        ]);
+        User::create([
+            'name' => 'George',
+            'email' => 'george@example.com',
+            'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi',
+        ]);
+    }
+
+    protected function defineDatabaseMigrations()
+    {
+        $this->loadLaravelMigrations();
+    }
+}

tests/Models/User.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace Tests\Models;
+
+use Illuminate\Contracts\Auth\Authenticatable;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class User extends Model implements Authenticatable
+{
+    use HasFactory;
+
+    protected $table = 'users';
+
+    protected $guarded = [];
+
+    protected $fillable = ['id', 'name', 'email', 'password'];
+
+    public function getAuthIdentifierName()
+    {
+        return 'id';
+    }
+
+    public function getAuthIdentifier()
+    {
+        $name = $this->getAuthIdentifierName();
+
+        return $this->attributes[$name];
+    }
+
+    public function getAuthPassword()
+    {
+        return $this->attributes['password'];
+    }
+
+    public function getRememberToken()
+    {
+        return 'token';
+    }
+
+    public function setRememberToken($value)
+    {
+    }
+
+    public function getRememberTokenName()
+    {
+        return 'tokenName';
+    }
+}

tests/Views/PaginationTest.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Tests\Views;
+
+use Tests\DBTestCase;
+use Tests\Models\User;
+
+class PaginationTest extends DBTestCase
+{
+    /** @test */
+    public function it_renders_pagination()
+    {
+        $view = $this->blade(
+            '{{ $users->links("bbui::pagination") }}',
+            ['users' => User::paginate(1)]
+        );
+
+        $view->assertSee('<nav class="pagination is-centered" role="navigation" aria-label="pagination">', false);
+        $view->assertSee('Goto page 1');
+        $view->assertSee('Goto page 2');
+        $view->assertSee('pagination-previous');
+        $view->assertSee('pagination-next');
+    }
+
+    /** @test */
+    public function it_does_not_render_pagination_when_not_needed()
+    {
+        $view = $this->blade(
+            '{{ $users->links("bbui::pagination") }}',
+            ['users' => User::paginate(3)]
+        );
+
+        $view->assertDontSee('<nav class="pagination is-centered" role="navigation" aria-label="pagination">', false);
+    }
+}

tests/Views/SimplePaginationTest.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Tests\Views;
+
+use Tests\DBTestCase;
+use Tests\Models\User;
+
+class SimplePaginationTest extends DBTestCase
+{
+    /** @test */
+    public function it_renders_pagination()
+    {
+        $view = $this->blade(
+            '{{ $users->links("bbui::simple-pagination") }}',
+            ['users' => User::paginate(1)]
+        );
+
+        $view->assertSee('<nav class="pagination is-centered" role="navigation" aria-label="pagination">', false);
+        $view->assertDontSee('Goto page 1');
+        $view->assertDontSee('Goto page 2');
+        $view->assertSee('pagination-previous');
+        $view->assertSee('pagination-next');
+    }
+
+    /** @test */
+    public function it_does_not_render_pagination_when_not_needed()
+    {
+        $view = $this->blade(
+            '{{ $users->links("bbui::simple-pagination") }}',
+            ['users' => User::paginate(3)]
+        );
+
+        $view->assertDontSee('<nav class="pagination is-centered" role="navigation" aria-label="pagination">', false);
+    }
+}