From 9718c8560e001f55c52efa001a6ad88cf10e94e7 Mon Sep 17 00:00:00 2001 From: Marine Heckler Date: Fri, 7 Jun 2024 09:24:07 +0200 Subject: [PATCH] Remplace les composants pagination par le composant du DS --- .../CollectivitesEngagees/Views/View.tsx | 25 +-- .../HistoriqueFiltres/HistoriqueFiltres.tsx | 5 +- .../HistoriqueFiltres.stories.storyshot | 2 + .../Historique/HistoriqueListe.tsx | 26 ++- .../JournalActivite.stories.storyshot | 66 +------ .../app/pages/collectivite/Users/Membres.tsx | 20 +- .../src/ui/shared/Pagination.stories.tsx | 78 -------- .../src/ui/shared/Pagination.tsx | 183 ------------------ .../preuves/AddPreuveModal/AddFromLib.tsx | 24 ++- .../AddFromLib.stories.storyshot | 130 ++++++------- packages/site/app/programme/annuaire/page.tsx | 20 +- .../Pagination/Pagination.stories.tsx | 5 +- .../design-system/Pagination/Pagination.tsx | 26 ++- 13 files changed, 146 insertions(+), 464 deletions(-) delete mode 100644 app.territoiresentransitions.react/src/ui/shared/Pagination.stories.tsx delete mode 100644 app.territoiresentransitions.react/src/ui/shared/Pagination.tsx diff --git a/app.territoiresentransitions.react/src/app/pages/CollectivitesEngagees/Views/View.tsx b/app.territoiresentransitions.react/src/app/pages/CollectivitesEngagees/Views/View.tsx index 8ceb8cb430..4c59d8be84 100644 --- 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 = { collectivites: 'collectivité', @@ -153,15 +154,17 @@ const View = ({ /> {/** Pagination */} - {dataCount !== 0 && ( -
- setFilters({...filters, page: selected})} - /> -
- )} + { + setFilters({...filters, page: selected}); + tracker({fonction: 'pagination', action: 'clic'}); + }} + idToScrollTo="app-header" + /> ); }; diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/HistoriqueFiltres/HistoriqueFiltres.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/HistoriqueFiltres/HistoriqueFiltres.tsx index 2f5d54d63d..09c6b205c1 100644 --- a/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/HistoriqueFiltres/HistoriqueFiltres.tsx +++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/HistoriqueFiltres/HistoriqueFiltres.tsx @@ -19,7 +19,10 @@ const HistoriqueFiltres = ({ setFilters, }: HistoriqueFiltresProps) => { return ( -
+

Filtrer l’historique des modifications par

diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/HistoriqueFiltres/__snapshots__/HistoriqueFiltres.stories.storyshot b/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/HistoriqueFiltres/__snapshots__/HistoriqueFiltres.stories.storyshot index 6643a8c2d2..4cbb57dd9f 100644 --- a/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/HistoriqueFiltres/__snapshots__/HistoriqueFiltres.stories.storyshot +++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/HistoriqueFiltres/__snapshots__/HistoriqueFiltres.stories.storyshot @@ -3,6 +3,7 @@ exports[`Storyshots app/pages/collectivite/Historique/HistoriqueFiltres Avec Filtres 1`] = `

{ + const tracker = useFonctionTracker(); + return ( <> : null; })}

- {total !== 0 && ( -
- setFilters({...filters, page: selected})} - /> -
- )} + + { + setFilters({...filters, page: selected}); + tracker({fonction: 'pagination', action: 'clic'}); + }} + idToScrollTo="filtres-historique" + /> ); }; diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/__snapshots__/JournalActivite.stories.storyshot b/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/__snapshots__/JournalActivite.stories.storyshot index 91132b481a..453c9b9b5f 100644 --- a/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/__snapshots__/JournalActivite.stories.storyshot +++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Historique/__snapshots__/JournalActivite.stories.storyshot @@ -13,6 +13,7 @@ exports[`Storyshots app/pages/collectivite/Historique/JournalActivite Exemple 1

-
- -
`; diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Users/Membres.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Users/Membres.tsx index b368a38ea7..e6fe97aac5 100644 --- a/app.territoiresentransitions.react/src/app/pages/collectivite/Users/Membres.tsx +++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Users/Membres.tsx @@ -151,20 +151,16 @@ const MembresConnected = () => { removeFromCollectivite={removeFromCollectivite} isLoading={isLoading} /> - {count > PAGE_SIZE && ( - { - setPage(selectedPage); - document.getElementById('app-header')?.scrollIntoView(); - }} - /> - )} + ); }; export default MembresConnected; - diff --git a/app.territoiresentransitions.react/src/ui/shared/Pagination.stories.tsx b/app.territoiresentransitions.react/src/ui/shared/Pagination.stories.tsx deleted file mode 100644 index fcefa8b470..0000000000 --- a/app.territoiresentransitions.react/src/ui/shared/Pagination.stories.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import {StoryFn, Meta} from '@storybook/react'; -import {Pagination, TPaginationProps} from './Pagination'; - -export default { - component: Pagination, -} as Meta; - -const Template: StoryFn = args => ( -
    - -
-); - -const UneSeulePageArgs: TPaginationProps = { - selectedPage: 1, - nbOfPages: 1, - onChange: (selected: number) => { - console.log(selected); - }, -}; - -export const UneSeulePage = { - render: Template, - args: UneSeulePageArgs, -}; - -const TroisPagesArgs: TPaginationProps = { - selectedPage: 1, - nbOfPages: 3, - onChange: (selected: number) => { - console.log(selected); - }, -}; - -export const TroisPages = { - render: Template, - args: TroisPagesArgs, -}; - -const SixPagesArgs: TPaginationProps = { - selectedPage: 1, - nbOfPages: 6, - onChange: (selected: number) => { - console.log(selected); - }, -}; - -export const SixPages = { - render: Template, - args: SixPagesArgs, -}; - -const HuitPagesArgs: TPaginationProps = { - selectedPage: 1, - nbOfPages: 8, - onChange: (selected: number) => { - console.log(selected); - }, -}; - -export const HuitPages = { - render: Template, - args: HuitPagesArgs, -}; - -const CentPlusPageArgs: TPaginationProps = { - selectedPage: 110, - nbOfPages: 140, - onChange: (selected: number) => { - console.log(selected); - }, -}; - -export const CentPlusPage = { - render: Template, - args: CentPlusPageArgs, -}; diff --git a/app.territoiresentransitions.react/src/ui/shared/Pagination.tsx b/app.territoiresentransitions.react/src/ui/shared/Pagination.tsx deleted file mode 100644 index e2458a99f1..0000000000 --- a/app.territoiresentransitions.react/src/ui/shared/Pagination.tsx +++ /dev/null @@ -1,183 +0,0 @@ -import {useEffect, useState} from 'react'; -import useWindowSize from 'utils/useWindowSize'; -import {useFonctionTracker} from 'core-logic/hooks/useFonctionTracker'; -import {scrollToTop} from 'app/ScrollToTopOnPageChange'; - -export type TPaginationProps = { - selectedPage: number; - nbOfPages: number; - onChange: (selectedPage: number) => void; -}; - -/** - * Permet de changer de page - */ -export const Pagination = (props: TPaginationProps) => { - const [selectedPage, setSelectedPage] = useState(props.selectedPage); - const [leftPageRangeToDisplay, setLeftPageRangeToDisplay] = useState< - number[] - >([]); - const [rightPageRangeToDisplay, setRightPageRangeToDisplay] = useState< - number[] - >([]); - - const tracker = useFonctionTracker(); - const windowSize = useWindowSize(); - const isMobile = windowSize.width < 992; - - const setSelectedPageAndScrollToTop = (page: number) => { - setSelectedPage(page); - tracker({fonction: 'pagination', action: 'clic'}); - scrollToTop(); - props.onChange(page); - }; - - const range = (start: number, end: number) => - Array.from({length: end - start + 1}, (v, k) => start + k); - - const setPageRangesToDisplay = () => { - if (isMobile) { - if (props.nbOfPages <= 3) { - /* |< 1 2 3 >/ */ - setLeftPageRangeToDisplay(range(1, props.nbOfPages)); - setRightPageRangeToDisplay([]); - } else if (selectedPage <= props.nbOfPages - 2) { - /* |< 2 3 6 >/ */ - setLeftPageRangeToDisplay( - range(Math.max(1, selectedPage - 1), Math.max(selectedPage, 2)) - ); - setRightPageRangeToDisplay([props.nbOfPages]); - } else { - /* |< 1 5 6 >/ */ - setLeftPageRangeToDisplay([1]); - setRightPageRangeToDisplay(range(props.nbOfPages - 1, props.nbOfPages)); - } - } else { - if (props.nbOfPages <= 6) { - /* |< 1 2 3 4 5 6 >/ */ - setLeftPageRangeToDisplay(range(1, props.nbOfPages)); - setRightPageRangeToDisplay([]); - } else if (selectedPage <= props.nbOfPages - 3) { - /* |< 1 2 3 4 ... 8 >/ */ - setLeftPageRangeToDisplay( - range(Math.max(1, selectedPage - 3), Math.max(selectedPage, 4)) - ); - setRightPageRangeToDisplay([props.nbOfPages]); - } else { - /* |< 1 2 ... 6 7 8 >/ */ - setLeftPageRangeToDisplay( - range(1, 4 - (props.nbOfPages - selectedPage)) - ); - setRightPageRangeToDisplay( - range(Math.max(selectedPage, 4), props.nbOfPages) - ); - } - } - }; - - useEffect(() => { - setPageRangesToDisplay(); - }, [selectedPage, props.nbOfPages]); - - useEffect(() => { - if (selectedPage !== props.selectedPage) { - setPageRangesToDisplay(); - setSelectedPage(props.selectedPage); - } - }, [props.selectedPage, selectedPage]); - - return ( - - ); -}; - -export const PageSelector = (props: { - number: number; - isSelected: boolean; - onClick: () => void; -}) => { - const {number, isSelected, onClick} = props; - if (isSelected) - return ( - - ); - return ( - - ); -}; diff --git a/app.territoiresentransitions.react/src/ui/shared/preuves/AddPreuveModal/AddFromLib.tsx b/app.territoiresentransitions.react/src/ui/shared/preuves/AddPreuveModal/AddFromLib.tsx index 4c765b8396..585523d551 100644 --- a/app.territoiresentransitions.react/src/ui/shared/preuves/AddPreuveModal/AddFromLib.tsx +++ b/app.territoiresentransitions.react/src/ui/shared/preuves/AddPreuveModal/AddFromLib.tsx @@ -7,7 +7,8 @@ import { TFilters, } from '../Bibliotheque/useFichiers'; import {TAddFileFromLib} from './AddFile'; -import {Pagination} from 'ui/shared/Pagination'; +import {Pagination} from '@tet/ui'; +import {useFonctionTracker} from 'core-logic/hooks/useFonctionTracker'; export type TAddFromLibProps = { items: TBibliothequeFichier[]; @@ -35,6 +36,9 @@ export const AddFromLib = (props: TAddFromLibProps) => { const [currentSelection, setCurrentSelection] = useState<{ [key: number]: boolean; }>({}); + + const tracker = useFonctionTracker(); + const canAdd = Object.values(currentSelection).find(v => !!v); // met à jour notre sélection interne lorsqu'une case est dé/cochée @@ -83,13 +87,17 @@ export const AddFromLib = (props: TAddFromLibProps) => { ))}
-
- setFilters({...filters, page})} - /> -
+ + { + setFilters({...filters, page}); + tracker({fonction: 'pagination', action: 'clic'}); + }} + /> ) : null} diff --git a/app.territoiresentransitions.react/src/ui/shared/preuves/AddPreuveModal/__snapshots__/AddFromLib.stories.storyshot b/app.territoiresentransitions.react/src/ui/shared/preuves/AddPreuveModal/__snapshots__/AddFromLib.stories.storyshot index 5fe179f7e5..d74987057a 100644 --- a/app.territoiresentransitions.react/src/ui/shared/preuves/AddPreuveModal/__snapshots__/AddFromLib.stories.storyshot +++ b/app.territoiresentransitions.react/src/ui/shared/preuves/AddPreuveModal/__snapshots__/AddFromLib.stories.storyshot @@ -125,85 +125,63 @@ Array [ -
- -
+ 1 + + + + + + ,