D-Net

import {

  Component,

  ElementRef,

  EventEmitter,

  HostListener,

  Input,

  OnChanges,

  OnDestroy,

  OnInit,

  Output,

  SimpleChanges,

  ViewChild

} from "@angular/core";

import {AbstractControl, FormArray, FormControl, ValidatorFn} 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' || type === 'URL' || type === 'logoURL'">

          <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':null">

            <input #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':null">

              <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 === 'autocomplete'">

          <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 *ngIf="formControl.value" [selectable]="false" [removable]="removable"

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

                  <span class="uk-flex uk-flex-middle uk-width-1-1">

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

                    <icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1"

                          (click)="resetSearch($event)"></icon>

                  </span>

                </mat-chip>

                <div [class.uk-hidden]="formControl.value" class="uk-width-expand uk-position-relative chip-input">

                  <input #searchInput [formControl]="searchControl" [matAutocomplete]="auto"

                         [matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin">

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

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

                </div>

                <div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>

              </mat-chip-list>

              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="formControl.setValue($event.option.value)" [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>

        <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 && searchControl.invalid && searchControl.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-flex uk-flex-middle uk-width-1-1">

                    <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" [flex]="true" [ratio]="smallChip?0.8:1" (click)="removed(i)"></icon>

                  </span>

                </mat-chip>

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

                  <input #searchInput style="width: calc(100% - 8px) !important;" [formControl]="searchControl" [matAutocomplete]="auto"

                         [matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin"

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

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

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

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

                </div>

                <div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></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.touched" class="uk-text-danger input-message">

          <span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span>

          <span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span>

        </span>

        <span class="uk-text-danger input-message">

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

        </span>

        <span *ngIf="formControl.valid" class="uk-text-warning input-message">

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

          <span *ngIf="!secure">

            <span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://</span>example.com/my-secure-image.png"

                instead of "<span class="uk-text-bold">http://</span>example.com/my-image.png".

                <span class="uk-text-bold">Browsers may not load non secure content.</span>

          </span>

        </span>

        <span class="input-message">

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

        </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' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'checkbox' | 'chips' = 'text';

  @Input('label') label: string;

  /** Text */

  @ViewChild('input') input: ElementRef;

  /** Textarea options */

  @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;

  /** Chip options */

  @Input() removable: boolean = true;

  @Input() addExtraChips: boolean = false;

  @Input() smallChip: boolean = false;

  @Input() panelWidth: number = 300;

  @Input() panelClass: string = null;

  @Input() showOptionsOnEmpty: boolean = true;

  @Input() validators: ValidatorFn[];

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

  /** LogoUrl information */

  public secure: boolean = true;

  /** Internal basic information */

  public required: boolean = false;

  private initValue: any;

  /** Chips && Autocomplete*/

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

    if(!this.focused && this.input) {

      this.input.nativeElement.setSelectionRange(0,0);

    }

    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.secure = true;

    this.unsubscribe();

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

    if(this.type === 'logoURL') {

      this.secure = (!this.initValue || this.initValue.includes('https://'));

    }

    if (this.type === 'chips' || this.type === 'autocomplete') {

      if(this.options) {

        this.filteredOptions = of(this.options);

        this.searchControl = new FormControl('', this.validators);

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

          setTimeout(() => {

            this.searchInput.nativeElement.focus();

            this.searchInput.nativeElement.value = value;

          },0);

        }));

        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.type === 'logoURL') {

        this.secure = (!value || value.includes('https://'));

      }

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

        this.formControl.markAsPristine();

      }

      if(this.searchControl) {

        this.searchControl.setValue(null);

      }

    }));

    if (!this.formControl.value) {

      this.formControl.setValue((this.type === "checkbox")?false:'');

    }

  }

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

  }

  selected(event: MatAutocompleteSelectedEvent): void {

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

    this.formAsArray.markAsDirty();

    this.searchControl.setValue('');

    this.stopPropagation();

  }

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

    let options = this.options;

    if(this.type === "chips") {

      options = options.filter(option => !this.formAsArray.value.find(value =>  HelperFunctions.equals(option.value, value)));

    }

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

      return (this.showOptionsOnEmpty)?options:[];

    }

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

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

  }

  add(event: MatChipInputEvent) {

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

      this.stopPropagation();

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

      this.formAsArray.markAsDirty();

      this.searchControl.setValue('');

      this.searchInput.nativeElement.value = '';

    }

  }

  getLabel(value: any) {

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

    return (option) ? option.label : value;

  }

  resetSearch(event: any) {

    event.stopPropagation();

    this.searchControl.setValue('');

    this.formControl.setValue(null);

  }

}