Merge pull request #988 from vdizengremel/fix/dsfrtable-update-page-count

fix(DsfrTable): mise à jour du nombre de pages quand les lignes du tableau sont mises à jour

Author: laruiss

src/components/DsfrTable/DsfrTable.spec.ts

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/vue'
+import {fireEvent, render, waitFor} from '@testing-library/vue'
 
 import DsfrTag from '../DsfrTag/DsfrTag.vue'
 
@@ -99,4 +99,84 @@ describe('DsfrTable', () => {
     // Then
     expect(trs).toHaveLength(0)
   })
+
+  it('should update page count when rows change', async () => {
+    // Given
+    const title = 'Utilisateurs'
+
+    const headers = ['Nom', 'Prénom']
+    const rows = generateRowsWithTwoColumns(5);
+    const props = {
+      title,
+      headers,
+      rows,
+      pagination: true
+    }
+
+    const component = render(DsfrTable, {
+      global: {
+        components: {
+          VIcon,
+          DsfrTag,
+        },
+      },
+      props,
+    })
+
+    // When
+    const newRows = generateRowsWithTwoColumns(25);
+
+    component.rerender({
+      ...props,
+      rows: newRows,
+    })
+
+    // Then
+    await waitFor(() => {
+      expect(component.getByText('Page 1 sur 3')).toBeDefined()
+    })
+  })
+
+  it('should update page count when selected different number of results per page', async () => {
+    // Given
+    const title = 'Utilisateurs'
+
+    const headers = ['Nom', 'Prénom']
+    const rows = generateRowsWithTwoColumns(50);
+    const props = {
+      title,
+      headers,
+      rows,
+      pagination: true
+    }
+
+    const component = render(DsfrTable, {
+      global: {
+        components: {
+          VIcon,
+          DsfrTag,
+        },
+      },
+      props,
+    })
+
+    // When
+    const select = component.getByLabelText('Résultats par page :')
+    await fireEvent.update(select, '25')
+
+    // Then
+    await waitFor(() => {
+      expect(component.getByText('Page 1 sur 2')).toBeDefined()
+    })
+  })
+
+  function generateRowsWithTwoColumns(numberOfRows: number): string[][] {
+    const rows: string[][] = []
+
+    for (let i = 0; i < numberOfRows; i++) {
+      rows.push(['EGAUD', 'Pierre-Louis'])
+    }
+
+    return rows
+  }
 })

src/components/DsfrTable/DsfrTable.vue

@@ -4,6 +4,7 @@ import { computed, ref, watch } from 'vue'
 import DsfrTableHeaders from './DsfrTableHeaders.vue'
 import DsfrTableRow, { type DsfrTableRowProps } from './DsfrTableRow.vue'
 import type { DsfrTableProps } from './DsfrTable.types'
+import {getRandomId} from "@/utils/random-utils";
 
 export type { DsfrTableProps }
 
@@ -24,23 +25,15 @@ const getRowData = (row: DsfrTableProps['rows']) => {
 
 const currentPage = ref(props.currentPage)
 const optionSelected = ref(props.resultsDisplayed)
-const pageCount = ref(
+const pageCount = computed(() =>
   props.rows.length > optionSelected.value
     ? Math.ceil(props.rows.length / optionSelected.value)
-    : 1,
+    : 1
 )
 const paginationOptions = [5, 10, 25, 50, 100]
 const returnLowestLimit = () => currentPage.value * optionSelected.value - optionSelected.value
 const returnHighestLimit = () => currentPage.value * optionSelected.value
 
-watch(
-  () => optionSelected.value,
-  (newVal) => {
-    pageCount.value =
-      props.rows.length > optionSelected.value ? Math.ceil(props.rows.length / newVal) : 1
-  },
-)
-
 const truncatedResults = computed(() => {
   if (props.pagination) {
     return props.rows.slice(returnLowestLimit(), returnHighestLimit())
@@ -69,6 +62,8 @@ const goLastPage = () => {
   currentPage.value = pageCount.value
   emit('update:currentPage')
 }
+
+const selectId = getRandomId('resultPerPage')
 </script>
 
 <template>
@@ -110,8 +105,9 @@ const goLastPage = () => {
           <td :colspan="headers.length">
             <div class="flex justify-right">
               <div class="self-center">
-                <span>Résultats par page : </span>
+                <label :for="selectId">Résultats par page : </label>
                 <select
+                  :id="selectId"
                   v-model="optionSelected"
                   @change="emit('update:currentPage')"
                 >