try to fix the ComboBox

This commit is contained in:
Diamantis Tziotzios 2019-01-28 15:05:19 +02:00
parent 7a60c3a435
commit df51afe833
9 changed files with 136 additions and 19 deletions

View File

@ -5,7 +5,7 @@ export interface FieldData {
} }
export interface AutoCompleteFieldData extends FieldData { export interface AutoCompleteFieldData extends FieldData {
type: string; type: DatasetProfileComboBoxType;
url: string; url: string;
optionsRoot: string; optionsRoot: string;
autoCompleteOptions: FieldDataOption; autoCompleteOptions: FieldDataOption;

View File

@ -1,11 +1,12 @@
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { DatasetProfileComboBoxType } from '../../../../../core/common/enum/dataset-profile-combo-box-type';
import { AutoCompleteFieldData } from '../../../../../core/model/dataset-profile-definition/field-data/field-data'; import { AutoCompleteFieldData } from '../../../../../core/model/dataset-profile-definition/field-data/field-data';
import { FieldDataEditorModel } from './field-data-editor-model'; import { FieldDataEditorModel } from './field-data-editor-model';
import { FieldDataOptionEditorModel } from './field-data-option-editor-model'; import { FieldDataOptionEditorModel } from './field-data-option-editor-model';
export class AutoCompleteFieldDataEditorModel extends FieldDataEditorModel<AutoCompleteFieldDataEditorModel> { export class AutoCompleteFieldDataEditorModel extends FieldDataEditorModel<AutoCompleteFieldDataEditorModel> {
public type: string; public type: DatasetProfileComboBoxType = DatasetProfileComboBoxType.Autocomplete;
public url: string; public url: string;
public optionsRoot: string; public optionsRoot: string;
public autoCompleteOptions: FieldDataOptionEditorModel = new FieldDataOptionEditorModel(); public autoCompleteOptions: FieldDataOptionEditorModel = new FieldDataOptionEditorModel();

View File

@ -0,0 +1,34 @@
import { FormGroup } from '@angular/forms';
import { DatasetProfileComboBoxType } from '../../../../../core/common/enum/dataset-profile-combo-box-type';
import { WordListFieldData } from '../../../../../core/model/dataset-profile-definition/field-data/field-data';
import { FieldDataEditorModel } from './field-data-editor-model';
import { FieldDataOptionEditorModel } from './field-data-option-editor-model';
export class WordListFieldDataEditorModel extends FieldDataEditorModel<WordListFieldDataEditorModel> {
public type: DatasetProfileComboBoxType = DatasetProfileComboBoxType.WordList;
public options: Array<FieldDataOptionEditorModel>;
buildForm(): FormGroup {
const formGroup = this.formBuilder.group({
type: [this.type],
label: [this.label]
});
const optionsFormArray = new Array<FormGroup>();
if (this.options) {
this.options.forEach(item => {
const form: FormGroup = item.buildForm();
optionsFormArray.push(form);
});
}
formGroup.addControl('options', this.formBuilder.array(optionsFormArray));
return formGroup;
}
fromModel(item: WordListFieldData): WordListFieldDataEditorModel {
this.type = item.type;
if (item.options) { this.options = item.options.map(x => new FieldDataOptionEditorModel().fromModel(x)); }
this.label = item.label;
return this;
}
}

View File

@ -5,7 +5,7 @@ import { FieldDataEditorModel } from './field-data-editor-model';
import { FieldDataOptionEditorModel } from './field-data-option-editor-model'; import { FieldDataOptionEditorModel } from './field-data-option-editor-model';
export class WordListFieldDataEditorModel extends FieldDataEditorModel<WordListFieldDataEditorModel> { export class WordListFieldDataEditorModel extends FieldDataEditorModel<WordListFieldDataEditorModel> {
public type: DatasetProfileComboBoxType; public type: DatasetProfileComboBoxType = DatasetProfileComboBoxType.WordList;
public options: Array<FieldDataOptionEditorModel>; public options: Array<FieldDataOptionEditorModel>;
buildForm(): FormGroup { buildForm(): FormGroup {
@ -27,7 +27,7 @@ export class WordListFieldDataEditorModel extends FieldDataEditorModel<WordListF
fromModel(item: WordListFieldData): WordListFieldDataEditorModel { fromModel(item: WordListFieldData): WordListFieldDataEditorModel {
this.type = item.type; this.type = item.type;
if (item.options) { this.options = item.options.map(x => new FieldDataOptionEditorModel().fromModel(x)); } if (item.options) { this.options = item.options.map(x => new FieldDataOptionEditorModel().fromModel(x)); }
this.label = item.label; this.label = item.label;
return this; return this;
} }

View File

@ -70,6 +70,7 @@ export class FieldEditorModel extends BaseFormModel {
formGroup.addControl('visible', this.visible.buildForm()); formGroup.addControl('visible', this.visible.buildForm());
//formGroup.addControl("data",this.data? this.data.buildForm():this.formBuilder.group({})); //formGroup.addControl("data",this.data? this.data.buildForm():this.formBuilder.group({}));
if (this.data) { formGroup.addControl('data', this.data.buildForm()); } if (this.data) { formGroup.addControl('data', this.data.buildForm()); }
else { formGroup.addControl('data', new WordListFieldDataEditorModel().buildForm()); }
return formGroup; return formGroup;
} }

View File

@ -1,9 +1,9 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { DatasetProfileComboBoxType } from '../../../../../../../core/common/enum/dataset-profile-combo-box-type';
import { EnumUtils } from '../../../../../../../core/services/utilities/enum-utils.service';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../../../../../../core/common/base/base.component'; import { BaseComponent } from '../../../../../../../core/common/base/base.component';
import { DatasetProfileComboBoxType } from '../../../../../../../core/common/enum/dataset-profile-combo-box-type';
import { EnumUtils } from '../../../../../../../core/services/utilities/enum-utils.service';
@Component({ @Component({
selector: 'app-dataset-profile-editor-combo-box-field-component', selector: 'app-dataset-profile-editor-combo-box-field-component',
@ -20,10 +20,41 @@ export class DatasetProfileEditorComboBoxFieldComponent extends BaseComponent im
) { super(); } ) { super(); }
ngOnInit() { ngOnInit() {
// this.form.get('data').get('type').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// if (x === "autocomplete") {
// //if(!this.form.get('data').get('url')) this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm());
// //delete
// if (this.form.get('data').get('options')) (<FormGroup>this.form.get('data')).removeControl('options');
// //add
// if (!this.form.get('data').get('url')) (<FormGroup>this.form.get('data')).addControl('url', new FormControl(''));
// if (!this.form.get('data').get('optionsRoot')) (<FormGroup>this.form.get('data')).addControl('optionsRoot', new FormControl(''));
// if (!this.form.get('data').get('autoCompleteOptions')) (<FormGroup>this.form.get('data')).addControl('autoCompleteOptions', new FormControl(''));
// } else if (x === "wordlist") {
// //this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
// //delete
// if (this.form.get('data').get('url')) (<FormGroup>this.form.get('data')).removeControl('url');
// if (this.form.get('data').get('optionsRoot')) (<FormGroup>this.form.get('data')).removeControl('optionsRoot');
// if (this.form.get('data').get('autoCompleteOptions')) (<FormGroup>this.form.get('data')).removeControl('autoCompleteOptions');
// //add
// if (!this.form.get('data').get('options')) (<FormGroup>this.form.get('data')).addControl('options', new FormControl);
// }
// });
this.form.get('data').get('type').valueChanges this.form.get('data').get('type').valueChanges
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(x => { .subscribe(x => {
if (this.form.get('data')) { this.form.removeControl('data'); } if (this.form.get('data')) {
this.form.removeControl('data');
if(x==="autocomplete"){
this.form.addControl('data',new AutoCompleteFieldDataEditorModel().buildForm());
}else if(x==="wordlist"){
this.form.addControl('data',new WordListFieldDataEditorModel().buildForm());
}
}
}) })
} }
} }

View File

@ -4,7 +4,7 @@
</mat-form-field> </mat-form-field>
<mat-form-field class="col"> <mat-form-field class="col">
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')" (change)="onchangeCombo()"> <mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')">
<mat-option [value]="viewStyleEnum.BooleanDecision">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.BooleanDecision)}}</mat-option> <mat-option [value]="viewStyleEnum.BooleanDecision">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.BooleanDecision)}}</mat-option>
<mat-option [value]="viewStyleEnum.CheckBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.CheckBox)}}</mat-option> <mat-option [value]="viewStyleEnum.CheckBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.CheckBox)}}</mat-option>
<mat-option [value]="viewStyleEnum.ComboBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ComboBox)}}</mat-option> <mat-option [value]="viewStyleEnum.ComboBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ComboBox)}}</mat-option>
@ -21,7 +21,7 @@
</mat-form-field> </mat-form-field>
<mat-form-field class="col"> <mat-form-field class="col">
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VALIDATION' | translate}}" [formControl]="this.form.get('validations')" multiple> <mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VALIDATION' | translate}}" [formControl]="this.form.get('validations')" multiple>
<mat-option *ngFor="let option of validationsOptions" [value]="option">{{enumUtils.toDatasetProfileFieldValidationTypeString(option)}}</mat-option> <mat-option [value]="validationTypeEnum.Required">{{enumUtils.toDatasetProfileFieldValidationTypeString(validationTypeEnum.Required)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>

View File

@ -1,30 +1,40 @@
 
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators, FormArray } from '@angular/forms';
import { ValidationType } from '../../../../../../core/common/enum/validation-type'; import { ValidationType } from '../../../../../../core/common/enum/validation-type';
import { EnumUtils } from '../../../../../../core/services/utilities/enum-utils.service'; import { EnumUtils } from '../../../../../../core/services/utilities/enum-utils.service';
import { RuleEditorModel } from '../../../admin/rule-editor-model'; import { RuleEditorModel } from '../../../admin/rule-editor-model';
import { DatasetProfileFieldViewStyle } from '../../../../../../core/common/enum/dataset-profile-field-view-style'; import { DatasetProfileFieldViewStyle } from '../../../../../../core/common/enum/dataset-profile-field-view-style';
import { RadioBoxFieldDataEditorModel } from '../../../admin/field-data/radio-box-field-data-editor-model';
import { DatasetProfileEditorComboBoxFieldComponent } from '../field-type/combo-box/dataset-profile-editor-combo-box-field.component';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../../../../../core/common/base/base.component';
import { ViewStyleEditorModel } from '../../../admin/view-style-editor-model';
import { TextAreaFieldDataEditorModel } from '../../../admin/field-data/text-area-field-data-editor-model';
import { BooleanDecisionFieldDataEditorModel } from '../../../admin/field-data/boolean-decision-field-data-editor-model';
import { CheckBoxFieldDataEditorModel } from '../../../admin/field-data/check-box-field-data-editor-model';
import { FreeTextFieldDataEditorModel } from '../../../admin/field-data/free-text-field-data-editor-model';
import { WordListFieldDataEditorModel } from '../../../admin/field-data/word-list-field-data-editor-model';
import { AutoCompleteFieldDataEditorModel } from '../../../admin/field-data/auto-complete-field-data-editor-model';
@Component({ @Component({
selector: 'app-dataset-profile-editor-field-component', selector: 'app-dataset-profile-editor-field-component',
templateUrl: './dataset-profile-editor-field.component.html', templateUrl: './dataset-profile-editor-field.component.html',
styleUrls: ['./dataset-profile-editor-field.component.scss'] styleUrls: ['./dataset-profile-editor-field.component.scss']
}) })
export class DatasetProfileEditorFieldComponent implements OnInit { export class DatasetProfileEditorFieldComponent extends BaseComponent implements OnInit {
@Input() form: FormGroup; @Input() form: FormGroup;
@Input() showMultiplicity = true; @Input() showMultiplicity = true;
@Input() showOrdinal = true; @Input() showOrdinal = true;
@Input() indexPath: string; @Input() indexPath: string;
validationsOptions: ValidationType[] = this.enumUtils.getEnumValues(ValidationType); validationTypeEnum = ValidationType;
viewStyleEnum = DatasetProfileFieldViewStyle; viewStyleEnum = DatasetProfileFieldViewStyle;
isFieldMultiplicityEnabled = false; isFieldMultiplicityEnabled = false;
constructor( constructor(
public enumUtils: EnumUtils public enumUtils: EnumUtils
) { ) { super(); }
}
ngOnInit() { ngOnInit() {
if (this.form.get('multiplicity')) { if (this.form.get('multiplicity')) {
@ -33,6 +43,46 @@ export class DatasetProfileEditorFieldComponent implements OnInit {
} }
} }
// this.addNewRule(); // this.addNewRule();
this.form.get('viewStyle').get('renderStyle').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => {
if (this.form.get('data')) {
this.form.removeControl('data');
switch (x) {
case DatasetProfileFieldViewStyle.BooleanDecision:
this.form.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
break;
case DatasetProfileFieldViewStyle.CheckBox:
this.form.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
break;
case DatasetProfileFieldViewStyle.ComboBox:
//this.form.removeControl('data');
this.form.addControl('data', new FormGroup({}));
(<FormGroup>this.form.get('data')).addControl('type', new FormControl(''));
(<FormGroup>this.form.get('data')).addControl('label', new FormControl(''));
//this.form.get('data').get('type').setValue("autocomplete");
break;
case DatasetProfileFieldViewStyle.FreeText:
this.form.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
break;
case DatasetProfileFieldViewStyle.RadioBox:
this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
break;
case DatasetProfileFieldViewStyle.TextArea:
this.form.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
break;
}
}
});
} }
onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled: boolean) { onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled: boolean) {
@ -46,8 +96,4 @@ export class DatasetProfileEditorFieldComponent implements OnInit {
const rule: RuleEditorModel = new RuleEditorModel(); const rule: RuleEditorModel = new RuleEditorModel();
(<FormArray>this.form.get('visible').get('rules')).push(rule.buildForm()); (<FormArray>this.form.get('visible').get('rules')).push(rule.buildForm());
} }
onchangeCombo() {
if (this.form.get('data')) { this.form.removeControl('data'); }
}
} }

View File

@ -172,6 +172,10 @@ export class DatasetDescriptionCompositeFieldEditorModel extends BaseFormModel {
this.fields.forEach(field => { this.fields.forEach(field => {
newItem.fields.push(field.cloneForMultiplicity(this.fields.indexOf(field), newItem.id + '_')); newItem.fields.push(field.cloneForMultiplicity(this.fields.indexOf(field), newItem.id + '_'));
}); });
// put on new item only the first (Fields) value and the last (Fields) value
// the first is on "fields":[{},{}]
// and the New is on "multiplicityItem":[{ fields":[{},{}] },{ fields":[{},{}] }]
newItem.ordinal = this.ordinal; newItem.ordinal = this.ordinal;
return newItem; return newItem;