refactor: change paginator style and layout

app/Helpers/PaginatorHelper.php

@@ -2,28 +2,34 @@
 
 namespace App\Helpers;
 
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+
 class PaginatorHelper
 {
     /**
      * Provide an array of all the data needed to display a pagination.
      *
-     * @param  mixed  $eloquentCollection
+     * @param  LengthAwarePaginator  $paginator
      * @return array
      */
-    public static function getData($eloquentCollection): array
+    public static function getData(LengthAwarePaginator $paginator): array
     {
         return [
-            'count' => $eloquentCollection->count(),
-            'currentPage' => $eloquentCollection->currentPage(),
-            'firstItem' => $eloquentCollection->firstItem(),
-            'hasMorePages' => $eloquentCollection->hasMorePages(),
-            'lastItem' => $eloquentCollection->lastItem(),
-            'lastPage' => $eloquentCollection->lastPage(),
-            'nextPageUrl' => $eloquentCollection->nextPageUrl(),
-            'onFirstPage' => $eloquentCollection->onFirstPage(),
-            'perPage' => $eloquentCollection->perPage(),
-            'previousPageUrl' => $eloquentCollection->previousPageUrl(),
-            'total' => $eloquentCollection->total(),
+            'count' => $paginator->count(),
+            'currentPage' => $paginator->currentPage(),
+            'firstItem' => $paginator->firstItem(),
+            'firstPageUrl' => $paginator->url(1),
+            'hasMorePages' => $paginator->hasMorePages(),
+            'lastItem' => $paginator->lastItem(),
+            'lastPage' => $paginator->lastPage(),
+            'lastPageUrl' => $paginator->url($paginator->lastPage()),
+            'links' => $paginator->linkCollection()->toArray(),
+            'nextPageUrl' => $paginator->nextPageUrl(),
+            'onFirstPage' => $paginator->onFirstPage(),
+            'path' => $paginator->path(),
+            'perPage' => $paginator->perPage(),
+            'previousPageUrl' => $paginator->previousPageUrl(),
+            'total' => $paginator->total(),
         ];
     }
 }

resources/js/Components/ChevronLeft.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+    <path
+      fill-rule="evenodd"
+      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+      clip-rule="evenodd" />
+  </svg>
+</template>

resources/js/Components/ChevronRight.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+    <path
+      fill-rule="evenodd"
+      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+      clip-rule="evenodd" />
+  </svg>
+</template>

resources/js/Components/Pagination.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3';
+import ChevronLeft from '@/Components/ChevronLeft.vue';
+import ChevronRight from '@/Components/ChevronRight.vue';
+
+defineProps({
+  items: Object,
+  withSummary: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const commonClasses =
+  'relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 leading-5';
+const linkClasses =
+  'hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-700 focus:border-blue-300 focus:dark:border-blue-700 active:bg-gray-100 active:dark:bg-gray-900 active:text-gray-700 active:dark:text-gray-300 transition ease-in-out duration-150';
+</script>
+
+<template>
+  <nav
+    v-if="items.currentPage !== 1 || items.lastPage > 1"
+    role="navigation"
+    :aria-label="$t('Pagination Navigation')"
+    class="flex items-center justify-between">
+    <div class="flex flex-1 justify-between sm:hidden">
+      <span v-if="items.currentPage === 1" :class="[commonClasses, 'rounded-md', 'text-gray-500', 'cursor-default']">
+        <span v-html="$t('pagination.previous')"></span>
+      </span>
+      <Link
+        v-else
+        :href="items.previousPageUrl"
+        preserve-scroll
+        :class="[commonClasses, linkClasses, 'rounded-md', 'text-gray-700', 'dark:text-gray-300']">
+        <span v-html="$t('pagination.previous')"></span>
+      </Link>
+
+      <Link
+        v-if="items.lastPage > 1"
+        :href="items.nextPageUrl"
+        preserve-scroll
+        :class="[commonClasses, linkClasses, 'ml-3', 'rounded-md', 'text-gray-700', 'dark:text-gray-300']">
+        <span v-html="$t('pagination.next')"></span>
+      </Link>
+      <span v-else :class="[commonClasses, 'ml-3', 'rounded-md', 'text-gray-500', 'cursor-default']">
+        <span v-html="$t('pagination.next')"></span>
+      </span>
+    </div>
+
+    <div class="hidden sm:flex sm:flex-1 sm:flex-col sm:items-center sm:justify-between">
+      <p v-if="withSummary" class="mb-2 text-xs leading-5 text-gray-700 dark:text-gray-300">
+        <span v-if="items.firstItem">
+          {{
+            $t('Showing :first to :last of :total results', {
+              first: items.firstItem,
+              last: items.lastItem,
+              total: items.total,
+            })
+          }}
+        </span>
+        <span v-else>
+          {{
+            $t('Showing :count of :total results', {
+              count: items.data.length,
+              total: items.total,
+            })
+          }}
+        </span>
+      </p>
+
+      <div class="relative z-0 inline-flex rounded-md shadow-sm">
+        <span
+          v-if="items.currentPage === 1"
+          :class="[commonClasses, 'px-2', 'rounded-l-md', 'text-gray-500', 'focus:z-10', 'cursor-default']"
+          :aria-label="$t('pagination.previous')"
+          aria-hidden="true"
+          aria-disabled="true">
+          <ChevronLeft />
+        </span>
+
+        <Link
+          v-else
+          :href="items.previousPageUrl"
+          preserve-scroll
+          rel="prev"
+          :class="[
+            commonClasses,
+            linkClasses,
+            'px-2',
+            'rounded-l-md',
+            'text-gray-500',
+            'hover:text-gray-400',
+            'hover:dark:text-gray-600',
+            'focus:z-10',
+          ]"
+          :aria-label="$t('pagination.previous')">
+          <ChevronLeft />
+        </Link>
+
+        <template v-for="(link, id) in items.links" :key="id">
+          <span
+            v-if="link.url === null"
+            aria-disabled="true"
+            :class="[commonClasses, '-ml-px', 'text-gray-700', 'dark:text-gray-500', 'cursor-default']"
+            v-html="link.label">
+          </span>
+          <span
+            v-else-if="link.active"
+            aria-current="page"
+            :class="[commonClasses, '-ml-px', 'text-gray-500', 'bg-gray-100', 'dark:bg-gray-800', 'cursor-default']"
+            v-html="link.label">
+          </span>
+          <Link
+            v-else
+            :href="link.url"
+            preserve-scroll
+            :class="[commonClasses, linkClasses, '-ml-px', 'text-gray-700', 'dark:text-gray-300', 'focus:z-10']"
+            :aria-label="$t('Go to page :page', { page: link.label })">
+            <span v-html="link.label"></span>
+          </Link>
+        </template>
+
+        <Link
+          v-if="items.currentPage < items.lastPage"
+          :href="items.nextPageUrl"
+          preserve-scroll
+          rel="next"
+          :class="[
+            commonClasses,
+            linkClasses,
+            '-ml-px',
+            'px-2',
+            'rounded-r-md',
+            'text-gray-500',
+            'hover:text-gray-400',
+            'hover:dark:text-gray-600',
+            'focus:z-10',
+          ]"
+          :aria-label="$t('pagination.next')">
+          <ChevronRight />
+        </Link>
+        <span
+          v-else
+          :class="[
+            commonClasses,
+            linkClasses,
+            '-ml-px',
+            'px-2',
+            'rounded-r-md',
+            'text-gray-500',
+            'focus:z-10',
+            'cursor-default',
+          ]"
+          :aria-label="$t('pagination.next')"
+          aria-hidden="true"
+          aria-disabled="true">
+          <ChevronRight />
+        </span>
+      </div>
+    </div>
+  </nav>
+</template>

resources/js/Pages/Vault/Contact/Index.vue

@@ -72,18 +72,7 @@
             </ul>
 
             <!-- pagination -->
-            <div v-if="!moduleMode" class="flex justify-between text-center">
-              <inertia-link
-                v-show="paginator.previousPageUrl"
-                class="fl dib"
-                :href="paginator.previousPageUrl"
-                title="Previous">
-                &larr; {{ $t('app.previous') }}
-              </inertia-link>
-              <inertia-link v-show="paginator.nextPageUrl" class="fr dib" :href="paginator.nextPageUrl" title="Next">
-                {{ $t('app.next') }} &rarr;
-              </inertia-link>
-            </div>
+            <Pagination :items="paginator" />
           </div>
         </div>
       </div>
@@ -95,12 +84,14 @@
 import Layout from '@/Shared/Layout.vue';
 import PrettyLink from '@/Shared/Form/PrettyLink.vue';
 import Avatar from '@/Shared/Avatar.vue';
+import Pagination from '@/Components/Pagination.vue';
 
 export default {
   components: {
     Layout,
     PrettyLink,
     Avatar,
+    Pagination,
   },
 
   props: {

resources/js/Pages/Vault/Contact/Photos/Index.vue

@@ -107,7 +107,7 @@
         </div>
 
         <!-- pagination -->
-        <pagination :paginator="paginator" />
+        <Pagination :items="paginator" />
 
         <div
           v-if="localPhotos.length == 0"
@@ -124,7 +124,7 @@
 <script>
 import Layout from '@/Shared/Layout.vue';
 import PrettyButton from '@/Shared/Form/PrettyButton.vue';
-import Pagination from '@/Shared/Pagination.vue';
+import Pagination from '@/Components/Pagination.vue';
 import Uploadcare from '@/Components/Uploadcare.vue';
 
 export default {

resources/js/Pages/Vault/Files/Index.vue

@@ -100,18 +100,7 @@
             </ul>
 
             <!-- pagination -->
-            <div v-if="!moduleMode" class="flex justify-between text-center">
-              <inertia-link
-                v-show="paginator.previousPageUrl"
-                class="fl dib"
-                :href="paginator.previousPageUrl"
-                title="Previous">
-                &larr; {{ $t('app.previous') }}
-              </inertia-link>
-              <inertia-link v-show="paginator.nextPageUrl" class="fr dib" :href="paginator.nextPageUrl" title="Next">
-                {{ $t('app.next') }} &rarr;
-              </inertia-link>
-            </div>
+            <Pagination :items="paginator" />
 
             <!-- blank state -->
             <div
@@ -131,11 +120,13 @@
 <script>
 import Layout from '@/Shared/Layout.vue';
 import Avatar from '@/Shared/Avatar.vue';
+import Pagination from '@/Components/Pagination.vue';
 
 export default {
   components: {
     Layout,
     Avatar,
+    Pagination,
   },
 
   props: {

resources/js/Shared/Modules/Notes.vue

@@ -231,18 +231,7 @@
       </div>
 
       <!-- pagination -->
-      <div v-if="!moduleMode" class="flex justify-between text-center">
-        <inertia-link
-          v-show="paginator.previousPageUrl"
-          class="fl dib"
-          :href="paginator.previousPageUrl"
-          title="Previous">
-          &larr; Previous
-        </inertia-link>
-        <inertia-link v-show="paginator.nextPageUrl" class="fr dib" :href="paginator.nextPageUrl" title="Next">
-          Next &rarr;
-        </inertia-link>
-      </div>
+      <Pagination v-if="!moduleMode" :items="paginator" />
     </div>
 
     <!-- blank state -->
@@ -262,6 +251,7 @@ import TextInput from '@/Shared/Form/TextInput.vue';
 import TextArea from '@/Shared/Form/TextArea.vue';
 import Errors from '@/Shared/Form/Errors.vue';
 import Avatar from '@/Shared/Avatar.vue';
+import Pagination from '@/Components/Pagination.vue';
 
 export default {
   components: {
@@ -272,6 +262,7 @@ export default {
     TextArea,
     Errors,
     Avatar,
+    Pagination,
   },
 
   props: {