D-Net

import {Component, Input, OnChanges, OnDestroy, OnInit, 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";

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-text-small uk-form-hint">{{hint}}</div>

    <div class="uk-grid uk-flex uk-flex-middle" [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'">

          <input class="uk-input input-box uk-text-small"

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

                 [placeholder]="placeholder" [formControl]="formControl"

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

        </ng-template>

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

          <textarea class="uk-textarea input-box uk-text-small"

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

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

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

          </textarea>

        </ng-template>

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

          <div class="input-box"

               [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 class="input-box"

               [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 aria-label="Page selection">

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

                          (removed)="removed(i)"

                          [removable]="removable">

                  {{chip.value[chipLabel]}}

                  <span (click)="removed(i)"

                        class="mat-chip-remove mat-chip-trailing-icon" uk-icon="close"></span>

                </mat-chip>

                <div class="uk-width-expand uk-position-relative uk-text-small">

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

                  <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)">

                <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 {

  @Input('formInput') formControl: AbstractControl;

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

  @Input('label') label: string;

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

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

  @Input('hint') hint = null;

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

  @ViewChild('select') select: MatSelect;

  @Input() extraLeft: boolean = true;

  @Input() gridSmall: boolean = false;

  @Input() hideControl: boolean = false;

  @Input() icon: string = null;

  @Input() iconLeft: boolean = false;

  @Input() warning: string = null;

  @Input() note: string = null;

  @Input() removable: boolean = true;

  @Input() chipLabel: string = null;

  public filteredOptions: Observable<Option[]>;

  public searchControl: FormControl;

  public required: boolean = false;

  private initValue: any;

  private subscriptions: any[] = [];

  @ViewChild('searchInput') searchInput;

  constructor() {

  }

  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();

  }

  selected(event: MatAutocompleteSelectedEvent): void {

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

    this.formAsArray.markAsDirty();

    this.searchControl.setValue('');

    this.searchInput.nativeElement.value = '';

  }

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

    let options = this.options.filter(option => !this.formAsArray.value.find(value => option.label === value[this.chipLabel]));

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

      return options;

    }

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

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

  }

}