UIHAADM-95: Paginate list of jobs (#57)

indexdata · Nov 22, 2023 · e4048b1 · e4048b1
1 parent 2f81b41
commit e4048b1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change history for ui-harvester-admin
 
+## [2.1.0] IN PROGRESS
+
+* Paginate list of jobs. Fixes UIHAADM-95.
+
 ## [2.0.0](https://github.com/folio-org/ui-harvester-admin/tree/v2.0.0) (2023-10-13)
 
 * BREAKING: upgrade React to v18. Fixes UIHAADM-90.

diff --git a/src/routes/JobsRoute.js b/src/routes/JobsRoute.js
@@ -2,12 +2,13 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { stripesConnect } from '@folio/stripes/core';
 import { StripesConnectedSource } from '@folio/stripes/smart-components';
+
 import queryFunction from '../search/queryFunction';
 import Jobs from '../views/Jobs';
 
 
-const INITIAL_RESULT_COUNT = 100;
-const RESULT_COUNT_INCREMENT = 100;
+const INITIAL_RESULT_COUNT = 200;
+const RESULT_COUNT_INCREMENT = 200;
 
 
 const JobsRoute = ({ stripes, resources, mutator, children }) => {
@@ -19,7 +20,13 @@ const JobsRoute = ({ stripes, resources, mutator, children }) => {
     source.update({ resources, mutator }, 'reportTitles');
   }
 
-  const handleNeedMoreData = () => source.fetchMore(RESULT_COUNT_INCREMENT);
+  const handleNeedMoreData = (_askAmount, index) => {
+    if (index >= 0) {
+      source.fetchOffset(index);
+    } else {
+      source.fetchMore(RESULT_COUNT_INCREMENT);
+    }
+  };
 
   const hasLoaded = resources.jobs.hasLoaded;
   const error = resources.jobs.failed ? resources.jobs.failed.message : undefined;
@@ -45,13 +52,17 @@ const JobsRoute = ({ stripes, resources, mutator, children }) => {
 JobsRoute.manifest = Object.freeze({
   query: {},
   resultCount: { initialValue: INITIAL_RESULT_COUNT },
+  resultOffset: { initialValue: 0 },
   jobs: {
     type: 'okapi',
     path: 'harvester-admin/previous-jobs',
     throwErrors: false,
     records: 'previousJobs',
     recordsRequired: '%{resultCount}',
+    resultOffset: '%{resultOffset}',
     perRequest: RESULT_COUNT_INCREMENT,
+    resultDensity: 'sparse',
+    accumulate: 'true',
     params: {
       // Modify the query-function to remove unwanted asterisks after ID searches
       query: (queryParams, pathComponents, rv, logger) => {

diff --git a/src/views/Jobs/Jobs.js b/src/views/Jobs/Jobs.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { AppIcon } from '@folio/stripes/core';
-import { LoadingPane, Paneset, Pane, MultiColumnList, ErrorModal } from '@folio/stripes/components';
+import { LoadingPane, Paneset, Pane, MultiColumnList, ErrorModal, MCLPagingTypes } from '@folio/stripes/components';
 import { ColumnManager, SearchAndSortQuery } from '@folio/stripes/smart-components';
 import parseSort from '../../util/parseSort';
 import formatDateTime from '../../util/formatDateTime';
@@ -97,14 +97,14 @@ function Jobs({
                         appIcon={<AppIcon app="harvester-admin" />}
                         defaultWidth="fill"
                         padContent={false}
+                        height="92%"
                         paneTitle={paneTitle}
                         paneSub={<FormattedMessage id="ui-harvester-admin.resultCount" values={{ count: resultCount }} />}
                         actionMenu={() => renderColumnsMenu}
                       >
                         <MultiColumnList
                           autosize
                           id="list-jobs"
-                          virtualize
                           visibleColumns={visibleColumns}
                           columnMapping={columnMapping}
                           columnWidths={columnWidths}
@@ -122,6 +122,7 @@ function Jobs({
                           onNeedMoreData={onNeedMoreData}
                           sortedColumn={sortedColumn}
                           sortDirection={sortDirection}
+                          pagingType={MCLPagingTypes.PREV_NEXT}
                           onRowClick={(event, rec) => updateQuery({ _path: `${packageInfo.stripes.route}/jobs/${rec.id}` })}
                         />
                         <ErrorModal