diff options
author | Chocobozzz <me@florianbigard.com> | 2021-11-03 14:23:55 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-11-03 14:23:55 +0100 |
commit | dd6d2a7ce50e7ff02e00995ccc87f8f929ad9709 (patch) | |
tree | b71ed391c2d8f99bff40dd3461010876de7bb23c /client/src/app/shared/shared-forms/advanced-input-filter.component.ts | |
parent | d324756edb836672f12284cd18e642a658b273d8 (diff) | |
download | PeerTube-dd6d2a7ce50e7ff02e00995ccc87f8f929ad9709.tar.gz PeerTube-dd6d2a7ce50e7ff02e00995ccc87f8f929ad9709.tar.zst PeerTube-dd6d2a7ce50e7ff02e00995ccc87f8f929ad9709.zip |
Improve advanced input filter
Diffstat (limited to 'client/src/app/shared/shared-forms/advanced-input-filter.component.ts')
-rw-r--r-- | client/src/app/shared/shared-forms/advanced-input-filter.component.ts | 61 |
1 files changed, 57 insertions, 4 deletions
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts index a12dddf7a..d8aeaa0fa 100644 --- a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts +++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts | |||
@@ -3,14 +3,17 @@ import { Subject } from 'rxjs' | |||
3 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' | 3 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' |
4 | import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core' | 4 | import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core' |
5 | import { ActivatedRoute, Params, Router } from '@angular/router' | 5 | import { ActivatedRoute, Params, Router } from '@angular/router' |
6 | import { RestService } from '@app/core' | ||
6 | 7 | ||
7 | export type AdvancedInputFilter = { | 8 | export type AdvancedInputFilter = { |
8 | title: string | 9 | title: string |
9 | 10 | ||
10 | children: { | 11 | children: AdvancedInputFilterChild[] |
11 | label: string | 12 | } |
12 | queryParams: Params | 13 | |
13 | }[] | 14 | export type AdvancedInputFilterChild = { |
15 | label: string | ||
16 | value: string | ||
14 | } | 17 | } |
15 | 18 | ||
16 | const logger = debug('peertube:AdvancedInputFilterComponent') | 19 | const logger = debug('peertube:AdvancedInputFilterComponent') |
@@ -28,6 +31,8 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit { | |||
28 | 31 | ||
29 | searchValue: string | 32 | searchValue: string |
30 | 33 | ||
34 | private enabledFilters = new Set<string>() | ||
35 | |||
31 | private searchStream: Subject<string> | 36 | private searchStream: Subject<string> |
32 | 37 | ||
33 | private viewInitialized = false | 38 | private viewInitialized = false |
@@ -35,6 +40,7 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit { | |||
35 | 40 | ||
36 | constructor ( | 41 | constructor ( |
37 | private route: ActivatedRoute, | 42 | private route: ActivatedRoute, |
43 | private restService: RestService, | ||
38 | private router: Router | 44 | private router: Router |
39 | ) { } | 45 | ) { } |
40 | 46 | ||
@@ -62,6 +68,18 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit { | |||
62 | return this.filters && this.filters.length !== 0 | 68 | return this.filters && this.filters.length !== 0 |
63 | } | 69 | } |
64 | 70 | ||
71 | isFilterEnabled (filter: AdvancedInputFilterChild) { | ||
72 | return this.enabledFilters.has(filter.value) | ||
73 | } | ||
74 | |||
75 | onFilterClick (filter: AdvancedInputFilterChild) { | ||
76 | const newSearch = this.isFilterEnabled(filter) | ||
77 | ? this.removeFilterToSearch(this.searchValue, filter) | ||
78 | : this.addFilterToSearch(this.searchValue, filter) | ||
79 | |||
80 | this.router.navigate([ '.' ], { relativeTo: this.route, queryParams: { search: newSearch.trim() } }) | ||
81 | } | ||
82 | |||
65 | private scheduleSearchUpdate (value: string) { | 83 | private scheduleSearchUpdate (value: string) { |
66 | this.searchValue = value | 84 | this.searchValue = value |
67 | this.searchStream.next(this.searchValue) | 85 | this.searchStream.next(this.searchValue) |
@@ -71,6 +89,7 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit { | |||
71 | this.searchValue = value | 89 | this.searchValue = value |
72 | 90 | ||
73 | this.setQueryParams(this.searchValue) | 91 | this.setQueryParams(this.searchValue) |
92 | this.parseFilters(this.searchValue) | ||
74 | this.emitSearch() | 93 | this.emitSearch() |
75 | } | 94 | } |
76 | 95 | ||
@@ -84,6 +103,9 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit { | |||
84 | if (this.searchValue === search) return | 103 | if (this.searchValue === search) return |
85 | 104 | ||
86 | this.searchValue = search | 105 | this.searchValue = search |
106 | |||
107 | this.parseFilters(this.searchValue) | ||
108 | |||
87 | this.emitSearch() | 109 | this.emitSearch() |
88 | }) | 110 | }) |
89 | } | 111 | } |
@@ -98,6 +120,7 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit { | |||
98 | ) | 120 | ) |
99 | .subscribe(() => { | 121 | .subscribe(() => { |
100 | this.setQueryParams(this.searchValue) | 122 | this.setQueryParams(this.searchValue) |
123 | this.parseFilters(this.searchValue) | ||
101 | 124 | ||
102 | this.emitSearch() | 125 | this.emitSearch() |
103 | }) | 126 | }) |
@@ -120,4 +143,34 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit { | |||
120 | if (search) Object.assign(queryParams, { search }) | 143 | if (search) Object.assign(queryParams, { search }) |
121 | this.router.navigate([ ], { queryParams }) | 144 | this.router.navigate([ ], { queryParams }) |
122 | } | 145 | } |
146 | |||
147 | private removeFilterToSearch (search: string, removedFilter: AdvancedInputFilterChild) { | ||
148 | return search.replace(removedFilter.value, '') | ||
149 | } | ||
150 | |||
151 | private addFilterToSearch (search: string, newFilter: AdvancedInputFilterChild) { | ||
152 | const prefix = newFilter.value.split(':').shift() | ||
153 | |||
154 | // Tokenize search and remove a potential existing filter | ||
155 | const tokens = this.restService.tokenizeString(search) | ||
156 | .filter(t => !t.startsWith(prefix)) | ||
157 | |||
158 | tokens.push(newFilter.value) | ||
159 | |||
160 | return tokens.join(' ') | ||
161 | } | ||
162 | |||
163 | private parseFilters (search: string) { | ||
164 | const tokens = this.restService.tokenizeString(search) | ||
165 | |||
166 | this.enabledFilters = new Set() | ||
167 | |||
168 | for (const group of this.filters) { | ||
169 | for (const filter of group.children) { | ||
170 | if (tokens.includes(filter.value)) { | ||
171 | this.enabledFilters.add(filter.value) | ||
172 | } | ||
173 | } | ||
174 | } | ||
175 | } | ||
123 | } | 176 | } |