D-Net

import {

  Component, ElementRef,

  EventEmitter, HostListener,

  Input,

  OnChanges,

  OnDestroy,

  OnInit,

  Output,

  SimpleChanges,

  ViewChild

} from "@angular/core";

import {AbstractControl, FormArray, FormControl} from "@angular/forms";

import {HelperFunctions} from "../../utils/HelperFunctions.class";

import {Observable, of, Subscription} from "rxjs";

import {MatSelect} from "@angular/material/select";

import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";

import {map, startWith} from "rxjs/operators";

import {MatChipInputEvent} from "@angular/material/chips";

export interface Option {

  icon?: string,

  iconClass?: string,

  value: any,

  label: string

}

@Component({

  selector: '[dashboard-input]',

  template: `

    <div *ngIf="label && type != 'checkbox'"

         class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div>

    <div *ngIf="hint" class="uk-margin-bottom uk-form-hint">{{hint}}</div>

    <div class="uk-grid uk-flex" [ngClass]="'uk-flex-' + flex" [class.uk-grid-small]="gridSmall" uk-grid>

      <ng-content></ng-content>

      <div [class.uk-hidden]="hideControl" class="uk-width-expand uk-position-relative"

           [class.uk-flex-first]="!extraLeft">

        <ng-template [ngIf]="icon && formControl.enabled">

          <span class="uk-text-muted" [ngClass]="iconLeft?('left'):'right'">

            <icon [name]="icon"></icon>

          </span>

        </ng-template>

        <ng-template [ngIf]="formControl.disabled">

          <span class="uk-text-muted left">

            <icon [name]="'lock'"></icon>

          </span>

        </ng-template>

        <ng-template [ngIf]="type === 'text'">

          <div [ngClass]="inputClass"

               [class.uk-form-danger]="formControl.invalid && formControl.touched"

               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''">

            <input class="uk-input" [placeholder]="placeholder" [formControl]="formControl">

          </div>

        </ng-template>

        <ng-template [ngIf]="type === 'textarea'">

          <div [ngClass]="inputClass" class="uk-padding-remove-right"

               [class.uk-form-danger]="formControl.invalid && formControl.touched"

               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''">

              <textarea class="uk-textarea"

                        [rows]="rows" [placeholder]="placeholder"

                        [formControl]="formControl">

              </textarea>

              <div class="tools" [class.focused]="focused">

                <ng-content select="[options]"></ng-content>

              </div>

          </div>

        </ng-template>

        <ng-template [ngIf]="type === 'select'">

          <div [ngClass]="inputClass"

               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"

               [class.clickable]="formControl.enabled"

               [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">

            <mat-form-field class="uk-width-1-1">

              <mat-select #select [required]="required" [value]="null"

                          (openedChange)="stopPropagation()" [formControl]="formControl"

                          [disableOptionCentering]="true">

                <mat-option *ngIf="placeholder" class="uk-hidden" [value]="''">{{placeholder}}</mat-option>

                <mat-option *ngFor="let option of options" [value]="option.value">

                  {{option.label}}

                </mat-option>

              </mat-select>

            </mat-form-field>

          </div>

        </ng-template>

        <ng-template [ngIf]="type === 'chips'">

          <div [ngClass]="inputClass"

               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"

               [class.clickable]="formControl.enabled"

               [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">

            <mat-form-field class="uk-width-1-1">

              <mat-chip-list #chipList>

                <mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false"

                          [removable]="removable" [attr.uk-tooltip]="getLabel(chip.value)">

                  <span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(chip.value)}}</span>

                  <icon name="remove_circle" class="mat-chip-remove" [ratio]="smallChip?0.8:1" (click)="removed(i)"></icon>

                </mat-chip>

                <div class="uk-width-expand uk-position-relative chip-input">

                  <input #searchInput class="uk-width-1-1" [formControl]="searchControl" [matAutocomplete]="auto"

                         [matChipInputFor]="chipList"

                         [matChipInputAddOnBlur]="addExtraChips && searchControl.value"

                         (matChipInputTokenEnd)="add($event)">

                  <div *ngIf="placeholder && !searchControl.value" class="placeholder uk-width-1-1"

                       (click)="searchInput.focus()">{{placeholder}}</div>

                </div>

              </mat-chip-list>

              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass" [panelWidth]="panelWidth">

                <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">

                  {{option.label}}

                </mat-option>

              </mat-autocomplete>

            </mat-form-field>

          </div>

        </ng-template>

        <span *ngIf="formControl.invalid && formControl.errors.error"

              class="uk-text-danger input-message">{{formControl.errors.error}}</span>

        <span *ngIf="warning" class="uk-text-warning input-message">{{warning}}</span>

        <span *ngIf="note" class="input-message">{{note}}</span>

      </div>

    </div>

    <mat-checkbox *ngIf="type === 'checkbox'" [formControl]="formControl">{{label}}</mat-checkbox>

  `,

  styleUrls: ['input.component.css']

})

export class InputComponent implements OnInit, OnDestroy, OnChanges {

  /** Basic information */

  @Input('formInput') formControl: AbstractControl;

  @Input('type') type: 'text' | 'textarea' | 'select' | 'checkbox' | 'chips' = 'text';

  @Input('label') label: string;

  @Input('rows') rows: number = 3;

  /** Select | chips available options */

  @Input('options') options: Option[];

  @Input('hint') hint = null;

  @Input('placeholder') placeholder = '';

  @Input() inputClass: string = 'input-box';

  /** Extra element Right or Left of the input */

  @Input() extraLeft: boolean = true;

  @Input() gridSmall: boolean = false;

  @Input() hideControl: boolean = false;

  @Input() flex: 'middle' | 'top' | 'bottom' = 'middle';

  /** Icon Right or Left on the input */

  @Input() icon: string = null;

  @Input() iconLeft: boolean = false;

  /** Custom messages */

  @Input() warning: string = null;

  @Input() note: string = null;

  /** Chip options */

  @Input() removable: boolean = true;

  @Input() addExtraChips: boolean = false;

  @Input() smallChip: boolean = false;

  @Input() panelWidth: number = 300;

  @Input() panelClass: string = null;

  @Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();

  /** Internal basic information */

  public required: boolean = false;

  private initValue: any;

  /** Chips */

  public filteredOptions: Observable<Option[]>;

  public searchControl: FormControl;

  private subscriptions: any[] = [];

  @ViewChild('select') select: MatSelect;

  @ViewChild('searchInput') searchInput: ElementRef;

  focused: boolean = false;

  constructor(private elementRef: ElementRef) {

  }

  @HostListener('document:click', ['$event'])

  clickOut(event) {

    this.focused = !!this.elementRef.nativeElement.contains(event.target);

    this.focusEmitter.emit(this.focused);

  }

  ngOnInit(): void {

    this.reset();

  }

  ngOnChanges(changes: SimpleChanges) {

    if (changes.formControl) {

      this.reset();

    }

  }

  get formAsArray(): FormArray {

    return (<FormArray>this.formControl);

  }

  reset() {

    this.unsubscribe();

    this.initValue = HelperFunctions.copy(this.formControl.value);

    if (this.options && this.type === 'chips') {

      this.filteredOptions = of(this.options);

      this.searchControl = new FormControl('');

      this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''),

        map(option => this.filter(option)));

    }

    if (this.formControl && this.formControl.validator) {

      let validator = this.formControl.validator({} as AbstractControl);

      this.required = (validator && validator.required);

    }

    this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {

      value = (value === '') ? null : value;

      if (this.initValue === value || (this.initValue === '' && value === null)) {

        this.formControl.markAsPristine();

      }

    }));

    if (!this.formControl.value) {

      this.formControl.setValue('');

    }

  }

  unsubscribe() {

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscription) {

        subscription.unsubscribe();

      }

    });

  }

  openSelect() {

    if (this.select) {

      this.select.open();

    }

  }

  ngOnDestroy(): void {

    this.unsubscribe();

  }

  stopPropagation() {

    event.stopPropagation();

  }

  removed(index: number) {

    this.formAsArray.removeAt(index);

    this.formAsArray.markAsDirty();

    this.searchControl.setValue('');

    this.searchInput.nativeElement.focus();

    this.searchInput.nativeElement.value = '';

    this.stopPropagation();

  }

  selected(event: MatAutocompleteSelectedEvent): void {

    this.formAsArray.push(new FormControl(event.option.value));

    this.formAsArray.markAsDirty();

    this.searchControl.setValue('');

    this.searchInput.nativeElement.focus();

    this.searchInput.nativeElement.value = '';

    this.stopPropagation();

  }

  private filter(value: string): Option[] {

    let options = this.options.filter(option => !this.formAsArray.value.find(value => option.value === value));

    if (!value || value.length == 0) {

      return [];

    }

    const filterValue = value.toString().toLowerCase();

    return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1);

  }

  add(event: MatChipInputEvent) {

    if (this.addExtraChips && event.value) {

      this.stopPropagation();

      this.formAsArray.push(new FormControl(event.value));

      this.formAsArray.markAsDirty();

      this.searchControl.setValue('');

      this.searchInput.nativeElement.value = '';

    }

  }

  getLabel(value: any) {

    let option = this.options.find(option => option.value === value);

    return (option) ? option.label : value;

  }

}