feat: ✨ Test amélioration de la pagination de tableau

Author: DaBadBunny

src/components/DsfrTable/DsfrTable.stories.ts

@@ -44,13 +44,17 @@ export default {
       action: 'clicked on row',
       description: 'Fonction pour montrer le clic sur une ligne (Ici seulement la 2e ligne)',
     },
-    defaultCurrentPage: {
+    currentPage: {
       control: 'number',
       description: 'Le numéro de la page dans la pagination',
     },
-    defaultOptionSelected: {
+    resultsDisplayed: {
       control: 'number',
-      description: 'La sélection du nombre d\'enregistrements par page',
+      description: 'La sélection du nombre d\'enregistrements affichés par page',
+    },
+    'update:currentPage': {
+      control: 'event',
+      description: 'Event se déclenchant au changement de page, laissant la liberté à l\'utilisateur de charger son contenu au fur et à mesure',
     },
   },
 }
@@ -253,8 +257,8 @@ const rows = [
 ]
 const noCaption = false
 const pagination = true
-const defaultCurrentPage = 2
-const defaultOptionSelected = 5
+const currentPage = 2
+const resultsDisplayed = 5
 
 export const TableauEntier = (args) => ({
   components: {
@@ -280,8 +284,8 @@ export const TableauEntier = (args) => ({
         :rows="rows"
         :no-caption="noCaption"
         :pagination="pagination"
-        :defaultCurrentPage="defaultCurrentPage"
-        :defaultOptionSelected="defaultOptionSelected"
+        :currentPage="currentPage"
+        :resultsDisplayed="resultsDisplayed"
       />
   `,
 
@@ -292,6 +296,6 @@ TableauEntier.args = {
   rows,
   noCaption,
   pagination,
-  defaultCurrentPage,
-  defaultOptionSelected,
+  currentPage,
+  resultsDisplayed,
 }

src/components/DsfrTable/DsfrTable.types.ts

@@ -26,6 +26,6 @@ export type DsfrTableProps = {
   rows?:(DsfrTableRowProps | string[])[]
   noCaption?: boolean
   pagination?: boolean
-  defaultCurrentPage?: number
-  defaultOptionSelected?: number
+  currentPage?: number
+  resultsDisplayed?: number
 }

src/components/DsfrTable/DsfrTable.vue

@@ -10,16 +10,19 @@ export type { DsfrTableProps }
 const props = withDefaults(defineProps<DsfrTableProps>(), {
   headers: () => [],
   rows: () => [],
-  defaultCurrentPage: 1,
-  defaultOptionSelected: 10,
+  currentPage: 1,
+  resultsDisplayed: 10,
 })
 
+// Permet aux utilisateurs d'utiliser une fonction afin de charger des résultats au changement de page
+const emit = defineEmits<{(event: 'update:currentPage'): void}>()
+
 const getRowData = (row: (DsfrTableRowProps | string[])) => {
   return Array.isArray(row) ? row : row.rowData
 }
 
-const currentPage = ref(props.defaultCurrentPage)
-const optionSelected = ref(props.defaultOptionSelected)
+const currentPage = ref(props.currentPage)
+const optionSelected = ref(props.resultsDisplayed)
 const pageCount = ref(props.rows.length > optionSelected.value ? Math.ceil(props.rows.length / optionSelected.value) : 1)
 const paginationOptions = [5, 10, 25, 50, 100]
 const returnLowestLimit = () => currentPage.value * optionSelected.value - optionSelected.value
@@ -37,18 +40,26 @@ const truncatedResults = computed(() => {
   return props.rows
 })
 
-const goFirstPage = () => { currentPage.value = 1 }
+const goFirstPage = () => {
+  currentPage.value = 1
+  emit('update:currentPage')
+}
 const goPreviousPage = () => {
   if (currentPage.value > 1) {
     currentPage.value -= 1
+    emit('update:currentPage')
   }
 }
 const goNextPage = () => {
   if (currentPage.value < pageCount.value) {
     currentPage.value += 1
+    emit('update:currentPage')
   }
 }
-const goLastPage = () => { currentPage.value = pageCount.value }
+const goLastPage = () => {
+  currentPage.value = pageCount.value
+  emit('update:currentPage')
+}
 </script>
 
 <template>
@@ -89,6 +100,7 @@ const goLastPage = () => { currentPage.value = pageCount.value }
                 <span>Résultats par page : </span>
                 <select
                   v-model="optionSelected"
+                  @change="emit('update:currentPage')"
                 >
                   <option
                     v-for="(option, idx) in paginationOptions"
@@ -108,11 +120,11 @@ const goLastPage = () => { currentPage.value = pageCount.value }
                   @click="goFirstPage()"
                 />
                 <button
-                  class="fr-icon-arrow-left-s-line-double"
+                  class="fr-icon-arrow-left-s-line"
                   @click="goPreviousPage()"
                 />
                 <button
-                  class="fr-icon-arrow-right-s-line-double"
+                  class="fr-icon-arrow-right-s-line"
                   @click="goNextPage()"
                 />
                 <button