import { Component, Input, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { takeUntil } from 'rxjs/operators'; import { BaseComponent } from '../../../../../core/common/base/base.component'; import { DatasetProfileComboBoxType } from '../../../../../core/common/enum/dataset-profile-combo-box-type'; import { DatasetProfileFieldViewStyle } from '../../../../../core/common/enum/dataset-profile-field-view-style'; import { DatasetExternalAutocompleteCriteria } from '../../../../../core/query/dataset/daatset-external-autocomplete-criteria'; import { RequestItem } from '../../../../../core/query/request-item'; import { DatasetExternalAutocompleteService } from '../../../../../core/services/dataset/dataset-external-autocomplete.service'; import { SingleAutoCompleteConfiguration } from '../../../../../library/auto-complete/single/single-auto-complete-configuration'; import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service'; import { MultipleAutoCompleteConfiguration } from '../../../../../library/auto-complete/multiple/multiple-auto-complete-configuration'; @Component({ selector: 'app-form-field', templateUrl: './form-field.component.html', styleUrls: ['./form-field.component.scss'] }) export class FormFieldComponent extends BaseComponent implements OnInit { // @Input() field: Field; @Input() form: FormGroup; @Input() datasetProfileId: String; @Input() isChild: Boolean = false; // change: Subscription; // trackByFn = (index, item) => item ? item['id'] : null; public singleAutoCompleteConfiguration: SingleAutoCompleteConfiguration; public multipleAutoCompleteConfiguration: MultipleAutoCompleteConfiguration; datasetProfileFieldViewStyleEnum = DatasetProfileFieldViewStyle; datasetProfileComboBoxTypeEnum = DatasetProfileComboBoxType; constructor( public visibilityRulesService: VisibilityRulesService, private datasetExternalAutocompleteService: DatasetExternalAutocompleteService ) { super(); } ngOnInit() { if (this.form.get('value').value) { this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, this.form.get('value').value); } // Setup autocomplete configuration if needed if (this.form.get('viewStyle').value.renderStyle === DatasetProfileFieldViewStyle.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.Autocomplete) { if (!(this.form.controls['data'].value.multiAutoComplete)) { this.singleAutoCompleteConfiguration = { filterFn: this.searchFromAutocomplete.bind(this), initialItems: (extraData) => this.searchFromAutocomplete(''), displayFn: (item) => (item != null && item.length > 1) ? JSON.parse(item).label : item['label'], titleFn: (item) => item['label'], valueAssign: (item) => JSON.stringify(item) }; } else { this.multipleAutoCompleteConfiguration = { filterFn: this.searchFromAutocomplete.bind(this), initialItems: (extraData) => this.searchFromAutocomplete(''), displayFn: (item) => item['label'], titleFn: (item) => item['label'], valueAssign: this._transformValue } } } // this.form = this.visibilityRulesService.getFormGroup(this.field.id); this.form.get('value').valueChanges .pipe(takeUntil(this._destroyed)) .subscribe(item => { this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, item); }); } _optionRemove(event) { const array = JSON.parse(this.form.get('value').value); if (array) { const index = array.map(x => x.id).indexOf(event.id); if (index >= 0) { array.splice(index, 1); } this.form.get('value').patchValue(JSON.stringify(array)); } } _transformValue(item: any) { if (!item) return []; return item && typeof item === 'string' ? JSON.parse(item) : JSON.stringify(item); } searchFromAutocomplete(query: string) { const autocompleteRequestItem: RequestItem = new RequestItem(); autocompleteRequestItem.criteria = new DatasetExternalAutocompleteCriteria(); autocompleteRequestItem.criteria.fieldID = this.form.get('id').value; autocompleteRequestItem.criteria.profileID = this.datasetProfileId; autocompleteRequestItem.criteria.like = query; return this.datasetExternalAutocompleteService.queryAutocomplete(autocompleteRequestItem); } }