Dataset Profile Editor. Move validators from tempate to models. (Fixing issue of form classified as valid when not all formcontrols are rendered.)

This commit is contained in:
Kristian Ntavidi 2021-03-27 19:52:53 +02:00
parent fdf316a040
commit 12f9e9ede9
17 changed files with 848 additions and 246 deletions

View File

@ -1,7 +1,7 @@
import { FieldDataEditorModel } from './field-data-editor-model'; import { FieldDataEditorModel } from './field-data-editor-model';
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type'; import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
import { FieldDataOptionEditorModel } from './field-data-option-editor-model'; import { FieldDataOptionEditorModel } from './field-data-option-editor-model';
import { FormGroup } from '@angular/forms'; import { FormGroup, Validators } from '@angular/forms';
import { AutoCompleteFieldData, AutoCompleteSingleData } from '@app/core/model/dataset-profile-definition/field-data/field-data'; import { AutoCompleteFieldData, AutoCompleteSingleData } from '@app/core/model/dataset-profile-definition/field-data/field-data';
export class AutoCompleteSingleDataEditorModel extends FieldDataEditorModel<AutoCompleteSingleDataEditorModel> { export class AutoCompleteSingleDataEditorModel extends FieldDataEditorModel<AutoCompleteSingleDataEditorModel> {
@ -16,8 +16,8 @@ export class AutoCompleteSingleDataEditorModel extends FieldDataEditorModel<Auto
buildForm(disabled: boolean = false, skipDisable: Array<String> = []): FormGroup { buildForm(disabled: boolean = false, skipDisable: Array<String> = []): FormGroup {
const formGroup = this.formBuilder.group({ const formGroup = this.formBuilder.group({
label: [{ value: this.label, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.label')) }], label: [{ value: this.label, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.label')) }],
url: [{ value: this.url, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.url')) }], url: [{ value: this.url, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.url')) },[Validators.required]],
optionsRoot: [{ value: this.optionsRoot, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.optionsRoot')) }], optionsRoot: [{ value: this.optionsRoot, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.optionsRoot')) }, [Validators.required]],
autoCompleteType: [{ value: this.autoCompleteType, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.autoCompleteType')) }] autoCompleteType: [{ value: this.autoCompleteType, disabled: (disabled && !skipDisable.includes('AutoCompleteSingleDataEditorModel.autoCompleteType')) }]
}); });
formGroup.addControl('autoCompleteOptions', this.autoCompleteOptions.buildForm(disabled, skipDisable)); formGroup.addControl('autoCompleteOptions', this.autoCompleteOptions.buildForm(disabled, skipDisable));

View File

@ -27,6 +27,9 @@ import { ResearchersDataEditorModel } from './field-data/researchers-data-editor
import { OrganizationsDataEditorModel } from './field-data/organizations-data-editor-models'; import { OrganizationsDataEditorModel } from './field-data/organizations-data-editor-models';
import { DatasetIdentifierDataEditorModel } from './field-data/dataset-identifier-data-editor-models'; import { DatasetIdentifierDataEditorModel } from './field-data/dataset-identifier-data-editor-models';
import { CurrencyDataEditorModel } from './field-data/currency-data-editor-models'; import { CurrencyDataEditorModel } from './field-data/currency-data-editor-models';
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
import { EditorCustomValidators } from '../editor/custom-validators/editor-custom-validators';
import { ValidationDataEditorModel } from './field-data/validation-data-editor-models';
export class FieldEditorModel extends BaseFormModel { export class FieldEditorModel extends BaseFormModel {
@ -68,13 +71,14 @@ export class FieldEditorModel extends BaseFormModel {
if (this.viewStyle.renderStyle === 'datePicker') { this.data = new DatePickerDataEditorModel().fromModel(item.data); } if (this.viewStyle.renderStyle === 'datePicker') { this.data = new DatePickerDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'externalDatasets') { this.data = new ExternalDatasetsDataEditorModel().fromModel(item.data); } if (this.viewStyle.renderStyle === 'externalDatasets') { this.data = new ExternalDatasetsDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'dataRepositories') { this.data = new DataRepositoriesDataEditorModel().fromModel(item.data); } if (this.viewStyle.renderStyle === 'dataRepositories') { this.data = new DataRepositoriesDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'registeries') { this.data = new RegistriesDataEditorModel().fromModel(item.data); } if (this.viewStyle.renderStyle === 'registries') { this.data = new RegistriesDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'services') { this.data = new ServicesDataEditorModel().fromModel(item.data); } if (this.viewStyle.renderStyle === 'services') { this.data = new ServicesDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'tags') { this.data = new TagsDataEditorModel().fromModel(item.data); } if (this.viewStyle.renderStyle === 'tags') { this.data = new TagsDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'researchers') { this.data = new ResearchersDataEditorModel().fromModel(item.data); } if (this.viewStyle.renderStyle === 'researchers') { this.data = new ResearchersDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'organizations') { this.data = new OrganizationsDataEditorModel().fromModel(item.data); } if (this.viewStyle.renderStyle === 'organizations') { this.data = new OrganizationsDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'datasetIdentifier') { this.data = new DatasetIdentifierDataEditorModel().fromModel(item.data); } if (this.viewStyle.renderStyle === 'datasetIdentifier') { this.data = new DatasetIdentifierDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'currency') { this.data = new CurrencyDataEditorModel().fromModel(item.data); } if (this.viewStyle.renderStyle === 'currency') { this.data = new CurrencyDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'validation') { this.data = new ValidationDataEditorModel().fromModel(item.data); }
} }
} }
return this; return this;
@ -96,6 +100,57 @@ export class FieldEditorModel extends BaseFormModel {
if (this.data) { formGroup.addControl('data', this.data.buildForm(disabled, skipDisable)); } if (this.data) { formGroup.addControl('data', this.data.buildForm(disabled, skipDisable)); }
else { formGroup.addControl('data', new WordListFieldDataEditorModel().buildForm(disabled, skipDisable)); } else { formGroup.addControl('data', new WordListFieldDataEditorModel().buildForm(disabled, skipDisable)); }
// //append validators
this._appendCustomValidators(formGroup);
// //setting up listeners
// formGroup.get('viewStyle').valueChanges.subscribe(changes=>{
// // const viewStyleChanges:{cssClass:string, renderStyle: string} = changes;
// this._removeCustomValidators(formGroup);
// this._appendCustomValidators(formGroup);
// })
return formGroup; return formGroup;
} }
private _appendCustomValidators(formGroup: FormGroup){
const renderStyleValue = formGroup.get('viewStyle').get('renderStyle').value;
if(renderStyleValue === 'checkBox'){
formGroup.get('defaultValue').get('value').setValidators(Validators.required);
formGroup.get('defaultValue').get('value').updateValueAndValidity();
}else if(renderStyleValue === 'combobox'){
try{
const comboType = formGroup.get('data').get('type').value;
if(comboType === DatasetProfileComboBoxType.Autocomplete){//As 'Other' in UI
formGroup.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
}else if(comboType === DatasetProfileComboBoxType.WordList){
formGroup.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
}
}catch(e){
console.error('Error setting validators.');
console.error(e);
}
}else if(renderStyleValue === 'radiobox'){
formGroup.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
}
formGroup.get('data').updateValueAndValidity();
}
// private _removeCustomValidators(formGroup:FormGroup){
// const renderStyleValue = formGroup.get('viewStyle').get('renderStyle').value;
// if(renderStyleValue != 'checkBox'){
// formGroup.get('defaultValue').get('value').clearValidators();
// }else if(renderStyleValue === 'combobox'){
// formGroup.get('data').clearValidators();
// }
// }
// private _buildData(formGroup: FormGroup){
// }
} }

View File

@ -35,7 +35,7 @@ export class FieldSetEditorModel extends BaseFormModel {
const formGroup = this.formBuilder.group({ const formGroup = this.formBuilder.group({
id: [{ value: this.id, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.id')) }, [Validators.required, Validators.pattern('^[^<_>]+$')]], id: [{ value: this.id, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.id')) }, [Validators.required, Validators.pattern('^[^<_>]+$')]],
ordinal: [{ value: this.ordinal, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.ordinal')) }], ordinal: [{ value: this.ordinal, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.ordinal')) }],
title: [{ value: this.title, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.title')) }], title: [{ value: this.title, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.title')) }, [Validators.required]],
description: [{ value: this.description, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.description')) }], description: [{ value: this.description, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.description')) }],
extendedDescription: [{ value: this.extendedDescription, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.extendedDescription')) }], extendedDescription: [{ value: this.extendedDescription, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.extendedDescription')) }],
additionalInformation: [{ value: this.additionalInformation, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.additionalInformation')) }], additionalInformation: [{ value: this.additionalInformation, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.additionalInformation')) }],

View File

@ -1,6 +1,7 @@
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Section } from '../../../../core/model/admin/dataset-profile/dataset-profile'; import { Section } from '../../../../core/model/admin/dataset-profile/dataset-profile';
import { BaseFormModel } from '../../../../core/model/base-form-model'; import { BaseFormModel } from '../../../../core/model/base-form-model';
import { EditorCustomValidators } from '../editor/custom-validators/editor-custom-validators';
import { FieldSetEditorModel } from './field-set-editor-model'; import { FieldSetEditorModel } from './field-set-editor-model';
export class SectionEditorModel extends BaseFormModel { export class SectionEditorModel extends BaseFormModel {
@ -29,7 +30,7 @@ export class SectionEditorModel extends BaseFormModel {
const formGroup: FormGroup = new FormBuilder().group({ const formGroup: FormGroup = new FormBuilder().group({
id: [{ value: this.id, disabled: (disabled && !skipDisable.includes('SectionEditorModel.id')) }, [Validators.required, Validators.pattern('^[^<_>]+$')]], id: [{ value: this.id, disabled: (disabled && !skipDisable.includes('SectionEditorModel.id')) }, [Validators.required, Validators.pattern('^[^<_>]+$')]],
page: [{ value: this.page, disabled: (disabled && !skipDisable.includes('SectionEditorModel.page')) }, [Validators.required]], page: [{ value: this.page, disabled: (disabled && !skipDisable.includes('SectionEditorModel.page')) }, [Validators.required]],
title: [{ value: this.title, disabled: (disabled && !skipDisable.includes('SectionEditorModel.title')) }], title: [{ value: this.title, disabled: (disabled && !skipDisable.includes('SectionEditorModel.title')) } , [Validators.required]],
description: [{ value: this.description, disabled: (disabled && !skipDisable.includes('SectionEditorModel.description')) }], description: [{ value: this.description, disabled: (disabled && !skipDisable.includes('SectionEditorModel.description')) }],
ordinal: [{ value: this.ordinal, disabled: (disabled && !skipDisable.includes('SectionEditorModel.ordinal')) }, [Validators.required]], ordinal: [{ value: this.ordinal, disabled: (disabled && !skipDisable.includes('SectionEditorModel.ordinal')) }, [Validators.required]],
defaultVisibility: [{ value: this.defaultVisibility, disabled: (disabled && !skipDisable.includes('SectionEditorModel.defaultVisibility')) }] defaultVisibility: [{ value: this.defaultVisibility, disabled: (disabled && !skipDisable.includes('SectionEditorModel.defaultVisibility')) }]
@ -53,6 +54,8 @@ export class SectionEditorModel extends BaseFormModel {
if (!formGroup.controls['defaultVisibility'].value) { formGroup.controls['defaultVisibility'].setValue(true); } if (!formGroup.controls['defaultVisibility'].value) { formGroup.controls['defaultVisibility'].setValue(true); }
formGroup.setValidators(EditorCustomValidators.sectionHasAtLeastOneChildOf('fieldSets','sections'));
formGroup.updateValueAndValidity();
return formGroup; return formGroup;
} }
} }

View File

@ -72,7 +72,7 @@
<!-- [appearance]="titleControl.focused? 'legacy':'none'" floatLabel="never" --> <!-- [appearance]="titleControl.focused? 'legacy':'none'" floatLabel="never" -->
<mat-form-field class="col field-title" [appearance]="'none'" floatLabel="never"> <mat-form-field class="col field-title" [appearance]="'none'" floatLabel="never">
<input matInput type="text" placeholder="Title" #titleControl="matInput" <input matInput type="text" placeholder="Title" #titleControl="matInput"
[formControl]="this.form.get('title')" required> [formControl]="this.form.get('title')">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>

View File

@ -33,6 +33,10 @@ import { ValidationDataEditorModel } from '../../../admin/field-data/validation-
import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service'; import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
import { OrganizationsDataEditorModel } from '../../../admin/field-data/organizations-data-editor-models'; import { OrganizationsDataEditorModel } from '../../../admin/field-data/organizations-data-editor-models';
import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators'; import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators';
import { Field } from '@app/core/model/admin/dataset-profile/dataset-profile';
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
import { DatasetProfileInternalDmpEntitiesType } from '@app/core/common/enum/dataset-profile-internal-dmp-entities-type';
import { AutoCompleteFieldData, BooleanDecisionFieldData, CheckBoxFieldData, CurrencyFieldData, DataRepositoriesFieldData, DatasetIdentifierFieldData, DatePickerFieldData, DmpsAutoCompleteFieldData, ExternalDatasetsFieldData, FreeTextFieldData, OrganizationsFieldData, RadioBoxFieldData, RegistriesFieldData, ResearchersAutoCompleteFieldData, ServicesFieldData, TagsFieldData, TextAreaFieldData, ValidationFieldData, WordListFieldData } from '@app/core/model/dataset-profile-definition/field-data/field-data';
@Component({ @Component({
selector: 'app-dataset-profile-editor-composite-field-component', selector: 'app-dataset-profile-editor-composite-field-component',
@ -330,119 +334,352 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
addNewInput(type: ViewStyleType){ addNewInput(type: ViewStyleType){
const fieldsArray = this.form.get('fields') as FormArray;
let targetOrdinal = fieldsArray.length;
try{
targetOrdinal = fieldsArray.controls.map(control=> control.get('ordinal').value).reduce((a,b)=>Math.max(a,b));
}catch{
}
const field: FieldEditorModel = new FieldEditorModel();
field.id=Guid.create().toString();
field.ordinal = (this.form.get('fields') as FormArray).length; const field = {
id: Guid.create().toString(),
ordinal: targetOrdinal,
visible:{rules:[],style:null},
validations:[],
viewStyle:{}
const fieldForm = field.buildForm(); } as Field;
// const field: FieldEditorModel = new FieldEditorModel();
// field.id=Guid.create().toString();
// field.ordinal = (this.form.get('fields') as FormArray).length;
// const fieldForm = field.buildForm();
// fieldForm.setValidators(this.customFieldValidator()); // fieldForm.setValidators(this.customFieldValidator());
// fieldForm.get('viewStyle').get('renderStyle').setValidators(Validators.required); // fieldForm.get('viewStyle').get('renderStyle').setValidators(Validators.required);
if (fieldForm.get('data')) { // if (fieldForm.get('data')) {
fieldForm.removeControl('data'); // fieldForm.removeControl('data');
} // }
switch (type) { switch (type) {
case this.viewTypeEnum.BooleanDecision: case this.viewTypeEnum.BooleanDecision:{
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.BooleanDecision) // fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.BooleanDecision)
fieldForm.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm()); // fieldForm.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
break;
case this.viewTypeEnum.CheckBox:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.CheckBox)
fieldForm.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
break;
case this.viewTypeEnum.Select:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
fieldForm.addControl('data', new WordListFieldDataEditorModel().buildForm());
fieldForm.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('options')); const data: BooleanDecisionFieldData = {
fieldForm.get('data').updateValueAndValidity(); label:''
break;
case this.viewTypeEnum.Other:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
fieldForm.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
fieldForm.get('data').updateValueAndValidity();
break;
case this.viewTypeEnum.InternalDmpEntities:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());//TODO TO SEE
break;
case this.viewTypeEnum.FreeText:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.FreeText)
fieldForm.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
break;
case this.viewTypeEnum.RadioBox:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
fieldForm.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
fieldForm.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('options'));
fieldForm.get('data').updateValueAndValidity();
break;
case this.viewTypeEnum.TextArea:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
fieldForm.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
break;
case this.viewTypeEnum.DatePicker:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatePicker)
fieldForm.addControl('data', new DatePickerDataEditorModel().buildForm());
break;
case this.viewTypeEnum.ExternalDatasets:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ExternalDatasets)
fieldForm.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
break;
case this.viewTypeEnum.DataRepositories:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DataRepositories)
fieldForm.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
break;
case this.viewTypeEnum.Registries:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Registries)
fieldForm.addControl('data', new RegistriesDataEditorModel().buildForm());
break;
case this.viewTypeEnum.Services:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Services)
fieldForm.addControl('data', new ServicesDataEditorModel().buildForm());
break;
case this.viewTypeEnum.Tags:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Tags)
fieldForm.addControl('data', new TagsDataEditorModel().buildForm());
break;
case this.viewTypeEnum.Researchers:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Researchers)
// this.form.addControl('data', new ResearchersDataEditorModel().buildForm()); //TODO TO ASK
fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());
break;
case this.viewTypeEnum.Organizations:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
fieldForm.addControl('data', new OrganizationsDataEditorModel().buildForm());
// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm())
// fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm()); //TODO
break;
case this.viewTypeEnum.DatasetIdentifier:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
fieldForm.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
break;
case this.viewTypeEnum.Currency:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Currency)
fieldForm.addControl('data', new CurrencyDataEditorModel().buildForm());
break;
case this.viewTypeEnum.Validation:
fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Validation)
fieldForm.addControl('data', new ValidationDataEditorModel().buildForm());
break;
} }
(<FormArray>this.form.get('fields')).push(fieldForm); field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.BooleanDecision;
field.data = data;
fieldForm.get('viewStyle').get('renderStyle').updateValueAndValidity(); break;
fieldForm.get('data').updateValueAndValidity(); }
case this.viewTypeEnum.CheckBox:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.CheckBox)
// fieldForm.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
const data: CheckBoxFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.CheckBox;
field.data = data;
break;
}
case this.viewTypeEnum.Select:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
// fieldForm.addControl('data', new WordListFieldDataEditorModel().buildForm());
// fieldForm.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
// fieldForm.get('data').updateValueAndValidity();
const data:WordListFieldData = {
label:'',
multiList:false,
options:[],
type:DatasetProfileComboBoxType.WordList
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ComboBox;
field.data = data;
break;
}
case this.viewTypeEnum.Other:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
// fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
// fieldForm.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
// fieldForm.get('data').updateValueAndValidity();
const data: AutoCompleteFieldData = {
autoCompleteSingleDataList:[],
multiAutoComplete: false,
label:'',
type: DatasetProfileComboBoxType.Autocomplete
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ComboBox;
field.data = data;
break;
}case this.viewTypeEnum.InternalDmpEntities:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
// fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());//TODO TO SEE
const data: DmpsAutoCompleteFieldData = {
label:'',
multiAutoComplete: false,
type: DatasetProfileInternalDmpEntitiesType.Dmps
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.InternalDmpEntities;
field.data = data;
break;
}
case this.viewTypeEnum.FreeText:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.FreeText)
// fieldForm.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
const data: FreeTextFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.FreeText;
field.data = data;
break;
}
case this.viewTypeEnum.RadioBox:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
// fieldForm.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
// fieldForm.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
// fieldForm.get('data').updateValueAndValidity();
const data: RadioBoxFieldData= {
label:'',
options: []
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.RadioBox;
field.data = data;
break;
}
case this.viewTypeEnum.TextArea:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
// fieldForm.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
const data: TextAreaFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.TextArea;
field.data = data;
break;
}
case this.viewTypeEnum.DatePicker:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatePicker)
// fieldForm.addControl('data', new DatePickerDataEditorModel().buildForm());
const data: DatePickerFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DatePicker;
break;
}
case this.viewTypeEnum.ExternalDatasets:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ExternalDatasets)
// fieldForm.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
const data: ExternalDatasetsFieldData = {
label:'',
multiAutoComplete: false
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ExternalDatasets;
field.data = data;
break;
}
case this.viewTypeEnum.DataRepositories:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DataRepositories)
// fieldForm.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
const data: DataRepositoriesFieldData = {
label: '',
multiAutoComplete: false
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DataRepositories;
field.data = data;
break;
}
case this.viewTypeEnum.Registries:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Registries)
// fieldForm.addControl('data', new RegistriesDataEditorModel().buildForm());
const data:RegistriesFieldData = {
label: '',
multiAutoComplete: false
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Registries;
field.data = data;
break;
}
case this.viewTypeEnum.Services:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Services)
// fieldForm.addControl('data', new ServicesDataEditorModel().buildForm());
const data:ServicesFieldData = {
label:'',
multiAutoComplete: false
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Services;
field.data = data;
break;
}
case this.viewTypeEnum.Tags:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Tags)
// fieldForm.addControl('data', new TagsDataEditorModel().buildForm());
const data: TagsFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Tags;
field.data = data;
break;
}
case this.viewTypeEnum.Researchers:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Researchers)
// this.form.addControl('data', new ResearchersDataEditorModel().buildForm()); //TODO TO ASK
// fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());
// field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Researchers;
const data : ResearchersAutoCompleteFieldData = {
label:'',
multiAutoComplete: false,
type: DatasetProfileInternalDmpEntitiesType.Researchers
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.InternalDmpEntities;
field.data = data;
break;
}
case this.viewTypeEnum.Organizations:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
// fieldForm.addControl('data', new OrganizationsDataEditorModel().buildForm());
// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm())
// fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm()); //TODO
const data = {
autoCompleteSingleDataList:[],
label:'',
multiAutoComplete: false,
} as OrganizationsFieldData; //TODO
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Organizations;
field.data = data;
break;
}
case this.viewTypeEnum.DatasetIdentifier:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
// fieldForm.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
const data : DatasetIdentifierFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DatasetIdentifier;
field.data = data;
break;
}
case this.viewTypeEnum.Currency:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Currency)
// fieldForm.addControl('data', new CurrencyDataEditorModel().buildForm());
const data: CurrencyFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Currency;
field.data = data;
break;
}
case this.viewTypeEnum.Validation:{
// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Validation)
// fieldForm.addControl('data', new ValidationDataEditorModel().buildForm());
const data:ValidationFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Validation;
field.data = data;
break;
}
}
(<FormArray>this.form.get('fields')).push(new FieldEditorModel().fromModel(field).buildForm());
// fieldForm.get('viewStyle').get('renderStyle').updateValueAndValidity();
// fieldForm.get('data').updateValueAndValidity();
} }

View File

@ -2,7 +2,7 @@
<!-- BooleanDecision --> <!-- BooleanDecision -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.BooleanDecision"> <mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.BooleanDecision">
<mat-label>{{placeHolder}}</mat-label> <mat-label>{{placeHolder}}</mat-label>
<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required"> <mat-select [formControl]="form" [placeholder]="placeHolder">
<mat-option [value]="null">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' | <mat-option [value]="null">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' |
translate}}</mat-option> translate}}</mat-option>
<mat-option [value]="'true'">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.YES' <mat-option [value]="'true'">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.YES'
@ -18,7 +18,7 @@
<!-- CheckBox --> <!-- CheckBox -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.CheckBox"> <mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.CheckBox">
<mat-label>{{placeHolder}}</mat-label> <mat-label>{{placeHolder}}</mat-label>
<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required"> <mat-select [formControl]="form" [placeholder]="placeHolder" >
<mat-option [value]="'true'">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.CHECK-BOX.CHECKED' | translate}}</mat-option> <mat-option [value]="'true'">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.CHECK-BOX.CHECKED' | translate}}</mat-option>
<mat-option [value]="'false'">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.CHECK-BOX.UNCHECKED' | translate}}</mat-option> <mat-option [value]="'false'">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.CHECK-BOX.UNCHECKED' | translate}}</mat-option>
</mat-select> </mat-select>
@ -32,7 +32,7 @@
</mat-form-field> --> </mat-form-field> -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.ComboBox && comboBoxType === comboBoxTypeEnum.WordList"> <mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.ComboBox && comboBoxType === comboBoxTypeEnum.WordList">
<mat-label>{{placeHolder}}</mat-label> <mat-label>{{placeHolder}}</mat-label>
<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required"> <mat-select [formControl]="form" [placeholder]="placeHolder" >
<mat-option [value]="null">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' | translate }}</mat-option> <mat-option [value]="null">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' | translate }}</mat-option>
<mat-option *ngFor="let opt of formArrayOptions['controls']" [value]="opt.get('value').value">{{opt.get('label').value}}</mat-option> <mat-option *ngFor="let opt of formArrayOptions['controls']" [value]="opt.get('value').value">{{opt.get('label').value}}</mat-option>
</mat-select> </mat-select>
@ -56,14 +56,14 @@
<!-- FreeText --> <!-- FreeText -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.FreeText"> <mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.FreeText">
<mat-label>{{placeHolder}}</mat-label> <mat-label>{{placeHolder}}</mat-label>
<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required"> <input matInput type="text" [placeholder]="placeHolder" [formControl]="form" >
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<!-- RadioBox --> <!-- RadioBox -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.RadioBox"> <mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.RadioBox">
<mat-label>{{placeHolder}}</mat-label> <mat-label>{{placeHolder}}</mat-label>
<mat-select [formControl]="form" [placeholder]="placeHolder" [required]="required"> <mat-select [formControl]="form" [placeholder]="placeHolder" >
<mat-option [value]="null">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' | translate}}</mat-option> <mat-option [value]="null">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.NONE' | translate}}</mat-option>
<mat-option *ngFor="let opt of formArrayOptions['controls']" [value]="opt.get('value').value">{{opt.get('label').value}}</mat-option> <mat-option *ngFor="let opt of formArrayOptions['controls']" [value]="opt.get('value').value">{{opt.get('label').value}}</mat-option>
</mat-select> </mat-select>
@ -73,7 +73,7 @@
<!-- TextArea --> <!-- TextArea -->
<mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.TextArea"> <mat-form-field class="col-md-12" *ngIf="viewStyle === viewStyleEnum.TextArea">
<mat-label>{{placeHolder}}</mat-label> <mat-label>{{placeHolder}}</mat-label>
<input matInput type="text" [placeholder]="placeHolder" [formControl]="form" [required]="required"> <input matInput type="text" [placeholder]="placeHolder" [formControl]="form">
<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
@ -81,7 +81,7 @@
<mat-form-field class="col-12" *ngIf="viewStyle === viewStyleEnum.DatePicker"> <mat-form-field class="col-12" *ngIf="viewStyle === viewStyleEnum.DatePicker">
<!--(focus)="date.open()" (click)="date.open()"--> <!--(focus)="date.open()" (click)="date.open()"-->
<mat-label>{{placeHolder}}</mat-label> <mat-label>{{placeHolder}}</mat-label>
<input matInput [placeholder]="placeHolder" class="table-input" [matDatepicker]="date" [formControl]="form" [required]="required"> <input matInput [placeholder]="placeHolder" class="table-input" [matDatepicker]="date" [formControl]="form" >
<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.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}

View File

@ -17,7 +17,7 @@ export class DatasetProfileEditorDefaultValueComponent implements OnInit {
@Input() comboBoxType: DatasetProfileComboBoxType; @Input() comboBoxType: DatasetProfileComboBoxType;
@Input() internalDmpEntitiesType: DatasetProfileInternalDmpEntitiesType; @Input() internalDmpEntitiesType: DatasetProfileInternalDmpEntitiesType;
@Input() placeHolder: String; @Input() placeHolder: String;
@Input() required: Boolean; // @Input() required: Boolean;
comboBoxTypeEnum = DatasetProfileComboBoxType; comboBoxTypeEnum = DatasetProfileComboBoxType;
internalDmpEntitiesTypeEnum = DatasetProfileInternalDmpEntitiesType; internalDmpEntitiesTypeEnum = DatasetProfileInternalDmpEntitiesType;

View File

@ -47,24 +47,28 @@
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-URL' | translate}}</mat-label> <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-URL' | translate}}</mat-label>
<input matInput [formControl]="this.singleForm.get('url')" required> <input matInput [formControl]="singleForm.get('url')">
<mat-error *ngIf="singleForm.get('url').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-3"> <mat-form-field class="col-md-3">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-OPTIONS-ROOT' | translate}}</mat-label> <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-OPTIONS-ROOT' | translate}}</mat-label>
<input matInput <input matInput
[formControl]="this.singleForm.get('optionsRoot')" required> [formControl]="singleForm.get('optionsRoot')">
<mat-error *ngIf="singleForm.get('optionsRoot').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-3"> <mat-form-field class="col-md-3">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-LABEL' | translate}}</mat-label> <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-LABEL' | translate}}</mat-label>
<input matInput [formControl]="this.singleForm.get('autoCompleteOptions').get('label')"> <input matInput [formControl]="singleForm.get('autoCompleteOptions').get('label')">
<mat-error *ngIf="singleForm.get('autoCompleteOptions').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-3"> <mat-form-field class="col-md-3">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-VALUE' | translate}}</mat-label> <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-VALUE' | translate}}</mat-label>
<input matInput [formControl]="this.singleForm.get('autoCompleteOptions').get('value')"> <input matInput [formControl]="singleForm.get('autoCompleteOptions').get('value')">
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-3"> <mat-form-field class="col-md-3">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE' | translate}}</mat-label> <mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE' | translate}}</mat-label>
<input matInput [formControl]="this.singleForm.get('autoCompleteOptions').get('source')"> <input matInput [formControl]="singleForm.get('autoCompleteOptions').get('source')">
<mat-error *ngIf="singleForm.get('autoCompleteOptions').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<button mat-button type="button" (click)="removeSource(i)"><mat-icon>delete</mat-icon></button> <button mat-button type="button" (click)="removeSource(i)"><mat-icon>delete</mat-icon></button>
</div> </div>

View File

@ -140,7 +140,7 @@
<app-component-profile-editor-default-value-component *ngIf="form.get('viewStyle').get('renderStyle').value" class="col-12" <app-component-profile-editor-default-value-component *ngIf="form.get('viewStyle').get('renderStyle').value" class="col-12"
[viewStyle]="form.get('viewStyle').get('renderStyle').value" [form]="this.form.get('defaultValue').get('value')" [formArrayOptions]="form.get('data')?.get('options')" [viewStyle]="form.get('viewStyle').get('renderStyle').value" [form]="this.form.get('defaultValue').get('value')" [formArrayOptions]="form.get('data')?.get('options')"
[comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value" [comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value"
placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" [required]="defaulValueRequired(form.get('viewStyle').get('renderStyle').value)"> placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}">
</app-component-profile-editor-default-value-component> </app-component-profile-editor-default-value-component>
</div> </div>

View File

@ -37,6 +37,10 @@ import { Guid } from '@common/types/guid';
import { ErrorStateMatcher, MatSlideToggleChange } from '@angular/material'; import { ErrorStateMatcher, MatSlideToggleChange } from '@angular/material';
import { DefaultValueEditorModel } from '../../../admin/default-value-editor-model'; import { DefaultValueEditorModel } from '../../../admin/default-value-editor-model';
import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators'; import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators';
import { Field } from '@app/core/model/admin/dataset-profile/dataset-profile';
import { DatasetProfileInternalDmpEntitiesType } from '@app/core/common/enum/dataset-profile-internal-dmp-entities-type';
import { FieldEditorModel } from '../../../admin/field-editor-model';
import { AutoCompleteFieldData, BooleanDecisionFieldData, CheckBoxFieldData, CurrencyFieldData, DataRepositoriesFieldData, DatasetIdentifierFieldData, DatePickerFieldData, DmpsAutoCompleteFieldData, ExternalDatasetsFieldData, FreeTextFieldData, OrganizationsFieldData, RadioBoxFieldData, RegistriesFieldData, ResearchersAutoCompleteFieldData, ServicesFieldData, TagsFieldData, TextAreaFieldData, ValidationFieldData, WordListFieldData } from '@app/core/model/dataset-profile-definition/field-data/field-data';
@Component({ @Component({
selector: 'app-dataset-profile-editor-field-component', selector: 'app-dataset-profile-editor-field-component',
@ -87,7 +91,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
this.showPreview = true;
// if (this.form.get('multiplicity')) { // if (this.form.get('multiplicity')) {
// if (this.form.get('multiplicity').value.min > 1 && this.form.get('multiplicity').value.max > 1) { // if (this.form.get('multiplicity').value.min > 1 && this.form.get('multiplicity').value.max > 1) {
// this.isFieldMultiplicityEnabled = true; // this.isFieldMultiplicityEnabled = true;
@ -146,7 +150,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
this.viewType = this.viewTypeEnum.Tags; this.viewType = this.viewTypeEnum.Tags;
break; break;
case DatasetProfileFieldViewStyle.Researchers: case DatasetProfileFieldViewStyle.Researchers:
this.viewType = this.viewTypeEnum.Researchers; this.viewType = this.viewTypeEnum.Researchers; //TODO RESEARCHERS
break; break;
case DatasetProfileFieldViewStyle.Organizations: case DatasetProfileFieldViewStyle.Organizations:
this.viewType = this.viewTypeEnum.Organizations; this.viewType = this.viewTypeEnum.Organizations;
@ -164,6 +168,8 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
} }
this.showPreview = true;
@ -246,32 +252,32 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
// }); // });
} }
defaulValueRequired(viewStile: DatasetProfileFieldViewStyle): boolean { // defaulValueRequired(viewStile: DatasetProfileFieldViewStyle): boolean {
switch (viewStile) { // switch (viewStile) {
case DatasetProfileFieldViewStyle.CheckBox: // case DatasetProfileFieldViewStyle.CheckBox:
return true; // return true;
case DatasetProfileFieldViewStyle.RadioBox: // case DatasetProfileFieldViewStyle.RadioBox:
case DatasetProfileFieldViewStyle.TextArea: // case DatasetProfileFieldViewStyle.TextArea:
case DatasetProfileFieldViewStyle.FreeText: // case DatasetProfileFieldViewStyle.FreeText:
case DatasetProfileFieldViewStyle.ComboBox: // case DatasetProfileFieldViewStyle.ComboBox:
case DatasetProfileFieldViewStyle.InternalDmpEntities: // case DatasetProfileFieldViewStyle.InternalDmpEntities:
case DatasetProfileFieldViewStyle.BooleanDecision: // case DatasetProfileFieldViewStyle.BooleanDecision:
case DatasetProfileFieldViewStyle.DatePicker: // case DatasetProfileFieldViewStyle.DatePicker:
case DatasetProfileFieldViewStyle.ExternalDatasets: // case DatasetProfileFieldViewStyle.ExternalDatasets:
case DatasetProfileFieldViewStyle.DataRepositories: // case DatasetProfileFieldViewStyle.DataRepositories:
case DatasetProfileFieldViewStyle.Registries: // case DatasetProfileFieldViewStyle.Registries:
case DatasetProfileFieldViewStyle.Services: // case DatasetProfileFieldViewStyle.Services:
case DatasetProfileFieldViewStyle.Tags: // case DatasetProfileFieldViewStyle.Tags:
case DatasetProfileFieldViewStyle.Registries: // case DatasetProfileFieldViewStyle.Registries:
case DatasetProfileFieldViewStyle.Organizations: // case DatasetProfileFieldViewStyle.Organizations:
case DatasetProfileFieldViewStyle.DatasetIdentifier: // case DatasetProfileFieldViewStyle.DatasetIdentifier:
case DatasetProfileFieldViewStyle.Currency: // case DatasetProfileFieldViewStyle.Currency:
case DatasetProfileFieldViewStyle.Validation: // case DatasetProfileFieldViewStyle.Validation:
return false; // return false;
default: // default:
return false; // return false;
} // }
} // }
@ -351,7 +357,11 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
// if(this.form.get('viewStyle').get('renderStyle').value == DatasetProfileFieldViewStyle.Researchers){ // if(this.form.get('viewStyle').get('renderStyle').value == DatasetProfileFieldViewStyle.Researchers){
// fieldEditorModel.data = new ResearchersAutoCompleteFieldDataEditorModel().buildForm().getRawValue(); // fieldEditorModel.data = new ResearchersAutoCompleteFieldDataEditorModel().buildForm().getRawValue();
// } // }
if(fieldEditorModel.viewStyle.renderStyle === DatasetProfileFieldViewStyle.Validation || (fieldEditorModel.viewStyle.renderStyle === DatasetProfileFieldViewStyle.DatasetIdentifier)
|| (fieldEditorModel.viewStyle.renderStyle === DatasetProfileFieldViewStyle.Tags)
){
fieldEditorModel.value = null;
}
// const myTicket = Guid.create().toString(); // const myTicket = Guid.create().toString();
// this.validTicket = myTicket; // this.validTicket = myTicket;
@ -403,111 +413,362 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
this.showPreview = false; this.showPreview = false;
if (this.form.get('data')) {
this.form.removeControl('data');
}
this.form.removeControl('defaultValue'); const field: Field = this.form.getRawValue();
const defaultValueModel = new DefaultValueEditorModel(); field.defaultValue = {type:null, value: null};
this.form.addControl('defaultValue',defaultValueModel.buildForm());
// if (this.form.get('data')) {
// this.form.removeControl('data');
// }
// this.form.removeControl('defaultValue');
// const defaultValueModel = new DefaultValueEditorModel();
// this.form.addControl('defaultValue',defaultValueModel.buildForm());
switch (x) { switch (x) {
case this.viewTypeEnum.BooleanDecision: case this.viewTypeEnum.BooleanDecision:{
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.BooleanDecision)
this.form.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
break;
case this.viewTypeEnum.CheckBox:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.CheckBox)
this.form.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
break;
case this.viewTypeEnum.Select:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
this.form.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('options'));
this.form.get('data').updateValueAndValidity();
break;
case this.viewTypeEnum.Other:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
this.form.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
this.form.get('data').updateValueAndValidity();
break; // this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.BooleanDecision)
case this.viewTypeEnum.InternalDmpEntities: // this.form.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());//TODO TO SEE
break;
case this.viewTypeEnum.FreeText:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.FreeText)
this.form.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
break;
case this.viewTypeEnum.RadioBox:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
this.form.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('options')); const data: BooleanDecisionFieldData = {
this.form.get('data').updateValueAndValidity(); label:""
}
break;
case this.viewTypeEnum.TextArea: field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.BooleanDecision;
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea) field.data = data;
this.form.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
break; break;
case this.viewTypeEnum.DatePicker: }
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatePicker) case this.viewTypeEnum.CheckBox:{
this.form.addControl('data', new DatePickerDataEditorModel().buildForm());
break;
case this.viewTypeEnum.ExternalDatasets: // this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.CheckBox)
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ExternalDatasets) // this.form.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
this.form.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
break; const data: CheckBoxFieldData = {
case this.viewTypeEnum.DataRepositories: label:''
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DataRepositories) }
this.form.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
break; field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.CheckBox;
case this.viewTypeEnum.Registries: field.data = data;
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Registries)
this.form.addControl('data', new RegistriesDataEditorModel().buildForm()); break;
break; }
case this.viewTypeEnum.Services: case this.viewTypeEnum.Select:{
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Services)
this.form.addControl('data', new ServicesDataEditorModel().buildForm());
break; // this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
case this.viewTypeEnum.Tags: // this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Tags)
this.form.addControl('data', new TagsDataEditorModel().buildForm()); // this.form.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
break; // this.form.get('data').updateValueAndValidity();
case this.viewTypeEnum.Researchers:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Researchers)
// this.form.addControl('data', new ResearchersDataEditorModel().buildForm()); //TODO TO ASK const data:WordListFieldData = {
this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm()); label:'',
break; multiList:false,
case this.viewTypeEnum.Organizations: options:[],
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations) type:DatasetProfileComboBoxType.WordList
this.form.addControl('data', new OrganizationsDataEditorModel().buildForm()); }
break;
case this.viewTypeEnum.DatasetIdentifier:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier) field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ComboBox;
this.form.addControl('data', new DatasetIdentifierDataEditorModel().buildForm()); field.data = data;
break;
case this.viewTypeEnum.Currency: break;
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Currency) }
this.form.addControl('data', new CurrencyDataEditorModel().buildForm()); case this.viewTypeEnum.Other:{
break;
case this.viewTypeEnum.Validation:
this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Validation) // this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
this.form.addControl('data', new ValidationDataEditorModel().buildForm()); // this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
break;
// this.form.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
// this.form.get('data').updateValueAndValidity();
const data: AutoCompleteFieldData = {
autoCompleteSingleDataList:[],
multiAutoComplete: false,
label:'',
type: DatasetProfileComboBoxType.Autocomplete
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ComboBox;
field.data = data;
break;
}
case this.viewTypeEnum.InternalDmpEntities:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
// this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());//TODO TO SEE
const data: DmpsAutoCompleteFieldData = {
label:'',
multiAutoComplete: false,
type: DatasetProfileInternalDmpEntitiesType.Dmps
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.InternalDmpEntities;
field.data = data;
break;
}
case this.viewTypeEnum.FreeText:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.FreeText)
// this.form.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
const data: FreeTextFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.FreeText;
field.data = data;
break;
}
case this.viewTypeEnum.RadioBox:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
// this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
// this.form.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
// this.form.get('data').updateValueAndValidity();
const data: RadioBoxFieldData= {
label:'',
options: []
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.RadioBox;
field.data = data;
break;
}
case this.viewTypeEnum.TextArea:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
// this.form.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
const data: TextAreaFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.TextArea;
field.data = data;
break;
}
case this.viewTypeEnum.DatePicker:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatePicker)
// this.form.addControl('data', new DatePickerDataEditorModel().buildForm());
const data: DatePickerFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DatePicker;
field.data = data;
break;
}
case this.viewTypeEnum.ExternalDatasets:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ExternalDatasets)
// this.form.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
const data: ExternalDatasetsFieldData = {
label:'',
multiAutoComplete: false
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ExternalDatasets;
field.data = data;
break;
}
case this.viewTypeEnum.DataRepositories:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DataRepositories)
// this.form.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
const data: DataRepositoriesFieldData = {
label: '',
multiAutoComplete: false
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DataRepositories;
field.data = data;
break;
}
case this.viewTypeEnum.Registries:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Registries)
// this.form.addControl('data', new RegistriesDataEditorModel().buildForm());
const data:RegistriesFieldData = {
label: '',
multiAutoComplete: false
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Registries;
field.data = data;
break;
}
case this.viewTypeEnum.Services:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Services)
// this.form.addControl('data', new ServicesDataEditorModel().buildForm());
const data:ServicesFieldData = {
label:'',
multiAutoComplete: false
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Services;
field.data = data;
break;
}
case this.viewTypeEnum.Tags:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Tags)
// this.form.addControl('data', new TagsDataEditorModel().buildForm());
const data: TagsFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Tags;
field.data = data;
break;
}
case this.viewTypeEnum.Researchers:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Researchers)
// // this.form.addControl('data', new ResearchersDataEditorModel().buildForm()); //TODO TO ASK
// this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());
// field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Researchers;
const data : ResearchersAutoCompleteFieldData = {
label:'',
multiAutoComplete: false,
type: DatasetProfileInternalDmpEntitiesType.Researchers
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.InternalDmpEntities;
field.data = data;
break;
}
case this.viewTypeEnum.Organizations:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
const data = {
autoCompleteSingleDataList:[],
label:'',
multiAutoComplete: false,
} as OrganizationsFieldData; //TODO
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Organizations;
field.data = data;
break;
}
case this.viewTypeEnum.DatasetIdentifier:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
// this.form.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
const data : DatasetIdentifierFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DatasetIdentifier;
field.data = data;
break;
}
case this.viewTypeEnum.Currency:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Currency)
// this.form.addControl('data', new CurrencyDataEditorModel().buildForm());
const data: CurrencyFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Currency;
field.data = data;
break;
}
case this.viewTypeEnum.Validation:{
// this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Validation)
// this.form.addControl('data', new ValidationDataEditorModel().buildForm());
const data:ValidationFieldData = {
label:''
}
field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Validation;
field.data = data;
break;
}
}
// this.form.get('data').updateValueAndValidity();
// this.form.get('viewStyle').get('renderStyle').updateValueAndValidity();
// this.form.updateValueAndValidity();
const form = (new FieldEditorModel).fromModel(field).buildForm();
const fields = this.form.parent as FormArray;
let index = -1;
fields.controls.forEach((control,i)=>{
if(this.form.get('id').value === control.get('id').value){
index = i
}
});
if(index>=0){
fields.removeAt(index);
fields.insert(index, form);
this.form = form;
} }
this.form.get('data').updateValueAndValidity();
this.form.get('viewStyle').get('renderStyle').updateValueAndValidity();
this.form.updateValueAndValidity();
setTimeout(() => { //TODO setTimeout(() => { //TODO
this.showPreview = true; this.showPreview = true;
}); });
@ -549,17 +810,4 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
onDelete(){ onDelete(){
this.delete.emit(); this.delete.emit();
} }
// private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
// return (control: AbstractControl): ValidationErrors | null=>{
// const fa = control.get(arrayToCheck) as FormArray;
// if(fa.length === 0){
// return {emptyArray: true};
// }
// return null;
// }
// }
} }

View File

@ -48,9 +48,9 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
this.dragulaService.createGroup(this.FIELDSETS,{ this.dragulaService.createGroup(this.FIELDSETS,{
moves:(el, container, handle)=>{ moves:(el, container, handle)=>{
if(this.viewOnly) return false; // if(this.viewOnly) return false; //uncomment if want to unable drag n drop in viewonly mode
if(el.id != (this.idprefix+this.tocentry.id)) return false; if(el.id != (this.idprefix+this.tocentry.id)) return false;
if(handle.className.includes('handle')) return true; if(handle.className && handle.classList.contains('handle')) return true;
return false; return false;
} }
}); });

View File

@ -13,7 +13,7 @@
<div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME-HINT' | translate}}</div> <div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME-HINT' | translate}}</div>
<mat-form-field class="col-12"> <mat-form-field class="col-12">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.TITLE' | translate}}" <input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.TITLE' | translate}}"
formControlName="title" required> formControlName="title">
<mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<!-- <mat-form-field class="col-md-3"> <!-- <mat-form-field class="col-md-3">

View File

@ -4,18 +4,18 @@ import { AbstractControl, FormArray, ValidationErrors, ValidatorFn } from "@angu
export class EditorCustomValidators{ export class EditorCustomValidators{
public atLeastOneElementListValidator(arrayToCheck): ValidatorFn{ static atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
return (control: AbstractControl): ValidationErrors | null=>{ return (control: AbstractControl): ValidationErrors | null=>{
const fa = control.get(arrayToCheck) as FormArray; const fa = control.get(arrayToCheck) as FormArray;
if(fa.length === 0){ if(!fa || fa.length === 0){
return {[EditorCustomValidatorsEnum.emptyArray]: true}; return {[EditorCustomValidatorsEnum.emptyArray]: true};
} }
return null; return null;
} }
} }
public pagesHaveAtLeastOneSection(pagesArrayName:string,sectionsArrayName:string ): ValidatorFn{ static pagesHaveAtLeastOneSection(pagesArrayName:string,sectionsArrayName:string ): ValidatorFn{
return (control: AbstractControl): ValidationErrors | null=>{ return (control: AbstractControl): ValidationErrors | null=>{
@ -38,7 +38,7 @@ export class EditorCustomValidators{
} }
} }
public sectionHasAtLeastOneChildOf(fieldsetsArrayName, sectionsArrayName): ValidatorFn{ static sectionHasAtLeastOneChildOf(fieldsetsArrayName, sectionsArrayName): ValidatorFn{
return (control: AbstractControl): ValidationErrors | null=>{ return (control: AbstractControl): ValidationErrors | null=>{

View File

@ -3,6 +3,7 @@ import { DatasetProfile } from '../../../../core/model/admin/dataset-profile/dat
import { BaseFormModel } from '../../../../core/model/base-form-model'; import { BaseFormModel } from '../../../../core/model/base-form-model';
import { PageEditorModel } from '../admin/page-editor-model'; import { PageEditorModel } from '../admin/page-editor-model';
import { SectionEditorModel } from '../admin/section-editor-model'; import { SectionEditorModel } from '../admin/section-editor-model';
import { EditorCustomValidators } from './custom-validators/editor-custom-validators';
export class DatasetProfileEditorModel extends BaseFormModel { export class DatasetProfileEditorModel extends BaseFormModel {
@ -48,6 +49,10 @@ export class DatasetProfileEditorModel extends BaseFormModel {
pagesFormArray.push(form); pagesFormArray.push(form);
}); });
formGroup.addControl('pages', this.formBuilder.array(pagesFormArray)); formGroup.addControl('pages', this.formBuilder.array(pagesFormArray));
formGroup.setValidators([EditorCustomValidators.atLeastOneElementListValidator('pages'), EditorCustomValidators.pagesHaveAtLeastOneSection('pages','sections')]);
formGroup.updateValueAndValidity();
return formGroup; return formGroup;
} }
} }

View File

@ -128,7 +128,7 @@
<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME-HINT'| translate}}</div> <div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME-HINT'| translate}}</div>
<mat-form-field class="full-width basic-info-input"> <mat-form-field class="full-width basic-info-input">
<input matInput [formControl]="form.get('label')" <input matInput [formControl]="form.get('label')"
placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required> placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}">
<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | <mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}} translate}}
</mat-error> </mat-error>
@ -140,7 +140,7 @@
<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}</div> <div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
<mat-form-field class="full-width basic-info-input"> <mat-form-field class="full-width basic-info-input">
<textarea matInput [formControl]="form.get('description')" cdkTextareaAutosize cdkAutosizeMinRows="4" cdkAutosizeMaxRows="5" <textarea matInput [formControl]="form.get('description')" cdkTextareaAutosize cdkAutosizeMinRows="4" cdkAutosizeMaxRows="5"
placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER'| translate}}" required> placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER'| translate}}">
</textarea> </textarea>
<mat-error *ngIf="form.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' <mat-error *ngIf="form.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED'
| translate}} | translate}}
@ -501,11 +501,11 @@
console form console form
</button> </button>
</div> --> </div> -->
<!--
<div *ngIf="form">{{form.value | json}}</div>
<br> <!-- <div *ngIf="form">{{form.value | json}}</div>
<br>
<br> -->
<!-- <br>
<div class="row"> <div class="row">
{{form.controls?.sections.value |json}} {{form.controls?.sections.value |json}}
</div> --> </div> -->

View File

@ -44,6 +44,7 @@ import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
import { EditorCustomValidators, EditorCustomValidatorsEnum } from './custom-validators/editor-custom-validators'; import { EditorCustomValidators, EditorCustomValidatorsEnum } from './custom-validators/editor-custom-validators';
import { CustomErrorValidator } from '@common/forms/validation/custom-validator'; import { CustomErrorValidator } from '@common/forms/validation/custom-validator';
import { STEPPER_ANIMATIONS } from './animations/animations'; import { STEPPER_ANIMATIONS } from './animations/animations';
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json'); const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
@ -77,7 +78,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
colorizeInvalid:boolean = false; colorizeInvalid:boolean = false;
customEditorValidators = new EditorCustomValidators(); // customEditorValidators = new EditorCustomValidators();
// sectionIdPreviewed:string = null; // sectionIdPreviewed:string = null;
// currentSubForm:FormGroup = null; // currentSubForm:FormGroup = null;
@ -191,7 +192,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
} else { } else {
this.dataModel = new DatasetProfileEditorModel(); this.dataModel = new DatasetProfileEditorModel();
this.form = this.dataModel.buildForm(); this.form = this.dataModel.buildForm();
this.form.setValidators([this.customEditorValidators.atLeastOneElementListValidator('pages'), this.customEditorValidators.pagesHaveAtLeastOneSection('pages', 'sections')]); // this.form.setValidators([EditorCustomValidators.atLeastOneElementListValidator('pages'), EditorCustomValidators.pagesHaveAtLeastOneSection('pages', 'sections')]);
if (this.dataModel.status === DatasetProfileEnum.FINALIZED) { if (this.dataModel.status === DatasetProfileEnum.FINALIZED) {
this.form.disable(); this.form.disable();
@ -219,13 +220,16 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
if(tocentries && tocentries.length){ if(tocentries && tocentries.length){
this.selectedTocEntry = tocentries[0]; this.selectedTocEntry = tocentries[0];
} }
// this._initializeFormValidity(tocentries);
} }
prepareForm() { prepareForm() {
this.visibilityRulesService.buildVisibilityRules([],this.form); this.visibilityRulesService.buildVisibilityRules([],this.form);
this.form.setValidators([this.customEditorValidators.atLeastOneElementListValidator('pages'),this.customEditorValidators.pagesHaveAtLeastOneSection('pages', 'sections')]); // this.form.setValidators([EditorCustomValidators.atLeastOneElementListValidator('pages'),EditorCustomValidators.pagesHaveAtLeastOneSection('pages', 'sections')]);
// this.form.updateValueAndValidity();
this.form.valueChanges this.form.valueChanges
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(change => { .subscribe(change => {
@ -239,7 +243,6 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
// this.previewerFormGroup = <FormGroup>this.dataWizardModel.buildForm().get('datasetProfileDefinition'); // this.previewerFormGroup = <FormGroup>this.dataWizardModel.buildForm().get('datasetProfileDefinition');
// }); // });
}); });
this.form.updateValueAndValidity();
setTimeout(() => { setTimeout(() => {
this.steps = this.stepper.steps; this.steps = this.stepper.steps;
}); });
@ -812,8 +815,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
const sectionAdded = sectionsArray.at(sectionsArray.length -1) as FormGroup; const sectionAdded = sectionsArray.at(sectionsArray.length -1) as FormGroup;
sectionAdded.setValidators(this.customEditorValidators.sectionHasAtLeastOneChildOf('fieldSets','sections')); // sectionAdded.setValidators(this.customEditorValidators.sectionHasAtLeastOneChildOf('fieldSets','sections'));
sectionAdded.updateValueAndValidity(); // sectionAdded.updateValueAndValidity();
this.refreshToCEntries(); this.refreshToCEntries();
@ -1676,6 +1679,11 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
} }
} }
/**
* Get all filedsets in a tocentry array;
* @param entries Tocentries to search in
* @returns The tocentries that are Fieldsets provided in the entries
*/
private _getAllFieldSets(entries: ToCEntry[]):ToCEntry[]{ private _getAllFieldSets(entries: ToCEntry[]):ToCEntry[]{
const fieldsets:ToCEntry[] = []; const fieldsets:ToCEntry[] = [];
@ -1839,6 +1847,48 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
} }
//Temporary patch
/**
* Append custom validators to fields. Some validators are applied on template. In case they are never rendereed,
* he form might be valid when it shouldnt.
* @param
*/
private _initializeFormValidity(tocentries: ToCEntry[]) {
const fieldsets = this._getAllFieldSets(tocentries);
try{
fieldsets.forEach(fs=>{
fs.form.get('title').setValidators(Validators.required);
const fieldsF = fs.form.get('fields') as FormArray;
if(fieldsF){
fieldsF.controls.forEach(field=>{
const renderStyleValue = field.get('viewStyle').get('renderStyle').value;
if(renderStyleValue === DatasetProfileFieldViewStyle.CheckBox){
field.get('defaultValue').get('value').setValidators(Validators.required);
}else if(renderStyleValue === 'combobox'){
const comboType = field.get('data').get('type').value;
if(comboType === DatasetProfileComboBoxType.Autocomplete){//As 'Other' in UI
field.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
}else if(comboType === DatasetProfileComboBoxType.WordList){
field.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
}
}else if(renderStyleValue === DatasetProfileFieldViewStyle.RadioBox){
field.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
}
});
}
});
}catch(e){
console.error('Error initializing validators.');
console.error(e);
}
}
} }
interface InvalidControl{ interface InvalidControl{