MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

more description editor changes

This commit is contained in:
Diamantis Tziotzios 2024-02-02 18:43:24 +02:00
parent 3de2c8cbbe
commit 70e3c9fabc
20 changed files with 275 additions and 518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/core/pipes/field-value.pipe.ts
View File

@ -11,8 +11,8 @@ export class FieldValuePipe implements PipeTransform {
} }
transform(controlValue: any): string | null { transform(controlValue: any): string | null {
let value = controlValue.value; let value = controlValue?.value;
let renderStyle = controlValue.viewStyle?.renderStyle; let renderStyle = controlValue?.viewStyle?.renderStyle;
if (renderStyle && value) { if (renderStyle && value) {
switch (renderStyle) { switch (renderStyle) {
case DescriptionTemplateFieldType.CURRENCY: case DescriptionTemplateFieldType.CURRENCY:

4
dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html
View File

@ -99,8 +99,8 @@
<div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;"> <div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;">
<div *ngIf="previewForm && showPreview && firstField?.get('data')?.get('fieldType')?.value" [@fade-in-fast]> <div *ngIf="previewForm && showPreview && firstField?.get('data')?.get('fieldType')?.value" [@fade-in-fast]>
<!-- Check what we need to do with this. --> <!-- Check what we need to do with this. -->
<!-- <app-form-section-inner [form]="previewForm" [tableView]="form.getRawValue().multiplicity?.tableView" [datasetProfileId]="datasetProfileId"> <!-- <app-description-form-section-inner [form]="previewForm" [tableView]="form.getRawValue().multiplicity?.tableView" [datasetProfileId]="datasetProfileId">
</app-form-section-inner> --> </app-description-form-section-inner> -->
</div> </div>
</div> </div>

2
dmp-frontend/src/app/ui/description/editor/description-editor.component.html
View File

@ -136,8 +136,8 @@
[linkToScroll]="linkToScroll" [linkToScroll]="linkToScroll"
(fieldsetFocusChange)="fieldsetIdWithFocus = $event"></app-description-form> (fieldsetFocusChange)="fieldsetIdWithFocus = $event"></app-description-form>
</div> </div>
</div>
{{formGroup?.value | json}} {{formGroup?.value | json}}
</div>
</form> </form>
</div> </div>
</div> </div>

13
dmp-frontend/src/app/ui/description/editor/description-editor.model.ts
View File

@ -159,7 +159,7 @@ export class DescriptionPropertyDefinitionEditorModel implements DescriptionProp
definitionSection?.fieldSets?.forEach(definitionFieldSet => { definitionSection?.fieldSets?.forEach(definitionFieldSet => {
const fieldSetResult = this.calculateFieldSetProperties(definitionFieldSet, item); const fieldSetResult = this.calculateFieldSetProperties(definitionFieldSet, item);
if (fieldSetResult != null) { if (fieldSetResult != null) {
result = new Map([...result, ...fieldSetResult]); result.set(definitionFieldSet.id, fieldSetResult);
} }
}); });
@ -175,9 +175,8 @@ export class DescriptionPropertyDefinitionEditorModel implements DescriptionProp
return result; return result;
} }
private calculateFieldSetProperties(definitionFieldSet: DescriptionTemplateFieldSet, item: DescriptionPropertyDefinition): Map<string, DescriptionPropertyDefinitionFieldSetEditorModel> { public calculateFieldSetProperties(definitionFieldSet: DescriptionTemplateFieldSet, item: DescriptionPropertyDefinition): DescriptionPropertyDefinitionFieldSetEditorModel {
if (definitionFieldSet == null) return null; if (definitionFieldSet == null) return null;
const result: Map<string, DescriptionPropertyDefinitionFieldSetEditorModel> = new Map<string, DescriptionPropertyDefinitionFieldSetEditorModel>();
// current saved values // current saved values
const fieldSetValue: DescriptionPropertyDefinitionFieldSet = item?.fieldSets[definitionFieldSet.id] ?? {}; const fieldSetValue: DescriptionPropertyDefinitionFieldSet = item?.fieldSets[definitionFieldSet.id] ?? {};
@ -194,9 +193,7 @@ export class DescriptionPropertyDefinitionEditorModel implements DescriptionProp
} as DescriptionPropertyDefinitionFieldSetItem] } as DescriptionPropertyDefinitionFieldSetItem]
} }
result.set(definitionFieldSet.id, new DescriptionPropertyDefinitionFieldSetEditorModel().fromModel(fieldSetValue)); return new DescriptionPropertyDefinitionFieldSetEditorModel().fromModel(fieldSetValue);
return result;
} }
} }
@ -289,8 +286,8 @@ export class DescriptionPropertyDefinitionFieldSetItemEditorModel implements Des
} }
const formGroup = this.formBuilder.group({}); const formGroup = this.formBuilder.group({});
formGroup.addControl('comment', new FormControl({ value: this.comment, disabled: disabled }, context.getValidation('comment').validators)); 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('ordinal', new FormControl({ value: 5, disabled: disabled }, context.getValidation('ordinal').validators));
const fieldsFormGroup = this.formBuilder.group({}); const fieldsFormGroup = this.formBuilder.group({});

15
dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.html
View File

@ -1,15 +0,0 @@
<div class="form">
<div class="row d-flex flex-row">
<div class="col-auto ml-auto close-btn" (click)="close()">
<mat-icon>close</mat-icon>
</div>
</div>
<div *ngIf="data.formGroup" mat-dialog-content class="row">
<app-form-composite-field class="align-self-center col" [form]="data.formGroup" [datasetProfileId]="data.datasetProfileId" [altVisibilityRulesService]="visibilityRulesService"
[isChild]="false" [showDelete]="false" [showTitle]="false" [placeholderTitle]="true"></app-form-composite-field>
</div>
<div mat-dialog-actions class="row">
<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close (click)="cancel()">{{'DATASET-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
<div class="col-auto"><button mat-raised-button color="primary" type="button" [disabled]="!data.formGroup.valid" (click)="save()">{{'DATASET-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
</div>
</div>

31
dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts
View File

@ -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<FormCompositeFieldDialogComponent>,
@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);
}
}

26
dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html Normal file
View File

@ -0,0 +1,26 @@
<div class="form">
<div class="row d-flex flex-row">
<div class="col-auto ml-auto close-btn" (click)="close()">
<mat-icon>close</mat-icon>
</div>
</div>
<div *ngIf="fieldSet && propertiesFormGroup" mat-dialog-content class="row">
<!-- <app-form-composite-field class="align-self-center col" [form]="data.formGroup" [datasetProfileId]="data.datasetProfileId" [altVisibilityRulesService]="visibilityRulesService" [isChild]="false" [showDelete]="false" [showTitle]="false" [placeholderTitle]="true"></app-form-composite-field> -->
<div class="col-12">
<app-description-form-field-set-title class="row" [fieldSet]="fieldSet" [path]="path"></app-description-form-field-set-title>
</div>
<div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField">
<div class="row">
<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
</div>
<app-description-form-field class="col-12 compositeField" [propertiesFormGroup]="propertiesFormGroup.get('fields')" [field]="field" [fieldSet]="fieldSet"></app-description-form-field>
</div>
</div>
<div mat-dialog-actions class="row">
<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close (click)="cancel()">{{'DATASET-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
<div class="col-auto"><button mat-raised-button color="primary" type="button" [disabled]="!propertiesFormGroup.get('fields').valid" (click)="save()">{{'DATASET-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
</div>
</div>

34
dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts Normal file
View File

@ -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<FormFieldSetEditorDialogComponent>,
@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);
}
}

2
dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.html → dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html
View File

@ -1,6 +1,6 @@
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<h5 *ngIf="fieldSet.title && !isChild" class="col-auto compositeField toc-compositeField-header" [id]="fieldSet.id"> <h5 *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id">
{{path}} {{path}}
{{fieldSet.title}} {{fieldSet.title}}
</h5> </h5>

4
dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.scss → dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss
View File

@ -1,4 +1,4 @@
.compositeField { .field-set {
// font-weight: bold; // font-weight: bold;
// color: #3a3737; // color: #3a3737;
// max-width: 100%; // max-width: 100%;
@ -15,6 +15,8 @@
.info-icon{ .info-icon{
margin-top: 1.625rem; margin-top: 1.625rem;
width: auto;
height: auto;
} }
h6 { h6 {

8
dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.ts → dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.ts
View File

@ -2,11 +2,11 @@ import { Component, Input, OnInit } from '@angular/core';
import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template'; import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template';
@Component({ @Component({
selector: 'app-form-composite-title', selector: 'app-description-form-field-set-title',
templateUrl: './form-composite-title.component.html', templateUrl: './field-set-title.component.html',
styleUrls: ['./form-composite-title.component.scss'] styleUrls: ['./field-set-title.component.scss']
}) })
export class DescriptionFormCompositeTitleComponent implements OnInit { export class DescriptionFormFieldSetTitleComponent implements OnInit {
@Input() fieldSet: DescriptionTemplateFieldSet; @Input() fieldSet: DescriptionTemplateFieldSet;
@Input() isChild: Boolean = false; @Input() isChild: Boolean = false;

88
dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html
View File

@ -1,65 +1,71 @@
<!-- <div *ngIf="fieldSet && isVisibleByVisibilityService && !tableRow" class="dynamic-form-composite-field row"> --> <div *ngIf="fieldSet" class="dynamic-form-composite-field row">
<div *ngIf="fieldSet && !tableRow" class="dynamic-form-composite-field row">
<!-- <div *ngIf="fieldSet.fields.length === 1 && this.visibilityRulesService.isVisibleMap[fieldSet.fields.id] ?? true" class="col-12"> -->
<div *ngIf="fieldSet.fields.length === 1" class="col-12">
<div class="row">
<div *ngIf="showTitle" class="col-12"> <div *ngIf="showTitle" class="col-12">
<app-form-composite-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-form-composite-title> <app-description-form-field-set-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-description-form-field-set-title>
</div> </div>
<div class="col-12"> <div *ngIf="!fieldSet?.multiplicity?.tableView" class="col-12">
<div class="row" *ngFor="let fieldSetItemPropertiesControl of propertiesFormGroup?.get('items')?.controls">
<div class="col">
<div class="row"> <div class="row">
<app-form-field class="align-self-center col" [propertiesFormGroup]="propertiesFormGroup" [field]="fieldSet.fields[0]" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field>
<div *ngIf="showDelete" class="col-auto align-self-center">
<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="propertiesFormGroup.get(fieldSet.fields[0].id).disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="fieldSet.fields.length > 1" class="col-12">
<div class="row">
<div *ngIf="showTitle" class="col-12">
<app-form-composite-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-form-composite-title>
</div>
<div class="col align-self-center">
<!-- <div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField"> -->
<div *ngFor="let fieldSetFormGroup of propertiesFormGroup.get('fieldSet.id'); let i = index;" class="col-12 compositeField">
<div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField"> <div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField">
<!-- <ng-container *ngIf="this.visibilityRulesService.isVisibleMap[field.id] ?? true"> -->
<ng-container> <ng-container>
<div class="row"> <div class="row">
<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5> <h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
</div> </div>
<app-form-field class="col-12 compositeField" [propertiesFormGroup]="propertiesFormGroup" [field]="field" [fieldSet]="fieldSet" [fieldSetFormGroup]="fieldSetFormGroup" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-form-field> <app-description-form-field class="col-12 compositeField" [propertiesFormGroup]="fieldSetItemPropertiesControl.get('fields')" [field]="field" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-description-form-field>
</ng-container> </ng-container>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="showDelete" class="col-auto align-self-center"> <div *ngIf="propertiesFormGroup.get('items').length > 1" class="col-auto align-self-center">
<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();"> <button mat-icon-button type="button" class="deleteBtn" (click)="deleteMultiplicityField(i);" [disabled]="fieldSetItemPropertiesControl.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>
</div> </div>
<div *ngIf="(fieldSet.multiplicity.max - 1) > (propertiesFormGroup.get('items').length)" class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
<span class="d-inline-flex align-items-center" [ngClass]="propertiesFormGroup.disabled ? '' : 'pointer'" (click)="addMultiplicityField()">
<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled">
<mat-icon>add_circle</mat-icon>
</button>
<span class="mt-1" *ngIf="fieldSet.multiplicity.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
<span class="mt-1" *ngIf="!fieldSet.multiplicity.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
</span>
</div> </div>
<div *ngIf="fieldSet.hasCommentField && propertiesFormGroup.get('comment')" class="col-12">
<rich-text-editor-component [form]="propertiesFormGroup.get('comment')" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup.get('commentFieldValue'+fieldSet.id).disabled"></rich-text-editor-component>
</div> </div>
</div> <div *ngIf="fieldSet?.multiplicity?.tableView" class="col-12">
<ng-container *ngIf="fieldSet && isVisibleByVisibilityService && tableRow"> <table class="table table-bordered" style="table-layout: fixed">
<ng-container *ngFor="let field of fieldSet.fields;"> <tr>
<!-- <td *ngIf="this.visibilityRulesService.isVisibleMap[field.id] ?? true" class="text-wrap">{{propertiesFormGroup.get(field.id).get('value').getRawValue() | fieldValue | translate}}</td> --> <th *ngFor="let field of fieldSet.fields; let i = index;" class="text-wrap">{{field.data?.label}}</th>
<td class="text-wrap">{{propertiesFormGroup.get(field.id).get('value').getRawValue() | fieldValue | translate}}</td> <th class="actions"></th>
</ng-container> </tr>
<tr *ngFor="let fieldSetItemPropertiesControl of propertiesFormGroup?.get('items')?.controls; let j = index">
<td *ngFor="let field of fieldSet.fields;" class="text-wrap">{{fieldSetItemPropertiesControl.get('fields').get(field.id).get('value').getRawValue()}}</td>
<td class="actions"> <td class="actions">
<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()" [disabled]="propertiesFormGroup.get(field.id).disabled"> <button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editTableMultiplicityFieldInDialog(j)" [disabled]="fieldSetItemPropertiesControl.disabled">
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
</button> </button>
<button *ngIf="showDelete" mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="propertiesFormGroup.get(field.id).disabled"> <button *ngIf="propertiesFormGroup.get('items').length > 1" mat-icon-button type="button" class="deleteBtn" (click)="deleteMultiplicityField(j);" [disabled]="fieldSetItemPropertiesControl.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</td> </td>
</ng-container> </tr>
<tr *ngIf="(fieldSet.multiplicity.max - 1) > propertiesFormGroup?.get('items')?.controls.length">
<td [colSpan]="fieldSet.fields.length + 1" class="text-center">
<span class="d-inline-flex align-items-center" [ngClass]="propertiesFormGroup.disabled ? '' : 'pointer'" (click)="addMultiplicityField()">
<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled">
<mat-icon>add_circle</mat-icon>
</button>
<span class="mt-1" *ngIf="fieldSet.multiplicity.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
<span class="mt-1" *ngIf="!fieldSet.multiplicity.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
</span>
</td>
</tr>
</table>
</div>
</div>
<!-- comment only on top level fieldset -->
<div class="row">
<div *ngIf="fieldSet.hasCommentField && propertiesFormGroup?.get('items')?.at(0)?.get('comment')" class="col-12">
<rich-text-editor-component [form]="propertiesFormGroup?.get('items')?.at(0)?.get('comment')" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup?.get('items')?.at(0)?.get('comment').disabled"></rich-text-editor-component>
</div>
</div>

11
dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.scss
View File

@ -1,17 +1,8 @@
.compositeField { .compositeField {
padding-left: 0em !important; 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 { .actions {
width: 110px; width: 110px;
display: flex;
} }

85
dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts
View File

@ -1,14 +1,17 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core'; 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 { MatDialog } from "@angular/material/dialog";
import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template'; import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { ToCEntry } from '../../../table-of-contents/models/toc-entry'; import { ToCEntry } from '../../../table-of-contents/models/toc-entry';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service'; 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({ @Component({
selector: 'app-form-field-set', selector: 'app-description-form-field-set',
templateUrl: './form-field-set.component.html', templateUrl: './form-field-set.component.html',
styleUrls: ['./form-field-set.component.scss'], styleUrls: ['./form-field-set.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
@ -17,6 +20,16 @@ export class DescriptionFormFieldSetComponent extends BaseComponent {
@Input() fieldSet: DescriptionTemplateFieldSet; @Input() fieldSet: DescriptionTemplateFieldSet;
@Input() propertiesFormGroup: UntypedFormGroup; @Input() propertiesFormGroup: UntypedFormGroup;
get isMultiplicityEnabled() {
return this.fieldSet.multiplicity != null && this.fieldSet.multiplicity.min != 0 && this.fieldSet.multiplicity.max != 0;
}
isVisibleByVisibilityService: boolean = true; isVisibleByVisibilityService: boolean = true;
@Input() visibilityRulesService: VisibilityRulesService; @Input() visibilityRulesService: VisibilityRulesService;
@Input() path: String; @Input() path: String;
@ -53,31 +66,53 @@ export class DescriptionFormFieldSetComponent extends BaseComponent {
// } // }
} }
// editCompositeFieldInDialog() { addMultiplicityField() {
// const dialogRef = this.dialog.open(FormCompositeFieldDialogComponent, { const formArray = this.propertiesFormGroup?.get('items') as UntypedFormArray;
// width: '750px', if (formArray.disabled) {
// disableClose: true, return;
// 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();
// }
// });
// }
// deleteCompositeField() { const item: DescriptionPropertyDefinitionFieldSetEditorModel = new DescriptionPropertyDefinitionEditorModel().calculateFieldSetProperties(this.fieldSet, null);
// if (this.isChild) { //TODO: akis
// this.deleteMultipeFieldFromCompositeFormGroup(); formArray.push((item.buildForm().get('items') as UntypedFormArray).at(0));
// } else { }
// this.deleteCompositeFieldFormGroup();
// } 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();
}
});
}
// deleteCompositeFieldFormGroup() { // deleteCompositeFieldFormGroup() {

135
dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
View File

@ -1,8 +1,5 @@
<div *ngIf="field && visible" [id]="field.id" <div *ngIf="field && visible" [id]="field.id" [ngSwitch]="this.field?.data?.fieldType" class="dynamic-form-field row">
[ngSwitch]="this.field?.data?.fieldType" class="dynamic-form-field row"> <h5 *ngIf="fieldSet.title && !isChild">{{fieldSet.title}}</h5>
{{field.id | json}}
<!-- <h5 *ngIf="fieldSet.title && !isChild">{{fieldSet.title}}</h5> -->
<mat-icon *ngIf="fieldSet.additionalInformation && !isChild" matTooltip="{{fieldSet.additionalInformation}}">info</mat-icon> <mat-icon *ngIf="fieldSet.additionalInformation && !isChild" matTooltip="{{fieldSet.additionalInformation}}">info</mat-icon>
<h5 *ngIf="fieldSet.description && !isChild" class="col-12">{{fieldSet.description}} <h5 *ngIf="fieldSet.description && !isChild" class="col-12">{{fieldSet.description}}
@ -20,13 +17,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '')}}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '')}}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="multipleAutoCompleteConfiguration">
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '')}}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '')}}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
[configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -49,15 +44,13 @@
</div> </div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_RESEARCHERS" class="col-12"> <div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_RESEARCHERS" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12" > <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="multipleAutoCompleteConfiguration">
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
[configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -70,13 +63,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="multipleAutoCompleteConfiguration">
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
[configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -89,13 +80,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="multipleAutoCompleteConfiguration">
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
[configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -109,21 +98,15 @@
{{field.data.label}}</mat-checkbox> {{field.data.label}}</mat-checkbox>
</div> </div>
<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="col-12"> <mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="col-12">
<textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('value')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15" [required]="isRequired" <textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('value')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15" [required]="isRequired" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}"></textarea>
placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}"></textarea>
<button mat-icon-button type="button" *ngIf="!propertiesFormGroup?.get(field.id).get('value').disabled && propertiesFormGroup?.get(field.id).get('value').value" matSuffix aria-label="Clear" (click)="this.propertiesFormGroup?.get(field.id).get('value').patchValue('')"> <button mat-icon-button type="button" *ngIf="!propertiesFormGroup?.get(field.id).get('value').disabled && propertiesFormGroup?.get(field.id).get('value').value" matSuffix aria-label="Clear" (click)="this.propertiesFormGroup?.get(field.id).get('value').patchValue('')">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value')['errors'] && propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value')['errors'] && propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA"> <ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA">
<rich-text-editor-component class="col-12" <rich-text-editor-component class="col-12" [form]="propertiesFormGroup?.get(field.id).get('value')" [placeholder]="field.data.label" [required]="isRequired" [wrapperClasses]="'full-width editor ' +
[form]="propertiesFormGroup?.get(field.id).get('value')" ((isRequired && propertiesFormGroup?.get(field.id).get('value').touched && propertiesFormGroup?.get(field.id).get('value').hasError('required')) ? 'required' : '')" [editable]="!propertiesFormGroup?.get(field.id).get('value').disabled">
[placeholder]="field.data.label"
[required]="isRequired"
[wrapperClasses]="'full-width editor ' +
((isRequired && propertiesFormGroup?.get(field.id).get('value').touched && propertiesFormGroup?.get(field.id).get('value').hasError('required')) ? 'required' : '')"
[editable]="!propertiesFormGroup?.get(field.id).get('value').disabled">
</rich-text-editor-component> </rich-text-editor-component>
<div [class]="(propertiesFormGroup?.get(field.id).get('value')['errors'] && propertiesFormGroup?.get(field.id).get('value').hasError('required') && propertiesFormGroup?.get(field.id).get('value').touched) ? 'visible' : 'invisible'" class="col-12"> <div [class]="(propertiesFormGroup?.get(field.id).get('value')['errors'] && propertiesFormGroup?.get(field.id).get('value').hasError('required') && propertiesFormGroup?.get(field.id).get('value').touched) ? 'visible' : 'invisible'" class="col-12">
<div class="mat-form-field form-field-subscript-wrapper"> <div class="mat-form-field form-field-subscript-wrapper">
@ -133,23 +116,19 @@
</ng-container> </ng-container>
<ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.UPLOAD"> <ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.UPLOAD">
<div class="col-12 d-flex justify-content-center"> <div class="col-12 d-flex justify-content-center">
<ngx-dropzone #drop class="drop-file col-12" (change)="fileChangeEvent($event, true)" <ngx-dropzone #drop class="drop-file col-12" (change)="fileChangeEvent($event, true)" [multiple]="false" [accept]="typesToString()" [disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
[multiple]="false" [accept]="typesToString()" [disabled]="propertiesFormGroup?.get(field.id).get('value').disabled"> <ngx-dropzone-preview *ngIf="propertiesFormGroup?.get(field.id).get('value').value && propertiesFormGroup?.get(field.id).get('value').value.name" class="file-preview" [removable]="true" (removed)="onRemove()">
<ngx-dropzone-preview *ngIf="propertiesFormGroup?.get(field.id).get('value').value && propertiesFormGroup?.get(field.id).get('value').value.name" class="file-preview"
[removable]="true" (removed)="onRemove()">
<ngx-dropzone-label class="file-label">{{ propertiesFormGroup?.get(field.id).get('value').value.name }}</ngx-dropzone-label> <ngx-dropzone-label class="file-label">{{ propertiesFormGroup?.get(field.id).get('value').value.name }}</ngx-dropzone-label>
</ngx-dropzone-preview> </ngx-dropzone-preview>
</ngx-dropzone> </ngx-dropzone>
</div> </div>
<div class="col-12 d-flex justify-content-center attach-btn"> <div class="col-12 d-flex justify-content-center attach-btn">
<button *ngIf="!propertiesFormGroup?.get(field.id).get('value').value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn" <button *ngIf="!propertiesFormGroup?.get(field.id).get('value').value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn" [disabled]="!!propertiesFormGroup?.get(field.id).get('value').value || propertiesFormGroup?.get(field.id).get('value').disabled">
[disabled]="!!propertiesFormGroup?.get(field.id).get('value').value || propertiesFormGroup?.get(field.id).get('value').disabled">
<mat-icon class="mr-2">upload</mat-icon> <mat-icon class="mr-2">upload</mat-icon>
<mat-label>{{ (field.data.label | translate)}}</mat-label> <mat-label>{{ (field.data.label | translate)}}</mat-label>
</button> </button>
<button *ngIf="propertiesFormGroup?.get(field.id).get('value').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn" <button *ngIf="propertiesFormGroup?.get(field.id).get('value').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn" [disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
[disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
<mat-icon class="mr-2">download</mat-icon> <mat-icon class="mr-2">download</mat-icon>
<mat-label>{{ "TYPES.DATASET-PROFILE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label> <mat-label>{{ "TYPES.DATASET-PROFILE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label>
</button> </button>
@ -175,8 +154,7 @@
</div> </div>
<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATE_PICKER" class="col-12"> <mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATE_PICKER" class="col-12">
<input matInput placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" class="table-input" [matDatepicker]="date" [required]="isRequired" <input matInput placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" class="table-input" [matDatepicker]="date" [required]="isRequired" [formControl]="propertiesFormGroup?.get(field.id).get('value')">
[formControl]="propertiesFormGroup?.get(field.id).get('value')">
<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="propertiesFormGroup?.get(field.id).get('value').hasError('required')"> <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">
@ -188,13 +166,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="externalDatasetAutoCompleteConfiguration" [required]="isRequired">
[configuration]="externalDatasetAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="externalDatasetAutoCompleteConfiguration" [required]="isRequired">
[configuration]="externalDatasetAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -208,13 +184,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -227,13 +201,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -246,13 +218,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -266,13 +236,11 @@
<div *ngIf="field.data" class="row"> <div *ngIf="field.data" class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -286,13 +254,11 @@
<div *ngIf="field.data" class="row"> <div *ngIf="field.data" class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="licensesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="licensesAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="licensesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="licensesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -306,13 +272,11 @@
<div *ngIf="field.data" class="row"> <div *ngIf="field.data" class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="publicationsAutoCompleteConfiguration" [required]="isRequired">
[configuration]="publicationsAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="publicationsAutoCompleteConfiguration" [required]="isRequired">
[configuration]="publicationsAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -326,13 +290,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="registriesAutoCompleteConfiguration">
[configuration]="registriesAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="registriesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="registriesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -346,13 +308,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="servicesAutoCompleteConfiguration">
[configuration]="servicesAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="servicesAutoCompleteConfiguration" [required]="isRequired">
[configuration]="servicesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -374,13 +334,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="researchersAutoCompleteConfiguration">
[configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="researchersAutoCompleteConfiguration" [required]="isRequired">
[configuration]="researchersAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
</ng-container> </ng-container>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -394,13 +352,11 @@
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="organisationsAutoCompleteConfiguration">
[configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</ng-container> </ng-container>
<ng-container *ngIf="!(field.data.multipleSelect)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="organisationsAutoCompleteConfiguration" [required]="isRequired">
[configuration]="organisationsAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
@ -414,14 +370,12 @@
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12"> <div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12">
<div class="row" *ngIf="datasetIdInitialized"> <div class="row" *ngIf="datasetIdInitialized">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" <input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [required]="isRequired" [disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
[required]="isRequired" [disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (isRequired? ' *': '')" <mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (isRequired? ' *': '')" [disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
[disabled]="propertiesFormGroup?.get(field.id).get('value').disabled">
<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value"> <mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
{{ type.name }} {{ type.name }}
</mat-option> </mat-option>
@ -435,8 +389,7 @@
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.CURRENCY" class="col-12"> <div *ngSwitchCase="descriptionTemplateFieldTypeEnum.CURRENCY" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" <app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('value')" [configuration]="currencyAutoCompleteConfiguration" [required]="isRequired">
[configuration]="currencyAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete> </app-single-auto-complete>
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="propertiesFormGroup?.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>

7
dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts
View File

@ -6,7 +6,7 @@ import { MatDialog } from "@angular/material/dialog";
import { DescriptionTemplateFieldType } from '@app/core/common/enum/description-template-field-type'; import { DescriptionTemplateFieldType } from '@app/core/common/enum/description-template-field-type';
import { DescriptionTemplateFieldValidationType } from '@app/core/common/enum/description-template-field-validation-type'; import { DescriptionTemplateFieldValidationType } from '@app/core/common/enum/description-template-field-validation-type';
import { ReferenceType } from '@app/core/common/enum/reference-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 { FetcherReference, Reference } from '@app/core/model/reference/reference';
import { ReferenceSearchLookup } from '@app/core/query/reference-search.lookup'; import { ReferenceSearchLookup } from '@app/core/query/reference-search.lookup';
import { DmpService } from '@app/core/services/dmp/dmp.service'; 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 { BaseComponent } from '@common/base/base.component';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators'; import { map, takeUntil } from 'rxjs/operators';
import { DescriptionFieldEditorModel } from '../../../description-editor.model';
@Component({ @Component({
selector: 'app-form-field', selector: 'app-description-form-field',
templateUrl: './form-field.component.html', templateUrl: './form-field.component.html',
styleUrls: ['./form-field.component.scss'], styleUrls: ['./form-field.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush

65
dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.html
View File

@ -11,75 +11,24 @@
<h6 class='panel-desc' *ngIf="section.description" [innerHTML]="section.description"></h6> <h6 class='panel-desc' *ngIf="section.description" [innerHTML]="section.description"></h6>
</mat-panel-description> </mat-panel-description>
<div *ngFor="let fieldSet of section.fieldSets; let i = index;" class="col-12" [id]="fieldSet.id" (click)="onAskedToScroll(fieldSet.id)"> <div *ngFor="let fieldSet of section.fieldSets; let i = index;" class="col-12" [id]="fieldSet.id" (click)="onAskedToScroll(fieldSet.id)">
<!-- <div class="row" *ngIf="((this.visibilityRulesService.isVisibleMap[fieldsetEntry.form.get('id').value] ?? true) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldsetEntry.form)) && !hiddenEntriesIds.includes(fieldsetEntry.id)"> -->
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div *ngIf="!fieldSet?.multiplicity?.tableView" class="row">
<!-- <app-form-field-set class="align-self-center col" [propertiesFormGroup]="propertiesFormGroup" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0"></app-form-field-set> -->
<app-form-field-set *ngFor="let fieldSetPropertiesControl of propertiesFormGroup.get('fieldSets')?.get(fieldSet.id)?.get('items')?.controls" class="align-self-center col" [propertiesFormGroup]="fieldSetPropertiesControl.get('fields')" [fieldSet]="fieldSet" [path]="path + '.' + (i+1)" [visibilityRulesService]="visibilityRulesService" [isChild]="false"></app-form-field-set>
</div>
<ng-container *ngIf="fieldSet?.multiplicity?.tableView">
<div class="row"> <div class="row">
<div class="col-12"> <app-description-form-field-set class="align-self-center col"
<app-form-composite-title class="row" [fieldSet]="fieldSet"></app-form-composite-title> [propertiesFormGroup]="propertiesFormGroup.get('fieldSets')?.get(fieldSet.id)"
[fieldSet]="fieldSet"
[path]="path + '.' + (i+1)"
[visibilityRulesService]="visibilityRulesService"
[isChild]="false"></app-description-form-field-set>
</div> </div>
</div> </div>
<!-- <table class="table table-bordered" style="table-layout: fixed">
<tr>
<ng-container *ngFor="let fieldFormGroup of fieldsetEntry.form.get('fields')['controls']; let i = index;">
<th *ngIf="this.visibilityRulesService.isVisibleMap[fieldFormGroup.get('id').value] ?? true" class="text-wrap">{{fieldFormGroup.get('data').value.label}}</th>
</ng-container>
<th class="actions"></th>
</tr>
<tr app-form-field-set [form]="fieldsetEntry.form" [datasetProfileId]="datasetProfileId" [visibilityRulesService]="visibilityRulesService" [isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0" [tableRow]="true"></tr>
<ng-container *ngIf="fieldsetEntry.form && fieldsetEntry.form.get('multiplicity').value.tableView">
<tr app-form-field-set *ngFor="let multipleCompositeFieldFormGroup of fieldsetEntry.form.get('multiplicityItems')['controls']; let j = index" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId" [visibilityRulesService]="visibilityRulesService" [isChild]="true" [showDelete]="true" [tableRow]="true"></tr>
</ng-container>
<tr *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)">
<td [colSpan]="visibleControls(fieldsetEntry.form.get('fields')['controls']).length + 1" class="text-center">
<span class="d-inline-flex align-items-center" [ngClass]="fieldsetEntry.form.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
<button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
<mat-icon>add_circle</mat-icon>
</button>
<span class="mt-1" *ngIf="fieldsetEntry.form.get('multiplicity').value.placeholder">{{fieldsetEntry.form.get('multiplicity').value.placeholder}}</span>
<span class="mt-1" *ngIf="!fieldsetEntry.form.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldsetEntry.form.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
</span>
</td>
</tr>
</table> -->
</ng-container>
</div>
<!-- <div *ngIf="fieldsetEntry.form && !fieldsetEntry.form.get('multiplicity').value.tableView" class="col-12">
<div class="row">
<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of fieldsetEntry.form.get('multiplicityItems')['controls']; let j = index">
<div class="row">
<app-form-field-set class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true" [showDelete]="true"></app-form-field-set>
</div>
</div>
<div *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)" class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
<span class="d-inline-flex align-items-center" [ngClass]="fieldsetEntry.form.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
<button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
<mat-icon>add_circle</mat-icon>
</button>
<span class="mt-1" *ngIf="fieldsetEntry.form.get('multiplicity').value.placeholder">{{fieldsetEntry.form.get('multiplicity').value.placeholder}}</span>
<span class="mt-1" *ngIf="!fieldsetEntry.form.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldsetEntry.form.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
</span>
</div>
<div *ngIf="fieldsetEntry.form.get('hasCommentField').value" class="col-12">
<rich-text-editor-component [parentFormGroup]="fieldsetEntry.form" [controlName]="'commentFieldValue'" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="' mb-2'" [editable]="!fieldsetEntry.form.get('commentFieldValue').disabled">
</rich-text-editor-component>
</div>
</div>
</div> -->
</div> </div>
</div> </div>
<div *ngIf="section?.sections?.length > 0" class="col-12"> <div *ngIf="section?.sections?.length > 0" class="col-12">
<ng-container *ngFor="let innerSection of section.sections; let j = index;"> <ng-container *ngFor="let innerSection of section.sections; let j = index;">
<!-- <div class="row" *ngIf="!hiddenEntriesIds.includes(sectionEntry.id)"> -->
<div class="row"> <div class="row">
<app-form-section class="col-12" [section]="innerSection" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" (askedToScroll)="onAskedToScroll($event)" [propertiesFormGroup]="propertiesFormGroup" [visibilityRulesService]="visibilityRulesService" [linkToScroll]="subsectionLinkToScroll"></app-form-section> <app-description-form-section class="col-12" [section]="innerSection" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" (askedToScroll)="onAskedToScroll($event)" [propertiesFormGroup]="propertiesFormGroup" [visibilityRulesService]="visibilityRulesService" [linkToScroll]="subsectionLinkToScroll"></app-description-form-section>
</div> </div>
</ng-container> </ng-container>
</div> </div>

193
dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.ts
View File

@ -12,7 +12,6 @@ import {
import { UntypedFormGroup } from '@angular/forms'; import { UntypedFormGroup } from '@angular/forms';
import { DescriptionTemplateSection } from '@app/core/model/description-template/description-template'; import { DescriptionTemplateSection } from '@app/core/model/description-template/description-template';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { DescriptionFieldEditorModel } from '../../../description-editor.model';
import { ToCEntry } from '../../../table-of-contents/models/toc-entry'; import { ToCEntry } from '../../../table-of-contents/models/toc-entry';
import { ToCEntryType } from '../../../table-of-contents/models/toc-entry-type.enum'; import { ToCEntryType } from '../../../table-of-contents/models/toc-entry-type.enum';
import { LinkToScroll } from '../../../table-of-contents/table-of-contents.component'; import { LinkToScroll } from '../../../table-of-contents/table-of-contents.component';
@ -20,7 +19,7 @@ import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.
@Component({ @Component({
selector: 'app-form-section', selector: 'app-description-form-section',
templateUrl: './form-section.component.html', templateUrl: './form-section.component.html',
styleUrls: ['./form-section.component.scss'], styleUrls: ['./form-section.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
@ -56,20 +55,6 @@ export class DescriptionFormSectionComponent extends BaseComponent implements On
// this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => { // this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
// this.changeDetector.markForCheck(); // 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) { 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 = (<UntypedFormArray>(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);
// }
// (<UntypedFormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(0);
// }
// deleteMultipeFieldFromCompositeFormGroup(compositeFildIndex: number, fildIndex: number) {
// const multiplicityItemsArray = (<UntypedFormArray>(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));
// }
} }

2
dmp-frontend/src/app/ui/description/editor/description-form/description-form.component.html
View File

@ -15,7 +15,7 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-container *ngFor="let section of page.sections; let i = index;"> <ng-container *ngFor="let section of page.sections; let i = index;">
<div class="row"> <div class="row">
<app-form-section class="col-12" [section]="section" [path]="(z+1)+'.'+(i+1)" [pathName]="'pages.'+z+'.sections.'+i" [propertiesFormGroup]="propertiesFormGroup" [visibilityRulesService]="visibilityRulesService" (askedToScroll)="onAskedToScroll(expansionPanel, $event)" [linkToScroll]="linkToScroll"></app-form-section> <app-description-form-section class="col-12" [section]="section" [path]="(z+1)+'.'+(i+1)" [pathName]="'pages.'+z+'.sections.'+i" [propertiesFormGroup]="propertiesFormGroup" [visibilityRulesService]="visibilityRulesService" (askedToScroll)="onAskedToScroll(expansionPanel, $event)" [linkToScroll]="linkToScroll"></app-description-form-section>
</div> </div>
</ng-container> </ng-container>
</mat-expansion-panel> </mat-expansion-panel>

6
dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts
View File

@ -5,7 +5,8 @@ import { RichTextEditorModule } from "@app/library/rich-text-editor/rich-text-ed
import { CommonFormsModule } from '@common/forms/common-forms.module'; import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module'; import { CommonUiModule } from '@common/ui/common-ui.module';
import { NgxDropzoneModule } from "ngx-dropzone"; 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 { DescriptionFormFieldSetComponent } from './components/form-field-set/form-field-set.component';
import { DescriptionFormFieldComponent } from './components/form-field/form-field.component'; import { DescriptionFormFieldComponent } from './components/form-field/form-field.component';
import { DescriptionFormSectionComponent } from './components/form-section/form-section.component'; import { DescriptionFormSectionComponent } from './components/form-section/form-section.component';
@ -26,7 +27,8 @@ import { DescriptionFormComponent } from './description-form.component';
DescriptionFormSectionComponent, DescriptionFormSectionComponent,
DescriptionFormFieldSetComponent, DescriptionFormFieldSetComponent,
DescriptionFormFieldComponent, DescriptionFormFieldComponent,
DescriptionFormCompositeTitleComponent DescriptionFormFieldSetTitleComponent,
FormFieldSetEditorDialogComponent
], ],
exports: [ exports: [
DescriptionFormComponent DescriptionFormComponent