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

Add table view in preview of datataset profile editor and dataset editor.

This commit is contained in:
Konstantinos Triantafyllou 2022-11-24 21:28:18 +02:00
parent 925fc3ce4a
commit 9fd963a480
27 changed files with 353 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dmp-frontend/src/app/core/formatting.module.ts
View File

@ -7,6 +7,8 @@ import { TimezoneInfoDisplayPipe } from './pipes/timezone-info-display.pipe';
import { EnumUtils } from './services/utilities/enum-utils.service';
import { JsonParserPipe } from './pipes/json-parser.pipe';
import { DateTimeCultureFormatPipe } from './pipes/date-time-culture-format.pipe';
import {FieldValuePipe} from "@app/core/pipes/field-value.pipe";
import {ColumnClassPipe} from "@app/core/pipes/column-class.pipe";
//
//
@ -21,7 +23,9 @@ import { DateTimeCultureFormatPipe } from './pipes/date-time-culture-format.pipe
DateFormatPipe,
DateTimeFormatPipe,
DateTimeCultureFormatPipe,
JsonParserPipe
JsonParserPipe,
FieldValuePipe,
ColumnClassPipe
],
exports: [
NgForLimitPipe,
@ -29,7 +33,9 @@ import { DateTimeCultureFormatPipe } from './pipes/date-time-culture-format.pipe
DateFormatPipe,
DateTimeFormatPipe,
DateTimeCultureFormatPipe,
JsonParserPipe
JsonParserPipe,
FieldValuePipe,
ColumnClassPipe
],
providers: [
EnumUtils,
@ -39,7 +45,9 @@ import { DateTimeCultureFormatPipe } from './pipes/date-time-culture-format.pipe
DateFormatPipe,
DateTimeFormatPipe,
DateTimeCultureFormatPipe,
JsonParserPipe
JsonParserPipe,
FieldValuePipe,
ColumnClassPipe
]
})
export class FormattingModule { }

11
dmp-frontend/src/app/core/pipes/column-class.pipe.ts Normal file
View File

@ -0,0 +1,11 @@
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name: 'columnClass'
})
export class ColumnClassPipe implements PipeTransform{
transform(value: number): any {
return 'col-' + Math.ceil(12/value);
}
}

56
dmp-frontend/src/app/core/pipes/field-value.pipe.ts Normal file
View File

@ -0,0 +1,56 @@
import {Pipe, PipeTransform} from "@angular/core";
import {DatePipe} from "@angular/common";
import {DatasetProfileFieldViewStyle} from "@app/core/common/enum/dataset-profile-field-view-style";
@Pipe({
name: 'fieldValue'
})
export class FieldValuePipe implements PipeTransform {
constructor(private date: DatePipe) {
}
transform(controlValue: any): string | null {
let value = controlValue.value;
let renderStyle = controlValue.viewStyle?.renderStyle;
if (renderStyle && controlValue) {
switch (renderStyle) {
case DatasetProfileFieldViewStyle.Currency:
if (value) {
return JSON.parse(value).name;
}
break;
case DatasetProfileFieldViewStyle.BooleanDecision:
return value == 'true' ? 'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.YES' : 'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.NO';
case DatasetProfileFieldViewStyle.CheckBox:
return value ? 'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.YES' : 'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.DEFAULT-VALUES.BOOLEAN-DECISION.NO';
case DatasetProfileFieldViewStyle.RadioBox:
if (value && controlValue.data.options) {
return controlValue.data.options.find(option => option.value === value).label;
}
break;
case DatasetProfileFieldViewStyle.DatePicker:
return this.date.transform(controlValue.value, 'dd/MM/yyyy');
case DatasetProfileFieldViewStyle.FreeText:
return value;
case DatasetProfileFieldViewStyle.ComboBox:
if (value && controlValue.data.options && !controlValue.data.multiList) {
return controlValue.data.options.find(option => value == option.value).label;
} else if (value && controlValue.data.options && controlValue.data.multiList) {
return controlValue.data.options.filter(option => value.includes(option.value)).map(option => option.label).join(',');
}
break;
case DatasetProfileFieldViewStyle.RichTextArea:
if(value) {
return value.replace(/&nbsp;/g, ' ').replace(/(\r\n|\n|\r| +(?= ))|\s\s+/gm, " ").replace(/<[^>]*>/g, '');
}
break;
case DatasetProfileFieldViewStyle.TextArea:
return value;
default:
return null;
}
}
return null;
}
}

2
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
View File

@ -204,7 +204,7 @@
</div>
<div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;" >
<div *ngIf="previewForm && showPreview && firstField?.get('viewStyle').get('renderStyle').value" [@fade-in-fast]>
<app-form-section-inner [form]="previewForm">
<app-form-section-inner [form]="previewForm" [tableView]="form.value.multiplicity.tableView">
</app-form-section-inner>
</div>
</div>

15
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.html Normal file
View File

@ -0,0 +1,15 @@
<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"
[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>

30
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component.ts Normal file
View File

@ -0,0 +1,30 @@
import {Component, Inject} from "@angular/core";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {VisibilityRulesService} from "@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service";
@Component({
selector: 'app-form-composite-field-dialog',
templateUrl: 'form-composite-field-dialog.component.html'
})
export class FormCompositeFieldDialogComponent {
constructor(
private visibilityRulesService: VisibilityRulesService,
private dialogRef: MatDialogRef<FormCompositeFieldDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.visibilityRulesService.buildVisibilityRules([], this.data.formGroup);
}
cancel() {
this.dialogRef.close();
}
save() {
this.dialogRef.close(this.data.formGroup);
}
public close() {
this.dialogRef.close(false);
}
}

34
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
View File

@ -1,20 +1,19 @@
<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [formGroup]="form" class="dynamic-form-composite-field row">
<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value) && !tableRow" [formGroup]="form" class="dynamic-form-composite-field row">
<!-- <div *ngIf="form.get('fields').value.length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12"> -->
<div *ngIf="form.get('fields').length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12">
<div class="row">
<div class="col-12">
<div *ngIf="showTitle" class="col-12">
<app-form-composite-title [tocentry]="tocentry" class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
</div>
<div class="col-12">
<div class="row">
<app-form-field class="align-self-center col" [form]="form.get('fields')['controls'][0]"
[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();">
<mat-icon>delete</mat-icon>
</button>
</div>
[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();">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
<!-- <button mat-icon-button type="button" *ngIf="!isChild" class="deleteBtn col-auto" (click)="DeleteField();">
@ -26,7 +25,7 @@
<!-- <div *ngIf="form.get('fields').value.length > 1" class="col-12"> -->
<div *ngIf="form.get('fields').length > 1" class="col-12">
<div class="row">
<div class="col-12">
<div *ngIf="showTitle" class="col-12">
<app-form-composite-title [tocentry]="tocentry" class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
</div>
<div class="col align-self-center">
@ -37,6 +36,9 @@
Add one more field +
</a>
</div> -->
<div class="row">
<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{this.fieldFormGroup.get('data').value.label}}</h5>
</div>
<app-form-field *ngIf="this.visibilityRulesService.checkElementVisibility(this.fieldFormGroup.get('id').value)" [form]="fieldFormGroup" class="col-12 compositeField" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-form-field>
<!-- <div *ngIf="fieldFormGroup" class="col-12">
<div *ngFor="let multipleField of fieldFormGroup.get('multiplicityItems')['controls']; let j = index" class="row">
@ -57,3 +59,15 @@
</div>
</div>
</div>
<ng-container *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value) && tableRow">
<td *ngFor="let fieldFormGroup of form.get('fields')['controls'];" class="text-truncate"
[matTooltip]="fieldFormGroup.getRawValue() | fieldValue | translate">{{fieldFormGroup.getRawValue() | fieldValue | translate}}</td>
<td class="actions">
<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()">
<mat-icon>edit</mat-icon>
</button>
<button *ngIf="showDelete" mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>

4
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.scss
View File

@ -11,3 +11,7 @@
// font-size: 1rem;
// padding: 0.6em 0 1em 0 !important;
// }
.actions {
width: 110px;
}

40
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts
View File

@ -1,12 +1,17 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
import { FormArray, FormGroup } from '@angular/forms';
import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators';
import { ToCEntry } from '../../dataset-description.component';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';
import {FormArray, FormGroup} from '@angular/forms';
import {BaseComponent} from '@common/base/base.component';
import {takeUntil} from 'rxjs/operators';
import {ToCEntry} from '../../dataset-description.component';
import {VisibilityRulesService} from '../../visibility-rules/visibility-rules.service';
import {
FormCompositeFieldDialogComponent
} from "@app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component";
import {MatDialog} from "@angular/material/dialog";
import {cloneAbstractControl} from "@app/utilities/enhancers/utils";
@Component({
selector: 'app-form-composite-field',
selector: 'app-form-composite-field, [app-form-composite-field]',
templateUrl: './form-composite-field.component.html',
styleUrls: ['./form-composite-field.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
@ -18,8 +23,12 @@ export class FormCompositeFieldComponent extends BaseComponent {
@Input() isChild: Boolean = false;
@Input() showDelete: Boolean = false;
@Input() tocentry: ToCEntry;
@Input() tableRow: boolean = false;
@Input() showTitle: boolean = true;
@Input() placeholderTitle: boolean = false;
constructor(
private dialog: MatDialog,
public visibilityRulesService: VisibilityRulesService,
private changeDetector: ChangeDetectorRef
//private markForConsiderationService: MarkForConsiderationService,
@ -47,6 +56,23 @@ export class FormCompositeFieldComponent extends BaseComponent {
// this.markForConsiderationService.markForConsideration(this.compositeField);
// }
editCompositeFieldInDialog() {
const dialogRef = this.dialog.open(FormCompositeFieldDialogComponent, {
width: '750px',
disableClose: true,
data: {
formGroup: cloneAbstractControl(this.form),
datasetProfileId: this.datasetProfileId
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
if (data) {
this.form.patchValue(data.value);
this.changeDetector.detectChanges();
}
});
}
deleteCompositeField() {
if (this.isChild) {
this.deleteMultipeFieldFromCompositeFormGroup();

31
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.html
View File

@ -4,13 +4,38 @@
<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(compositeFieldFormGroup)">
<div class="col-12">
<div class="row">
<div *ngIf="!tableView" class="row">
<app-form-composite-field class="align-self-center col" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
[isChild]="false" [showDelete]="(compositeFieldFormGroup.get('multiplicityItems').length) > 0"></app-form-composite-field>
</div>
<table *ngIf="tableView" class="table table-bordered" style="table-layout: fixed">
<tr>
<th *ngFor="let fieldFormGroup of compositeFieldFormGroup.get('fields')['controls']; let i = index;"
class="text-truncate" [matTooltip]="fieldFormGroup.get('data').value.label" >{{fieldFormGroup.get('data').value.label}}</th>
<th class="actions"></th>
</tr>
<tr app-form-composite-field [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
[isChild]="false" [showDelete]="(compositeFieldFormGroup.get('multiplicityItems').length) > 0" [tableRow]="true"></tr>
<ng-container *ngIf="compositeFieldFormGroup && tableView">
<tr app-form-composite-field *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index"
[form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
[isChild]="true" [showDelete]="true" [tableRow]="true"></tr>
</ng-container>
<tr *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)">
<td [colSpan]="compositeFieldFormGroup.get('fields')['controls'].length + 1" class="text-center">
<span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)" >
<button mat-icon-button color="primary" [disabled]="compositeFieldFormGroup.disabled">
<mat-icon>add_circle</mat-icon>
</button>
<span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span>
<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (compositeFieldFormGroup.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
</span>
</td>
</tr>
</table>
</div>
<div *ngIf="compositeFieldFormGroup" class="col-12">
<div *ngIf="compositeFieldFormGroup && !tableView" class="col-12">
<div class="row">
<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
<div class="row">
@ -25,7 +50,7 @@
<mat-icon>add_circle</mat-icon>
</button>
<span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span>
<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}</span>
<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (compositeFieldFormGroup.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
</span>
</div>
<ng-container *ngIf="compositeFieldFormGroup.get('hasCommentField').value" class="">

4
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.scss
View File

@ -43,3 +43,7 @@
height: auto !important;
min-height: 48px;
}
.actions {
width: 110px;
}

1
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.ts
View File

@ -23,6 +23,7 @@ export class FormSectionInnerComponent extends BaseComponent implements OnInit,
@Input() path: string;
// @Input() i: number;
@Input() linkToScroll: LinkToScroll;
@Input() tableView: boolean = false;
//trackByFn = (index, item) => item ? item['id'] : null;
panelExpanded = true;
// sub = true;

33
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
View File

@ -37,7 +37,7 @@
<mat-icon>add_circle</mat-icon>
</button>
<span class="mt-1" *ngIf="compositeFieldFormGroup.get('multiplicity').value.placeholder">{{compositeFieldFormGroup.get('multiplicity').value.placeholder}}</span>
<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}</span>
<span class="mt-1" *ngIf="!compositeFieldFormGroup.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (compositeFieldFormGroup.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
</span>
</div>
<div *ngIf="compositeFieldFormGroup.get('hasCommentField').value" class="col-12">
@ -89,13 +89,38 @@
<div class="row" *ngIf="(this.visibilityRulesService.checkElementVisibility(fieldsetEntry.form.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldsetEntry.form)) && !hiddenEntriesIds.includes(fieldsetEntry.id)">
<div class="col-12">
<div class="row">
<div *ngIf="!fieldsetEntry.form.get('multiplicity').value.tableView" class="row">
<app-form-composite-field [tocentry]="fieldsetEntry" class="align-self-center col" [form]="fieldsetEntry.form" [datasetProfileId]="datasetProfileId"
[isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0"></app-form-composite-field>
</div>
<table *ngIf="fieldsetEntry.form.get('multiplicity').value.tableView" class="table table-bordered" style="table-layout: fixed">
<tr>
<th *ngFor="let fieldFormGroup of fieldsetEntry.form.get('fields')['controls']; let i = index;"
class="text-truncate" [matTooltip]="fieldFormGroup.get('data').value.label" >{{fieldFormGroup.get('data').value.label}}</th>
<th class="actions"></th>
</tr>
<tr app-form-composite-field [form]="fieldsetEntry.form" [datasetProfileId]="datasetProfileId"
[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-composite-field *ngFor="let multipleCompositeFieldFormGroup of fieldsetEntry.form.get('multiplicityItems')['controls']; let j = index"
[form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
[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]="fieldsetEntry.form.get('fields')['controls'].length + 1" class="text-center">
<span class="pointer d-inline-flex align-items-center" (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>
</div>
<div *ngIf="fieldsetEntry.form" class="col-12">
<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">
@ -110,7 +135,7 @@
<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' | translate}}</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">

65
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.module.ts
View File

@ -1,36 +1,46 @@
import { NgModule } from '@angular/core';
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
import { FormCompositeFieldComponent } from '@app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component';
import { FormFieldComponent } from '@app/ui/misc/dataset-description-form/components/form-field/form-field.component';
import { FormProgressIndicationComponent } from '@app/ui/misc/dataset-description-form/components/form-progress-indication/form-progress-indication.component';
import { FormSectionComponent } from '@app/ui/misc/dataset-description-form/components/form-section/form-section.component';
import { DatasetDescriptionFormComponent } from '@app/ui/misc/dataset-description-form/dataset-description-form.component';
import { FormFocusService } from '@app/ui/misc/dataset-description-form/form-focus/form-focus.service';
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { FormCompositeTitleComponent } from './components/form-composite-title/form-composite-title.component';
import { ExternalSourcesModule } from '../external-sources/external-sources.module';
import { DatasetDescriptionComponent } from './dataset-description.component';
import { FormProgressIndicationModule } from './components/form-progress-indication/form-progress-indication.module';
import { FormSectionInnerComponent } from './components/form-section/form-section-inner/form-section-inner.component';
import {NgModule} from '@angular/core';
import {AutoCompleteModule} from '@app/library/auto-complete/auto-complete.module';
import {
FormCompositeFieldComponent
} from '@app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component';
import {FormFieldComponent} from '@app/ui/misc/dataset-description-form/components/form-field/form-field.component';
import {
FormSectionComponent
} from '@app/ui/misc/dataset-description-form/components/form-section/form-section.component';
import {
DatasetDescriptionFormComponent
} from '@app/ui/misc/dataset-description-form/dataset-description-form.component';
import {FormFocusService} from '@app/ui/misc/dataset-description-form/form-focus/form-focus.service';
import {VisibilityRulesService} from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
import {CommonFormsModule} from '@common/forms/common-forms.module';
import {CommonUiModule} from '@common/ui/common-ui.module';
import {FormCompositeTitleComponent} from './components/form-composite-title/form-composite-title.component';
import {ExternalSourcesModule} from '../external-sources/external-sources.module';
import {DatasetDescriptionComponent} from './dataset-description.component';
import {FormProgressIndicationModule} from './components/form-progress-indication/form-progress-indication.module';
import {FormSectionInnerComponent} from './components/form-section/form-section-inner/form-section-inner.component';
import {RichTextEditorModule} from "@app/library/rich-text-editor/rich-text-editor.module";
// import {TableEditorModule} from "@app/library/table-editor/table-editor.module";
import {FileService} from "@app/core/services/file/file.service";
import {NgxDropzoneModule} from "ngx-dropzone";
import {
FormCompositeFieldDialogComponent
} from "@app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component";
import {FormattingModule} from "@app/core/formatting.module";
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
AutoCompleteModule,
ExternalSourcesModule,
FormProgressIndicationModule,
RichTextEditorModule,
// TableEditorModule,
NgxDropzoneModule
],
imports: [
CommonUiModule,
CommonFormsModule,
AutoCompleteModule,
ExternalSourcesModule,
FormProgressIndicationModule,
RichTextEditorModule,
// TableEditorModule,
NgxDropzoneModule,
FormattingModule
],
declarations: [
DatasetDescriptionFormComponent,
DatasetDescriptionComponent,
@ -38,7 +48,8 @@ import {NgxDropzoneModule} from "ngx-dropzone";
FormSectionInnerComponent,
FormCompositeFieldComponent,
FormFieldComponent,
FormCompositeTitleComponent
FormCompositeTitleComponent,
FormCompositeFieldDialogComponent
],
exports: [
DatasetDescriptionFormComponent,

7
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html
View File

@ -10,6 +10,7 @@
<div *ngFor="let pageFormGroup of form.get('pages')['controls']; let z = index;">
<div *ngFor="let sectionFormGroup of pageFormGroup.get('sections')['controls']; let i = index;">
<div class="row">
{{form | json}}
<app-form-section class="col-12" [form]="sectionFormGroup" [path]="z+1"
[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId"
[linkToScroll]="linkToScroll"></app-form-section>
@ -21,7 +22,7 @@
<ng-template #toctemplate>
<!--FIRST LEVEL ALWAYS PAGE-->
<mat-accordion [multi]="true">
<ng-container *ngFor="let pageEntry of tocentries; let z = index;">
<mat-expansion-panel [expanded]="true" #expansionPanel *ngIf="!hiddenEntriesIds.includes(pageEntry.id)">
@ -32,8 +33,8 @@
</h4>
</mat-panel-title>
</mat-expansion-panel-header>
<!--
<h4 class="toc-page-header">
<!--
<h4 class="toc-page-header">
</h4> -->
<ng-container *ngFor="let sectionEntry of pageEntry.subEntries; let i = index;">
<div class="row" *ngIf="!hiddenEntriesIds.includes(sectionEntry.id)">

31
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
View File

@ -40,7 +40,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
private visibilityRulesService: VisibilityRulesService,
) {
super();
}
ngOnInit() {
@ -48,7 +48,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
const rules_to_append = this._enrichWithMultiplicityRules(this.tocentries);
this.visibilityRulesService.buildVisibilityRules([...this.visibilityRules, ...rules_to_append ], this.form);
// if (this.form) {
// this.form.valueChanges
// .pipe(takeUntil(this._destroyed))
@ -57,7 +57,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
// });
// }
this.visibilityRulesInstance.emit(this.visibilityRulesService);
@ -139,15 +139,15 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
const childIdsWithVisRules = (entry.form.get('fields') as FormArray).controls.reduce((all, s) =>
{
const sval = s.value as Field;
return this.visibilityRules.find(x => (x.targetField === sval.id) || (x.sourceField === sval.id)) ? [...all, sval] : all;
return this.visibilityRules.find(x => (x.targetField === sval.id) || (x.sourceField === sval.id)) ? [...all, sval] : all;
},[]) as Field[];
const innerCompositeFieldOriginalIds = (entry.form.get('fields') as FormArray).controls.map( x=> x.get('id').value) as string[];
//multiplicity items
const multiplicityItemsValue = entry.form.get('multiplicityItems').value as CompositeField[];
// ********* FIELDS OF FIELDSET ARE EITHER TARGETS OR SOURCES *****
@ -210,7 +210,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
const newRule = {...x, targetField: field.id, sourceField: idMappings.find(l => l.original === x.sourceField).multiplicityIdValue} as Rule;
rules_to_append.push(newRule);
})
//outer dependencies
const outerDep = original_as_target.filter( x=> !innerCompositeFieldOriginalIds.includes(x.sourceField));
outerDep.forEach(x=>{
@ -222,10 +222,10 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
})
});
}
// ** FIELDSET ITSELF IS TARGET
// ** source it can never be
@ -239,7 +239,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
if(compositeFieldAsTargetRules.length){
compositeFieldAsTargetRules.forEach(x =>{
idCompositeFieldMappings.forEach(l=>{
const newRule = {...x, targetField: l.newValue};
@ -264,7 +264,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
const tempResult:ToCEntry[] = [];
if(sections &&sections.length){
sections.controls.forEach(section=>{
tempResult.push(this._buildRecursively(section as FormGroup, ToCEntryType.Section));
@ -300,9 +300,9 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
}
private _sortByOrdinal(tocentries: ToCEntry[]){
if(!tocentries || !tocentries.length) return;
tocentries.sort(this._customCompare);
tocentries.forEach(entry=>{
this._sortByOrdinal(entry.subEntries);
@ -327,7 +327,6 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
});
}
getTocEntries(): ToCEntry[] {
if (!this.form) { return []; }
const result: ToCEntry[] = [];

39
dmp-frontend/src/app/utilities/enhancers/utils.ts
View File

@ -1,3 +1,5 @@
import {AbstractControl, FormArray, FormControl, FormGroup} from "@angular/forms";
export function isNullOrUndefined(object: any): boolean {
return object === null || object === undefined;
}
@ -5,3 +7,40 @@ export function isNullOrUndefined(object: any): boolean {
export function isNumeric(val: any): val is number | string {
return !Array.isArray(val) && (val - parseFloat(val) + 1) >= 0;
}
/**
* Deep clones the given AbstractControl, preserving values, validators, async validators, and disabled status.
* @param control AbstractControl
* @returns AbstractControl
*/
export function cloneAbstractControl<T extends AbstractControl>(control: T): T {
let newControl: T;
if (control instanceof FormGroup) {
const formGroup = new FormGroup({}, control.validator, control.asyncValidator);
const controls = control.controls;
Object.keys(controls).forEach(key => {
formGroup.addControl(key, cloneAbstractControl(controls[key]));
})
newControl = formGroup as any;
}
else if (control instanceof FormArray) {
const formArray = new FormArray([], control.validator, control.asyncValidator);
control.controls.forEach(formControl => formArray.push(cloneAbstractControl(formControl)))
newControl = formArray as any;
}
else if (control instanceof FormControl) {
newControl = new FormControl(control.value, control.validator, control.asyncValidator) as any;
}
else {
throw new Error('Error: unexpected control value');
}
if (control.disabled) newControl.disable({emitEvent: false});
return newControl;
}

1
dmp-frontend/src/assets/i18n/de.json
View File

@ -376,6 +376,7 @@
"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
"MULTIPLICITY-TABLEVIEW": "View inputs in table",
"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
"ORDER": "Order",
"COMMENT-PLACEHOLDER": "Please Specify",
"COMMENT-HINT": "Provide additional information or justification about your selection",

1
dmp-frontend/src/assets/i18n/en.json
View File

@ -376,6 +376,7 @@
"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
"MULTIPLICITY-TABLEVIEW": "View inputs in table",
"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
"ORDER": "Order",
"COMMENT-PLACEHOLDER": "Please Specify",
"COMMENT-HINT": "Provide additional information or justification about your selection",

1
dmp-frontend/src/assets/i18n/es.json
View File

@ -376,6 +376,7 @@
"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
"MULTIPLICITY-TABLEVIEW": "View inputs in table",
"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
"ORDER": "Orden",
"COMMENT-PLACEHOLDER": "Por favir especifique",
"COMMENT-HINT": "Proporcione información adicional o justifique su selección",

1
dmp-frontend/src/assets/i18n/gr.json
View File

@ -376,6 +376,7 @@
"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
"MULTIPLICITY-TABLEVIEW": "View inputs in table",
"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
"ORDER": "Εντολή",
"COMMENT-PLACEHOLDER": "Παρακαλώ προσδιορίστε",
"COMMENT-HINT": "Προσθέστε επιπλέον πληροφορίες ή αιτιολόγηση σχετικά με την επιλογή σας",

1
dmp-frontend/src/assets/i18n/hr.json
View File

@ -376,6 +376,7 @@
"MULTIPLICITY-PLACEHOLDER": "",
"MULTIPLICITY-TABLEVIEW": "View inputs in table",
"MULTIPLICITY-ADD-ONE-FIELD": "Dodaj polje",
"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
"ORDER": "Redoslijed",
"COMMENT-PLACEHOLDER": "Navedite",
"COMMENT-HINT": "Navedite dodatne informacije ili obrazložite izbor",

1
dmp-frontend/src/assets/i18n/pl.json
View File

@ -376,6 +376,7 @@
"MULTIPLICITY-PLACEHOLDER": "$Tekst zastępujący wielokrotność$",
"MULTIPLICITY-TABLEVIEW": "View inputs in table",
"MULTIPLICITY-ADD-ONE-FIELD": "Dodaj więcej",
"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
"ORDER": "Kolejność",
"COMMENT-PLACEHOLDER": "Proszę doprecyzować",
"COMMENT-HINT": "Podaj dodatkowe informacje lub uzasadnienie swojego wyboru",

1
dmp-frontend/src/assets/i18n/pt.json
View File

@ -376,6 +376,7 @@
"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
"MULTIPLICITY-TABLEVIEW": "View inputs in table",
"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
"ORDER": "Ordem",
"COMMENT-PLACEHOLDER": "Por favor especifique",
"COMMENT-HINT": "Disponibilize informação ou justificação adicional sobre a sua seleção",

1
dmp-frontend/src/assets/i18n/sk.json
View File

@ -376,6 +376,7 @@
"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
"MULTIPLICITY-TABLEVIEW": "View inputs in table",
"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
"ORDER": "Order",
"COMMENT-PLACEHOLDER": "Please Specify",
"COMMENT-HINT": "Provide additional information or justification about your selection",

1
dmp-frontend/src/assets/i18n/sr.json
View File

@ -376,6 +376,7 @@
"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
"MULTIPLICITY-TABLEVIEW": "View inputs in table",
"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
"ORDER": "Redosled",
"COMMENT-PLACEHOLDER": "Navedite",
"COMMENT-HINT": "Navedite dodatne informacije ili obrazložite izbor",

1
dmp-frontend/src/assets/i18n/tr.json
View File

@ -376,6 +376,7 @@
"MULTIPLICITY-PLACEHOLDER": "Multiplicity Placeholder Text",
"MULTIPLICITY-TABLEVIEW": "View inputs in table",
"MULTIPLICITY-ADD-ONE-FIELD": "Add more",
"MULTIPLICITY-ADD-ONE-FIELD-TABLEVIEW": "Add row",
"ORDER": "Düzen",
"COMMENT-PLACEHOLDER": "Lütfen Belirtiniz",
"COMMENT-HINT": "Seçiminiz hakkında gerekçe veya ek bilgi veriniz",