dataquest-dev · milanmajchrak · Apr 4, 2025 · Mar 31, 2025 · Apr 2, 2025 · Apr 2, 2025
diff --git a/src/app/handle-page/handle-table/handle-table.component.html b/src/app/handle-page/handle-table/handle-table.component.html
@@ -21,17 +21,16 @@ <h5 class="card-header">{{ 'handle-table.title' | translate }}</h5>
         </div>
       </div>
         <input type="text" id="clarin-dc-search-box" class="form-control" aria-label="Text input with dropdown button"
-               [value]="searchQuery"
-               #searchInput>
-        <span class="input-group-append" (click)="searchHandles(searchInput.value)">
+               [(ngModel)]="searchQuery">
+        <span class="input-group-append" (click)="searchHandles()">
           <button type="submit" class="btn btn-primary search-button">
             <i class="fas fa-search"></i>{{'handle-table.dropdown.search-button' | translate}}</button>
         </span>
       </div>
 
       <!-- The table with pagination -->
       <div *ngVar="(handlesRD$ | async)?.payload as handles">
-        <div class="mb-2">
+        <div class="mb-2 table-responsive">
           <ds-pagination (paginationChange)="onPageChange()"
                          [sortOptions]="sortConfiguration"
                          [hideGear]="true"

diff --git a/src/app/handle-page/handle-table/handle-table.component.ts b/src/app/handle-page/handle-table/handle-table.component.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { BehaviorSubject, combineLatest as observableCombineLatest, fromEvent } from 'rxjs';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { BehaviorSubject, combineLatest } from 'rxjs';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { HandleDataService } from '../../core/data/handle-data.service';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { debounceTime, distinctUntilChanged, switchMap, take } from 'rxjs/operators';
+import { scan, switchMap, take } from 'rxjs/operators';
 import { getFirstSucceededRemoteData, getRemoteDataPayload } from '../../core/shared/operators';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import {
@@ -58,11 +58,6 @@ export class HandleTableComponent implements OnInit {
               private notificationsService: NotificationsService,) {
   }
 
-  /**
-   * The reference for the input html element
-   */
-  @ViewChild('searchInput', {static: true}) searchInput: ElementRef;
-
   /**
    * The list of Handle object as BehaviorSubject object
    */
@@ -153,13 +148,20 @@ export class HandleTableComponent implements OnInit {
     this.isLoading = true;
 
     // load the current pagination and sorting options
-    const currentPagination$ = this.paginationService.getCurrentPagination(this.options.id, this.options);
-    const currentSort$ = this.paginationService.getCurrentSort(this.options.id, this.sortConfiguration);
-
-    observableCombineLatest([currentPagination$, currentSort$]).pipe(
-      switchMap(([currentPagination, currentSort]) => {
+    const currentPagination$ = this.getCurrentPagination();
+    const currentSort$ = this.getCurrentSort();
+    const searchTerm$ = new BehaviorSubject<string>(this.searchQuery);
+
+    combineLatest([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 }) => {
         return this.handleDataService.findAll({
-            currentPage: currentPagination.currentPage,
+            currentPage: currentPage,
             elementsPerPage: currentPagination.pageSize,
             sort: {field: currentSort.field, direction: currentSort.direction}
           }, false
@@ -351,29 +353,6 @@ export class HandleTableComponent implements OnInit {
     }, 250 );
   }
 
-  /**
-   * If the user is typing the searchQuery is changing.
-   */
-  setSearchQuery() {
-    if (isEmpty(this.searchOption)) {
-      return;
-    }
-
-    fromEvent(this.searchInput.nativeElement,'keyup')
-      .pipe(
-        debounceTime(300),
-        distinctUntilChanged()
-      )
-      .subscribe( cc => {
-        this.searchHandles(this.searchInput.nativeElement.value);
-        setTimeout(() => {
-          // click to refresh table data because without click it still shows wrong data
-          document.getElementById('clarin-dc-search-box').click();
-        }, 25);
-      });
-
-  }
-
   /**
    * The search option is selected from the dropdown menu.
    * @param event with the selected value
@@ -386,32 +365,32 @@ export class HandleTableComponent implements OnInit {
    * Update the sortConfiguration based on the `searchOption` and the `searchQuery` but parse that attributes at first.
    * @param searchQuery
    */
-  searchHandles(searchQuery = '') {
+  searchHandles() {
     if (isEmpty(this.searchOption)) {
       return;
     }
 
     // parse searchQuery for the server request
     // the new sorting query is in the format e.g. `handle:123456`, `resourceTypeId:2`, `url:internal`
     let parsedSearchOption = '';
-    let parsedSearchQuery = searchQuery;
+    let parsedSearchQuery = this.searchQuery;
     switch (this.searchOption) {
       case this.handleOption:
         parsedSearchOption = HANDLE_SEARCH_OPTION;
         break;
       case this.internalOption:
         // if the handle doesn't have the URL - is internal, if it does - is external
         parsedSearchOption = URL_SEARCH_OPTION;
-        if (searchQuery === 'Yes' || searchQuery === 'yes') {
+        if (this.searchQuery.toLowerCase() === 'yes') {
           parsedSearchQuery = 'internal';
-        } else if (searchQuery === 'No' || searchQuery === 'no') {
+        } else if (this.searchQuery.toLowerCase() === 'no') {
           parsedSearchQuery = 'external';
         }
         break;
       case this.resourceTypeOption:
         parsedSearchOption = RESOURCE_TYPE_SEARCH_OPTION;
         // parse resourceType from string to the number because the resourceType is integer on the server
-        switch (searchQuery) {
+        switch (this.searchQuery) {
           case ITEM:
             parsedSearchQuery = '' + 2;
             break;
@@ -441,4 +420,18 @@ export class HandleTableComponent implements OnInit {
   private initializeSortingOptions() {
     this.sortConfiguration = defaultSortConfiguration;
   }
+
+  /**
+   * Get the current pagination options.
+   */
+  private getCurrentPagination() {
+    return this.paginationService.getCurrentPagination(this.options.id, defaultPagination);
+  }
+
+  /**
+   * Get the current sorting options.
+   */
+  private getCurrentSort() {
+    return this.paginationService.getCurrentSort(this.options.id, defaultSortConfiguration);
+  }
 }