Merge pull request #75 from andreich1980/dev-pagination

Pagination #19

Author: michaeldyrynda

.gitignore

@@ -0,0 +1,2 @@
+/.idea
+/vendor

README.md

@@ -25,6 +25,23 @@ A Laravel front-end scaffolding preset for [Tailwind CSS](https://tailwindcss.co
 
 The default `tailwind.config.js` configuration file included by this package simply uses the config from the Tailwind vendor files. Should you wish to make changes, you should remove the file and run `node_modules/.bin/tailwind init`, which will generate a fresh configuration file for you, which you are free to change to suit your needs.
 
+Add a new i18n string in the `resources/lang/XX/pagination.php` file for each language that your app uses:
+```php
+'previous' => '« Previous',
+'next' => 'Next »',
+'goto_page' => 'Goto page #:page', // Add this line
+```
+This should help with accessibility
+```html
+<li>
+    <a href="URL?page=2" class="..." 
+       aria-label="Goto page #2"
+    >
+        2
+    </a>
+</li>
+```
+
 ### Screenshots
 
 ![Welcome](/screenshots/welcome.png)
@@ -38,3 +55,6 @@ The default `tailwind.config.js` configuration file included by this package sim
 ![Dashboard](/screenshots/dashboard.png)
 
 ![Verify](/screenshots/verify.png)
+
+![Pagination](/screenshots/pagination-links.png)
+![Simple Pagination](/screenshots/simple-pagination-links.png)

screenshots/pagination-links.png

@@ -15,6 +15,7 @@ public static function install()
         static::updateStyles();
         static::updateBootstrapping();
         static::updateWelcomePage();
+        static::updatePagination();
         static::removeNodeModules();
     }
 
@@ -71,6 +72,13 @@ protected static function updateWelcomePage()
         copy(__DIR__.'/tailwindcss-stubs/resources/views/welcome.blade.php', resource_path('views/welcome.blade.php'));
     }
 
+    protected static function updatePagination()
+    {
+        (new Filesystem)->delete(resource_path('views/vendor/paginate'));
+
+        (new Filesystem)->copyDirectory(__DIR__.'/tailwindcss-stubs/resources/views/vendor/pagination', resource_path('views/vendor/pagination'));
+    }
+
     protected static function scaffoldAuth()
     {
         file_put_contents(app_path('Http/Controllers/HomeController.php'), static::compileControllerStub());

screenshots/simple-pagination-links.png

@@ -2,6 +2,7 @@
 
 namespace LaravelFrontendPresets\TailwindCssPreset;
 
+use Illuminate\Pagination\Paginator;
 use Illuminate\Support\ServiceProvider;
 use Illuminate\Foundation\Console\PresetCommand;
 
@@ -22,5 +23,9 @@ public function boot()
             $command->info('Tailwind CSS scaffolding with auth views installed successfully.');
             $command->info('Please run "npm install && npm run dev" to compile your fresh scaffolding.');
         });
+
+        Paginator::defaultView('pagination::default');
+
+        Paginator::defaultSimpleView('pagination::simple-default');
     }
 }

src/TailwindCssPreset.php

@@ -0,0 +1,69 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="Pagination Navigation">
+        <ul class="flex justify-center text-sm">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li aria-label="@lang('pagination.previous')">
+                    <span class="px-4 py-3 text-gray-500 block border border-r-0 border-gray-300 rounded-l" aria-hidden="true">&larr;</span>
+                </li>
+            @else
+                <li>
+                    <a href="{{ $paginator->previousPageUrl() }}"
+                       rel="prev"
+                       class="px-4 py-3 block text-blue-900 border border-r-0 border-gray-300 rounded-l hover:text-white hover:bg-blue-900 focus:outline-none focus:shadow-outline"
+                       aria-label="@lang('pagination.previous')"
+                    >
+                        &larr;
+                    </a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li aria-disabled="true">
+                        <span class="px-4 py-3 block text-gray-500 border border-r-0 border-gray-300">{{ $element }}</span>
+                    </li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li aria-current="page">
+                                <span class="px-4 py-3 block text-white bg-blue-900 border border-r-0 border-gray-300">{{ $page }}</span>
+                            </li>
+                        @else
+                            <li>
+                                <a href="{{ $url }}"
+                                   class="px-4 py-3 block text-blue-900 border border-r-0 border-gray-300 hover:text-white hover:bg-blue-900 focus:outline-none focus:shadow-outline"
+                                   aria-label="@lang('pagination.goto_page', ['page' => $page])"
+                                >
+                                    {{ $page }}
+                                </a>
+                            </li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li>
+                    <a href="{{ $paginator->nextPageUrl() }}"
+                       rel="next"
+                       class="px-4 py-3 block text-blue-900 border border-gray-300 rounded-r hover:text-white hover:bg-blue-900 focus:outline-none focus:shadow-outline"
+                       aria-label="@lang('pagination.next')"
+                    >
+                        &rarr;
+                    </a>
+                </li>
+            @else
+                <li aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span class="px-4 py-3 block text-gray-500 border border-gray-300 rounded-r" aria-hidden="true">&rarr;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif

src/TailwindCssPresetServiceProvider.php

@@ -0,0 +1,42 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="Pagination Navigation">
+        <ul class="flex justify-center">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li aria-disabled="true">
+                    <span class="px-4 py-3 block text-gray-500 border border-r-0 border-gray-300 rounded-l" aria-hidden="true">
+                        @lang('pagination.previous')
+                    </span>
+                </li>
+            @else
+                <li>
+                    <a href="{{ $paginator->previousPageUrl() }}"
+                       rel="prev"
+                       class="px-4 py-3 block text-blue-900 border border-r-0 border-gray-300 rounded-l hover:text-white hover:bg-blue-900 focus:outline-none focus:shadow-outline"
+                    >
+                        @lang('pagination.previous')
+                    </a>
+                </li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li>
+                    <a href="{{ $paginator->nextPageUrl() }}"
+                       rel="next"
+                       class="px-4 py-3 block text-blue-900 border border-gray-300 rounded-r hover:text-white hover:bg-blue-900 focus:outline-none focus:shadow-outline"
+                    >
+                        @lang('pagination.next')
+                    </a>
+                </li>
+            @else
+                <li aria-disabled="true">
+                    <span class="px-4 py-3 block text-gray-500 border border-gray-300 rounded-r">
+                        @lang('pagination.next')
+                    </span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
+