diff --git a/src/components/Job/JobDetailsBatchJob.jsx b/src/components/Job/JobDetailsBatchJob.jsx index cad2712efaa9ac1bfc40ac571fdc0326d372ccb0..fdfb6e151593ab05ff5b1fa9144a56328e5016b0 100644 --- a/src/components/Job/JobDetailsBatchJob.jsx +++ b/src/components/Job/JobDetailsBatchJob.jsx @@ -1,9 +1,10 @@ -import { useMemo } from "react"; +import { useMemo, useEffect, useState } from "react"; import { EllipsisText, InternalLink, Table, - SimpleAccordion + SimpleAccordion, + usePagination } from "@ess-ics/ce-ui-common"; import { Typography, Stack } from "@mui/material"; import { @@ -13,6 +14,7 @@ import { calculateHostText } from "./JobUtils"; import { JobRevisionChip } from "./JobRevisionChip"; +import { ROWS_PER_PAGE } from "../../constants"; const columns = [ { @@ -60,6 +62,14 @@ const createRow = (job, action) => { }; export const JobDetailsBatchJob = ({ operation }) => { + const [currentRows, setCurrentRows] = useState([]); + const { pagination, setPagination } = usePagination({ + rowsPerPageOptions: ROWS_PER_PAGE, + initLimit: ROWS_PER_PAGE[0], + initPage: 0, + initTotalCount: operation.jobs.length + }); + const noOfIOCs = useMemo(() => { return getNoOfIOCs(operation.jobs); }, [operation]); @@ -68,6 +78,18 @@ export const JobDetailsBatchJob = ({ operation }) => { return getNoOfHosts(operation.jobs); }, [operation]); + useEffect(() => { + const { limit, page } = pagination; + const list = operation.jobs.reduce((acc, _, index) => { + if (index % limit === 0) { + acc.push(operation.jobs.slice(index, index + limit)); + } + return acc; + }, []); + + setCurrentRows(list[page]); + }, [pagination, setPagination, operation]); + return ( <SimpleAccordion summary={ @@ -98,7 +120,9 @@ export const JobDetailsBatchJob = ({ operation }) => { <Table columns={columns} disableColumnSorting - rows={operation.jobs.map((job) => createRow(job, operation.action))} + rows={currentRows.map((job) => createRow(job, operation.action))} + pagination={pagination} + onPage={setPagination} /> </SimpleAccordion> );