From b04c08e0c725028518dde303322eefcedf7afa4f Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Fri, 17 Jan 2025 10:12:33 +0100
Subject: [PATCH] added pagination to batch jobs table
---
src/components/Job/JobDetailsBatchJob.jsx | 30 ++++++++++++++++++++---
1 file changed, 27 insertions(+), 3 deletions(-)
diff --git a/src/components/Job/JobDetailsBatchJob.jsx b/src/components/Job/JobDetailsBatchJob.jsx
index cad2712e..fdfb6e15 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>
);
--
GitLab