DsfrPagination - Gestion du changement de valeur

[cailliaud]

Hello !

Tout d'abord, vraiment top le DsfrPagination 👍

Mais il manque un petit quelque chose pour le rendre parfait.

Tout d'abord, je n'aurai pas mis dans le storybook l'usage de v-model sur la props currentPage
Car ça entraine des update de currentPage même si on ne bouge pas d'index (cliquer sur la lastPage alors qu'on y est déjà, ou recliquer sur la page actuelle, etc...)

Alors se pose la question, est-ce que c'est la responsabilité du DsfrPagination de dire si le clique change la currentPage ou non ?
Question complexe, car certains pourrait vouloir que chaque clique puisse être écouté même si la valeur reste identique.

Plusieurs solutions alors:

1. Laisser le contrôle au composant parent sur l'écoute de l'event. Lui seul sait s'il veut où non update son currentPage qu'il pousse en props au DsfrPagination (comportement actuel)
2. Implémenter côté DsfrPagination le fait de ne pas trigger toPage(newPage) dans le cas où la valeur intrinsèque ne change pas (éviter du coup de trigger un emit et un update du modelValue si c'est le cas pour le currentPage)
3. Empêcher le clique sur les boutons représentant la page actuelle (page courante sélectionnée, si dernière page on désactive le last et le next, si première page on désactive le previous et first)

Exemple de l'usage du composant

<template>
<DsfrTable title="Mon tableau" :headers="headers" :rows="rows" />
 <DsfrPagination
    :current-page="currentPage"
    :pages="pages"
    @update:current-page="switchPage"
  />
</template>
<script setup lang="ts">

const headers: string[] = [
  'Nom',
  'Prénom',
  'Action',
]

const currentPage = ref(0)

const pages = ref([])

const props = defineProps<Props>()
const rows = ref([] as Row[])

async function loadData(): Promise<void> {
  const getRowPage: GetRowPage= await useNuxtApp()
    .$api.getAll(currentPage.value)
     .then(
      (getRows) => {
        currentPage.value = getRows.currentPage
        agents.value = getRows.content
        pages.value = Array.from(
          { length: getRows.pagesCount },
          (_, key) => ({
            label: `${key}`,
            href: '#',
            title: `Page ${key}`,
          })
        )
      },
      () => {
        currentPage.value = 0
        agents.value = []
        pages.value = [
          {
            label: '0',
            href: '#',
            title: 'Page 0',
          },
        ]
      }
    )
}

async function switchPage(newPage: number) {
  if (newPage !== currentPage.value) {
    currentPage.value = newPage
    await loadData()
  }
}

</script>

[cailliaud]

Un deuxième élément intéressant, ce serait d'exporter le type Page

type Page = { href?: string, label: string, title: string }

[laruiss]

Un deuxième élément intéressant, ce serait d'exporter le type Page

type Page = { href?: string, label: string, title: string }

Ce sera fait dans la prochaine version : tous les types de toutes les props et autres types utilisés seront exportées