nucleus/webclient/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, OnInit } from '@angular/core';
import {FormGroup} from '@angular/forms';
import {Condition, Operator, OperatorUtil} from './filter.service';
import {Node} from '../navigator/node';

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';
import { NavigatorService } from '@navigator/navigator.service';


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

  private readonly multiValueOperators = [Operator.LIKE, Operator.EQUALS, Operator.NOT_EQUALS];

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

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

  // date values for two input fields
  dateValue: Date;
  dateValueEnd: Date;

  // string values for two input fields
  stringValueStart: string = '';
  stringValueEnd: string = '';

  public isBinaryOperator = false;
  public isHandlingMultipleValues = false;

  constructor(private queryService: QueryService,
              private notificationService: MDMNotificationService,
              private translateService: TranslateService,
              private datePipe: DatePipe,
              private navigatorService: NavigatorService) { }

  ngOnInit() {
    // set default operator if empty and evaluates operator properties like multiple input, binary eg.
    this.setOperator(this.condition.operator === undefined ? Operator.EQUALS : this.condition.operator);
  }

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

    if (changes['condition']) {
      // set initial date to today, otherwise primeNg calender breaks on undefined input.
      if (this.condition.valueType === 'date') {
        if (this.condition.value === undefined || this.condition.value[0] === undefined) {
          this.dateValue = new Date();
          this.dateValue.setHours(0, 0, 0, 0);
        } else {
          this.dateValue = new Date(this.condition.value[0]);
        }
        this.setDateValue(this.dateValue, 0);
        if (this.condition.value === undefined || this.condition.value[1] === undefined) {
          this.dateValueEnd = new Date();
          this.dateValueEnd.setHours(0, 0, 0, 0);
          this.dateValueEnd.setDate(this.dateValueEnd.getDate() + 1)
        } else {
          this.dateValueEnd = new Date(this.condition.value[1]);
        }
        this.setDateValue(this.dateValue, 1);
      }
    }
  }

  onAutocompleteBlur(event: Event, htmlElement: AutoComplete) {
    this.onEnter(undefined, htmlElement);
  }

  onEnter(e: Event, autoComplete: AutoComplete) {
    if(this.isHandlingMultipleValues) {
      let hl = autoComplete.highlightOption;
      if (hl == undefined && this.lastQuery != undefined  && this.lastQuery !== '' || hl != undefined && this.displayedSuggestions.find(s => s === hl) == undefined) {
        if (autoComplete.value[autoComplete.value.length - 1] === hl) {
          autoComplete.value.pop();
        }
        autoComplete.selectItem(this.lastQuery);
        this.lastQuery = '';
      } else if (hl != undefined && this.displayedSuggestions.find(s => s === hl) != undefined) {
        autoComplete.selectItem(this.displayedSuggestions.find(s => s === hl));
        this.lastQuery = '';
      }
      autoComplete.highlightOption = undefined;
    } else {
      this.condition.value = [this.stringValueStart, this.stringValueEnd];
    }
    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;
    this.isBinaryOperator = operator === Operator.BETWEEN;
    this.isHandlingMultipleValues = this.multiValueOperators.some(op => op === operator);
    this.adjustInput();
  }

  private adjustInput() {
    if (this.condition.valueType === 'string') {
      if (!this.isHandlingMultipleValues) {
        this.stringValueStart = this.condition.value[0];
        this.stringValueEnd = this.condition.value[1];
      } else {
        this.condition.value = this.condition.value.filter(v => v != undefined);
      }
    }
  }

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

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

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

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