Refactor search filters

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-main / misc / simple-search-input.component.ts

diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
index 86ae9ab4222cf7d21e103f35121fdae8652a4054..224d71134535697db729c6034cd82b6c12c149ec 100644 (file)
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
@@ -1,7 +1,7 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
 
 @Component({
   selector: 'simple-search-input',
@@ -13,11 +13,14 @@ export class SimpleSearchInputComponent implements OnInit {
 
   @Input() name = 'search'
   @Input() placeholder = $localize`Search`
+  @Input() iconTitle = $localize`Search`
+  @Input() alwaysShow = true
 
   @Output() searchChanged = new EventEmitter<string>()
+  @Output() inputDisplayChanged = new EventEmitter<boolean>()
 
   value = ''
-  shown: boolean
+  inputShown: boolean
 
   private searchSubject = new Subject<string>()
 
@@ -35,20 +38,51 @@ export class SimpleSearchInputComponent implements OnInit {
         .subscribe(value => this.searchChanged.emit(value))
 
     this.searchSubject.next(this.value)
+
+    if (this.isInputShown()) this.showInput(false)
   }
 
-  showInput () {
-    this.shown = true
-    setTimeout(() => this.input.nativeElement.focus())
+  isInputShown () {
+    if (this.alwaysShow) return true
+
+    return this.inputShown
+  }
+
+  onIconClick () {
+    if (!this.isInputShown()) {
+      this.showInput()
+      return
+    }
+
+    this.searchChange()
+  }
+
+  showInput (focus = true) {
+    this.inputShown = true
+    this.inputDisplayChanged.emit(this.inputShown)
+
+    if (focus) {
+      setTimeout(() => this.input.nativeElement.focus())
+    }
+  }
+
+  hideInput () {
+    this.inputShown = false
+
+    if (this.isInputShown() === false) {
+      this.inputDisplayChanged.emit(this.inputShown)
+    }
   }
 
   focusLost () {
-    if (this.value !== '') return
-    this.shown = false
+    if (this.value) return
+
+    this.hideInput()
   }
 
   searchChange () {
-    this.router.navigate(['./search'], { relativeTo: this.route })
+    this.router.navigate([ './search' ], { relativeTo: this.route })
+
     this.searchSubject.next(this.value)
   }
 }