feat(donnees-liste): ajout pagination #605

IGNF · Feb 5, 2025 · 8935442 · 8935442
1 parent 474b3b1
commit 8935442
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/assets/entrepot/pages/datasheet/DatasheetList/DatasheetList.tsx b/assets/entrepot/pages/datasheet/DatasheetList/DatasheetList.tsx
@@ -10,7 +10,7 @@ import LoadingIcon from "../../../../components/Utils/LoadingIcon";
 import Skeleton from "../../../../components/Utils/Skeleton";
 import { useTranslation } from "../../../../i18n/i18n";
 import RQKeys from "../../../../modules/entrepot/RQKeys";
-import { routes } from "../../../../router/router";
+import { routes, useRoute } from "../../../../router/router";
 import api from "../../../api";
 import DatasheetListItem from "./DatasheetListItem";
 
@@ -20,6 +20,12 @@ type DatasheetListProps = {
 const DatasheetList: FC<DatasheetListProps> = ({ datastoreId }) => {
     const { t } = useTranslation("DatasheetList");
 
+    const { params } = useRoute();
+    const pagination = {
+        page: params["page"] ? parseInt(params["page"]) : 1,
+        limit: params["limit"] ? parseInt(params["limit"]) : 20,
+    };
+
     const datastoreQuery = useQuery({
         queryKey: RQKeys.datastore(datastoreId),
         queryFn: ({ signal }) => api.datastore.get(datastoreId, { signal }),
@@ -67,9 +73,22 @@ const DatasheetList: FC<DatasheetListProps> = ({ datastoreId }) => {
             {datasheetListQuery.data === undefined ? (
                 <Skeleton count={12} rectangleHeight={100} />
             ) : (
-                datasheetListQuery?.data?.map((datasheet: Datasheet) => (
-                    <DatasheetListItem key={datasheet.name} datastoreId={datastoreId} datasheet={datasheet} />
-                ))
+                <>
+                    {datasheetListQuery?.data
+                        ?.slice((pagination.page - 1) * pagination.limit, pagination.page * pagination.limit)
+                        .map((datasheet: Datasheet) => <DatasheetListItem key={datasheet.name} datastoreId={datastoreId} datasheet={datasheet} />)}
+
+                    <div className={fr.cx("fr-grid-row", "fr-grid-row--center", "fr-mt-6v")}>
+                        <Pagination
+                            count={Math.ceil(datasheetListQuery.data?.length / pagination.limit)}
+                            showFirstLast={true}
+                            getPageLinkProps={(pageNumber) => ({
+                                ...routes.datasheet_list({ datastoreId, page: pageNumber, limit: pagination.limit }).link,
+                            })}
+                            defaultPage={pagination.page}
+                        />
+                    </div>
+                </>
             )}
         </DatastoreLayout>
     );

diff --git a/assets/router/router.ts b/assets/router/router.ts
@@ -109,6 +109,8 @@ const routeDefs = {
     datasheet_list: defineRoute(
         {
             datastoreId: param.path.string,
+            page: param.query.optional.number.default(1),
+            limit: param.query.optional.number.default(20),
         },
         (p) => `${appRoot}/entrepot/${p.datastoreId}/donnees`
     ),