UIPFU-96 - Switch between pagination types based on filter selection

folio-org · Sep 3, 2024 · b94de4b · b94de4b
1 parent 46d1e8e
commit b94de4b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/src/UserSearchContainer.js b/src/UserSearchContainer.js
@@ -161,19 +161,19 @@ class UserSearchContainer extends React.Component {
     this.source.update(this.props);
   }
 
-  onNeedMoreData = (askAmount, index) => {
+  onNeedMoreData = (askAmount, index, firstINdex, direction) => {
     const { resultOffset } = this.props.mutator;
-    let offset = index;
-    if (offset < askAmount) {
-      /*
-        This condition sets offset to 100 when there are less than 100 records in the current
-        paginated result in order to skip the first 100 records and make an API call to fetch next 100.
-      */
-      offset = 100;
-    }
+
+    const fetchedUsers = get(this.props.resources, 'records.records', []);
+    const totalUserRecords = this.source.totalCount();
+
     if (this.source) {
-      if (resultOffset && offset >= 0) {
-        this.source.fetchOffset(offset);
+      if (!direction) {
+        if (fetchedUsers.length < totalUserRecords) {
+          this.source.fetchOffset(fetchedUsers.length);
+        }
+      } else if (resultOffset && index >= 0) {
+        this.source.fetchOffset(index);
       } else {
         this.source.fetchMore(RESULT_COUNT_INCREMENT);
       }

diff --git a/src/UserSearchView.js b/src/UserSearchView.js
@@ -181,6 +181,25 @@ class UserSearchView extends React.Component {
     return filterConfig;
   }
 
+  getPagingType = (activeFilters) => {
+    const { data, source } = this.props;
+    const { users } = data;
+    let pagingType = MCLPagingTypes.PREV_NEXT;
+
+    /**
+     * if active filter contain "Unassigned", switch to "LOAD_MORE" paging type.
+     * at the page, mark the pagination as "NONE"
+     */
+    if (activeFilters.state?.uas?.length === 1) {
+      if (activeFilters.state.uas[0] === 'Unassigned') {
+        if (source?.resources?.records?.records.length >= users.count) pagingType = MCLPagingTypes.NONE;
+        else pagingType = MCLPagingTypes.LOAD_MORE;
+      } else pagingType = MCLPagingTypes.NONE;
+    }
+
+    return pagingType;
+  };
+
   render() {
     const {
       onSelectRow,
@@ -389,7 +408,7 @@ class UserSearchView extends React.Component {
                             isEmptyMessage={resultsStatusMessage}
                             autosize
                             pageAmount={100}
-                            pagingType={MCLPagingTypes.PREV_NEXT}
+                            pagingType={this.getPagingType(activeFilters)}
                           />
 
                         </Pane>