| /******************************************************************************** |
| * 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); |
| } |
| } |