Adds the multiple autocomplete functionality on Combo Box Autocomplete.
This commit is contained in:
parent
02a42d22ba
commit
ed03abd254
|
@ -10,12 +10,11 @@ public class AutoCompleteData extends ComboBoxData<AutoCompleteData> {
|
||||||
private String url;
|
private String url;
|
||||||
private Option autoCompleteOptions;
|
private Option autoCompleteOptions;
|
||||||
private String optionsRoot;
|
private String optionsRoot;
|
||||||
|
private Boolean multiAutoComplete;
|
||||||
|
|
||||||
public String getOptionsRoot() {
|
public String getOptionsRoot() {
|
||||||
return optionsRoot;
|
return optionsRoot;
|
||||||
}
|
}
|
||||||
|
|
||||||
public void setOptionsRoot(String optionsRoot) {
|
public void setOptionsRoot(String optionsRoot) {
|
||||||
this.optionsRoot = optionsRoot;
|
this.optionsRoot = optionsRoot;
|
||||||
}
|
}
|
||||||
|
@ -23,7 +22,6 @@ public class AutoCompleteData extends ComboBoxData<AutoCompleteData> {
|
||||||
public String getUrl() {
|
public String getUrl() {
|
||||||
return url;
|
return url;
|
||||||
}
|
}
|
||||||
|
|
||||||
public void setUrl(String url) {
|
public void setUrl(String url) {
|
||||||
this.url = url;
|
this.url = url;
|
||||||
}
|
}
|
||||||
|
@ -31,17 +29,20 @@ public class AutoCompleteData extends ComboBoxData<AutoCompleteData> {
|
||||||
public Option getAutoCompleteOptions() {
|
public Option getAutoCompleteOptions() {
|
||||||
return autoCompleteOptions;
|
return autoCompleteOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
public void setAutoCompleteOptions(Option autoCompleteOptions) {
|
public void setAutoCompleteOptions(Option autoCompleteOptions) {
|
||||||
this.autoCompleteOptions = autoCompleteOptions;
|
this.autoCompleteOptions = autoCompleteOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public Boolean getMultiAutoComplete() { return multiAutoComplete; }
|
||||||
|
public void setMultiAutoComplete(Boolean multiAutoComplete) { this.multiAutoComplete = multiAutoComplete; }
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public Element toXml(Document doc) {
|
public Element toXml(Document doc) {
|
||||||
Element root = super.toXml(doc);
|
Element root = super.toXml(doc);
|
||||||
|
|
||||||
root.setAttribute("url", this.url);
|
root.setAttribute("url", this.url);
|
||||||
root.setAttribute("optionsRoot", this.optionsRoot);
|
root.setAttribute("optionsRoot", this.optionsRoot);
|
||||||
|
root.setAttribute("multiAutoComplete", this.multiAutoComplete.toString());
|
||||||
Element element = doc.createElement("option");
|
Element element = doc.createElement("option");
|
||||||
element.setAttribute("label", this.autoCompleteOptions.getLabel());
|
element.setAttribute("label", this.autoCompleteOptions.getLabel());
|
||||||
element.setAttribute("value", autoCompleteOptions.getValue());
|
element.setAttribute("value", autoCompleteOptions.getValue());
|
||||||
|
@ -54,6 +55,7 @@ public class AutoCompleteData extends ComboBoxData<AutoCompleteData> {
|
||||||
super.fromXml(item);
|
super.fromXml(item);
|
||||||
this.url = item.getAttribute("url");
|
this.url = item.getAttribute("url");
|
||||||
this.optionsRoot = item.getAttribute("optionsRoot");
|
this.optionsRoot = item.getAttribute("optionsRoot");
|
||||||
|
this.multiAutoComplete = Boolean.parseBoolean(item.getAttribute("multiAutoComplete"));
|
||||||
Element optionElement = (Element) item.getElementsByTagName("option").item(0);
|
Element optionElement = (Element) item.getElementsByTagName("option").item(0);
|
||||||
if (optionElement != null) {
|
if (optionElement != null) {
|
||||||
this.autoCompleteOptions = new Option();
|
this.autoCompleteOptions = new Option();
|
||||||
|
@ -70,6 +72,7 @@ public class AutoCompleteData extends ComboBoxData<AutoCompleteData> {
|
||||||
if (data != null) {
|
if (data != null) {
|
||||||
this.url = (String) ((Map<String, Object>) data).get("url");
|
this.url = (String) ((Map<String, Object>) data).get("url");
|
||||||
this.optionsRoot = (String) ((Map<String, Object>) data).get("optionsRoot");
|
this.optionsRoot = (String) ((Map<String, Object>) data).get("optionsRoot");
|
||||||
|
this.multiAutoComplete = (Boolean) ((Map<Boolean, Object>) data).get("multiAutoComplete");
|
||||||
Map<String, String> options = ((Map<String, Map<String, String>>) data).get("autoCompleteOptions");
|
Map<String, String> options = ((Map<String, Map<String, String>>) data).get("autoCompleteOptions");
|
||||||
if (options != null) {
|
if (options != null) {
|
||||||
this.autoCompleteOptions.setLabel(options.get("label"));
|
this.autoCompleteOptions.setLabel(options.get("label"));
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { DateTimeFormatPipe } from './pipes/date-time-format.pipe';
|
||||||
import { NgForLimitPipe } from './pipes/ng-for-limit.pipe';
|
import { NgForLimitPipe } from './pipes/ng-for-limit.pipe';
|
||||||
import { TimezoneInfoDisplayPipe } from './pipes/timezone-info-display.pipe';
|
import { TimezoneInfoDisplayPipe } from './pipes/timezone-info-display.pipe';
|
||||||
import { EnumUtils } from './services/utilities/enum-utils.service';
|
import { EnumUtils } from './services/utilities/enum-utils.service';
|
||||||
|
import { JsonParserPipe } from './pipes/json-parser.pipe';
|
||||||
|
|
||||||
//
|
//
|
||||||
//
|
//
|
||||||
|
@ -17,13 +18,15 @@ import { EnumUtils } from './services/utilities/enum-utils.service';
|
||||||
NgForLimitPipe,
|
NgForLimitPipe,
|
||||||
TimezoneInfoDisplayPipe,
|
TimezoneInfoDisplayPipe,
|
||||||
DateFormatPipe,
|
DateFormatPipe,
|
||||||
DateTimeFormatPipe
|
DateTimeFormatPipe,
|
||||||
|
JsonParserPipe
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
NgForLimitPipe,
|
NgForLimitPipe,
|
||||||
TimezoneInfoDisplayPipe,
|
TimezoneInfoDisplayPipe,
|
||||||
DateFormatPipe,
|
DateFormatPipe,
|
||||||
DateTimeFormatPipe
|
DateTimeFormatPipe,
|
||||||
|
JsonParserPipe
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
EnumUtils,
|
EnumUtils,
|
||||||
|
@ -31,7 +34,8 @@ import { EnumUtils } from './services/utilities/enum-utils.service';
|
||||||
NgForLimitPipe,
|
NgForLimitPipe,
|
||||||
TimezoneInfoDisplayPipe,
|
TimezoneInfoDisplayPipe,
|
||||||
DateFormatPipe,
|
DateFormatPipe,
|
||||||
DateTimeFormatPipe
|
DateTimeFormatPipe,
|
||||||
|
JsonParserPipe
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class FormattingModule { }
|
export class FormattingModule { }
|
||||||
|
|
|
@ -9,6 +9,7 @@ export interface AutoCompleteFieldData extends FieldData {
|
||||||
url: string;
|
url: string;
|
||||||
optionsRoot: string;
|
optionsRoot: string;
|
||||||
autoCompleteOptions: FieldDataOption;
|
autoCompleteOptions: FieldDataOption;
|
||||||
|
multiAutoComplete: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CheckBoxFieldData extends FieldData {
|
export interface CheckBoxFieldData extends FieldData {
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { Pipe, PipeTransform } from "@angular/core";
|
||||||
|
|
||||||
|
@Pipe({
|
||||||
|
name: 'jsonParser'
|
||||||
|
})
|
||||||
|
export class JsonParserPipe implements PipeTransform {
|
||||||
|
|
||||||
|
transform(val) {
|
||||||
|
if (typeof val === 'string') {
|
||||||
|
return JSON.parse(val)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,12 +3,14 @@ import { CommonFormsModule } from '../../common/forms/common-forms.module';
|
||||||
import { CommonUiModule } from '../../common/ui/common-ui.module';
|
import { CommonUiModule } from '../../common/ui/common-ui.module';
|
||||||
import { MultipleAutoCompleteComponent } from './multiple/multiple-auto-complete.component';
|
import { MultipleAutoCompleteComponent } from './multiple/multiple-auto-complete.component';
|
||||||
import { SingleAutoCompleteComponent } from './single/single-auto-complete.component';
|
import { SingleAutoCompleteComponent } from './single/single-auto-complete.component';
|
||||||
|
import { FormattingModule } from '../../core/formatting.module';
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonUiModule,
|
CommonUiModule,
|
||||||
CommonFormsModule
|
CommonFormsModule,
|
||||||
|
FormattingModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
SingleAutoCompleteComponent,
|
SingleAutoCompleteComponent,
|
||||||
|
|
|
@ -20,4 +20,6 @@ export interface MultipleAutoCompleteConfiguration {
|
||||||
titleFn?: (item: any) => string;
|
titleFn?: (item: any) => string;
|
||||||
// Display function for the drop down subtitle
|
// Display function for the drop down subtitle
|
||||||
subtitleFn?: (item: any) => string;
|
subtitleFn?: (item: any) => string;
|
||||||
|
// Callback to intercept value assignment based on item selection
|
||||||
|
valueAssign?: (selectedItem: any) => any;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="row multiple-auto-complete">
|
<div class="row multiple-auto-complete">
|
||||||
<mat-chip-list #chipList ngDefaultControl class="col multi-chip-list" [disabled]="disabled">
|
<mat-chip-list #chipList ngDefaultControl class="col multi-chip-list" [disabled]="disabled">
|
||||||
<mat-chip *ngFor="let selectedItem of _chipItems()" [disabled]="disabled" [selectable]="selectable" [removable]="removable" (removed)="_removeSelectedItem(selectedItem)">
|
<mat-chip *ngFor="let selectedItem of (_chipItems() | jsonParser)" [disabled]="disabled" [selectable]="selectable" [removable]="removable" (removed)="_removeSelectedItem(selectedItem)">
|
||||||
{{this._displayFn(selectedItem)}}
|
{{this._displayFn(selectedItem)}}
|
||||||
<mat-icon matChipRemove *ngIf="!disabled && removable">cancel</mat-icon>
|
<mat-icon matChipRemove *ngIf="!disabled && removable">cancel</mat-icon>
|
||||||
</mat-chip>
|
</mat-chip>
|
||||||
|
|
|
@ -87,16 +87,9 @@ export class MultipleAutoCompleteComponent implements OnInit, MatFormFieldContro
|
||||||
}
|
}
|
||||||
private _selectedValue;
|
private _selectedValue;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ViewChild('textInput') textInput: ElementRef;
|
@ViewChild('textInput') textInput: ElementRef;
|
||||||
@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;
|
@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private fm: FocusMonitor,
|
private fm: FocusMonitor,
|
||||||
private elRef: ElementRef,
|
private elRef: ElementRef,
|
||||||
|
@ -115,7 +108,6 @@ export class MultipleAutoCompleteComponent implements OnInit, MatFormFieldContro
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
filter(query: string): Observable<any[]> {
|
filter(query: string): Observable<any[]> {
|
||||||
|
@ -168,7 +160,24 @@ export class MultipleAutoCompleteComponent implements OnInit, MatFormFieldContro
|
||||||
return this.value || [];
|
return this.value || [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_arraysEqual(arr1, arr2) {
|
||||||
|
if (arr1.length !== arr2.length)
|
||||||
|
return false;
|
||||||
|
for (var i = arr1.length; i--;) {
|
||||||
|
if (arr1[i].id !== arr2[i].id)
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
_optionSelected(event: MatAutocompleteSelectedEvent) {
|
_optionSelected(event: MatAutocompleteSelectedEvent) {
|
||||||
|
if (this.configuration.valueAssign) {
|
||||||
|
const newValue = this.configuration.valueAssign(this.value) || [];
|
||||||
|
newValue.push(event.option.value);
|
||||||
|
this._setValue(this.configuration.valueAssign(newValue));
|
||||||
|
}
|
||||||
|
else {
|
||||||
const newValue = this.value || [];
|
const newValue = this.value || [];
|
||||||
newValue.push(event.option.value);
|
newValue.push(event.option.value);
|
||||||
this._setValue(newValue);
|
this._setValue(newValue);
|
||||||
|
@ -176,6 +185,7 @@ export class MultipleAutoCompleteComponent implements OnInit, MatFormFieldContro
|
||||||
this.optionSelected.emit(newValue);
|
this.optionSelected.emit(newValue);
|
||||||
this.textInput.nativeElement.value = '';
|
this.textInput.nativeElement.value = '';
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private _setValue(value: any) {
|
private _setValue(value: any) {
|
||||||
this.value = value;
|
this.value = value;
|
||||||
|
@ -221,6 +231,11 @@ export class MultipleAutoCompleteComponent implements OnInit, MatFormFieldContro
|
||||||
}
|
}
|
||||||
|
|
||||||
_removeSelectedItem(item: any): void {
|
_removeSelectedItem(item: any): void {
|
||||||
|
if (this.configuration.valueAssign) {
|
||||||
|
this.optionRemoved.emit(item);
|
||||||
|
this.textInput.nativeElement.focus();
|
||||||
|
}
|
||||||
|
else {
|
||||||
const index = this.value.indexOf(item);
|
const index = this.value.indexOf(item);
|
||||||
if (index >= 0) {
|
if (index >= 0) {
|
||||||
this.value.splice(index, 1);
|
this.value.splice(index, 1);
|
||||||
|
@ -229,6 +244,7 @@ export class MultipleAutoCompleteComponent implements OnInit, MatFormFieldContro
|
||||||
this.textInput.nativeElement.focus();
|
this.textInput.nativeElement.focus();
|
||||||
this.pushChanges(this.value);
|
this.pushChanges(this.value);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
_onInputClick(item: any) {
|
_onInputClick(item: any) {
|
||||||
if (!this.autocomplete.panelOpen) {
|
if (!this.autocomplete.panelOpen) {
|
||||||
|
|
|
@ -9,16 +9,20 @@ export class AutoCompleteFieldDataEditorModel extends FieldDataEditorModel<AutoC
|
||||||
public type: DatasetProfileComboBoxType = DatasetProfileComboBoxType.Autocomplete;
|
public type: DatasetProfileComboBoxType = DatasetProfileComboBoxType.Autocomplete;
|
||||||
public url: string;
|
public url: string;
|
||||||
public optionsRoot: string;
|
public optionsRoot: string;
|
||||||
|
public multiAutoComplete: boolean;
|
||||||
public autoCompleteOptions: FieldDataOptionEditorModel = new FieldDataOptionEditorModel();
|
public autoCompleteOptions: FieldDataOptionEditorModel = new FieldDataOptionEditorModel();
|
||||||
|
//public multiAutoCompleteOptions: FieldDataOptionEditorModel = new FieldDataOptionEditorModel();
|
||||||
|
|
||||||
buildForm(): FormGroup {
|
buildForm(): FormGroup {
|
||||||
const formGroup = this.formBuilder.group({
|
const formGroup = this.formBuilder.group({
|
||||||
label: [this.label],
|
label: [this.label],
|
||||||
type: [this.type],
|
type: [this.type],
|
||||||
url: [this.url],
|
url: [this.url],
|
||||||
optionsRoot: [this.optionsRoot]
|
optionsRoot: [this.optionsRoot],
|
||||||
|
multiAutoComplete: [this.multiAutoComplete]
|
||||||
});
|
});
|
||||||
formGroup.addControl('autoCompleteOptions', this.autoCompleteOptions.buildForm());
|
formGroup.addControl('autoCompleteOptions', this.autoCompleteOptions.buildForm());
|
||||||
|
|
||||||
return formGroup;
|
return formGroup;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -27,6 +31,7 @@ export class AutoCompleteFieldDataEditorModel extends FieldDataEditorModel<AutoC
|
||||||
this.url = item.url;
|
this.url = item.url;
|
||||||
this.label = item.label;
|
this.label = item.label;
|
||||||
this.optionsRoot = item.optionsRoot;
|
this.optionsRoot = item.optionsRoot;
|
||||||
|
this.multiAutoComplete = item.multiAutoComplete;
|
||||||
this.autoCompleteOptions = new FieldDataOptionEditorModel().fromModel(item.autoCompleteOptions);
|
this.autoCompleteOptions = new FieldDataOptionEditorModel().fromModel(item.autoCompleteOptions);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +1,20 @@
|
||||||
<div class="row" *ngIf="form.get('data')">
|
<div class="row" *ngIf="form.get('data')">
|
||||||
|
|
||||||
<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-TITLE' | translate}}</h5>
|
<h5 style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-TITLE' | translate}}</h5>
|
||||||
|
<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiAutoComplete')">
|
||||||
|
DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-AUTOCOMPLETE
|
||||||
|
</mat-checkbox>
|
||||||
|
|
||||||
<mat-form-field class="col-12">
|
<mat-form-field class="col-12">
|
||||||
<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-PLACEHOLDER' | translate}}" [formControl]="form.get('data').get('label')">
|
<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-PLACEHOLDER' | translate}}"
|
||||||
|
[formControl]="form.get('data').get('label')">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field class="col-md-12">
|
<mat-form-field class="col-md-12">
|
||||||
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-URL' | translate}}" [formControl]="this.form.get('data').get('url')">
|
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-URL' | translate}}" [formControl]="this.form.get('data').get('url')">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field class="col-md-4">
|
<mat-form-field class="col-md-4">
|
||||||
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-OPTIONS-ROOT' | translate}}" [formControl]="this.form.get('data').get('optionsRoot')">
|
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-OPTIONS-ROOT' | translate}}"
|
||||||
|
[formControl]="this.form.get('data').get('optionsRoot')">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field class="col-md-4">
|
<mat-form-field class="col-md-4">
|
||||||
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-LABEL' | translate}}" [formControl]="this.form.get('data').get('autoCompleteOptions').get('label')">
|
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-LABEL' | translate}}" [formControl]="this.form.get('data').get('autoCompleteOptions').get('label')">
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [id]="this.form.get('id').value" [formGroup]="form" [ngSwitch]="this.form.get('viewStyle').value.renderStyle" class="dynamic-form-field row">
|
<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [id]="this.form.get('id').value"
|
||||||
|
[formGroup]="form" [ngSwitch]="this.form.get('viewStyle').value.renderStyle" class="dynamic-form-field row">
|
||||||
|
|
||||||
<h5 *ngIf="this.form.get('title').value && !isChild">{{this.form.get('title').value}}</h5>
|
<h5 *ngIf="this.form.get('title').value && !isChild">{{this.form.get('title').value}}</h5>
|
||||||
<mat-icon *ngIf="this.form.get('additionalInformation').value && !isChild" matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
|
<mat-icon *ngIf="this.form.get('additionalInformation').value && !isChild" matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
|
||||||
|
@ -6,20 +7,28 @@
|
||||||
<h5 *ngIf="this.form.get('description').value && !isChild" class="col-12">{{this.form.get('description').value}}
|
<h5 *ngIf="this.form.get('description').value && !isChild" class="col-12">{{this.form.get('description').value}}
|
||||||
</h5>
|
</h5>
|
||||||
<h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12">
|
<h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12">
|
||||||
<i>{{this.form.get('extendedDescription').value}}</i></h5>
|
<i>{{this.form.get('extendedDescription').value}}</i>
|
||||||
|
</h5>
|
||||||
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12">
|
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12">
|
||||||
<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value">
|
<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value">
|
||||||
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
|
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
| translate}}</mat-error>
|
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
|
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
|
<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
|
||||||
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
|
<div *ngIf="form.get('data').value.multiAutoComplete">
|
||||||
|
<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
|
||||||
|
[configuration]="multipleAutoCompleteConfiguration" (optionRemoved)="_optionRemove($event)">
|
||||||
|
</app-multiple-auto-complete>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!(form.get('data').value.multiAutoComplete)">
|
||||||
|
<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
|
||||||
|
[configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
|
||||||
</app-single-auto-complete>
|
</app-single-auto-complete>
|
||||||
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
|
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
|
||||||
</mat-error>
|
</mat-error>
|
||||||
|
</div>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12">
|
<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12">
|
||||||
<mat-select [formControl]="form.get('value')" placeholder="{{ form.get('data').value.label | translate }}" [required]="form.get('validationRequired').value">
|
<mat-select [formControl]="form.get('value')" placeholder="{{ form.get('data').value.label | translate }}" [required]="form.get('validationRequired').value">
|
||||||
|
@ -38,12 +47,12 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
|
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
|
||||||
<textarea matInput [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="form.get('validationRequired').value" placeholder="{{ form.get('data').value.label | translate }}"></textarea>
|
<textarea matInput [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="form.get('validationRequired').value"
|
||||||
|
placeholder="{{ form.get('data').value.label | translate }}"></textarea>
|
||||||
<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
|
<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
|
||||||
<mat-icon>close</mat-icon>
|
<mat-icon>close</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
|
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
| translate}}</mat-error>
|
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.BooleanDecision" class="col-12">
|
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.BooleanDecision" class="col-12">
|
||||||
|
@ -66,7 +75,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12">
|
<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12">
|
||||||
<input matInput placeholder="{{ form.get('data').value.label | translate }}" class="table-input" [matDatepicker]="date" [required]="form.get('validationRequired').value" [formControl]="form.get('value')">
|
<input matInput placeholder="{{ form.get('data').value.label | translate }}" class="table-input" [matDatepicker]="date" [required]="form.get('validationRequired').value"
|
||||||
|
[formControl]="form.get('value')">
|
||||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||||
<mat-datepicker #date></mat-datepicker>
|
<mat-datepicker #date></mat-datepicker>
|
||||||
<mat-error *ngIf="form.get('value').hasError('required')">
|
<mat-error *ngIf="form.get('value').hasError('required')">
|
||||||
|
|
|
@ -9,6 +9,7 @@ import { RequestItem } from '../../../../../core/query/request-item';
|
||||||
import { DatasetExternalAutocompleteService } from '../../../../../core/services/dataset/dataset-external-autocomplete.service';
|
import { DatasetExternalAutocompleteService } from '../../../../../core/services/dataset/dataset-external-autocomplete.service';
|
||||||
import { SingleAutoCompleteConfiguration } from '../../../../../library/auto-complete/single/single-auto-complete-configuration';
|
import { SingleAutoCompleteConfiguration } from '../../../../../library/auto-complete/single/single-auto-complete-configuration';
|
||||||
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
|
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
|
||||||
|
import { MultipleAutoCompleteConfiguration } from '../../../../../library/auto-complete/multiple/multiple-auto-complete-configuration';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-form-field',
|
selector: 'app-form-field',
|
||||||
|
@ -26,6 +27,7 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
|
||||||
// trackByFn = (index, item) => item ? item['id'] : null;
|
// trackByFn = (index, item) => item ? item['id'] : null;
|
||||||
|
|
||||||
public singleAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
|
public singleAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
|
||||||
|
public multipleAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
|
||||||
datasetProfileFieldViewStyleEnum = DatasetProfileFieldViewStyle;
|
datasetProfileFieldViewStyleEnum = DatasetProfileFieldViewStyle;
|
||||||
datasetProfileComboBoxTypeEnum = DatasetProfileComboBoxType;
|
datasetProfileComboBoxTypeEnum = DatasetProfileComboBoxType;
|
||||||
|
|
||||||
|
@ -41,6 +43,7 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
|
||||||
|
|
||||||
// Setup autocomplete configuration if needed
|
// 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.get('viewStyle').value.renderStyle === DatasetProfileFieldViewStyle.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.Autocomplete) {
|
||||||
|
if (!(this.form.controls['data'].value.multiAutoComplete)) {
|
||||||
this.singleAutoCompleteConfiguration = {
|
this.singleAutoCompleteConfiguration = {
|
||||||
filterFn: this.searchFromAutocomplete.bind(this),
|
filterFn: this.searchFromAutocomplete.bind(this),
|
||||||
initialItems: (extraData) => this.searchFromAutocomplete(''),
|
initialItems: (extraData) => this.searchFromAutocomplete(''),
|
||||||
|
@ -49,6 +52,16 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
|
||||||
valueAssign: (item) => JSON.stringify(item)
|
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 = this.visibilityRulesService.getFormGroup(this.field.id);
|
||||||
this.form.get('value').valueChanges
|
this.form.get('value').valueChanges
|
||||||
|
@ -57,7 +70,22 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
|
||||||
this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, 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) {
|
searchFromAutocomplete(query: string) {
|
||||||
const autocompleteRequestItem: RequestItem<DatasetExternalAutocompleteCriteria> = new RequestItem();
|
const autocompleteRequestItem: RequestItem<DatasetExternalAutocompleteCriteria> = new RequestItem();
|
||||||
|
@ -68,5 +96,4 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
|
||||||
autocompleteRequestItem.criteria.like = query;
|
autocompleteRequestItem.criteria.like = query;
|
||||||
return this.datasetExternalAutocompleteService.queryAutocomplete(autocompleteRequestItem);
|
return this.datasetExternalAutocompleteService.queryAutocomplete(autocompleteRequestItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue