diff --git a/src/app/handle-page/handle-table/handle-table.component.html b/src/app/handle-page/handle-table/handle-table.component.html index b326fab10ad..fe9c49bf7f4 100644 --- a/src/app/handle-page/handle-table/handle-table.component.html +++ b/src/app/handle-page/handle-table/handle-table.component.html @@ -21,9 +21,8 @@
{{ 'handle-table.title' | translate }}
- + [(ngModel)]="searchQuery"> + @@ -31,7 +30,7 @@
{{ 'handle-table.title' | translate }}
-
+
{ + const currentPagination$ = this.getCurrentPagination(); + const currentSort$ = this.getCurrentSort(); + const searchTerm$ = new BehaviorSubject(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,7 +365,7 @@ 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; } @@ -394,7 +373,7 @@ export class HandleTableComponent implements OnInit { // 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; @@ -402,16 +381,16 @@ export class HandleTableComponent implements OnInit { 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); + } }