openaire-library/sharedComponents/advanced-search-input/advanced-search-input.component.ts

import {
  AfterContentInit,
  Component,
  ContentChildren,
  EventEmitter, HostListener,
  Input,
  OnDestroy,
  Output,
  QueryList
} from "@angular/core";
import {InputComponent} from "../input/input.component";
import {EntitiesSelectionComponent} from "../../searchPages/searchUtils/entitiesSelection.component";

@Component({
  selector: 'advanced-search-input',
  template: `
    <div *ngIf="inputs.length > 0" class="search-input" [class.dark]="dark" [ngClass]="searchInputClass" [class.small-vertical]="smallVertical">
      <div class="uk-flex uk-flex-middle">
        <div class="uk-width-expand">
          <div class="uk-grid uk-grid-collapse inputs" [ngClass]="'uk-child-width-1-' + length" uk-grid>
            <ng-content></ng-content>
          </div>
        </div>
        <div class="uk-width-auto">
          <div class="search-icon" [class.disabled]="disabled" (click)="searchEmitter.emit()">
            <icon name="search" [flex]="true" ratio="1.3"></icon>
          </div>
        </div>
      </div>
    </div>
  `
})
export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy {
  @ContentChildren(InputComponent) inputs: QueryList<InputComponent>;
  @ContentChildren(EntitiesSelectionComponent) entities: QueryList<EntitiesSelectionComponent>;
  @Input() disabled: boolean = false;
  @Input() searchInputClass: string = 'inner';
  @Input() dark: boolean;
  @Input() smallVertical: boolean = false;
  @Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
  
  @HostListener('window:keydown', ['$event'])
  keyEvent(event: KeyboardEvent) {
    let input: InputComponent | EntitiesSelectionComponent = this.inputs.toArray().find(input => input.focused);
    if(!input) {
      input = this.entities.toArray().find(input => input.input.focused);
    }
    if(input) {
      if(event.code === 'Enter') {
        if(input instanceof EntitiesSelectionComponent) {
          input.input.focus(false, event);
        } else {
          input.focus(false, event);
        }
        event.preventDefault();
        this.searchEmitter.emit();
      }
    }
  }
  
  constructor() {
  }
  
  ngAfterContentInit() {
    this.inputs.forEach(input => {
      input.inputClass = 'advanced-search';
    });
  }
  
  ngOnDestroy() {
  }
  
  get length() {
    return this.inputs.length + this.entities.length;
  }
}