org.eclipse.mdm.nucleus/org.eclipse.mdm.application/src/main/webapp/src/app/search/search-condition.component.ts

/********************************************************************************
 * Copyright (c) 2015-2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ********************************************************************************/


import {Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, ViewChild, AfterViewInit} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {LocalizationService} from '../localization/localization.service';
import {Condition, Operator, OperatorUtil} from './filter.service';
import {Node} from '../navigator/node';

import {PropertyService} from '../core/property.service';
import {QueryService} from '../tableview/query.service';
import {AutoComplete} from 'primeng/primeng';

import {MDMNotificationService} from '../core/mdm-notification.service';

import {TranslateService} from '@ngx-translate/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: '[search-condition]',
  templateUrl: 'search-condition.component.html',
  styleUrls: ['search-condition.component.css'],
})
export class SearchConditionComponent implements OnChanges, AfterViewInit {

  @Input() env: string;
  @Input() condition: Condition;
  @Input() form: FormGroup;
  @Input() disabled: boolean;
  @Input() selectedEnvs: Node[];
  @Output() onRemove = new EventEmitter<Condition>();

  suggestions: string[];
  displayedSuggestions: string[] = [];
  lastQuery: string;
  dateValue: Date;

  @ViewChild(AutoComplete) primeAutoCompleteComponent: AutoComplete;

  constructor(private localservice: LocalizationService,
              private prop: PropertyService,
              private queryService: QueryService,
              private notificationService: MDMNotificationService,
              private translateService: TranslateService,
              private datePipe: DatePipe) { }

  ngAfterViewInit() {
    if (this.primeAutoCompleteComponent) {
      /* Workaround for missing onBlur handler in primeng version 2.x.
       * We overwrite the existing implementation and additional call our own event handler.
       * In later versions this feature was added https://github.com/primefaces/primeng/issues/2256
       * and this workaround should be removed when using primeng version 4 or later
       */
      this.primeAutoCompleteComponent.onBlur = function() {
        this.primeAutoCompleteComponent.focus = false;
        this.primeAutoCompleteComponent.onModelTouched();
        this.onAutocompleteBlur();
      }.bind(this);
    }
  }

  onAutocompleteBlur() {
    this.onEnter(new Event('blur'));
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['selectedEnvs'] && this.condition.valueType === 'string') {
      this.setAutoCompleteValues();
    }

    if (this.condition.valueType === 'date') {
      console.log(this.condition.value[0]);
      if (this.condition.value === undefined || this.condition.value[0] === undefined) {
        this.dateValue = new Date();
        (<Date> this.dateValue).setHours(0, 0, 0, 0);
      } else {
        this.dateValue = new Date(this.condition.value[0]);
      }
    }
  }

  onEnter(e: Event) {
    let hl = this.primeAutoCompleteComponent.highlightOption;
    if (hl == undefined && this.lastQuery !== '' || hl != undefined && this.displayedSuggestions.find(s => s === hl) == undefined) {
      if (this.primeAutoCompleteComponent.value[this.primeAutoCompleteComponent.value.length - 1] === hl) {
        this.primeAutoCompleteComponent.value.pop();
      }
      this.primeAutoCompleteComponent.selectItem(this.lastQuery);
      this.lastQuery = '';
    }
    this.primeAutoCompleteComponent.highlightOption = undefined;
    this.displayedSuggestions = [];
  }

  setAutoCompleteValues() {
    this.queryService.suggestValues(this.env === 'Global' ?
        this.selectedEnvs.map(env => env.sourceName) :
        [this.env], this.condition.type, this.condition.attribute)
      .subscribe(
        values => this.suggestions = Array.from(new Set<string>(values)),
        error => this.notificationService.notifyError(
          this.translateService.instant('search.search-condition.err-cannot-initialize-autocompletion'), error)
      );
  }

  updateSuggestions(e: any) {
    if (this.suggestions) {
    this.displayedSuggestions =
      [...this.suggestions.filter(sug => sug.toLowerCase().indexOf(e.query.toLowerCase()) > -1).slice(0, 10)];
    }
    this.lastQuery = e.query;
  }

  getOperators() {
    return OperatorUtil.values();
  }

  getOperatorName(op: Operator) {
    return OperatorUtil.toString(op);
  }

  setOperator(operator: Operator) {
    this.condition.operator = operator;
  }

  setValue(value: string) {
    this.condition.value = [value];
  }

  setValues(value: string[]) {
    this.condition.value = value;
  }

  setDateValue(value: Date) {
    console.log(value);
    this.condition.value = [this.datePipe.transform(value, 'yyyy-MM-dd' + 'T' + 'HH:mm:ss')];
  }

  remove() {
    this.onRemove.emit(this.condition);
  }
}