pagination updated (#26)

shipsaas · Nov 4, 2023 · 433f59b · 433f59b
1 parent 8e232bf
commit 433f59b
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 45 deletions.
diff --git a/resources/js/console/components/Pagination/Pagination.vue b/resources/js/console/components/Pagination/Pagination.vue
@@ -1,59 +1,101 @@
 <template>
   <nav
-    class="-mx-2 -my-2 sm:-mx-6 lg:-mx-8 gap-2 flex items-center justify-between border-t border-gray-200 bg-white py-3"
+    class="-mx-2 sm:-mx-6 lg:-mx-8 gap-2 flex items-center justify-between bg-white py-3"
     aria-label="Pagination"
   >
     <div class="hidden sm:block pl-3">
       <p class="text-sm text-gray-700">
-        Showing
-        {{ ' ' }}
-        <span class="font-medium">{{ from }}</span>
-        {{ ' ' }}
-        to
-        {{ ' ' }}
-        <span class="font-medium">{{ to }}</span>
-        {{ ' ' }}
-        of
-        {{ ' ' }}
-        <span class="font-medium">{{ total }}</span>
+        <span class="font-medium">{{ totalRecords }}</span>
         {{ ' ' }}
         results
       </p>
     </div>
-    <div class="flex flex-1 justify-between sm:justify-end">
+    <div class="flex flex-1 gap-3 justify-between sm:justify-end">
+      <button
+        title="To first page"
+        class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:text-gray-400"
+        :disabled="current <= 1"
+        @click="$emit('goToPage', 1)"
+      >
+        <ForwardIcon class="w-6 rotate-180" />
+      </button>
       <button
+        v-if="current - 3 >= 1"
         class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:text-gray-400"
-        :disabled="from <= 1"
-        @click="$emit('prev')"
+        disabled
       >
-        Previous
+        ...
       </button>
       <button
-        class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:text-gray-400"
-        :disabled="to === total"
-        @click="$emit('next')"
+        v-if="current - 2 >= 1"
+        class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:text-gray-400"
+        @click="$emit('goToPage', current - 2)"
+      >
+        {{ current - 2 }}
+      </button>
+      <button
+        v-if="current - 1 >= 1"
+        class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:text-gray-400"
+        @click="$emit('goToPage', current - 1)"
+      >
+        {{ current - 1 }}
+      </button>
+      <button
+        disabled
+        class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:text-gray-400"
       >
-        Next
+        {{ current }}
+      </button>
+      <button
+        v-if="current + 1 <= totalPages"
+        class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:text-gray-400"
+        @click="$emit('goToPage', current + 1)"
+      >
+        {{ current + 1 }}
+      </button>
+      <button
+        v-if="current + 2 <= totalPages"
+        class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:text-gray-400"
+        @click="$emit('goToPage', current + 2)"
+      >
+        {{ current + 2 }}
+      </button>
+      <button
+        v-if="current + 3 <= totalPages"
+        class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:text-gray-400"
+        disabled
+      >
+        ...
+      </button>
+      <button
+        title="To last page"
+        class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:text-gray-400"
+        :disabled="current === totalPages"
+        @click="$emit('goToPage', totalPages)"
+      >
+        <ForwardIcon class="w-6" />
       </button>
     </div>
   </nav>
 </template>
 
 <script setup>
+import { ForwardIcon } from '@heroicons/vue/24/outline';
+
 defineProps({
-  total: {
+  totalPages: {
     type: Number,
     required: true,
   },
-  from: {
+  totalRecords: {
     type: Number,
     required: true,
   },
-  to: {
+  current: {
     type: Number,
     required: true,
   },
 });
 
-defineEmits(['next', 'prev']);
+defineEmits(['goToPage']);
 </script>
diff --git a/resources/js/console/components/Table/Table.vue b/resources/js/console/components/Table/Table.vue
@@ -57,7 +57,7 @@
                   v-for="(column, columnIdx) in columns"
                   :key="`record-column-${recordIdx}-${columnIdx}`"
                   :class="{
-                    'whitespace-nowrap text-sm font-medium text-gray-900': true,
+                    'whitespace-nowrap text-sm text-gray-900': true,
                     'py-4 pl-4 pr-3 sm:pl-3': recordIdx === 0,
                     'px-3 py-4': recordIdx > 0,
                     [column.contentClass]: !!column.contentClass,

diff --git a/resources/js/console/screens/DocumentTemplatesList/DocumentTemplatesListScreen.vue b/resources/js/console/screens/DocumentTemplatesList/DocumentTemplatesListScreen.vue
@@ -49,11 +49,10 @@
       <template #after-table>
         <Pagination
           v-if="paginationMeta"
-          :from="paginationMeta.from"
-          :to="paginationMeta.to"
-          :total="paginationMeta.total"
-          @next="loadRecords(page + 1)"
-          @prev="loadRecords(page - 1)"
+          :total-records="paginationMeta.total"
+          :total-pages="paginationMeta.last_page"
+          :current="page"
+          @go-to-page="loadRecords"
         />
       </template>
     </Table>
@@ -119,6 +118,8 @@ const loadRecords = async (forcePage) => {
 
   records.value = [...documentTemplates.data];
   paginationMeta.value = { ...documentTemplates.meta };
+
+  window.scrollTo({ top: 0, behavior: 'smooth' });
 };
 
 const onTemplateDeleted = () => loadRecords();

diff --git a/resources/js/console/screens/FilesList/FilesListScreen.vue b/resources/js/console/screens/FilesList/FilesListScreen.vue
@@ -9,11 +9,10 @@
       <template #after-table>
         <Pagination
           v-if="paginationMeta"
-          :from="paginationMeta.from"
-          :to="paginationMeta.to"
-          :total="paginationMeta.total"
-          @next="loadRecords(page + 1)"
-          @prev="loadRecords(page - 1)"
+          :total-records="paginationMeta.total"
+          :total-pages="paginationMeta.last_page"
+          :current="page"
+          @go-to-page="loadRecords"
         />
       </template>
     </Table>
@@ -80,6 +79,8 @@ const loadRecords = async (forcePage) => {
 
   records.value = [...data.data];
   paginationMeta.value = { ...data.meta };
+
+  window.scrollTo({ top: 0, behavior: 'smooth' });
 };
 
 loadRecords();

diff --git a/resources/js/console/screens/TranslationGroupsList/TranslationGroupsListScreen.vue b/resources/js/console/screens/TranslationGroupsList/TranslationGroupsListScreen.vue
@@ -24,11 +24,10 @@
       <template #after-table>
         <Pagination
           v-if="paginationMeta"
-          :from="paginationMeta.from || 0"
-          :to="paginationMeta.to || 0"
-          :total="paginationMeta.total"
-          @next="loadRecords(page + 1)"
-          @prev="loadRecords(page - 1)"
+          :total-records="paginationMeta.total"
+          :total-pages="paginationMeta.last_page"
+          :current="page"
+          @go-to-page="loadRecords"
         />
       </template>
     </Table>

diff --git a/resources/js/console/screens/TranslationsList/TranslationsListScreen.vue b/resources/js/console/screens/TranslationsList/TranslationsListScreen.vue
@@ -30,11 +30,10 @@
       <template #after-table>
         <Pagination
           v-if="paginationMeta"
-          :from="paginationMeta.from || 0"
-          :to="paginationMeta.to || 0"
-          :total="paginationMeta.total"
-          @next="loadRecords(page + 1)"
-          @prev="loadRecords(page - 1)"
+          :total-records="paginationMeta.total"
+          :total-pages="paginationMeta.last_page"
+          :current="page"
+          @go-to-page="loadRecords"
         />
       </template>
     </Table>