2019-09-23 10:17:03 +02:00
|
|
|
|
2019-01-21 12:14:20 +01:00
|
|
|
import { Component, Input, OnInit } from '@angular/core';
|
2019-01-18 18:03:45 +01:00
|
|
|
import { FormGroup } from '@angular/forms';
|
2019-12-11 15:51:03 +01:00
|
|
|
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
|
|
|
|
import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
|
|
|
|
import { DatasetProfileInternalDmpEntitiesType } from '@app/core/common/enum/dataset-profile-internal-dmp-entities-type';
|
|
|
|
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
|
|
|
|
import { DatasetExternalAutocompleteCriteria } from '@app/core/query/dataset/daatset-external-autocomplete-criteria';
|
|
|
|
import { DatasetCriteria } from '@app/core/query/dataset/dataset-criteria';
|
|
|
|
import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
|
|
|
|
import { RequestItem } from '@app/core/query/request-item';
|
|
|
|
import { ResearcherCriteria } from '@app/core/query/researcher/researcher-criteria';
|
|
|
|
import { DatasetExternalAutocompleteService } from '@app/core/services/dataset/dataset-external-autocomplete.service';
|
|
|
|
import { DatasetService } from '@app/core/services/dataset/dataset.service';
|
|
|
|
import { DmpService } from '@app/core/services/dmp/dmp.service';
|
|
|
|
import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
|
|
|
|
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
|
|
|
|
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
|
|
|
|
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
|
|
|
|
import { BaseComponent } from '@common/base/base.component';
|
2019-07-29 11:26:08 +02:00
|
|
|
import { TranslateService } from '@ngx-translate/core';
|
2019-12-11 15:51:03 +01:00
|
|
|
import { map, takeUntil } from 'rxjs/operators';
|
2019-01-18 18:03:45 +01:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'app-form-field',
|
|
|
|
templateUrl: './form-field.component.html',
|
|
|
|
styleUrls: ['./form-field.component.scss']
|
|
|
|
})
|
|
|
|
export class FormFieldComponent extends BaseComponent implements OnInit {
|
2019-01-28 14:51:33 +01:00
|
|
|
|
2019-01-28 14:47:31 +01:00
|
|
|
// @Input() field: Field;
|
|
|
|
@Input() form: FormGroup;
|
2019-01-28 13:18:48 +01:00
|
|
|
@Input() datasetProfileId: String;
|
2019-02-04 14:41:54 +01:00
|
|
|
@Input() isChild: Boolean = false;
|
2019-01-18 18:03:45 +01:00
|
|
|
|
2019-01-28 14:47:31 +01:00
|
|
|
// change: Subscription;
|
|
|
|
// trackByFn = (index, item) => item ? item['id'] : null;
|
2019-01-18 18:03:45 +01:00
|
|
|
|
2019-01-21 12:14:20 +01:00
|
|
|
public singleAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
|
2019-03-26 16:09:02 +01:00
|
|
|
public multipleAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
|
2019-01-21 12:14:20 +01:00
|
|
|
datasetProfileFieldViewStyleEnum = DatasetProfileFieldViewStyle;
|
|
|
|
datasetProfileComboBoxTypeEnum = DatasetProfileComboBoxType;
|
2019-07-16 15:41:12 +02:00
|
|
|
datasetProfileInternalDmpEntitiesTypeEnum = DatasetProfileInternalDmpEntitiesType;
|
2019-01-21 12:14:20 +01:00
|
|
|
|
2019-01-18 18:03:45 +01:00
|
|
|
constructor(
|
2019-01-21 12:14:20 +01:00
|
|
|
public visibilityRulesService: VisibilityRulesService,
|
2019-07-16 15:41:12 +02:00
|
|
|
private datasetExternalAutocompleteService: DatasetExternalAutocompleteService,
|
2019-07-29 11:26:08 +02:00
|
|
|
private externalSourcesService: ExternalSourcesService,
|
2019-07-30 12:35:06 +02:00
|
|
|
private language: TranslateService,
|
2019-07-30 13:31:41 +02:00
|
|
|
private datasetService: DatasetService,
|
|
|
|
private dmpService: DmpService
|
2019-01-18 18:03:45 +01:00
|
|
|
) { super(); }
|
|
|
|
|
|
|
|
ngOnInit() {
|
2019-02-04 14:41:54 +01:00
|
|
|
if (this.form.get('value').value) {
|
|
|
|
this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, this.form.get('value').value);
|
|
|
|
}
|
2019-01-21 12:14:20 +01:00
|
|
|
|
2019-01-28 14:47:31 +01:00
|
|
|
// Setup autocomplete configuration if needed
|
|
|
|
if (this.form.get('viewStyle').value.renderStyle === DatasetProfileFieldViewStyle.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.Autocomplete) {
|
2019-03-26 16:09:02 +01:00
|
|
|
if (!(this.form.controls['data'].value.multiAutoComplete)) {
|
|
|
|
this.singleAutoCompleteConfiguration = {
|
|
|
|
filterFn: this.searchFromAutocomplete.bind(this),
|
2019-09-11 10:18:53 +02:00
|
|
|
initialItems: () => this.searchFromAutocomplete(''),
|
2019-03-26 16:09:02 +01:00
|
|
|
displayFn: (item) => (item != null && item.length > 1) ? JSON.parse(item).label : item['label'],
|
|
|
|
titleFn: (item) => item['label'],
|
2019-07-29 11:26:08 +02:00
|
|
|
valueAssign: (item) => JSON.stringify(item),
|
2019-09-11 10:18:53 +02:00
|
|
|
subtitleFn: (item) => item['source'] ? this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-SUBTITLE') + item['source'] : this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-NO-SOURCE')
|
2019-03-26 16:09:02 +01:00
|
|
|
};
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.multipleAutoCompleteConfiguration = {
|
|
|
|
filterFn: this.searchFromAutocomplete.bind(this),
|
2019-09-11 10:18:53 +02:00
|
|
|
initialItems: () => this.searchFromAutocomplete(''),
|
2019-03-26 16:09:02 +01:00
|
|
|
displayFn: (item) => item['label'],
|
|
|
|
titleFn: (item) => item['label'],
|
2019-07-29 11:26:08 +02:00
|
|
|
valueAssign: this._transformValue,
|
2019-09-11 10:18:53 +02:00
|
|
|
subtitleFn: (item) => item['source'] ? this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-SUBTITLE') + item['source'] : this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-NO-SOURCE')
|
2019-03-26 16:09:02 +01:00
|
|
|
}
|
|
|
|
}
|
2019-01-18 18:03:45 +01:00
|
|
|
}
|
2019-01-28 14:47:31 +01:00
|
|
|
|
2019-07-16 15:41:12 +02:00
|
|
|
if (this.form.get('viewStyle').value.renderStyle === DatasetProfileFieldViewStyle.InternalDmpEntities) {
|
|
|
|
if (this.form.get('data').value.type === DatasetProfileInternalDmpEntitiesType.Researchers) {
|
2019-07-30 12:35:06 +02:00
|
|
|
this.makeAutocompleteConfiguration(this.searchResearchers.bind(this), "name", "tag");
|
|
|
|
}
|
|
|
|
else if (this.form.get('data').value.type === DatasetProfileInternalDmpEntitiesType.Datasets) {
|
|
|
|
this.makeAutocompleteConfiguration(this.searchDatasets.bind(this), "label");
|
2019-07-16 15:41:12 +02:00
|
|
|
}
|
2019-07-30 13:31:41 +02:00
|
|
|
else if (this.form.get('data').value.type === DatasetProfileInternalDmpEntitiesType.Dmps) {
|
|
|
|
this.makeAutocompleteConfiguration(this.searchDmps.bind(this), "label");
|
|
|
|
}
|
2019-07-16 15:41:12 +02:00
|
|
|
}
|
|
|
|
|
2019-01-28 14:47:31 +01:00
|
|
|
// 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);
|
|
|
|
});
|
2019-01-18 18:03:45 +01:00
|
|
|
}
|
2019-03-26 16:09:02 +01:00
|
|
|
|
2019-12-17 12:08:01 +01:00
|
|
|
// _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));
|
|
|
|
// }
|
|
|
|
// }
|
2019-03-26 16:09:02 +01:00
|
|
|
|
|
|
|
_transformValue(item: any) {
|
|
|
|
if (!item) return [];
|
|
|
|
return item && typeof item === 'string' ? JSON.parse(item) : JSON.stringify(item);
|
|
|
|
}
|
2019-01-18 18:03:45 +01:00
|
|
|
|
2019-01-21 12:14:20 +01:00
|
|
|
searchFromAutocomplete(query: string) {
|
|
|
|
const autocompleteRequestItem: RequestItem<DatasetExternalAutocompleteCriteria> = new RequestItem();
|
|
|
|
autocompleteRequestItem.criteria = new DatasetExternalAutocompleteCriteria();
|
2019-01-28 14:51:33 +01:00
|
|
|
|
2019-01-28 14:47:31 +01:00
|
|
|
autocompleteRequestItem.criteria.fieldID = this.form.get('id').value;
|
2019-01-28 13:18:48 +01:00
|
|
|
autocompleteRequestItem.criteria.profileID = this.datasetProfileId;
|
2019-01-31 11:29:35 +01:00
|
|
|
autocompleteRequestItem.criteria.like = query;
|
2019-01-21 12:14:20 +01:00
|
|
|
return this.datasetExternalAutocompleteService.queryAutocomplete(autocompleteRequestItem);
|
|
|
|
}
|
2019-07-16 15:41:12 +02:00
|
|
|
|
|
|
|
searchResearchers(query: string) {
|
|
|
|
const reasearcherAutocompleteRequestItem: RequestItem<ResearcherCriteria> = new RequestItem();
|
|
|
|
reasearcherAutocompleteRequestItem.criteria = new ResearcherCriteria;
|
|
|
|
reasearcherAutocompleteRequestItem.criteria.name = query;
|
|
|
|
return this.externalSourcesService.searchDMPResearchers(reasearcherAutocompleteRequestItem);
|
|
|
|
}
|
2019-07-30 12:35:06 +02:00
|
|
|
|
|
|
|
searchDatasets(query: string) {
|
|
|
|
let fields: Array<string> = new Array();
|
|
|
|
const datasetsAutocompleteRequestItem: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 25, { fields: fields });
|
|
|
|
datasetsAutocompleteRequestItem.criteria = new DatasetCriteria();
|
|
|
|
datasetsAutocompleteRequestItem.criteria.like = query;
|
2019-09-23 10:17:03 +02:00
|
|
|
return this.datasetService.getPaged(datasetsAutocompleteRequestItem).pipe(map(item => item.data));
|
2019-07-30 12:35:06 +02:00
|
|
|
}
|
|
|
|
|
2019-07-30 13:31:41 +02:00
|
|
|
searchDmps(query: string) {
|
|
|
|
let fields: Array<string> = new Array();
|
|
|
|
const dmpsAutocompleteRequestItem: DataTableRequest<DmpCriteria> = new DataTableRequest(0, 25, { fields: fields });
|
|
|
|
dmpsAutocompleteRequestItem.criteria = new DmpCriteria();
|
|
|
|
dmpsAutocompleteRequestItem.criteria.like = query;
|
2019-09-23 10:17:03 +02:00
|
|
|
return this.dmpService.getPaged(dmpsAutocompleteRequestItem).pipe(map(item => item.data));
|
2019-07-30 13:31:41 +02:00
|
|
|
}
|
|
|
|
|
2019-07-30 12:35:06 +02:00
|
|
|
makeAutocompleteConfiguration(myfunc: Function, title: string, subtitle?: string): void {
|
|
|
|
if (!(this.form.controls['data'].value.multiAutoComplete)) {
|
|
|
|
this.singleAutoCompleteConfiguration = {
|
|
|
|
filterFn: myfunc.bind(this),
|
|
|
|
initialItems: (extraData) => myfunc(''),
|
|
|
|
displayFn: (item) => (item != null && item.length > 1) ? JSON.parse(item)[title] : item[title],
|
|
|
|
titleFn: (item) => item[title],
|
|
|
|
valueAssign: (item) => JSON.stringify(item),
|
|
|
|
subtitleFn: (item) => item[subtitle]
|
|
|
|
};
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.multipleAutoCompleteConfiguration = {
|
|
|
|
filterFn: myfunc.bind(this),
|
|
|
|
initialItems: (extraData) => myfunc(''),
|
|
|
|
displayFn: (item) => item[title],
|
|
|
|
titleFn: (item) => item[title],
|
|
|
|
valueAssign: this._transformValue,
|
|
|
|
subtitleFn: (item) => item[subtitle]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-01-18 18:03:45 +01:00
|
|
|
}
|