argos/dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-editor-model.ts

176 lines
12 KiB
TypeScript
Raw Normal View History

import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
2019-01-18 18:03:45 +01:00
import { ValidationType } from '../../../../core/common/enum/validation-type';
import { Field } from '../../../../core/model/admin/dataset-profile/dataset-profile';
import { BaseFormModel } from '../../../../core/model/base-form-model';
import { DefaultValueEditorModel } from './default-value-editor-model';
import { AutoCompleteFieldDataEditorModel } from './field-data/auto-complete-field-data-editor-model';
import { BooleanDecisionFieldDataEditorModel } from './field-data/boolean-decision-field-data-editor-model';
import { CheckBoxFieldDataEditorModel } from './field-data/check-box-field-data-editor-model';
import { FieldDataEditorModel } from './field-data/field-data-editor-model';
import { FreeTextFieldDataEditorModel } from './field-data/free-text-field-data-editor-model';
import { RadioBoxFieldDataEditorModel } from './field-data/radio-box-field-data-editor-model';
import { TextAreaFieldDataEditorModel } from './field-data/text-area-field-data-editor-model';
Added rich text area field type for response in dataset > chapter > section > questions. 1. dataset-profile.module.ts: Added in declarations "DatasetProfileEditorRichTextAreaFieldComponent". 2. dataset-profile-editor-composite-field.component.html: Added RichTextArea as input field type for response to a question. 3. dataset-profile-editor-composite-field.component.ts: In method "addNewInput()" added case for RichTextArea. 4. dataset-profile-field-view-style.ts & view-style-enum.ts: Added RichTextArea. 5. field-data.ts: Added interface RichTextAreaFieldData. 6. enum-utils.service.ts: In methods "toDatasetProfileFieldViewStyleString()" and "toDatasetProfileViewTypeString()" added cases for RichTextArea 7. field-editor-model.ts: Added richTextarea. 8. component-profile-editor-default-value.component.html: Added <mat-form-field> for RichTextArea (how rich text area is initialized when this type is selected as response). 9. dataset-profile-editor-field.component.html: Added <mat-option> for RichTextArea (to select it) and <app-dataset-profile-editor-rich-text-area-field-component> (to show it). 10. dataset-profile-editor-field.component.ts: Added RichTextArea case everywhere. 11. dataset-wizard.component.ts & dmp-editor.component.ts: In method "_getPlaceHolder()" added case for richTextarea. 12. dataset-description-form.module.ts: Imported RichTextEditorModule. 13. form-field.component.html: Added RichTextArea case with <rich-text-editor-component>. 14. assets/i18n/: Added DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RICH-TEXT-AREA-TITLE, DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RICH-TEXT-AREA-PLACEHOLDER and DMP-EDITOR.TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.RICH-TEXT-AREA. 15. field-data/rich-text-area-field-data-editor-model.ts & field-type/rich-textarea/: [NEW] Files for Rich Text Area field type.
2021-11-01 14:30:21 +01:00
import { RichTextAreaFieldDataEditorModel } from './field-data/rich-text-area-field-data-editor-model';
import {UploadFieldDataEditorModel} from "./field-data/upload-field-data-editor-model";
2019-01-18 18:03:45 +01:00
import { WordListFieldDataEditorModel } from './field-data/word-list-field-data-editor-model';
import { ViewStyleEditorModel } from './view-style-editor-model';
import { VisibilityEditorModel } from './visibility-editor-model';
import { DatasetProfileEditorDatePickerFieldComponent } from '../editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component';
import { DatePickerDataEditorModel } from './field-data/date-picker-data-editor-models';
import { ResearchersAutoCompleteFieldDataEditorModel } from './field-data/researchers-auto-complete-field-data-editor-model';
import { DatasetsAutoCompleteFieldDataEditorModel } from './field-data/datasets-autocomplete-field-data-editor-mode';
import { DmpsAutoCompleteFieldDataEditorModel } from './field-data/dmps-autocomplete-field-data-editor-model';
import { ExternalDatasetsDataEditorModel } from './field-data/external-datasets-data-editor-models';
import { DataRepositoriesDataEditorModel } from './field-data/data-repositories-data-editor-models';
import { RegistriesDataEditorModel } from './field-data/registries-data-editor-models';
import { ServicesDataEditorModel } from './field-data/services-data-editor-models';
import { TagsDataEditorModel } from './field-data/tags-data-editor-models';
import { ResearchersDataEditorModel } from './field-data/researchers-data-editor-models';
import { OrganizationsDataEditorModel } from './field-data/organizations-data-editor-models';
import { DatasetIdentifierDataEditorModel } from './field-data/dataset-identifier-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';
import {PublicationsDataEditorModel} from "@app/ui/admin/dataset-profile/admin/field-data/publications-data-editor-models";
import {LicensesDataEditorModel} from "@app/ui/admin/dataset-profile/admin/field-data/licenses-data-editor-models";
import {TaxonomiesDataEditorModel} from "@app/ui/admin/dataset-profile/admin/field-data/taxonomies-data-editor-models";
2019-01-18 18:03:45 +01:00
export class FieldEditorModel extends BaseFormModel {
public id: string;
// public title: string;
public defaultValue: DefaultValueEditorModel = new DefaultValueEditorModel();
public viewStyle: ViewStyleEditorModel = new ViewStyleEditorModel();
public page: number = null;
public ordinal: number = null;
2019-01-18 18:03:45 +01:00
public visible: VisibilityEditorModel = new VisibilityEditorModel();
public data: FieldDataEditorModel<any>;
public validations: ValidationType[] = [];
public schematics: string[];
public export: boolean = true;
2019-01-18 18:03:45 +01:00
fromModel(item: Field): FieldEditorModel {
this.id = item.id;
if (item.defaultValue) { this.defaultValue = new DefaultValueEditorModel().fromModel(item.defaultValue); }
this.page = item.page;
this.ordinal = item.ordinal;
this.validations = item.validations;
this.viewStyle = new ViewStyleEditorModel().fromModel(item.viewStyle);
this.visible = new VisibilityEditorModel().fromModel(item.visible);
this.schematics = item.schematics;
this.export = item.export;
2019-01-18 18:03:45 +01:00
if (item.data) {
if (this.viewStyle.renderStyle === 'combobox') {
if (item.data.type === 'autocomplete') { this.data = new AutoCompleteFieldDataEditorModel().fromModel(item.data); }
if (item.data.type === 'wordlist') { this.data = new WordListFieldDataEditorModel().fromModel(item.data); }
} else if (this.viewStyle.renderStyle === 'internalDmpEntities') {
if (item.data.type === 'researchers') { this.data = new ResearchersAutoCompleteFieldDataEditorModel().fromModel(item.data); }
if (item.data.type === 'datasets') { this.data = new DatasetsAutoCompleteFieldDataEditorModel().fromModel(item.data); }
if (item.data.type === 'dmps') { this.data = new DmpsAutoCompleteFieldDataEditorModel().fromModel(item.data); }
2019-01-18 18:03:45 +01:00
} else {
if (this.viewStyle.renderStyle === 'radiobox') { this.data = new RadioBoxFieldDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'checkBox') { this.data = new CheckBoxFieldDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'textarea') { this.data = new TextAreaFieldDataEditorModel().fromModel(item.data); }
Added rich text area field type for response in dataset > chapter > section > questions. 1. dataset-profile.module.ts: Added in declarations "DatasetProfileEditorRichTextAreaFieldComponent". 2. dataset-profile-editor-composite-field.component.html: Added RichTextArea as input field type for response to a question. 3. dataset-profile-editor-composite-field.component.ts: In method "addNewInput()" added case for RichTextArea. 4. dataset-profile-field-view-style.ts & view-style-enum.ts: Added RichTextArea. 5. field-data.ts: Added interface RichTextAreaFieldData. 6. enum-utils.service.ts: In methods "toDatasetProfileFieldViewStyleString()" and "toDatasetProfileViewTypeString()" added cases for RichTextArea 7. field-editor-model.ts: Added richTextarea. 8. component-profile-editor-default-value.component.html: Added <mat-form-field> for RichTextArea (how rich text area is initialized when this type is selected as response). 9. dataset-profile-editor-field.component.html: Added <mat-option> for RichTextArea (to select it) and <app-dataset-profile-editor-rich-text-area-field-component> (to show it). 10. dataset-profile-editor-field.component.ts: Added RichTextArea case everywhere. 11. dataset-wizard.component.ts & dmp-editor.component.ts: In method "_getPlaceHolder()" added case for richTextarea. 12. dataset-description-form.module.ts: Imported RichTextEditorModule. 13. form-field.component.html: Added RichTextArea case with <rich-text-editor-component>. 14. assets/i18n/: Added DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RICH-TEXT-AREA-TITLE, DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RICH-TEXT-AREA-PLACEHOLDER and DMP-EDITOR.TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.RICH-TEXT-AREA. 15. field-data/rich-text-area-field-data-editor-model.ts & field-type/rich-textarea/: [NEW] Files for Rich Text Area field type.
2021-11-01 14:30:21 +01:00
if (this.viewStyle.renderStyle === 'richTextarea') { this.data = new RichTextAreaFieldDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'upload') { this.data = new UploadFieldDataEditorModel().fromModel(item.data); }
2019-01-18 18:03:45 +01:00
if (this.viewStyle.renderStyle === 'freetext') { this.data = new FreeTextFieldDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'booleanDecision') { this.data = new BooleanDecisionFieldDataEditorModel().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 === 'dataRepositories') { this.data = new DataRepositoriesDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'pubRepositories') { this.data = new DataRepositoriesDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'journalRepositories') { this.data = new DataRepositoriesDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'taxonomies') { this.data = new TaxonomiesDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'licenses') { this.data = new LicensesDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'publications') { this.data = new PublicationsDataEditorModel().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 === 'tags') { this.data = new TagsDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'researchers') { this.data = new ResearchersAutoCompleteFieldDataEditorModel().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 === 'currency') { this.data = new CurrencyDataEditorModel().fromModel(item.data); }
if (this.viewStyle.renderStyle === 'validation') { this.data = new ValidationDataEditorModel().fromModel(item.data); }
2019-01-18 18:03:45 +01:00
}
}
return this;
}
buildForm(disabled: boolean = false, skipDisable: Array<String> = []): FormGroup {
2019-01-18 18:03:45 +01:00
const formGroup = this.formBuilder.group({
id: [{ value: this.id, disabled: (disabled && !skipDisable.includes('FieldEditorModel.id')) }, [Validators.required, Validators.pattern('^[^<_>]+$')]],
2019-01-18 18:03:45 +01:00
// title: [this.title],
page: [{ value: this.page, disabled: (disabled && !skipDisable.includes('FieldEditorModel.page')) }],
ordinal: [{ value: this.ordinal, disabled: (disabled && !skipDisable.includes('FieldEditorModel.ordinal')) }],
validations: [{ value: this.validations, disabled: (disabled && !skipDisable.includes('FieldEditorModel.validations')) }],
schematics: [{ value: this.schematics, disabled: (disabled && !skipDisable.includes('FieldEditorModel.schematics')) }],
export: [{value: this.export, disabled: (disabled && !skipDisable.includes('FieldSetEditorModel.export'))}]
2019-01-18 18:03:45 +01:00
});
formGroup.addControl('defaultValue', this.defaultValue.buildForm(disabled, skipDisable));
formGroup.addControl('viewStyle', this.viewStyle.buildForm(disabled, skipDisable));
formGroup.addControl('visible', this.visible.buildForm(disabled, skipDisable));
if (this.data) { formGroup.addControl('data', this.data.buildForm(disabled, skipDisable)); }
else { formGroup.addControl('data', new WordListFieldDataEditorModel().buildForm(disabled, skipDisable)); }
2019-01-18 18:03:45 +01:00
// //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);
// })
2019-01-18 18:03:45 +01:00
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'));
}else if(renderStyleValue === 'upload'){
formGroup.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('types'));
formGroup.get('data').get('maxFileSizeInMB').setValidators(Validators.required);
}
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){
// }
2019-01-18 18:03:45 +01:00
}