refactor: show top of the list if query changed (no setTimeout)

This commit is contained in:
Jovan Krunić
2021-05-28 14:31:31 +02:00
committed by Rainer Killinger
parent 00d52fa069
commit 66167831e6
3 changed files with 32 additions and 24 deletions

View File

@@ -23,8 +23,8 @@ import {
SCThings,
} from '@openstapps/core';
import {NGXLogger} from 'ngx-logger';
import {Subject, Subscription} from 'rxjs';
import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
import {combineLatest, Subject, Subscription} from 'rxjs';
import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';
import {ContextMenuService} from '../../menu/context/context-menu.service';
import {SettingsProvider} from '../../settings/settings.provider';
import {DataRoutingService} from '../data-routing.service';
@@ -64,6 +64,10 @@ export class SearchPageComponent implements OnInit {
* Search value from search bar
*/
queryText: string;
/**
* Emits when there is a change in the query (search, sort or filter changed)
*/
queryChanged = new Subject<void>();
/**
* Subject to handle search text changes
*/
@@ -107,26 +111,22 @@ export class SearchPageComponent implements OnInit {
) {
this.initialize();
this.subscriptions.push(this.queryTextChanged
.pipe(
debounceTime(this.searchQueryDueTime),
distinctUntilChanged())
.subscribe((model) => {
combineLatest(
[this.queryTextChanged.pipe(debounceTime(this.searchQueryDueTime),
distinctUntilChanged(),
startWith(this.queryText),
),
this.contextMenuService.filterQueryChanged$.pipe(startWith(this.filterQuery)),
this.contextMenuService.sortQueryChanged$.pipe(startWith(this.sortQuery)),
])
.subscribe(async (query) => {
this.queryText = query[0];
this.filterQuery = query[1];
this.sortQuery = query[2];
this.from = 0;
this.queryText = model;
this.fetchAndUpdateItems();
}));
this.subscriptions.push(this.contextMenuService.filterQueryChanged$.subscribe((query) => {
this.filterQuery = query;
this.from = 0;
this.fetchAndUpdateItems();
}));
this.subscriptions.push(this.contextMenuService.sortQueryChanged$.subscribe((query) => {
this.sortQuery = query;
this.from = 0;
this.fetchAndUpdateItems();
}));
await this.fetchAndUpdateItems();
this.queryChanged.next();
});
this.fetchAndUpdateItems();