UFAL/Reset pagination on search term change (#1281)

Reset pagination on search term change

(cherry picked from commit aa495d3)

Co-authored-by: amadulhaxxani <hassan@ufal.mff.cuni.cz>

Author: kosarko

src/app/clarin-licenses/clarin-license-table/clarin-license-table.component.html

@@ -5,7 +5,7 @@
            [(ngModel)]="searchingLicenseName"
            class="form-control ng-pristine ng-valid ng-touched"
            [placeholder]="'clarin-license.button.search.placeholder' | translate"/>
-    <span class="input-group-append" (click)="loadAllLicenses()">
+    <span class="input-group-append" (click)="searchLicenses()">
       <button type="submit" class="btn btn-primary search-button">
         <i class="fas fa-search"></i>{{'clarin-license.button.search' | translate}}</button>
     </span>

src/app/clarin-licenses/clarin-license-table/clarin-license-table.component.spec.ts

@@ -44,6 +44,7 @@ describe('ClarinLicenseTableComponent', () => {
   let groupsDataService: GroupDataService;
   let service: ConfigurationDataService;
   let searchConfigurationServiceStub: SearchConfigurationService;
+  let paginationServiceStub: PaginationServiceStub;
 
   beforeEach(async () => {
     notificationService = new NotificationsServiceStub();
@@ -85,6 +86,7 @@ describe('ClarinLicenseTableComponent', () => {
       updateFixedFilter: jasmine.createSpy('updateFixedFilter'),
       setPaginationId: jasmine.createSpy('setPaginationId')
     });
+    paginationServiceStub = new PaginationServiceStub();
 
     await TestBed.configureTestingModule({
       imports: [
@@ -99,7 +101,7 @@ describe('ClarinLicenseTableComponent', () => {
         { provide: RequestService, useValue: requestService },
         { provide: ClarinLicenseDataService, useValue: clarinLicenseDataService },
         { provide: ClarinLicenseLabelDataService, useValue: clarinLicenseLabelDataService },
-        { provide: PaginationService, useValue: new PaginationServiceStub() },
+        { provide: PaginationService, useValue: paginationServiceStub },
         { provide: NotificationsService, useValue: notificationService },
         { provide: NgbActiveModal, useValue: modalStub },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
@@ -181,4 +183,50 @@ describe('ClarinLicenseTableComponent', () => {
     expect((component as any).clarinLicenseService.searchBy).toHaveBeenCalled();
     expect((component as ClarinLicenseTableComponent).licensesRD$).not.toBeNull();
   });
+
+  it('should reset pagination to page 1 when the search term changes', () => {
+    paginationServiceStub.pagination.id = defaultPagination.id;
+    paginationServiceStub.pagination.currentPage = 2;
+    paginationServiceStub.pagination.pageSize = 10;
+    paginationServiceStub.pagination.pageSizeOptions = defaultPagination.pageSizeOptions;
+    (component as any).clarinLicenseService.searchBy.calls.reset();
+    paginationServiceStub.resetPage.calls.reset();
+
+    component.searchingLicenseName = 'Universal';
+
+    component.searchLicenses();
+
+    expect(paginationServiceStub.resetPage).toHaveBeenCalledWith(defaultPagination.id);
+    expect((component as any).clarinLicenseService.searchBy).toHaveBeenCalledWith(
+      'byNameLike',
+      jasmine.objectContaining({
+        currentPage: 1,
+        elementsPerPage: 10,
+      }),
+      false
+    );
+  });
+
+  it('should not reset pagination when searching with the same term', () => {
+    paginationServiceStub.pagination.id = defaultPagination.id;
+    paginationServiceStub.pagination.currentPage = 2;
+    paginationServiceStub.pagination.pageSize = 10;
+    paginationServiceStub.pagination.pageSizeOptions = defaultPagination.pageSizeOptions;
+    (component as any).clarinLicenseService.searchBy.calls.reset();
+    paginationServiceStub.resetPage.calls.reset();
+    (component as any).previousSearchTerm = 'Universal';
+    component.searchingLicenseName = 'Universal';
+
+    component.searchLicenses();
+
+    expect(paginationServiceStub.resetPage).not.toHaveBeenCalled();
+    expect((component as any).clarinLicenseService.searchBy).toHaveBeenCalledWith(
+      'byNameLike',
+      jasmine.objectContaining({
+        currentPage: 2,
+        elementsPerPage: 10,
+      }),
+      false
+    );
+  });
 });

src/app/clarin-licenses/clarin-license-table/clarin-license-table.component.ts

@@ -5,7 +5,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { ClarinLicense } from '../../core/shared/clarin/clarin-license.model';
 import { getFirstCompletedRemoteData, getFirstSucceededRemoteData } from '../../core/shared/operators';
-import { scan, switchMap } from 'rxjs/operators';
+import { switchMap } from 'rxjs/operators';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { ClarinLicenseDataService } from '../../core/data/clarin/clarin-license-data.service';
 import { defaultPagination, defaultSortConfiguration } from '../clarin-license-table-pagination';
@@ -67,6 +67,11 @@ export class ClarinLicenseTableComponent implements OnInit {
    */
   searchingLicenseName = '';
 
+  /**
+   * Stores the previous search term to detect when a new search should reset pagination.
+   */
+  private previousSearchTerm = '';
+
   ngOnInit(): void {
     this.initializePaginationOptions();
     this.loadAllLicenses();
@@ -315,33 +320,39 @@ export class ClarinLicenseTableComponent implements OnInit {
     this.loadAllLicenses();
   }
 
+  /**
+   * Run a search and reset the route-backed pagination when the search term changes.
+   */
+  searchLicenses() {
+    const hasSearchTermChanged = this.searchingLicenseName !== this.previousSearchTerm;
+
+    if (hasSearchTermChanged) {
+      this.paginationService.resetPage(this.options.id);
+    }
+
+    this.loadAllLicenses(hasSearchTermChanged ? 1 : undefined);
+    this.previousSearchTerm = this.searchingLicenseName;
+  }
+
   /**
    * Fetch all licenses from the API.
    */
-  loadAllLicenses() {
+  loadAllLicenses(pageOverride?: number) {
     this.selectedLicense = null;
     this.licensesRD$ = new BehaviorSubject<RemoteData<PaginatedList<ClarinLicense>>>(null);
     this.isLoading = true;
 
     // load the current pagination and sorting options
     const currentPagination$ = this.getCurrentPagination();
     const currentSort$ = this.getCurrentSort();
-    const searchTerm$ = new BehaviorSubject<string>(this.searchingLicenseName);
-
-    observableCombineLatest([currentPagination$, currentSort$, searchTerm$]).pipe(
-      scan((prevState, [currentPagination, currentSort, searchTerm]) => {
-        // If search term has changed, reset to page 1; otherwise, keep current page
-        const currentPage = prevState.searchTerm !== searchTerm ? 1 : currentPagination.currentPage;
-        return { currentPage, currentPagination, currentSort, searchTerm };
-      }, { searchTerm: '', currentPage: 1, currentPagination: this.getCurrentPagination(),
-        currentSort: this.getCurrentSort() }),
 
-      switchMap(({ currentPage, currentPagination, currentSort, searchTerm }) => {
+    observableCombineLatest([currentPagination$, currentSort$]).pipe(
+      switchMap(([currentPagination, currentSort]) => {
         return this.clarinLicenseService.searchBy('byNameLike', {
-            currentPage: currentPage, // Properly reset page only when needed
+            currentPage: pageOverride ?? currentPagination.currentPage,
             elementsPerPage: currentPagination.pageSize,
             sort: { field: currentSort.field, direction: currentSort.direction },
-            searchParams: [new RequestParam('name', searchTerm)]
+            searchParams: [new RequestParam('name', this.searchingLicenseName)]
           }, false
         );
       }),