feat: Add new pagination component (#10263)

app/javascript/dashboard/components-next/pagination/PaginationFooter.story.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref } from 'vue';
+import PaginationFooter from './PaginationFooter.vue';
+
+const createPaginationState = (initialPage, totalItems, itemsPerPage) => {
+  const currentPage = ref(initialPage);
+  const handlePageChange = newPage => {
+    currentPage.value = newPage;
+  };
+  return { currentPage, totalItems, itemsPerPage, handlePageChange };
+};
+
+const defaultState = createPaginationState(1, 100, 16);
+const middlePageState = createPaginationState(3, 100, 16);
+const lastPageState = createPaginationState(7, 100, 16);
+const customItemsState = createPaginationState(2, 100, 10);
+const singlePageState = createPaginationState(1, 10, 16);
+</script>
+
+<template>
+  <Story
+    title="Components/PaginationFooter"
+    :layout="{ type: 'grid', width: '957' }"
+  >
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <PaginationFooter
+          :current-page="defaultState.currentPage.value"
+          :total-items="defaultState.totalItems"
+          :items-per-page="defaultState.itemsPerPage"
+          @update:current-page="defaultState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Middle Page">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <PaginationFooter
+          :current-page="middlePageState.currentPage.value"
+          :total-items="middlePageState.totalItems"
+          :items-per-page="middlePageState.itemsPerPage"
+          @update:current-page="middlePageState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Last Page">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <PaginationFooter
+          :current-page="lastPageState.currentPage.value"
+          :total-items="lastPageState.totalItems"
+          :items-per-page="lastPageState.itemsPerPage"
+          @update:current-page="lastPageState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Items Per Page">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <PaginationFooter
+          :current-page="customItemsState.currentPage.value"
+          :total-items="customItemsState.totalItems"
+          :items-per-page="customItemsState.itemsPerPage"
+          @update:current-page="customItemsState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Single Page">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <PaginationFooter
+          :current-page="singlePageState.currentPage.value"
+          :total-items="singlePageState.totalItems"
+          :items-per-page="singlePageState.itemsPerPage"
+          @update:current-page="singlePageState.handlePageChange"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/pagination/PaginationFooter.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    required: true,
+  },
+  totalItems: {
+    type: Number,
+    required: true,
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 16,
+  },
+});
+const emit = defineEmits(['update:currentPage']);
+const { t } = useI18n();
+
+const totalPages = computed(() =>
+  Math.ceil(props.totalItems / props.itemsPerPage)
+);
+const startItem = computed(
+  () => (props.currentPage - 1) * props.itemsPerPage + 1
+);
+const endItem = computed(() =>
+  Math.min(startItem.value + props.itemsPerPage - 1, props.totalItems)
+);
+const isFirstPage = computed(() => props.currentPage === 1);
+const isLastPage = computed(() => props.currentPage === totalPages.value);
+const changePage = newPage => {
+  if (newPage >= 1 && newPage <= totalPages.value) {
+    emit('update:currentPage', newPage);
+  }
+};
+
+const currentPageInformation = computed(() => {
+  return t('PAGINATION_FOOTER.SHOWING', {
+    startItem: startItem.value,
+    endItem: endItem.value,
+    totalItems: props.totalItems,
+  });
+});
+
+const pageInfo = computed(() => {
+  return t('PAGINATION_FOOTER.CURRENT_PAGE_INFO', {
+    currentPage: '',
+    totalPages: totalPages.value,
+  });
+});
+</script>
+
+<template>
+  <div
+    class="flex justify-between h-12 w-full max-w-[957px] mx-auto bg-slate-25 dark:bg-slate-800/50 rounded-xl py-2 px-3 items-center"
+  >
+    <div class="flex items-center gap-3">
+      <span
+        class="min-w-0 text-sm font-normal line-clamp-1 text-slate-600 dark:text-slate-300"
+      >
+        {{ currentPageInformation }}
+      </span>
+    </div>
+    <div class="flex items-center gap-2">
+      <Button
+        icon="chevrons-lucide-left"
+        icon-lib="lucide"
+        variant="ghost"
+        size="sm"
+        :disabled="isFirstPage"
+        @click="changePage(1)"
+      />
+      <Button
+        icon="chevron-lucide-left"
+        icon-lib="lucide"
+        variant="ghost"
+        size="sm"
+        :disabled="isFirstPage"
+        @click="changePage(currentPage - 1)"
+      />
+      <div
+        class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400"
+      >
+        <span
+          class="px-3 tabular-nums py-0.5 bg-white dark:bg-slate-900 rounded-md"
+        >
+          {{ currentPage }}
+        </span>
+        <span>{{ pageInfo }}</span>
+      </div>
+      <Button
+        icon="chevron-lucide-right"
+        icon-lib="lucide"
+        variant="ghost"
+        size="sm"
+        :disabled="isLastPage"
+        @click="changePage(currentPage + 1)"
+      />
+      <Button
+        icon="chevrons-lucide-right"
+        icon-lib="lucide"
+        variant="ghost"
+        size="sm"
+        :disabled="isLastPage"
+        @click="changePage(totalPages)"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/i18n/locale/en/components.json

@@ -0,0 +1,6 @@
+{
+  "PAGINATION_FOOTER": {
+    "SHOWING": "Showing {startItem} - {endItem} of {totalItems} items",
+    "CURRENT_PAGE_INFO": "{currentPage} of {totalPages} pages"
+  }
+}

app/javascript/dashboard/i18n/locale/en/index.js

@@ -1,3 +1,4 @@
+import components from './components.json';
 import advancedFilters from './advancedFilters.json';
 import agentBots from './agentBots.json';
 import agentMgmt from './agentMgmt.json';
@@ -36,6 +37,7 @@ import teamsSettings from './teamsSettings.json';
 import whatsappTemplates from './whatsappTemplates.json';
 
 export default {
+  ...components,
   ...advancedFilters,
   ...agentBots,
   ...agentMgmt,