Remplace les composants pagination par le composant du DS

incubateur-ademe · Jun 13, 2024 · aa3773c · aa3773c
1 parent 1ab11c8
commit aa3773c
Show file tree

Hide file tree

Showing 12 changed files with 138 additions and 452 deletions.
diff --git a/app.territoiresentransitions.react/src/app/pages/CollectivitesEngagees/Views/View.tsx b/app.territoiresentransitions.react/src/app/pages/CollectivitesEngagees/Views/View.tsx
@@ -1,10 +1,9 @@
 import classNames from 'classnames';
 
-import {Button, Select} from '@tet/ui';
+import {Button, Pagination, Select} from '@tet/ui';
 
 import {TCollectiviteCarte} from '../data/useFilteredCollectivites';
 import {getNumberOfActiveFilters, SetFilters} from '../data/filters';
-import {Pagination} from 'ui/shared/Pagination';
 import {Grid} from 'app/pages/CollectivitesEngagees/Views/Grid';
 import {NB_CARDS_PER_PAGE} from 'app/pages/CollectivitesEngagees/data/utils';
 import {trierParOptions} from 'app/pages/CollectivitesEngagees/data/filtreOptions';
@@ -15,6 +14,7 @@ import {
   RecherchesViewParam,
 } from 'app/paths';
 import {useHistory, useLocation} from 'react-router-dom';
+import {useFonctionTracker} from 'core-logic/hooks/useFonctionTracker';
 
 export type CollectivitesEngageesView = {
   initialFilters: CollectiviteEngagee.Filters;
@@ -48,6 +48,7 @@ const View = ({
 }: ViewProps) => {
   const history = useHistory();
   const location = useLocation();
+  const tracker = useFonctionTracker();
 
   const viewToText: Record<RecherchesViewParam, string> = {
     collectivites: 'collectivité',
@@ -153,15 +154,17 @@ const View = ({
         />
       </div>
       {/** Pagination */}
-      {dataCount !== 0 && (
-        <div className="flex justify-center mt-6 md:mt-12">
-          <Pagination
-            nbOfPages={Math.ceil(dataCount / NB_CARDS_PER_PAGE)}
-            selectedPage={filters.page ?? 1}
-            onChange={selected => setFilters({...filters, page: selected})}
-          />
-        </div>
-      )}
+      <Pagination
+        className="mt-6 md:mt-12 mx-auto"
+        selectedPage={filters.page ?? 1}
+        nbOfElements={dataCount}
+        maxElementsPerPage={NB_CARDS_PER_PAGE}
+        onChange={selected => {
+          setFilters({...filters, page: selected});
+          tracker({fonction: 'pagination', action: 'clic'});
+        }}
+        idToScrollTo="app-header"
+      />
     </div>
   );
 };

diff --git a/...tions.react/src/app/pages/collectivite/Historique/HistoriqueFiltres/HistoriqueFiltres.tsx b/...tions.react/src/app/pages/collectivite/Historique/HistoriqueFiltres/HistoriqueFiltres.tsx
@@ -19,7 +19,10 @@ const HistoriqueFiltres = ({
   setFilters,
 }: HistoriqueFiltresProps) => {
   return (
-    <div className="mb-8 pb-8 border-b border-b-gray-200">
+    <div
+      id="filtres-historique"
+      className="mb-8 pb-8 border-b border-b-gray-200"
+    >
       <p className="mb-6 font-bold">
         Filtrer l’historique des modifications par
       </p>

diff --git a/...llectivite/Historique/HistoriqueFiltres/__snapshots__/HistoriqueFiltres.stories.storyshot b/...llectivite/Historique/HistoriqueFiltres/__snapshots__/HistoriqueFiltres.stories.storyshot
@@ -3,6 +3,7 @@
 exports[`Storyshots app/pages/collectivite/Historique/HistoriqueFiltres Avec Filtres 1`] = `
 <div
   className="mb-8 pb-8 border-b border-b-gray-200"
+  id="filtres-historique"
 >
   <p
     className="mb-6 font-bold"
@@ -160,6 +161,7 @@ exports[`Storyshots app/pages/collectivite/Historique/HistoriqueFiltres Avec Fil
 exports[`Storyshots app/pages/collectivite/Historique/HistoriqueFiltres Defaut 1`] = `
 <div
   className="mb-8 pb-8 border-b border-b-gray-200"
+  id="filtres-historique"
 >
   <p
     className="mb-6 font-bold"

diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/HistoriqueListe.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/HistoriqueListe.tsx
@@ -8,7 +8,8 @@ import HistoriqueItemReponse from './reponse/HistoriqueItemReponse';
 import {NB_ITEMS_PER_PAGE} from './filters';
 import HistoriqueFiltres from './HistoriqueFiltres/HistoriqueFiltres';
 import HistoriqueItemJustification from './reponse/HistoriqueItemJustification';
-import {Pagination} from 'ui/shared/Pagination';
+import {Pagination} from '@tet/ui';
+import {useFonctionTracker} from 'core-logic/hooks/useFonctionTracker';
 
 /**
  * Affiche l'historique des modifications
@@ -20,6 +21,8 @@ export const HistoriqueListe = ({
   filters,
   setFilters,
 }: THistoriqueProps) => {
+  const tracker = useFonctionTracker();
+
   return (
     <>
       <HistoriqueFiltres
@@ -40,15 +43,18 @@ export const HistoriqueListe = ({
           return Item ? <Item key={makeKey(item)} item={item} /> : null;
         })}
       </div>
-      {total !== 0 && (
-        <div className="flex justify-center mt-6 md:mt-12">
-          <Pagination
-            nbOfPages={Math.ceil(total / NB_ITEMS_PER_PAGE)}
-            selectedPage={filters.page ?? 1}
-            onChange={selected => setFilters({...filters, page: selected})}
-          />
-        </div>
-      )}
+
+      <Pagination
+        className="mt-6 md:mt-12 mx-auto"
+        nbOfElements={total}
+        maxElementsPerPage={NB_ITEMS_PER_PAGE}
+        selectedPage={filters.page ?? 1}
+        onChange={selected => {
+          setFilters({...filters, page: selected});
+          tracker({fonction: 'pagination', action: 'clic'});
+        }}
+        idToScrollTo="filtres-historique"
+      />
     </>
   );
 };

diff --git a/...act/src/app/pages/collectivite/Historique/__snapshots__/JournalActivite.stories.storyshot b/...act/src/app/pages/collectivite/Historique/__snapshots__/JournalActivite.stories.storyshot
@@ -13,6 +13,7 @@ exports[`Storyshots app/pages/collectivite/Historique/JournalActivite Exemple 1
   <hr />
   <div
     className="mb-8 pb-8 border-b border-b-gray-200"
+    id="filtres-historique"
   >
     <p
       className="mb-6 font-bold"
@@ -353,70 +354,5 @@ exports[`Storyshots app/pages/collectivite/Historique/JournalActivite Exemple 1
       </div>
     </div>
   </div>
-  <div
-    className="flex justify-center mt-6 md:mt-12"
-  >
-    <nav
-      aria-label="Pagination"
-      className="fr-pagination"
-      role="navigation"
-    >
-      <ul
-        className="fr-pagination__list"
-      >
-        <li>
-          <button
-            aria-disabled="true"
-            className="fr-pagination__link fr-pagination__link--first"
-            disabled={true}
-            onClick={[Function]}
-            role="link"
-          >
-            Première page
-          </button>
-        </li>
-        <button
-          aria-disabled="true"
-          className="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
-          disabled={true}
-          onClick={[Function]}
-          role="link"
-        >
-          Page précédente
-        </button>
-        <button
-          aria-current="page"
-          className="fr-pagination__link"
-          title="Page 1"
-        >
-          1
-        </button>
-        <div
-          className="hidden"
-        >
-          <button
-            className="fr-pagination__link fr-displayed-lg"
-            disabled={true}
-          >
-            …
-          </button>
-        </div>
-        <button
-          className="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
-          disabled={true}
-          onClick={[Function]}
-        >
-          Page suivante
-        </button>
-        <button
-          className="fr-pagination__link fr-pagination__link--last"
-          disabled={true}
-          onClick={[Function]}
-        >
-          Dernière page
-        </button>
-      </ul>
-    </nav>
-  </div>
 </main>
 `;
diff --git a/app.territoiresentransitions.react/src/ui/shared/Pagination.stories.tsx b/app.territoiresentransitions.react/src/ui/shared/Pagination.stories.tsx