Merge pull request #345 from PrestaShopCorp/344-pagination-loader-var…

…iant-refacto-itemcount fix #344 - handle items count and loader btn behaviors internally BC - remove itemCount and ButtonDisabled prop
PrestaShopCorp · Jun 19, 2024 · 565a49b · 565a49b
2 parents 51f1b5f + 080486b
commit 565a49b
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 35 deletions.
diff --git a/packages/components/pagination/src/pagination-large.ts b/packages/components/pagination/src/pagination-large.ts
@@ -7,7 +7,6 @@ export interface PaginationLargeProps {
   disabled?: boolean
   totalItem: number
   maxPage: number
-  itemCount?: number
   label?: string
   dataTest?: string
 }

diff --git a/packages/components/pagination/src/pagination-large.vue b/packages/components/pagination/src/pagination-large.vue
@@ -85,9 +85,7 @@ import { type PaginationLargeProps } from './pagination-large';
 defineOptions({
   name: 'PuikPaginationLarge'
 });
-const props = withDefaults(defineProps<PaginationLargeProps>(), {
-  itemCount: 0
-});
+const props = defineProps<PaginationLargeProps>();
 const emit = defineEmits<{
   'update:page': [value: number];
   'update:itemsPerPage': [value: number];

diff --git a/packages/components/pagination/src/pagination-medium.ts b/packages/components/pagination/src/pagination-medium.ts
@@ -5,7 +5,6 @@ export interface PaginationMediumProps {
   disabled?: boolean
   totalItem: number
   maxPage: number
-  itemCount?: number
   label?: string
   dataTest?: string
 }

diff --git a/packages/components/pagination/src/pagination-medium.vue b/packages/components/pagination/src/pagination-medium.vue
@@ -105,8 +105,7 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<PaginationMediumProps>(), {
-  modelValue: 1,
-  itemCount: 0
+  modelValue: 1
 });
 const emit = defineEmits<{(e: 'update:modelValue', value: number): void}>();
 

diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts
@@ -14,10 +14,8 @@ export interface PaginationProps {
   itemsPerPage?: number
   itemsPerPageOptions?: number[]
   page: number
-  itemCount?: number
   label?: string
   loaderButtonLabel?: string
-  loaderButtonDisabled?: boolean
   dataTest?: string
 }
 

diff --git a/packages/components/pagination/src/pagination.vue b/packages/components/pagination/src/pagination.vue
@@ -73,8 +73,7 @@ defineOptions({
 const props = withDefaults(defineProps<PaginationProps>(), {
   variant: PuikPaginationVariants.Medium,
   itemsPerPage: 5,
-  itemsPerPageOptions: () => [5, 10, 15],
-  itemCount: 0
+  itemsPerPageOptions: () => [5, 10, 15]
 });
 const emit = defineEmits<{
   'update:page': [value: number]
@@ -88,6 +87,9 @@ const currentPage = computed({
   set: (page: number) => emit('update:page', page)
 });
 
+const itemCount = computed(() => props.page * props.itemsPerPage);
+const loaderButtonDisabled = computed(() => itemCount.value === props.totalItem);
+
 const maxPage = computed(() => {
   return Math.ceil(props.totalItem / props.itemsPerPage);
 });
@@ -112,7 +114,7 @@ const currentLabel = computed(() => {
       });
     default:
       return t(path, {
-        itemCount: props.itemCount,
+        itemCount: itemCount.value,
         totalItem: props.totalItem
       });
   }

diff --git a/packages/components/pagination/stories/pagination.stories.ts b/packages/components/pagination/stories/pagination.stories.ts
@@ -62,18 +62,6 @@ export default {
         }
       }
     },
-    itemCount: {
-      control: 'number',
-      description: 'Set the current item count',
-      table: {
-        type: {
-          summary: 'number'
-        },
-        defaultValue: {
-          summary: '0'
-        }
-      }
-    },
     label: {
       control: 'text',
       description: 'Set the label',
@@ -107,7 +95,6 @@ export default {
   args: {
     variant: PuikPaginationVariants.Medium,
     totalItem: 500,
-    itemCount: 25,
     label: '',
     loaderButtonLabel: undefined
   }

diff --git a/packages/components/pagination/test/pagination.spec.ts b/packages/components/pagination/test/pagination.spec.ts
@@ -46,8 +46,7 @@ describe('Pagination tests', () => {
   const propsData = {
     page: 5,
     itemsPerPage: 10,
-    totalItem: 500,
-    itemCount: 50
+    totalItem: 500
   };
 
   it('should be a vue instance', () => {
@@ -153,8 +152,7 @@ describe('Pagination tests', () => {
     factory({
       page: 10,
       itemsPerPage: 20,
-      totalItem: 500,
-      itemCount: 50
+      totalItem: 500
     });
     expect(findSeparators().length).toBe(2);
   });
@@ -163,8 +161,7 @@ describe('Pagination tests', () => {
     factory({
       page: 10,
       itemsPerPage: 50,
-      totalItem: 500,
-      itemCount: 50
+      totalItem: 500
     });
     expect(findSeparators().length).toBe(1);
   });
@@ -173,8 +170,7 @@ describe('Pagination tests', () => {
     factory({
       page: 2,
       itemsPerPage: 20,
-      totalItem: 500,
-      itemCount: 50
+      totalItem: 500
     });
     expect(findSeparators().length).toBe(1);
   });
@@ -183,8 +179,7 @@ describe('Pagination tests', () => {
     factory({
       page: 3,
       itemsPerPage: 100,
-      totalItem: 500,
-      itemCount: 50
+      totalItem: 500
     });
     expect(findSeparators().length).toBe(0);
   });