From 96ebf7c0d0041f16785212ea5407a427d003260e Mon Sep 17 00:00:00 2001 From: Kristan Ntavidi Date: Thu, 18 Feb 2021 17:13:56 +0200 Subject: [PATCH] Dataset profile editor. Ui fixes. mat-stepper header fix and preview fixes. --- .../dataset-profile/dataset-profile.module.ts | 5 +- ...file-editor-composite-field.component.html | 8 +- ...rofile-editor-composite-field.component.ts | 13 +- ...ataset-profile-editor-field.component.html | 288 +++++++++--------- ...dataset-profile-editor-rule.component.html | 19 +- .../dataset-profile-editor-rule.component.ts | 2 +- ...ataset-profile-editor-section.component.ts | 15 +- .../dataset-profile-editor.component.html | 8 +- .../dataset-profile-editor.component.scss | 1 + .../dataset-profile-editor.component.ts | 49 +-- .../table-of-contents-internal-section.html | 85 +++--- .../table-of-contents/table-of-contents.html | 22 +- 12 files changed, 289 insertions(+), 226 deletions(-) diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts index f5685d3f9..aa5e2aad6 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts @@ -46,7 +46,7 @@ import { ParseStatus } from './listing/pipe/parse-status.pipe'; import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents'; import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section'; import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service'; - +import {DragDropModule} from '@angular/cdk/drag-drop'; @NgModule({ imports: [ CommonUiModule, @@ -57,7 +57,8 @@ import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/vi NgxDropzoneModule, FormProgressIndicationModule, DatasetModule, - AngularStickyThingsModule + AngularStickyThingsModule, + DragDropModule ], declarations: [ DatasetProfileListingComponent, diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html index 3723568b7..fce151234 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html @@ -118,8 +118,8 @@
- -
+
{{form.get('fields').get(''+i).get('id').value}} @@ -238,10 +238,10 @@ --> - + diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts index 267eb0fc5..9e36b2528 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts @@ -146,11 +146,22 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh addNewField() { const field: FieldEditorModel = new FieldEditorModel(); field.id=Guid.create().toString(); + + field.ordinal = (this.form.get('fields') as FormArray).length; + (this.form.get('fields')).push(field.buildForm()); } DeleteField(index) { - (this.form.get('fields')).removeAt(index); + + const fieldsForm = this.form.get('fields'); + fieldsForm.removeAt(index); + + // calculate ordinals + fieldsForm.controls.forEach((field, idx)=>{ + field.get('ordinal').setValue(idx); + field.updateValueAndValidity(); + }) } getFieldTile(formGroup: FormGroup, index: number) { diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html index 3b82a42c5..130897616 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html @@ -1,169 +1,169 @@ -
- +
+ - - + --> - - - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}} - - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}} - - - - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}} + + + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}} + + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}} + + + + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}} - - + + - - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}} - {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}} - - - - - Internal DMPs - Tags - Dataset Identifier - Validation - + + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}} + {{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}} + + + + + Internal DMPs + Tags + Dataset Identifier + Validation + - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + - - - - + + + + - - + + - - {{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.RDA-COMMON-STANDARDS' | translate}} - - -- - - {{property}} - - - + + {{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.RDA-COMMON-STANDARDS' | translate}} + + -- + + {{property}} + + + - - - + + + -
-
- - - - - - +
+
+ + + + + + - - + + - - - - - - - - - - -
-
+ + + + + + + + + + +
+
- -

{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}} -

- - + + + + - - - - -
+
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.html index 5386fce2b..81e12f774 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.html @@ -1,13 +1,18 @@
- {{i + 1}} + {{i + 1}} - {{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}} + - --> + + + - {{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}} + - - Pick one + + {{'DATASET-PROFILE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}} @@ -65,7 +70,7 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}} -
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.ts index d6606e150..bb9cb6463 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/rule/dataset-profile-editor-rule.component.ts @@ -30,7 +30,7 @@ export class DatasetProfileEditorRuleComponent implements OnInit{ ngOnInit(): void { this.options = this.getOptions(); - + // TODO TO SEE IF THE COMPONENT IS NOT DESTROYED AND THE FORM UPDATES this.sectionOptions = []; this.fieldOptions = []; diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.ts index 4e4bc873d..4e6fac781 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.ts @@ -23,17 +23,22 @@ export class DatasetProfileEditorSectionComponent extends BaseComponent implemen constructor() { super(); } ngOnInit() { - this.form.root.get('pages').valueChanges - .pipe(takeUntil(this._destroyed)) - .subscribe(x => - this.keepPageSelectionValid(x) - ); + + //TODO + // this.form.root.get('pages').valueChanges + // .pipe(takeUntil(this._destroyed)) + // .subscribe(x => + // this.keepPageSelectionValid(x) + // ); } addField() { const fieldSet: FieldSetEditorModel = new FieldSetEditorModel(); + fieldSet.ordinal = (this.form.get('fieldSets') as FormArray).length; + const field: FieldEditorModel = new FieldEditorModel(); field.id = Guid.create().toString(); + field.ordinal = 0;//first field in fields fieldSet.fields.push(field); // if (this.dataModel.fieldSets) { fieldSet.id = Guid.create().toString(); diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html index 947ecfaf7..9397a3f9e 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html @@ -29,7 +29,7 @@
-
+
{{step.label}} @@ -259,7 +259,7 @@ - +
@@ -299,11 +299,11 @@ -
+ diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss index 4dd2f079b..d91264828 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss @@ -16,6 +16,7 @@ .stepper{ background-color: transparent; + min-height: 500px; } .content-displayer{ background-color: #fff; diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts index df9ccb933..5db3683de 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts @@ -178,12 +178,13 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn // this.addSection(); // this.addPage(); this.visibilityRulesService.buildVisibilityRules([],this.form); + setTimeout(() => { + this.steps = this.stepper.steps; + }); } }); + - setTimeout(() => { - this.steps = this.stepper.steps; - }); } prepareForm() { @@ -201,6 +202,15 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn // }); }); this.form.updateValueAndValidity(); + setTimeout(() => { + this.steps = this.stepper.steps; + }); + + //SHOW THE FIRST PAGE + const tocentries = this.getTocEntries(); + if(tocentries && tocentries.length){ + this.selectedTocEntry = tocentries[0]; + } //this.getPreview(); @@ -674,6 +684,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn section.id = Guid.create().toString(); let sectionsArray:FormArray; + //TODO CHECK FOR FORM.ROOT ERROR if (parent.type === ToCEntryType.Page) { //FIRST LEVEL SECTION @@ -709,8 +720,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn //create one field form fieldset const field: FieldEditorModel = new FieldEditorModel(); //to ask field.id = Guid.create().toString(); - field.ordinal = fieldSet.fields.length; + field.ordinal = 0;//first filed in the fields list fieldSet.fields.push(field); + // field.ordinal = fieldSet.fields.length-1; //give fieldset id and ordinal fieldSet.id = Guid.create().toString(); @@ -1016,7 +1028,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn //first level is always pages - model.pages = toCentries.map(entry=>{ + model.pages = toCentries.map((entry,idx)=>{ if( !(entry.type == ToCEntryType.Page)){ return null; } @@ -1034,17 +1046,17 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn sectionModel.description = section.form.get('description').value; sectionModel.page = entry.form.get('ordinal').value; sectionModel.title = section.label; - sectionModel.numbering = section.numbering; + sectionModel.numbering = (idx+1).toString(); if(section.subEntriesType == ToCEntryType.Section){ - sectionModel.sections = this._buildSectionsRecursively(section.subEntries); + sectionModel.sections = this._buildSectionsRecursively(section.subEntries, sectionModel.numbering); }else{ - sectionModel.compositeFields = this._buildFormFields(section.subEntries) + sectionModel.compositeFields = this._buildFormFields(section.subEntries, sectionModel.numbering) } return sectionModel; - }) + }); }; return pageModel; @@ -1080,7 +1092,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn } visibilityRules:Rule[]; - private _buildSectionsRecursively( tocentries: ToCEntry[]): DatasetDescriptionSectionEditorModel[]{ + private _buildSectionsRecursively( tocentries: ToCEntry[], parentNumbering:string): DatasetDescriptionSectionEditorModel[]{ if(!tocentries) return null; @@ -1088,7 +1100,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn const result: Array = []; - tocentries.forEach(tocentry=>{ + tocentries.forEach((tocentry, idx)=>{ const sectionModel = new DatasetDescriptionSectionEditorModel(); sectionModel.id = tocentry.id; @@ -1096,13 +1108,14 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn sectionModel.description = tocentry.form.get('description').value; // sectionModel.page = entry.form.get('ordinal').value; sectionModel.title = tocentry.label; - sectionModel.numbering = tocentry.numbering; + // sectionModel.numbering = tocentry.numbering; + sectionModel.numbering = parentNumbering+"."+(idx+1);; if(tocentry.subEntriesType == ToCEntryType.Section){ - sectionModel.sections = this._buildSectionsRecursively(tocentry.subEntries); + sectionModel.sections = this._buildSectionsRecursively(tocentry.subEntries, sectionModel.numbering); }else{ - sectionModel.compositeFields = this._buildFormFields(tocentry.subEntries); + sectionModel.compositeFields = this._buildFormFields(tocentry.subEntries, sectionModel.numbering); } result.push(sectionModel); @@ -1111,12 +1124,12 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn return result; } - private _buildFormFields(tocentries: ToCEntry[]):DatasetDescriptionCompositeFieldEditorModel[]{ + private _buildFormFields(tocentries: ToCEntry[], parentNumbering: string):DatasetDescriptionCompositeFieldEditorModel[]{ if(!tocentries) return null; const fieldsets:DatasetDescriptionCompositeFieldEditorModel[] = []; - tocentries.forEach(fs=>{ + tocentries.forEach((fs, idx)=>{ const fieldset = new DatasetDescriptionCompositeFieldEditorModel(); @@ -1126,7 +1139,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn fieldset.multiplicity = fs.form.get('multiplicity').value; fieldset.additionalInformation = fs.form.get('additionalInformation').value; fieldset.ordinal = fs.form.get('ordinal').value; - fieldset.numbering = fs.numbering; + // fieldset.numbering = fs.numbering; + fieldset.numbering = parentNumbering+"."+(idx+1); fieldset.hasCommentField = fs.form.get('hasCommentField').value; fieldset.title = fs.label; // fieldset.fields = (fs.form.get('fields') as FormArray).getRawValue(); @@ -1139,6 +1153,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn fieldModel.viewStyle = (field.get('viewStyle') as FormGroup).getRawValue(); // fieldModel.defaultValue = (field.get('defaultValue') as FormGroup).getRawValue(); fieldModel.value = (field.get('defaultValue') as FormGroup).get('value').value; + fieldModel.defaultValue = fieldModel.value; fieldModel.page = field.get('page').value; fieldModel.validations = field.get('validations').value; diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html index debdc0551..bc6b9b984 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.html @@ -16,48 +16,53 @@ -
- - - + + + + + + + + +
+ +
-
- -
-
--> - - - - - - -
- - -
-
+
+ + +
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html index 8c47f497c..c9a1868dc 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html @@ -11,7 +11,8 @@ (createFooEntry)="createNewEntry($event)" [parentLink]="{ subEntriesType: tocEntryType.Page, subEntries : links }" [itemSelected]="itemSelected" - [viewOnly]="viewOnly"> + [viewOnly]="viewOnly" + >
+ + +
\ No newline at end of file