Refactor video views

[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..99abb94e7fa35f4c27f9f23160399a621fe9046b 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,10 +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'
 
 @Component({
-  selector: 'simple-search-input',
+  selector: 'my-simple-search-input',
   templateUrl: './simple-search-input.component.html',
   styleUrls: [ './simple-search-input.component.scss' ]
 })
@@ -13,42 +10,67 @@ 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>()
-
-  constructor (
-    private router: Router,
-    private route: ActivatedRoute
-  ) {}
+  private hasAlreadySentSearch = false
 
   ngOnInit () {
-    this.searchSubject
-        .pipe(
-          debounceTime(400),
-          distinctUntilChanged()
-        )
-        .subscribe(value => this.searchChanged.emit(value))
+    if (this.isInputShown()) this.showInput(false)
+  }
+
+  isInputShown () {
+    if (this.alwaysShow) return true
+
+    return this.inputShown
+  }
+
+  onIconClick () {
+    if (!this.isInputShown()) {
+      this.showInput()
+      return
+    }
+
+    this.sendSearch()
+  }
+
+  showInput (focus = true) {
+    this.inputShown = true
+    this.inputDisplayChanged.emit(this.inputShown)
 
-    this.searchSubject.next(this.value)
+    if (focus) {
+      setTimeout(() => this.input.nativeElement.focus())
+    }
   }
 
-  showInput () {
-    this.shown = true
-    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.searchSubject.next(this.value)
+  sendSearch () {
+    this.hasAlreadySentSearch = true
+    this.searchChanged.emit(this.value)
+  }
+
+  onResetFilter () {
+    this.value = ''
+
+    if (this.hasAlreadySentSearch) this.sendSearch()
   }
 }