From 70e3c9fabcc770013416dc27cc157e0923f45819 Mon Sep 17 00:00:00 2001 From: Diamantis Tziotzios Date: Fri, 2 Feb 2024 18:43:24 +0200 Subject: [PATCH] more description editor changes --- .../src/app/core/pipes/field-value.pipe.ts | 4 +- ...late-editor-composite-field.component.html | 4 +- .../editor/description-editor.component.html | 2 +- .../editor/description-editor.model.ts | 13 +- ...form-composite-field-dialog.component.html | 15 -- .../form-composite-field-dialog.component.ts | 31 --- ...form-fieldset-editor-dialog.component.html | 26 +++ .../form-fieldset-editor-dialog.component.ts | 34 +++ .../field-set-title.component.html} | 2 +- .../field-set-title.component.scss} | 4 +- .../field-set-title.component.ts} | 8 +- .../form-field-set.component.html | 114 ++++++----- .../form-field-set.component.scss | 11 +- .../form-field-set.component.ts | 87 +++++--- .../form-field/form-field.component.html | 163 ++++++--------- .../form-field/form-field.component.ts | 7 +- .../form-section/form-section.component.html | 67 +----- .../form-section/form-section.component.ts | 193 +----------------- .../description-form.component.html | 2 +- .../description-form.module.ts | 6 +- 20 files changed, 275 insertions(+), 518 deletions(-) delete mode 100644 dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.html delete mode 100644 dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts create mode 100644 dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html create mode 100644 dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts rename dmp-frontend/src/app/ui/description/editor/description-form/components/{form-composite-title/form-composite-title.component.html => form-field-set/field-set-title/field-set-title.component.html} (89%) rename dmp-frontend/src/app/ui/description/editor/description-form/components/{form-composite-title/form-composite-title.component.scss => form-field-set/field-set-title/field-set-title.component.scss} (91%) rename dmp-frontend/src/app/ui/description/editor/description-form/components/{form-composite-title/form-composite-title.component.ts => form-field-set/field-set-title/field-set-title.component.ts} (63%) diff --git a/dmp-frontend/src/app/core/pipes/field-value.pipe.ts b/dmp-frontend/src/app/core/pipes/field-value.pipe.ts index 8eca47f68..0c01357cf 100644 --- a/dmp-frontend/src/app/core/pipes/field-value.pipe.ts +++ b/dmp-frontend/src/app/core/pipes/field-value.pipe.ts @@ -11,8 +11,8 @@ export class FieldValuePipe implements PipeTransform { } transform(controlValue: any): string | null { - let value = controlValue.value; - let renderStyle = controlValue.viewStyle?.renderStyle; + let value = controlValue?.value; + let renderStyle = controlValue?.viewStyle?.renderStyle; if (renderStyle && value) { switch (renderStyle) { case DescriptionTemplateFieldType.CURRENCY: diff --git a/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html index f8ce001f1..749c912a5 100644 --- a/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html +++ b/dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html @@ -99,8 +99,8 @@
- +
diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html index d5d8aac67..44e497602 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html +++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html @@ -136,8 +136,8 @@ [linkToScroll]="linkToScroll" (fieldsetFocusChange)="fieldsetIdWithFocus = $event"> - {{formGroup?.value | json}} + diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.model.ts b/dmp-frontend/src/app/ui/description/editor/description-editor.model.ts index d18e1c0ea..51643bcbe 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-editor.model.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-editor.model.ts @@ -159,7 +159,7 @@ export class DescriptionPropertyDefinitionEditorModel implements DescriptionProp definitionSection?.fieldSets?.forEach(definitionFieldSet => { const fieldSetResult = this.calculateFieldSetProperties(definitionFieldSet, item); if (fieldSetResult != null) { - result = new Map([...result, ...fieldSetResult]); + result.set(definitionFieldSet.id, fieldSetResult); } }); @@ -175,9 +175,8 @@ export class DescriptionPropertyDefinitionEditorModel implements DescriptionProp return result; } - private calculateFieldSetProperties(definitionFieldSet: DescriptionTemplateFieldSet, item: DescriptionPropertyDefinition): Map { + public calculateFieldSetProperties(definitionFieldSet: DescriptionTemplateFieldSet, item: DescriptionPropertyDefinition): DescriptionPropertyDefinitionFieldSetEditorModel { if (definitionFieldSet == null) return null; - const result: Map = new Map(); // current saved values const fieldSetValue: DescriptionPropertyDefinitionFieldSet = item?.fieldSets[definitionFieldSet.id] ?? {}; @@ -194,9 +193,7 @@ export class DescriptionPropertyDefinitionEditorModel implements DescriptionProp } as DescriptionPropertyDefinitionFieldSetItem] } - result.set(definitionFieldSet.id, new DescriptionPropertyDefinitionFieldSetEditorModel().fromModel(fieldSetValue)); - - return result; + return new DescriptionPropertyDefinitionFieldSetEditorModel().fromModel(fieldSetValue); } } @@ -289,8 +286,8 @@ export class DescriptionPropertyDefinitionFieldSetItemEditorModel implements Des } const formGroup = this.formBuilder.group({}); - formGroup.addControl('comment', new FormControl({ value: this.comment, disabled: disabled }, context.getValidation('comment').validators)); - formGroup.addControl('ordinal', new FormControl({ value: this.ordinal, disabled: disabled }, context.getValidation('ordinal').validators)); + formGroup.addControl('comment', new FormControl({ value: 'this.comment', disabled: disabled }, context.getValidation('comment').validators)); + formGroup.addControl('ordinal', new FormControl({ value: 5, disabled: disabled }, context.getValidation('ordinal').validators)); const fieldsFormGroup = this.formBuilder.group({}); diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.html deleted file mode 100644 index 567ff7d61..000000000 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
- close -
-
-
- -
-
-
-
-
-
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts deleted file mode 100644 index ac15f6dff..000000000 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {Component, Inject} from "@angular/core"; -import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; -import { VisibilityRulesService } from "../../visibility-rules/visibility-rules.service"; - -@Component({ - selector: 'app-form-composite-field-dialog', - templateUrl: 'form-composite-field-dialog.component.html' -}) -export class FormCompositeFieldDialogComponent { - - public visibilityRulesService: VisibilityRulesService; - - constructor( - private dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any - ) { - this.visibilityRulesService = data.visibilityRulesService; - } - - cancel() { - this.dialogRef.close(); - } - - save() { - this.dialogRef.close(this.data.formGroup); - } - - public close() { - this.dialogRef.close(false); - } -} diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html new file mode 100644 index 000000000..cd18dd2fd --- /dev/null +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html @@ -0,0 +1,26 @@ +
+
+
+ close +
+
+
+ + +
+ +
+
+
+
{{field.label}}
+
+ +
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts new file mode 100644 index 000000000..3ef8eba01 --- /dev/null +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts @@ -0,0 +1,34 @@ +import { Component, Inject } from "@angular/core"; +import { UntypedFormGroup } from "@angular/forms"; +import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; +import { DescriptionTemplateFieldSet } from "@app/core/model/description-template/description-template"; + +@Component({ + selector: 'app-description-form-fieldset-editor-dialog', + templateUrl: 'form-fieldset-editor-dialog.component.html' +}) +export class FormFieldSetEditorDialogComponent { + + fieldSet: DescriptionTemplateFieldSet; + propertiesFormGroup: UntypedFormGroup; + + constructor( + private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any + ) { + this.fieldSet = data.fieldSet; + this.propertiesFormGroup = data.propertiesFormGroup; + } + + cancel() { + this.dialogRef.close(); + } + + save() { + this.dialogRef.close(this.propertiesFormGroup); + } + + public close() { + this.dialogRef.close(false); + } +} diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html similarity index 89% rename from dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.html rename to dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html index 5c7661260..a4ff6dc86 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.html +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html @@ -1,6 +1,6 @@
-
+
{{path}} {{fieldSet.title}}
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.scss b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss similarity index 91% rename from dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.scss rename to dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss index 356217a1e..ae6e4d6ff 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.scss +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss @@ -1,4 +1,4 @@ -.compositeField { +.field-set { // font-weight: bold; // color: #3a3737; // max-width: 100%; @@ -15,6 +15,8 @@ .info-icon{ margin-top: 1.625rem; + width: auto; + height: auto; } h6 { diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.ts b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.ts similarity index 63% rename from dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.ts rename to dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.ts index ce931d8c0..1efc1733a 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.ts @@ -2,11 +2,11 @@ import { Component, Input, OnInit } from '@angular/core'; import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template'; @Component({ - selector: 'app-form-composite-title', - templateUrl: './form-composite-title.component.html', - styleUrls: ['./form-composite-title.component.scss'] + selector: 'app-description-form-field-set-title', + templateUrl: './field-set-title.component.html', + styleUrls: ['./field-set-title.component.scss'] }) -export class DescriptionFormCompositeTitleComponent implements OnInit { +export class DescriptionFormFieldSetTitleComponent implements OnInit { @Input() fieldSet: DescriptionTemplateFieldSet; @Input() isChild: Boolean = false; diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html index 1cc9e460a..8e3faf1b5 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html @@ -1,65 +1,71 @@ - -
- -
-
-
- -
-
+
+
+ +
+
+
+
- -
- +
+ +
+
{{field.label}}
+
+ +
-
-
-
-
-
- -
-
- -
-
- - - -
-
{{field.label}}
-
- - -
-
-
-
-
+
+ + + {{fieldSet.multiplicity.placeholder}} + {{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}} + +
-
- +
+ + + + + + + + + + + + +
{{field.data?.label}}
{{fieldSetItemPropertiesControl.get('fields').get(field.id).get('value').getRawValue()}} + + +
+ + + {{fieldSet.multiplicity.placeholder}} + {{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}} + +
- - - - {{propertiesFormGroup.get(field.id).get('value').getRawValue() | fieldValue | translate}} - - - - - - + +
+
+ +
+
\ No newline at end of file diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.scss b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.scss index a6df1bcca..20b9e2f82 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.scss +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.scss @@ -1,17 +1,8 @@ .compositeField { padding-left: 0em !important; -// padding-top: 2em !important; } -// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline { -// background: #fafafa !important; -// } - -// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { -// font-size: 1rem; -// padding: 0.6em 0 1em 0 !important; -// } - .actions { width: 110px; + display: flex; } diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts index 9048e3b6d..264a3b884 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts @@ -1,14 +1,17 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core'; -import { UntypedFormGroup } from '@angular/forms'; +import { UntypedFormArray, UntypedFormGroup } from '@angular/forms'; import { MatDialog } from "@angular/material/dialog"; import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template'; import { BaseComponent } from '@common/base/base.component'; import { takeUntil } from 'rxjs/operators'; import { ToCEntry } from '../../../table-of-contents/models/toc-entry'; import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service'; +import { DescriptionPropertyDefinitionEditorModel, DescriptionPropertyDefinitionFieldSetEditorModel } from '../../../description-editor.model'; +import { FormFieldSetEditorDialogComponent } from './dialog-editor/form-fieldset-editor-dialog.component'; +import { cloneAbstractControl } from '@app/utilities/enhancers/utils'; @Component({ - selector: 'app-form-field-set', + selector: 'app-description-form-field-set', templateUrl: './form-field-set.component.html', styleUrls: ['./form-field-set.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush @@ -17,6 +20,16 @@ export class DescriptionFormFieldSetComponent extends BaseComponent { @Input() fieldSet: DescriptionTemplateFieldSet; @Input() propertiesFormGroup: UntypedFormGroup; + + get isMultiplicityEnabled() { + return this.fieldSet.multiplicity != null && this.fieldSet.multiplicity.min != 0 && this.fieldSet.multiplicity.max != 0; + } + + + + + + isVisibleByVisibilityService: boolean = true; @Input() visibilityRulesService: VisibilityRulesService; @Input() path: String; @@ -53,31 +66,53 @@ export class DescriptionFormFieldSetComponent extends BaseComponent { // } } - // editCompositeFieldInDialog() { - // const dialogRef = this.dialog.open(FormCompositeFieldDialogComponent, { - // width: '750px', - // disableClose: true, - // data: { - // formGroup: cloneAbstractControl(this.form), - // datasetProfileId: this.datasetProfileId, - // visibilityRulesService: this.visibilityRulesService - // } - // }); - // dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => { - // if (data) { - // this.form.patchValue(data.value); - // this.changeDetector.detectChanges(); - // } - // }); - // } + addMultiplicityField() { + const formArray = this.propertiesFormGroup?.get('items') as UntypedFormArray; + if (formArray.disabled) { + return; + } + + const item: DescriptionPropertyDefinitionFieldSetEditorModel = new DescriptionPropertyDefinitionEditorModel().calculateFieldSetProperties(this.fieldSet, null); + //TODO: akis + formArray.push((item.buildForm().get('items') as UntypedFormArray).at(0)); + } + + deleteMultiplicityField(fieldSetIndex: number): void { + const formArray = this.propertiesFormGroup.get('items') as UntypedFormArray; + formArray.removeAt(fieldSetIndex); + formArray.controls.forEach((fieldSet, index) => { + fieldSet.get('ordinal').setValue(index + 1); + }); + + //TODO: akis + //Reapply validators + // DmpBlueprintEditorModel.reApplySectionValidators( + // { + // formGroup: this.formGroup, + // validationErrorModel: this.editorModel.validationErrorModel + // } + // ); + formArray.markAsDirty(); + } + + editTableMultiplicityFieldInDialog(fieldSetIndex: number) { + const dialogRef = this.dialog.open(FormFieldSetEditorDialogComponent, { + width: '750px', + disableClose: true, + data: { + fieldSet: this.fieldSet, + propertiesFormGroup: cloneAbstractControl((this.propertiesFormGroup?.get('items') as UntypedFormArray).at(fieldSetIndex)) + } + }); + dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => { + if (data) { + (this.propertiesFormGroup?.get('items') as UntypedFormArray).at(fieldSetIndex).patchValue(data.value); + this.changeDetector.detectChanges(); + } + }); + } + - // deleteCompositeField() { - // if (this.isChild) { - // this.deleteMultipeFieldFromCompositeFormGroup(); - // } else { - // this.deleteCompositeFieldFormGroup(); - // } - // } // deleteCompositeFieldFormGroup() { diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html index 181e79786..01e19f2da 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html @@ -1,14 +1,11 @@ -
- {{field.id | json}} - - +
+
{{fieldSet.title}}
info
{{fieldSet.description}}
- {{fieldSet.extendedDescription}} + {{fieldSet.extendedDescription}}
@@ -20,13 +17,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -49,15 +44,13 @@
- + - + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -70,13 +63,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -89,13 +80,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -109,21 +98,15 @@ {{field.data.label}}
- - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - +
@@ -133,23 +116,19 @@
- - + + {{ propertiesFormGroup?.get(field.id).get('value').value.name }}
- - @@ -175,8 +154,7 @@
- + @@ -188,13 +166,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -208,13 +184,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -227,13 +201,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -246,13 +218,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -262,17 +232,15 @@
-
+
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -286,13 +254,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -306,13 +272,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -326,13 +290,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -346,13 +308,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -374,13 +334,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -394,13 +352,11 @@
- + - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -414,20 +370,18 @@
- + {{'GENERAL.VALIDATION.REQUIRED' | translate}} - + {{ type.name }} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} +
@@ -435,11 +389,10 @@
- - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - + + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} +
@@ -457,18 +410,18 @@ {{ type.name }} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} +
- {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
+ {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
{{validationIcon}}
-
+
\ No newline at end of file diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts index 2d22b2bed..d819890d2 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts @@ -6,7 +6,7 @@ import { MatDialog } from "@angular/material/dialog"; import { DescriptionTemplateFieldType } from '@app/core/common/enum/description-template-field-type'; import { DescriptionTemplateFieldValidationType } from '@app/core/common/enum/description-template-field-validation-type'; import { ReferenceType } from '@app/core/common/enum/reference-type'; -import { DescriptionTemplateExternalSelectData, DescriptionTemplateExternalSelectSource, DescriptionTemplateField, DescriptionTemplateFieldSet, DescriptionTemplateSelectData, DescriptionTemplateUploadData } from '@app/core/model/description-template/description-template'; +import { DescriptionTemplateExternalSelectData, DescriptionTemplateExternalSelectSource, DescriptionTemplateField, DescriptionTemplateFieldSet, DescriptionTemplateUploadData } from '@app/core/model/description-template/description-template'; import { FetcherReference, Reference } from '@app/core/model/reference/reference'; import { ReferenceSearchLookup } from '@app/core/query/reference-search.lookup'; import { DmpService } from '@app/core/services/dmp/dmp.service'; @@ -20,11 +20,10 @@ import { isNullOrUndefined } from '@app/utilities/enhancers/utils'; import { BaseComponent } from '@common/base/base.component'; import { TranslateService } from '@ngx-translate/core'; import { Observable } from 'rxjs'; -import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators'; -import { DescriptionFieldEditorModel } from '../../../description-editor.model'; +import { map, takeUntil } from 'rxjs/operators'; @Component({ - selector: 'app-form-field', + selector: 'app-description-form-field', templateUrl: './form-field.component.html', styleUrls: ['./form-field.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.html index 54c6b7cb9..ab714539b 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.html +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.html @@ -11,75 +11,24 @@
-
-
- - -
- -
-
- -
-
- - -
- - +
-
- +
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.ts b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.ts index c7edca706..0c95f1c26 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.ts @@ -12,7 +12,6 @@ import { import { UntypedFormGroup } from '@angular/forms'; import { DescriptionTemplateSection } from '@app/core/model/description-template/description-template'; import { BaseComponent } from '@common/base/base.component'; -import { DescriptionFieldEditorModel } from '../../../description-editor.model'; import { ToCEntry } from '../../../table-of-contents/models/toc-entry'; import { ToCEntryType } from '../../../table-of-contents/models/toc-entry-type.enum'; import { LinkToScroll } from '../../../table-of-contents/table-of-contents.component'; @@ -20,7 +19,7 @@ import { VisibilityRulesService } from '../../visibility-rules/visibility-rules. @Component({ - selector: 'app-form-section', + selector: 'app-description-form-section', templateUrl: './form-section.component.html', styleUrls: ['./form-section.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush @@ -56,20 +55,6 @@ export class DescriptionFormSectionComponent extends BaseComponent implements On // this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => { // this.changeDetector.markForCheck(); // }); - // Set comment fields to properties - // this.section.fieldSets.forEach(fieldSet => { - // if (fieldSet.hasCommentField && !this.propertiesFormGroup.contains('commentFieldValue' + fieldSet.id)) { - // const item: DescriptionFieldEditorModel = new DescriptionFieldEditorModel(); - // item.key = 'commentFieldValue' + fieldSet.id; - // this.propertiesFormGroup.addControl('commentFieldValue' + fieldSet.id, item.buildForm()); - // } - // }); - - //TODO uncomment - // if (this.tocentry) {//maybe not needed as well - // this.form = this.tocentry.form as UntypedFormGroup; - // } - // this.initMultipleFieldsVisibility(); } ngOnChanges(changes: SimpleChanges) { @@ -86,180 +71,4 @@ export class DescriptionFormSectionComponent extends BaseComponent implements On } } } - - // setMultipleFieldVisibility(parentCompositeField, compositeField: DatasetDescriptionCompositeFieldEditorModel, idMappings: { old: string, new: string }[]) { - // // ** COMPOSITE FIELD IS SHOWN OR HIDDEN FROM ANOTHER ELEMENT - // const compositeFieldVisibilityDependencies = this.visibilityRulesService.getVisibilityDependency(parentCompositeField); - // if (compositeFieldVisibilityDependencies && compositeFieldVisibilityDependencies.length) { - - // compositeFieldVisibilityDependencies.forEach(x => { - // const visRule: Rule = { - // targetField: compositeField.id, - // sourceField: x.sourceControlId, - // requiredValue: x.sourceControlValue - // } - // this.visibilityRulesService.addNewRule(visRule); - // }); - // } - - // // console.log('idMappings ', idMappings); - // parentCompositeField.fields.forEach(element => { - // // console.log(this.visibilityRulesService.getVisibilityDependency(element.id)); - // const dependency = this.visibilityRulesService.getVisibilityDependency(element.id); - // if (dependency && dependency.length) { - // // * INNER VISIBILITY DEPENDENCIES - // // * IF INNER INPUT HIDES ANOTHER INNER INPUT - // const innerDependency = parentCompositeField.fields.reduce((innerD, currentElement) => { - // const innerDependecies = dependency.filter(d => d.sourceControlId === currentElement.id); - // return [...innerD, ...innerDependecies]; - // }, []) as VisibilityRuleSource[]; - // if (innerDependency.length) { - // //Build visibility source - // const updatedRules = innerDependency.map(x => { - // const newId = idMappings.find(y => y.old === x.sourceControlId); - // return { ...x, sourceControlId: newId.new }; - // }); - // // const visRule: VisibilityRule = { - // // targetControlId: idMappings.find(x => x.old === element.id).new, - // // sourceVisibilityRules: updatedRules - // // } - - - // const rules = updatedRules.map(x => { - // return { - // requiredValue: x.sourceControlValue, - // sourceField: x.sourceControlId, - // targetField: idMappings.find(l => l.old === element.id).new, - // type: '' - // } as Rule; - // }); - - // rules.forEach(rule => { - // this.visibilityRulesService.addNewRule(rule); - // }) - - // // this.visibilityRulesService.appendVisibilityRule(visRule); - // } - - // } - - - // // * OUTER DEPENDENCIES - - // // * IF INNER INPUT HIDES OUTER INPUTS - // const innerIds = idMappings.map(x => x.old) as string[]; - - // const outerTargets = this.visibilityRulesService.getVisibilityTargets(element.id).filter(x => !innerIds.includes(x)); - - // outerTargets.forEach(target => { - - // const outerRules = (this.visibilityRulesService.getVisibilityDependency(target) as VisibilityRuleSource[]).filter(x => x.sourceControlId === element.id); - // const updatedRules = outerRules.map(x => { - // return { ...x, sourceControlId: idMappings.find(y => y.old === element.id).new }; - // }); - - // // const visRule: VisibilityRule = { - // // targetControlId: target, - // // sourceVisibilityRules: updatedRules - // // } - - - // const rules = updatedRules.map(x => { - // return { - // requiredValue: x.sourceControlValue, - // sourceField: x.sourceControlId, - // targetField: target, - // type: '' - // } as Rule; - // }) - // rules.forEach(rule => { - // this.visibilityRulesService.addNewRule(rule); - // }) - // // this.visibilityRulesService.appendVisibilityRule(visRule); - // }); - // // * IF INNER INPUT IS HIDDEN BY OUTER INPUT - // if (dependency && dependency.length) { - // const fieldsThatHideInnerElement = dependency.filter(x => !innerIds.includes(x.sourceControlId)); - // if (fieldsThatHideInnerElement.length) { - // fieldsThatHideInnerElement.forEach(x => { - // const visRule: Rule = { - // targetField: idMappings.find(l => l.old === element.id).new, - // sourceField: x.sourceControlId, - // requiredValue: x.sourceControlValue - // } - // const shouldBeVisibile = this.visibilityRulesService.checkTargetVisibilityProvidedBySource(x.sourceControlId, element.id); - // this.visibilityRulesService.addNewRule(visRule, shouldBeVisibile); - // }); - // } - // } - // // console.log(`for ${element.id} targets are`, outerTargets); - // }); - // } - - // initMultipleFieldsVisibility() { - // (this.form.get('compositeFields') as UntypedFormArray).controls.forEach(control => { - // let parentCompositeField = (control as UntypedFormGroup).getRawValue(); - // if (parentCompositeField.multiplicityItems && parentCompositeField.multiplicityItems.length > 0) { - // parentCompositeField.multiplicityItems.forEach(compositeField => { - // let idMappings: { old: string, new: string }[] = [{ old: parentCompositeField.id, new: compositeField.id }]; - // parentCompositeField.fields.forEach((field, index) => { - // idMappings.push({ old: field.id, new: compositeField.fields[index].id }); - // }); - // this.setMultipleFieldVisibility(parentCompositeField, compositeField, idMappings); - // }) - // } - // }); - // } - - // addMultipleField(fieldsetIndex: number) { - // if (this.form.get('compositeFields').get('' + fieldsetIndex).disabled) { - // return; - // } - // const compositeFieldToBeCloned = (this.form.get('compositeFields').get('' + fieldsetIndex) as UntypedFormGroup).getRawValue(); - // const multiplicityItemsArray = ((this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems'))); - - // const ordinal = multiplicityItemsArray.length ? multiplicityItemsArray.controls.reduce((ordinal, currentControl) => { - // const currentOrdinal = currentControl.get('ordinal').value as number; - - // if (currentOrdinal >= ordinal) { - // return currentOrdinal + 1; - // } - // return ordinal as number; - // }, 0) : 0; - // const idMappings = [] as { old: string, new: string }[]; - // const compositeField: DatasetDescriptionCompositeFieldEditorModel = new DatasetDescriptionCompositeFieldEditorModel().cloneForMultiplicity(compositeFieldToBeCloned, ordinal, idMappings); - - // this.setMultipleFieldVisibility(compositeFieldToBeCloned, compositeField, idMappings); - // multiplicityItemsArray.push(compositeField.buildForm()); - // } - - // deleteCompositeFieldFormGroup(compositeFildIndex: number) { - // const numberOfItems = this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems').get('' + 0).get('fields').value.length; - // for (let i = 0; i < numberOfItems; i++) { - // const multiplicityItem = this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems').get('' + 0).get('fields').get('' + i).value; - // this.form.get('compositeFields').get('' + compositeFildIndex).get('fields').get('' + i).patchValue(multiplicityItem); - // } - // ((this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(0); - // } - - // deleteMultipeFieldFromCompositeFormGroup(compositeFildIndex: number, fildIndex: number) { - // const multiplicityItemsArray = ((this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))); - // multiplicityItemsArray.removeAt(fildIndex); - // multiplicityItemsArray.controls.forEach((control, i) => { - // try { - // control.get('ordinal').setValue(i); - // } catch { - // throw 'Could not find ordinal'; - // } - // }); - // } - - // onAskedToScroll(id: string) { - // this.panelExpanded = true; - // this.askedToScroll.emit(id); - // } - - // visibleControls(controls: any[]) { - // return controls.filter(control => this.visibilityRulesService.isVisibleMap[control.get('id').value)); - // } } diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/description-form.component.html b/dmp-frontend/src/app/ui/description/editor/description-form/description-form.component.html index b468cf3e4..a9ec9f91f 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/description-form.component.html +++ b/dmp-frontend/src/app/ui/description/editor/description-form/description-form.component.html @@ -15,7 +15,7 @@
- +
diff --git a/dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts b/dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts index d6937da9b..ea7aa38d2 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts @@ -5,7 +5,8 @@ import { RichTextEditorModule } from "@app/library/rich-text-editor/rich-text-ed import { CommonFormsModule } from '@common/forms/common-forms.module'; import { CommonUiModule } from '@common/ui/common-ui.module'; import { NgxDropzoneModule } from "ngx-dropzone"; -import { DescriptionFormCompositeTitleComponent } from './components/form-composite-title/form-composite-title.component'; +import { FormFieldSetEditorDialogComponent } from './components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component'; +import { DescriptionFormFieldSetTitleComponent } from './components/form-field-set/field-set-title/field-set-title.component'; import { DescriptionFormFieldSetComponent } from './components/form-field-set/form-field-set.component'; import { DescriptionFormFieldComponent } from './components/form-field/form-field.component'; import { DescriptionFormSectionComponent } from './components/form-section/form-section.component'; @@ -26,7 +27,8 @@ import { DescriptionFormComponent } from './description-form.component'; DescriptionFormSectionComponent, DescriptionFormFieldSetComponent, DescriptionFormFieldComponent, - DescriptionFormCompositeTitleComponent + DescriptionFormFieldSetTitleComponent, + FormFieldSetEditorDialogComponent ], exports: [ DescriptionFormComponent