Project

General

Profile

1
import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
2
import {AbstractControl} from '@angular/forms';
3
import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
4

    
5
@Component({
6
  selector: '[search-input]',
7
  styleUrls: ['search-input.component.css'],
8
  template: `
9
    <div class="uk-flex uk-flex-middle uk-flex-center search-input" [ngClass]="colorClass">
10
      <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered && (showSearch || selected)" [class.focused]="showSearch">
11
        <form (ngSubmit)="search()">
12
          <input #input type="text" class="uk-width-1-1"
13
                 [class.uk-animation-slide-right-medium]="showSearch && !selected"
14
                 [class.uk-hidden@m]="!showSearch"
15
                 [placeholder]="placeholder"
16
                 (blur)="closeSearch()"
17
                 [formControl]="control"
18
                 [matAutocomplete]="auto">
19
          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
20
            <mat-option *ngFor="let option of list | async" [value]="option">
21
              {{option}}
22
            </mat-option>
23
          </mat-autocomplete>
24
        </form>
25
        <div *ngIf="selected && !showSearch" class="uk-flex selected uk-padding-small uk-visible@m">
26
          <span class="uk-flex uk-flex-middle clickable" style="max-width: 100%" [class.uk-width-1-1]="bordered">
27
            <span class="uk-width-expand uk-text-truncate" (click)="toggle()">{{selected}}</span>
28
            <icon name="close" class="space" [ratio]="0.8" (click)="resetEmitter.emit()"></icon>
29
          </span>
30
        </div>
31
      </div>
32
      <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-margin-medium-left uk-visible@m"
33
              (mousedown)="$event.preventDefault()" (click)="toggle()" 
34
              [attr.uk-tooltip]="'title: '+placeholder+'; cls: uk-padding-small uk-active'">
35
        <span [ngClass]="colorClass" class="icon-bg">
36
          <icon class="uk-position-center" name="search"></icon>
37
        </span>
38
        <span class="uk-text-uppercase overlay">{{toggleTitle}}</span>
39
      </button>
40
      <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m"
41
              (mousedown)="$event.preventDefault()" (click)="search()"
42
              [attr.uk-tooltip]="'title: '+placeholder+'; cls: uk-padding-small uk-active'">
43
        <span [ngClass]="colorClass" class="icon-bg">
44
          <icon class="uk-position-center" name="search"></icon>
45
        </span>
46
        <span class="uk-text-uppercase overlay">{{toggleTitle}}</span>
47
      </button>
48
    </div>`
49
})
50
export class SearchInputComponent {
51
  @Input()
52
  showSearch: boolean = true;
53
  @Input()
54
  control: AbstractControl;
55
  @Input()
56
  placeholder: string;
57
  @Input()
58
  loading: boolean = false;
59
  @Input()
60
  selected: any;
61
  @Input()
62
  list: any = null;
63
  @Input()
64
  colorClass: string = 'portal-color';
65
  @Input()
66
  bordered: boolean = false;
67
  @Input()
68
  toggleTitle: string = 'search';
69
  @ViewChild('input') input: ElementRef;
70
  @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
71
  @Output()
72
  searchEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
73
  @Output()
74
  resetEmitter: EventEmitter<any> = new EventEmitter<any>();
75
  @Output()
76
  closeEmitter: EventEmitter<any> = new EventEmitter<any>();
77
  
78
  toggle() {
79
    this.showSearch = !this.showSearch;
80
    if (this.showSearch) {
81
      setTimeout(() => { // this will make the execution after the above boolean has changed
82
        this.input.nativeElement.focus();
83
      }, 0);
84
    }
85
  }
86
  
87
  closeSearch() {
88
    this.showSearch = false;
89
    this.closeEmitter.emit();
90
  }
91
  
92
  public search(emit = true) {
93
    this.trigger.closePanel();
94
    this.searchEmitter.emit(emit);
95
  }
96
  
97
  public reset() {
98
    this.control.setValue('');
99
    this.input.nativeElement.value = '';
100
    this.showSearch = true;
101
    setTimeout(() => {
102
      this.input.nativeElement.focus();
103
    }, 0);
104
  }
105
}
(2-2/3)