132284: Add paginated vocabulary search with ‘Show previous/next results’ controls in hierarchical browse

Author: Zahraa Chreim

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html

@@ -139,3 +139,20 @@ <h2 class="h4 text-center text-muted mt-4" >
     </cdk-tree-node>
   </cdk-tree>
 </div>
+<!-- Show previous/next results pagination -->
+@if ((showPreviousPage$ | async) || (showNextPage$ | async)) {
+  <div class="mb-3 d-flex gap-2">
+    @if (showPreviousPage$ | async) {
+      <button class="btn btn-outline-secondary"
+              (click)="loadPreviousPage()">
+        {{ 'browse.taxonomy.show_previous_results' | translate }}
+      </button>
+    }
+    @if (showNextPage$ | async) {
+      <button class="btn btn-outline-secondary"
+              (click)="loadNextPage()">
+        {{ 'browse.taxonomy.show_next_results' | translate }}
+      </button>
+    }
+  </div>
+}

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts

@@ -20,6 +20,7 @@ import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import {
   Observable,
+  of,
   Subscription,
 } from 'rxjs';
 
@@ -159,6 +160,14 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
 
   readonly AlertType = AlertType;
 
+  public showNextPage$ = this.vocabularyTreeviewService.showNextPageSubject
+    ? this.vocabularyTreeviewService.showNextPageSubject.asObservable()
+    : of(false);
+
+  public showPreviousPage$ = this.vocabularyTreeviewService.showPreviousPageSubject
+    ? this.vocabularyTreeviewService.showPreviousPageSubject.asObservable()
+    : of(false);
+
   /**
    * Initialize instance variables
    *
@@ -314,6 +323,30 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
     }
   }
 
+  /**
+   * Loads the next page of vocabulary search results.
+   * Increments the current page in the service and re-triggers the query with the same search term and selection.
+   */
+  loadNextPage(): void {
+    const svc = this.vocabularyTreeviewService;
+
+    if (svc.currentPage < svc.totalPages) {
+      svc.searchByQueryAndPage(svc.queryInProgress, [], svc.currentPage + 1);
+    }
+  }
+
+  /**
+   * Loads the previous page of vocabulary search results.
+   * Decrements the current page in the service and re-triggers the query with the same search term and selection.
+   */
+  loadPreviousPage(): void {
+    const svc = this.vocabularyTreeviewService;
+
+    if (svc.currentPage > 1) {
+      svc.searchByQueryAndPage(svc.queryInProgress, [], svc.currentPage - 1);
+    }
+  }
+
   /**
    * Check if search box contains any text
    */

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.service.ts

@@ -10,10 +10,13 @@ import {
   merge,
   mergeMap,
   scan,
+  tap,
 } from 'rxjs/operators';
 
 import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../core/data/remote-data';
 import {
+  getFirstSucceededRemoteData,
   getFirstSucceededRemoteDataPayload,
   getFirstSucceededRemoteListPayload,
 } from '../../../core/shared/operators';
@@ -90,6 +93,12 @@ export class VocabularyTreeviewService {
    */
   private hideSearchingWhenUnsubscribed$ = new Observable(() => () => this.loading.next(false));
 
+  public currentPage = 1;
+  public totalPages = 1;
+  public queryInProgress = '';
+  public showNextPageSubject = new BehaviorSubject<boolean>(false);
+  public showPreviousPageSubject = new BehaviorSubject<boolean>(false);
+
   /**
    * Initialize instance variables
    *
@@ -197,20 +206,51 @@ export class VocabularyTreeviewService {
   }
 
   /**
-   * Perform a search operation by query
+   * Initiates a vocabulary search using the provided query term and selection, starting from the first page.
+   *
+   * @param query - The text input to search for within the vocabulary.
+   * @param selectedItems - Currently selected vocabulary item IDs to retain in the result.
    */
   searchByQuery(query: string, selectedItems: string[]) {
+    this.searchByQueryAndPage(query, selectedItems, 1);
+  }
+
+  /**
+   * Executes a paginated vocabulary search with the given query, selection, and page number.
+   * Updates pagination state, loading indicators, and triggers the vocabulary tree rebuild.
+   *
+   * @param query - The search term to filter vocabulary entries.
+   * @param selectedItems - IDs of items currently selected in the tree.
+   * @param page - The page number to fetch (1-based index).
+   */
+  searchByQueryAndPage(query: string, selectedItems: string[], page: number = 1) {
     this.loading.next(true);
+    this.queryInProgress = query;
+    this.currentPage = page;
+
     if (isEmpty(this.storedNodes)) {
       this.storedNodes = this.dataChange.value;
       this.storedNodeMap = this.nodeMap;
     }
     this.nodeMap = new Map<string, TreeviewNode>();
     this.dataChange.next([]);
 
-    this.vocabularyService.getVocabularyEntriesByValue(query, false, this.vocabularyOptions, new PageInfo()).pipe(
+    const pageInfo = new PageInfo({
+      elementsPerPage: 20,
+      currentPage: page,
+      totalElements: 0,
+      totalPages: 0,
+    });
+
+    this.vocabularyService.getVocabularyEntriesByValue(query, false, this.vocabularyOptions, pageInfo).pipe(
+      getFirstSucceededRemoteData(),
+      tap((rd: RemoteData<PaginatedList<VocabularyEntry>>) => {
+        this.totalPages = rd.payload.pageInfo.totalPages;
+        this.showPreviousPageSubject.next(rd.payload.pageInfo.currentPage > 1);
+        this.showNextPageSubject.next(rd.payload.pageInfo.currentPage < this.totalPages);
+      }),
       getFirstSucceededRemoteListPayload(),
-      mergeMap((result: VocabularyEntry[]) => (result.length > 0) ? result : of(null)),
+      mergeMap((result: VocabularyEntry[]) => result.length > 0 ? result : of(null)),
       mergeMap((entry: VocabularyEntry) =>
         this.vocabularyService.findEntryDetailById(entry.otherInformation.id, this.vocabularyName).pipe(
           getFirstSucceededRemoteDataPayload(),

src/assets/i18n/en.json5

@@ -1127,6 +1127,10 @@
 
   "browse.title": "Browsing by {{ field }}{{ startsWith }} {{ value }}",
 
+  "browse.taxonomy.show_next_results": "Show next results",
+
+  "browse.taxonomy.show_previous_results": "Show previous results",
+
   "browse.title.page": "Browsing by {{ field }} {{ value }}",
 
   "search.browse.item-back": "Back to Results",