Merge pull request #349 from PrestaShopCorp/275-pagination-large-item…

…s-per-page-should-be-hidden-if-not-specified #275 pagination large items per page should be hidden if not specified
PrestaShopCorp · Jul 2, 2024 · 61c3c21 · 61c3c21
2 parents 565a49b + f442fdd
commit 61c3c21
Show file tree

Hide file tree

Showing 13 changed files with 340 additions and 227 deletions.
diff --git a/packages/components/pagination/src/pagination-large.ts b/packages/components/pagination/src/pagination-large.ts
@@ -9,6 +9,8 @@ export interface PaginationLargeProps {
   maxPage: number
   label?: string
   dataTest?: string
+  displayItemsPerPage?: boolean
+  displayResults?: boolean
 }
 
 export type PaginationInstance = InstanceType<typeof PaginationLarge>;
diff --git a/packages/components/pagination/src/pagination-large.vue b/packages/components/pagination/src/pagination-large.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    v-if="displayResults"
     class="puik-pagination__label"
     :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
   >
@@ -60,8 +61,14 @@
       </span>
     </puik-button>
   </div>
-
+  <span
+    v-if="displayItemsPerPage"
+    class="puik-pagination__items-per-page-label"
+  >
+    {{ t('puik.pagination.itemPerPageLabel', { maxPage }) }}
+  </span>
   <puik-select
+    v-if="displayItemsPerPage"
     v-model="currentItemsPerPage"
     class="puik-pagination__items-per-page-select"
   >
@@ -85,7 +92,9 @@ import { type PaginationLargeProps } from './pagination-large';
 defineOptions({
   name: 'PuikPaginationLarge'
 });
+
 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
@@ -7,6 +7,7 @@ export interface PaginationMediumProps {
   maxPage: number
   label?: string
   dataTest?: string
+  displayResults?: boolean
 }
 
 export type PaginationInstance = InstanceType<typeof PaginationMedium>;
diff --git a/packages/components/pagination/src/pagination-medium.vue b/packages/components/pagination/src/pagination-medium.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    v-if="displayResults"
     class="puik-pagination__label"
     :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
   >

diff --git a/packages/components/pagination/src/pagination-small.ts b/packages/components/pagination/src/pagination-small.ts
@@ -6,6 +6,7 @@ export interface PaginationSmallProps {
   maxPage: number
   label?: string
   dataTest?: string
+  displayResults?: boolean
 }
 
 export type PaginationInstance = InstanceType<typeof PaginationSmall>;
diff --git a/packages/components/pagination/src/pagination-small.vue b/packages/components/pagination/src/pagination-small.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    v-if="displayResults"
     class="puik-pagination__label"
     :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
   >

diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts
@@ -13,6 +13,8 @@ export interface PaginationProps {
   totalItem: number
   itemsPerPage?: number
   itemsPerPageOptions?: number[]
+  displayItemsPerPage?: boolean
+  displayResults?: boolean
   page: number
   label?: string
   loaderButtonLabel?: string

diff --git a/packages/components/pagination/src/pagination.vue b/packages/components/pagination/src/pagination.vue
@@ -9,45 +9,49 @@
     <pagination-loader
       v-if="variant === PuikPaginationVariants.Loader"
       v-model="currentPage"
+      :data-test="dataTest"
+      :disabled="loaderButtonDisabled"
       :label="currentLabel"
       :loader-button-label="loaderButtonLabel"
-      :disabled="loaderButtonDisabled"
-      :data-test="dataTest"
     />
 
     <div
       v-else
       class="puik-pagination__content"
     >
-      <pagination-small
-        v-if="variant === PuikPaginationVariants.Small"
+      <pagination-mobile
+        v-if="variant === PuikPaginationVariants.Mobile"
         v-model="currentPage"
         v-bind="commonPaginationProps"
         :data-test="dataTest"
       />
 
-      <pagination-mobile
-        v-if="variant === PuikPaginationVariants.Mobile"
+      <pagination-small
+        v-if="variant === PuikPaginationVariants.Small"
         v-model="currentPage"
         v-bind="commonPaginationProps"
         :data-test="dataTest"
+        :display-results="displayResults"
       />
 
       <pagination-medium
         v-if="variant === PuikPaginationVariants.Medium && !disabled"
         v-model="currentPage"
         v-bind="commonPaginationProps"
-        :total-item="totalItem"
         :data-test="dataTest"
+        :display-results="displayResults"
+        :total-item="totalItem"
       />
 
       <pagination-large
         v-if="variant === PuikPaginationVariants.Large"
         v-model:page="currentPage"
+        :data-test="dataTest"
+        :display-items-per-page="displayItemsPerPage"
+        :display-results="displayResults"
         :items-per-page="itemsPerPage"
-        :total-item="totalItem"
         :items-per-page-options="itemsPerPageOptions"
-        :data-test="dataTest"
+        :total-item="totalItem"
         v-bind="commonPaginationProps"
         @update:items-per-page="emit('update:itemsPerPage', $event)"
       />
@@ -56,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { useLocale } from '@prestashopcorp/puik-locale';
 import { type PaginationProps, PuikPaginationVariants } from './pagination';
 
@@ -73,7 +77,9 @@ defineOptions({
 const props = withDefaults(defineProps<PaginationProps>(), {
   variant: PuikPaginationVariants.Medium,
   itemsPerPage: 5,
-  itemsPerPageOptions: () => [5, 10, 15]
+  itemsPerPageOptions: () => [5, 10, 15],
+  displayItemsPerPage: true,
+  displayResults: true
 });
 const emit = defineEmits<{
   'update:page': [value: number]
@@ -105,7 +111,8 @@ const currentLabel = computed(() => {
     case PuikPaginationVariants.Small:
       return t(path, {
         page: currentPage.value,
-        maxPage: maxPage.value
+        maxPage: maxPage.value,
+        totalItem: props.totalItem
       });
     case PuikPaginationVariants.Medium:
     case PuikPaginationVariants.Large:
@@ -127,6 +134,12 @@ const commonPaginationProps = computed(() => {
     disabled: disabled.value
   };
 });
+
+watch(() => props.itemsPerPage, () => {
+  if (currentPage.value > maxPage.value) {
+    currentPage.value = maxPage.value;
+  }
+});
 </script>
 
 <style lang="scss">