From 5ed46c1bce29affbe101f126d58657ab484bffe7 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 16 Nov 2020 14:47:05 +0100 Subject: Refactor rest table search filter --- client/src/app/core/rest/rest-table.ts | 39 +++++++++++++++++++++++++++++++--- 1 file changed, 36 insertions(+), 3 deletions(-) (limited to 'client/src/app/core') diff --git a/client/src/app/core/rest/rest-table.ts b/client/src/app/core/rest/rest-table.ts index 7e7e6f4f7..50f6bf39d 100644 --- a/client/src/app/core/rest/rest-table.ts +++ b/client/src/app/core/rest/rest-table.ts @@ -1,9 +1,10 @@ -import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' +import * as debug from 'debug' import { LazyLoadEvent, SortMeta } from 'primeng/api' -import { RestPagination } from './rest-pagination' import { Subject } from 'rxjs' import { debounceTime, distinctUntilChanged } from 'rxjs/operators' -import * as debug from 'debug' +import { ActivatedRoute, Params, Router } from '@angular/router' +import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' +import { RestPagination } from './rest-pagination' const logger = debug('peertube:tables:RestTable') @@ -18,8 +19,13 @@ export abstract class RestTable { rowsPerPage = this.rowsPerPageOptions[0] expandedRows = {} + baseRoute: string + protected searchStream: Subject + protected route: ActivatedRoute + protected router: Router + abstract getIdentifier (): string initialize () { @@ -80,6 +86,33 @@ export abstract class RestTable { onSearch (event: Event) { const target = event.target as HTMLInputElement this.searchStream.next(target.value) + + this.setQueryParams((event.target as HTMLInputElement).value) + } + + setQueryParams (search: string) { + if (!this.baseRoute) return + + const queryParams: Params = {} + + if (search) Object.assign(queryParams, { search }) + this.router.navigate([ this.baseRoute ], { queryParams }) + } + + resetTableFilter () { + this.setTableFilter('') + this.setQueryParams('') + this.resetSearch() + } + + listenToSearchChange () { + this.route.queryParams + .subscribe(params => { + this.search = params.search || '' + + this.setTableFilter(this.search) + this.loadData() + }) } onPage (event: { first: number, rows: number }) { -- cgit v1.2.3