Improve advanced input filter

4 files changed, 89 insertions, 11 deletions

diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index 10f5861b9..b902726fa 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -39,23 +39,23 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
       title: $localize`Advanced filters`,
       children: [
         {
-          queryParams: { search: 'state:pending' },
+          value: 'state:pending',
           label: $localize`Unsolved reports`
         },
         {
-          queryParams: { search: 'state:accepted' },
+          value: 'state:accepted',
           label: $localize`Accepted reports`
         },
         {
-          queryParams: { search: 'state:rejected' },
+          value: 'state:rejected',
           label: $localize`Refused reports`
         },
         {
-          queryParams: { search: 'videoIs:blacklisted' },
+          value: 'videoIs:blacklisted',
           label: $localize`Reports with blocked videos`
         },
         {
-          queryParams: { search: 'videoIs:deleted' },
+          value: 'videoIs:deleted',
           label: $localize`Reports with deleted videos`
         }
       ]
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index c662b9bb6..7031cb53b 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -8,9 +8,11 @@
       <ng-container *ngFor="let group of filters">
         <h6 class="dropdown-header">{{ group.title }}</h6>
 
-        <a *ngFor="let filter of group.children" [routerLink]="[ '.' ]" [queryParams]="filter.queryParams" class="dropdown-item">
+        <button *ngFor="let filter of group.children" (click)="onFilterClick(filter)" class="dropdown-item">
+          <my-global-icon [ngClass]="{ 'no-visible': !isFilterEnabled(filter) }" iconName="tick"></my-global-icon>
+
           {{ filter.label }}
-        </a>
+        </button>
       </ng-container>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
index 07a43761c..ee1b3b508 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -1,6 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
+.dropdown-item {
+  font-size: 14px;
+}
+
 input {
   @include peertube-input-text(250px);
 }
@@ -8,3 +12,22 @@ input {
 .input-group-text {
   background-color: transparent;
 }
+
+my-global-icon {
+  $size: 18px;
+  $margin: 2px;
+
+  @include margin-right($margin);
+
+  opacity: 1;
+  width: 18px;
+  height: 18px;
+
+
+  &.no-visible {
+    @include margin-right($size + $margin);
+
+    width: 0;
+    height: 0;
+  }
+}
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'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { ActivatedRoute, Params, Router } from '@angular/router'
+import { RestService } from '@app/core'
 
 export type AdvancedInputFilter = {
   title: string
 
-  children: {
-    label: string
-    queryParams: Params
-  }[]
+  children: AdvancedInputFilterChild[]
+}
+
+export type AdvancedInputFilterChild = {
+  label: string
+  value: string
 }
 
 const logger = debug('peertube:AdvancedInputFilterComponent')
@@ -28,6 +31,8 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
 
   searchValue: string
 
+  private enabledFilters = new Set<string>()
+
   private searchStream: Subject<string>
 
   private viewInitialized = false
@@ -35,6 +40,7 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
 
   constructor (
     private route: ActivatedRoute,
+    private restService: RestService,
     private router: Router
   ) { }
 
@@ -62,6 +68,18 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
     return this.filters && this.filters.length !== 0
   }
 
+  isFilterEnabled (filter: AdvancedInputFilterChild) {
+    return this.enabledFilters.has(filter.value)
+  }
+
+  onFilterClick (filter: AdvancedInputFilterChild) {
+    const newSearch = this.isFilterEnabled(filter)
+      ? this.removeFilterToSearch(this.searchValue, filter)
+      : this.addFilterToSearch(this.searchValue, filter)
+
+    this.router.navigate([ '.' ], { relativeTo: this.route, queryParams: { search: newSearch.trim() } })
+  }
+
   private scheduleSearchUpdate (value: string) {
     this.searchValue = value
     this.searchStream.next(this.searchValue)
@@ -71,6 +89,7 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
     this.searchValue = value
 
     this.setQueryParams(this.searchValue)
+    this.parseFilters(this.searchValue)
     this.emitSearch()
   }
 
@@ -84,6 +103,9 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
         if (this.searchValue === search) return
 
         this.searchValue = search
+
+        this.parseFilters(this.searchValue)
+
         this.emitSearch()
       })
   }
@@ -98,6 +120,7 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
       )
       .subscribe(() => {
         this.setQueryParams(this.searchValue)
+        this.parseFilters(this.searchValue)
 
         this.emitSearch()
       })
@@ -120,4 +143,34 @@ export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
     if (search) Object.assign(queryParams, { search })
     this.router.navigate([ ], { queryParams })
   }
+
+  private removeFilterToSearch (search: string, removedFilter: AdvancedInputFilterChild) {
+    return search.replace(removedFilter.value, '')
+  }
+
+  private addFilterToSearch (search: string, newFilter: AdvancedInputFilterChild) {
+    const prefix = newFilter.value.split(':').shift()
+
+    // Tokenize search and remove a potential existing filter
+    const tokens = this.restService.tokenizeString(search)
+                                   .filter(t => !t.startsWith(prefix))
+
+    tokens.push(newFilter.value)
+
+    return tokens.join(' ')
+  }
+
+  private parseFilters (search: string) {
+    const tokens = this.restService.tokenizeString(search)
+
+    this.enabledFilters = new Set()
+
+    for (const group of this.filters) {
+      for (const filter of group.children) {
+        if (tokens.includes(filter.value)) {
+          this.enabledFilters.add(filter.value)
+        }
+      }
+    }
+  }
 }