client/src/app/shared/search/search.component.ts

   1 import { Component, OnInit } from '@angular/core'
   2 import { Router } from '@angular/router'
   3
   4 import { Search } from './search.model'
   5 import { SearchField } from './search-field.type'
   6 import { SearchService } from './search.service'
   7
   8 @Component({
   9   selector: 'my-search',
  10   templateUrl: './search.component.html',
  11   styleUrls: [ './search.component.scss' ]
  12 })
  13
  14 export class SearchComponent implements OnInit {
  15   fieldChoices = {
  16     name: 'Name',
  17     account: 'Account',
  18     host: 'Host',
  19     tags: 'Tags'
  20   }
  21   searchCriteria: Search = {
  22     field: 'name',
  23     value: ''
  24   }
  25
  26   constructor (private searchService: SearchService, private router: Router) {}
  27
  28   ngOnInit () {
  29     // Subscribe if the search changed
  30     // Usually changed by videos list component
  31     this.searchService.updateSearch.subscribe(
  32       newSearchCriteria => {
  33         // Put a field by default
  34         if (!newSearchCriteria.field) {
  35           newSearchCriteria.field = 'name'
  36         }
  37
  38         this.searchCriteria = newSearchCriteria
  39       }
  40     )
  41   }
  42
  43   get choiceKeys () {
  44     return Object.keys(this.fieldChoices)
  45   }
  46
  47   choose ($event: MouseEvent, choice: SearchField) {
  48     $event.preventDefault()
  49     $event.stopPropagation()
  50
  51     this.searchCriteria.field = choice
  52
  53     if (this.searchCriteria.value) {
  54       this.doSearch()
  55     }
  56   }
  57
  58   doSearch () {
  59     if (this.router.url.indexOf('/videos/list') === -1) {
  60       this.router.navigate([ '/videos/list' ])
  61     }
  62
  63     this.searchService.searchUpdated.next(this.searchCriteria)
  64   }
  65
  66   getStringChoice (choiceKey: SearchField) {
  67     return this.fieldChoices[choiceKey]
  68   }
  69 }