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

description editor refactor - WIP

This commit is contained in:
Diamantis Tziotzios 2023-12-20 09:20:38 +02:00
parent 3e97d0fdd1
commit c6508a0082
148 changed files with 6125 additions and 3246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
dmp-frontend/src/app/app-routing.module.ts
View File

@ -71,16 +71,6 @@ const appRoutes: Routes = [
}
},
{
path: 'datasetcreatewizard',
loadChildren: () => import('./ui/dataset-create-wizard/dataset-create-wizard.module').then(m => m.DatasetCreateWizardModule),
data: {
breadcrumb: true,
title: 'GENERAL.TITLES.DATASETCREATEWIZARD'
}
},
{
path: 'about',
@ -100,14 +90,7 @@ const appRoutes: Routes = [
// }
// },
{
path: 'quick-wizard',
loadChildren: () => import('./ui/quick-wizard/quick-wizard.module').then(m => m.OuickWizardModule),
data: {
breadcrumb: true,
title: "GENERAL.TITLES.QUICK-WIZARD"
}
},
{
path: 'dataset-profiles',
loadChildren: () => import('./ui/admin/dataset-profile/dataset-profile.module').then(m => m.DatasetProfileModule),

4
dmp-frontend/src/app/app.module.ts
View File

@ -1,5 +1,5 @@
import { OverlayModule } from '@angular/cdk/overlay';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, LOCALE_ID, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MAT_MOMENT_DATE_FORMATS, MatMomentDateModule } from '@angular/material-moment-adapter';
@ -12,7 +12,6 @@ import { AppComponent } from '@app/app.component';
import { CoreServiceModule } from '@app/core/core-service.module';
import { NotificationModule } from '@app/library/notification/notification.module';
import { LoginModule } from '@app/ui/auth/login/login.module';
import { DatasetCreateWizardModule } from '@app/ui/dataset-create-wizard/dataset-create-wizard.module';
// import { BreadcrumbModule } from '@app/ui/misc/breadcrumb/breadcrumb.module';
import { HelpContentModule } from '@app/ui/misc/help-content/help-content.module';
import { NavigationModule } from '@app/ui/misc/navigation/navigation.module';
@ -143,7 +142,6 @@ export function InstallationConfigurationFactory(appConfig: ConfigurationService
HelpContentModule,
ReactiveFormsModule,
FormsModule,
DatasetCreateWizardModule,
NavbarModule,
SidebarModule,
NgcCookieConsentModule.forRoot(cookieConfig),

2
dmp-frontend/src/app/core/core-service.module.ts
View File

@ -39,7 +39,6 @@ import { UiNotificationService } from './services/notification/ui-notification-s
import { OrganisationService } from './services/organisation/organisation.service';
import { ProgressIndicationService } from './services/progress-indication/progress-indication-service';
import { ProjectService } from './services/project/project.service';
import { QuickWizardService } from './services/quick-wizard/quick-wizard.service';
import { SearchBarService } from './services/search-bar/search-bar.service';
import { TimezoneService } from './services/timezone/timezone-service';
import { UnlinkAccountEmailConfirmationService } from './services/unlink-account-email-confirmation/unlink-account-email-confirmation.service';
@ -119,7 +118,6 @@ export class CoreServiceModule {
UserServiceOld,
DmpInvitationService,
DatasetExternalAutocompleteService,
QuickWizardService,
OrganisationService,
EmailConfirmationService,
ContactSupportService,

1
dmp-frontend/src/app/core/model/dataset-profile-definition/rule.ts
View File

@ -2,5 +2,4 @@ export class Rule {
sourceField: string;
targetField: string;
requiredValue: any;
type: string;
}

8
dmp-frontend/src/app/core/model/description-template/description-template-persist.ts
View File

@ -30,13 +30,13 @@ export interface DescriptionTemplateDefinitionPersist {
export interface DescriptionTemplatePagePersist {
id: Guid;
id: string;
ordinal: number;
title: string;
}
export interface DescriptionTemplateSectionPersist {
id: Guid;
id: string;
ordinal: number;
defaultVisibility: boolean;
multiplicity: boolean;
@ -49,7 +49,7 @@ export interface DescriptionTemplateSectionPersist {
}
export interface DescriptionTemplateFieldSetPersist {
id: Guid;
id: string;
ordinal: number;
numbering: string;
title: string;
@ -62,7 +62,7 @@ export interface DescriptionTemplateFieldSetPersist {
}
export interface DescriptionTemplateFieldPersist {
id: Guid;
id: string;
ordinal: number;
schematics: string[];
defaultValue: string;

8
dmp-frontend/src/app/core/model/description-template/description-template.ts
View File

@ -34,13 +34,13 @@ export interface DescriptionTemplateDefinition {
export interface DescriptionTemplatePage {
id: Guid;
id: string;
ordinal: number;
title: string;
}
export interface DescriptionTemplateSection {
id: Guid;
id: string;
ordinal: number;
defaultVisibility: boolean;
multiplicity: boolean;
@ -55,7 +55,7 @@ export interface DescriptionTemplateSection {
}
export interface DescriptionTemplateFieldSet {
id: Guid;
id: string;
ordinal: number;
numbering: string;
title: string;
@ -68,7 +68,7 @@ export interface DescriptionTemplateFieldSet {
}
export interface DescriptionTemplateField {
id: Guid;
id: string;
ordinal: number;
numbering?: string;
schematics?: string[];

26
dmp-frontend/src/app/core/services/quick-wizard/quick-wizard.service.ts
View File

@ -1,26 +0,0 @@
import { HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../../../environments/environment';
import { QuickWizardEditorWizardModel } from '../../../ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.model';
import { BaseHttpService } from '../http/base-http.service';
import { DatasetCreateWizardModel } from '../../../ui/dataset-create-wizard/dataset-create-wizard.model';
import { ConfigurationService } from '../configuration/configuration.service';
@Injectable()
export class QuickWizardService {
private actionUrl: string;
private headers: HttpHeaders;
constructor(private http: BaseHttpService, private configurationService: ConfigurationService) {
this.actionUrl = configurationService.server + 'quick-wizard/';
}
createQuickWizard(quickWizard: QuickWizardEditorWizardModel): Observable<QuickWizardEditorWizardModel> {
return this.http.post<QuickWizardEditorWizardModel>(this.actionUrl, quickWizard, { headers: this.headers });
}
createQuickDatasetWizard(datasetCreateWizardModel: DatasetCreateWizardModel): Observable<DatasetCreateWizardModel> {
return this.http.post<DatasetCreateWizardModel>(this.actionUrl + 'datasetcreate', datasetCreateWizardModel, { headers: this.headers });
}
}

2
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/final-preview/final-preview.component.ts
View File

@ -1,6 +1,6 @@
import { Component, Input, OnInit} from '@angular/core';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
@Component({

2
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
View File

@ -33,7 +33,7 @@ import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { FieldSetEditorModel } from '../admin/field-set-editor-model';
import { Guid } from '@common/types/guid';
import { FieldEditorModel } from '../admin/field-editor-model';
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { CdkStep, StepperSelectionEvent } from '@angular/cdk/stepper';
import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel, DatasetDescriptionSectionEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';

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

@ -92,8 +92,9 @@
</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('data')?.get('fieldType')?.value" [@fade-in-fast]>
<app-form-section-inner [form]="previewForm" [tableView]="form.getRawValue().multiplicity?.tableView" [datasetProfileId]="datasetProfileId">
</app-form-section-inner>
<!-- Check what we need to do with this. -->
<!-- <app-form-section-inner [form]="previewForm" [tableView]="form.getRawValue().multiplicity?.tableView" [datasetProfileId]="datasetProfileId">
</app-form-section-inner> -->
</div>
</div>

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

@ -341,7 +341,7 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
addNewField() {
const field: DescriptionTemplateFieldEditorModel = new DescriptionTemplateFieldEditorModel();
field.id = Guid.create();
field.id = Guid.create().toString();
field.ordinal = (this.form.get('fields') as UntypedFormArray).length;
@ -494,7 +494,7 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
}
const field = {
id: Guid.create(),
id: Guid.create().toString(),
ordinal: targetOrdinal,
validations: [],
includeInExport: true

2
dmp-frontend/src/app/ui/admin/description-template/editor/components/final-preview/final-preview.component.ts
View File

@ -1,6 +1,6 @@
import { Component, Input, OnInit} from '@angular/core';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
@Component({

12
dmp-frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.ts
View File

@ -22,7 +22,7 @@ export class DescriptionTemplateEditorSectionFieldSetComponent implements OnInit
@Input() datasetProfileId?: string;
@Output() selectedEntryId = new EventEmitter<Guid>();
@Output() selectedEntryId = new EventEmitter<string>();
@Output() dataNeedsRefresh = new EventEmitter<void>();
@Output() removeFieldSet = new EventEmitter<string>();
@Output() addNewFieldSet = new EventEmitter<UntypedFormGroup>();
@ -101,11 +101,11 @@ export class DescriptionTemplateEditorSectionFieldSetComponent implements OnInit
private _selectedFieldSetId: Guid = null;
private _selectedFieldSetId: string = null;
get selectedFieldSetId() {
return this._selectedFieldSetId;
}
set selectedFieldSetId(id: Guid) {
set selectedFieldSetId(id: string) {
if (id === this._selectedFieldSetId) return;
this._selectedFieldSetId = id;
@ -140,7 +140,7 @@ export class DescriptionTemplateEditorSectionFieldSetComponent implements OnInit
} else {
// console.warn('!not found numbering');
}
this._selectedFieldSetId = Guid.parse(this.tocentry.id);
this._selectedFieldSetId = this.tocentry.id;
// this._scrollToElement(this.selectedFieldSetId);
this.scroller.next(this.tocentry.id);
@ -194,13 +194,13 @@ export class DescriptionTemplateEditorSectionFieldSetComponent implements OnInit
addFieldSetAfter(afterOrdinal: number, afterIndex: number): void {
const field: DescriptionTemplateFieldEditorModel = new DescriptionTemplateFieldEditorModel();
field.id = Guid.create();
field.id = Guid.create().toString();
field.ordinal = 0;//first filed in the fields list
const fieldForm = field.buildForm();
//give fieldset id and ordinal
const fieldSet: DescriptionTemplateFieldSetEditorModel = new DescriptionTemplateFieldSetEditorModel();
const fieldSetId = Guid.create();
const fieldSetId = Guid.create().toString();
fieldSet.id = fieldSetId;
fieldSet.ordinal = afterOrdinal < 0 ? 0 : afterOrdinal;

4
dmp-frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.ts
View File

@ -28,10 +28,10 @@ export class DescriptionTemplateEditorSectionComponent extends BaseComponent imp
fieldSet.ordinal = (this.form.get('fieldSets') as UntypedFormArray).length;
const field: DescriptionTemplateFieldEditorModel = new DescriptionTemplateFieldEditorModel();
field.id = Guid.create();
field.id = Guid.create().toString();
field.ordinal = 0;//first field in fields
fieldSet.fields.push(field);
fieldSet.id = Guid.create();
fieldSet.id = Guid.create().toString();
const fieldsetsArray = this.form.get('fieldSets') as UntypedFormArray;
fieldsetsArray.push(fieldSet.buildForm());

8
dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.ts
View File

@ -566,7 +566,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
const pagesArray = (this.formGroup.get('definition').get('pages') as UntypedFormArray);
const page: DescriptionTemplatePageEditorModel = new DescriptionTemplatePageEditorModel();
page.id = Guid.create();
page.id = Guid.create().toString();
if (isNaN(pagesArray.length)) { page.ordinal = 0; } else { page.ordinal = pagesArray.length; }
const pageForm = page.buildForm();
// this.dataModel.pages.push(page);
@ -580,7 +580,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
case ToCEntryType.Section:
const section: DescriptionTemplateSectionEditorModel = new DescriptionTemplateSectionEditorModel();
section.id = Guid.create();
section.id = Guid.create().toString();
let sectionsArray: UntypedFormArray;
if (parent.type === ToCEntryType.Page) {//FIRST LEVEL SECTION
@ -634,7 +634,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
//create one field form fieldset
const field: DescriptionTemplateFieldEditorModel = new DescriptionTemplateFieldEditorModel();
field.id = Guid.create();
field.id = Guid.create().toString();
field.ordinal = 0;//first filed in the fields list
const fieldForm = field.buildForm();
// fieldForm.setValidators(this.customFieldValidator());
@ -647,7 +647,7 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
//give fieldset id and ordinal
const fieldSet: DescriptionTemplateFieldSetEditorModel = new DescriptionTemplateFieldSetEditorModel();
const fieldSetId = Guid.create();
const fieldSetId = Guid.create().toString();
fieldSet.id = fieldSetId;
try {

8
dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.model.ts
View File

@ -208,7 +208,7 @@ export class DescriptionTemplateDefinitionEditorModel implements DescriptionTemp
}
export class DescriptionTemplatePageEditorModel implements DescriptionTemplatePagePersist {
id: Guid;
id: string;
ordinal: number;
title: string;
@ -266,7 +266,7 @@ export class DescriptionTemplatePageEditorModel implements DescriptionTemplatePa
}
export class DescriptionTemplateSectionEditorModel implements DescriptionTemplateSectionPersist {
id: Guid;
id: string;
ordinal: number;
defaultVisibility: boolean = false; // TODO: check if used and remove
multiplicity: boolean = false;
@ -364,7 +364,7 @@ export class DescriptionTemplateSectionEditorModel implements DescriptionTemplat
}
export class DescriptionTemplateFieldSetEditorModel implements DescriptionTemplateFieldSetPersist {
id: Guid;
id: string;
ordinal: number;
numbering: string = "0"; // Check if used and remove
title: string;
@ -525,7 +525,7 @@ export class DescriptionTemplateMultiplicityEditorModel implements DescriptionTe
//
//
export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateFieldPersist {
id: Guid;
id: string;
ordinal: number;
schematics: string[];
defaultValue: string;

37
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.html
View File

@ -1,37 +0,0 @@
<div class="main-content">
<div class="container-fluid">
<div class="dataset-create-wizard">
<h3 *ngIf="isNew">{{ 'QUICKWIZARD.CREATE-ADD.ADD.DATASET-WIZARD' | translate }}</h3>
<p *ngIf="isNew">{{ 'QUICKWIZARD.CREATE-ADD.ADD.POST-SELECTION-INFO' | translate }}</p>
<mat-horizontal-stepper linear #stepper>
<mat-step class="step-container" [stepControl]="formGroup.get('dmpMeta')">
<ng-template matStepLabel>{{'DATASET-CREATE-WIZARD.FIRST-STEP.TITLE'| translate}}</ng-template>
<form [formGroup]="formGroup.get('dmpMeta')">
<dataset-dmp-selector-component class="col-12" [formGroup]="formGroup.get('dmpMeta')" [datasetFormGroup]="formGroup.get('datasets')" [stepper]="stepper">
</dataset-dmp-selector-component>
</form>
<div class="col-12">
<div class="row">
<div class="col"></div>
<div><button matStepperNext mat-raised-button color="primary" [disabled]="!formGroup.get('dmpMeta').valid">{{'DATASET-CREATE-WIZARD.ACTIONS.NEXT'| translate}}</button></div>
</div>
</div>
</mat-step>
<mat-step [stepControl]="formGroup">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('dmpMeta').valid && isActive('step2')">
<app-dataset-editor-wizard-component class="col-12" [formGroup]="formGroup" [datasetProfile]="formGroup.get('dmpMeta').get('datasetProfile')" [datasetLabel]="formGroup.get('dmpMeta').get('dmp').value['label']">
</app-dataset-editor-wizard-component>
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button class="saveAndFinalizeButton" matStepperNext mat-raised-button (click)='saveFinalize()' [disabled]="!isFormValid() || !hasDatasets()" color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE-AND-FINALIZE' | translate}}</button>
<button class="saveButton" matStepperNext mat-raised-button (click)='save()' [disabled]="!hasDatasets()" color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
</div>
</mat-step>
</mat-horizontal-stepper>
</div>
</div>
</div>

11
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.scss
View File

@ -1,11 +0,0 @@
.saveAndFinalizeButton{
float:right;
}
.finalizeButton{
float: right;
text-transform: uppercase;
}
.saveButton{
float:right;
margin-right: 15px;
}

163
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.ts
View File

@ -1,163 +0,0 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { MatStepper } from '@angular/material/stepper';
import { Router } from '@angular/router';
import { DatasetStatus } from '@app/core/common/enum/dataset-status';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { QuickWizardService } from '@app/core/services/quick-wizard/quick-wizard.service';
import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component';
import { DatasetCreateWizardModel } from '@app/ui/dataset-create-wizard/dataset-create-wizard.model';
import { DatasetEditorWizardComponent } from '@app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'dataset-create-wizard.component',
templateUrl: 'dataset-create-wizard.component.html',
styleUrls: ['./dataset-create-wizard.component.scss'],
})
export class DatasetCreateWizard extends CheckDeactivateBaseComponent implements OnInit { //IBreadCrumbComponent
//breadCrumbs: Observable<BreadcrumbItem[]>;
@ViewChild(DatasetEditorWizardComponent) datasetEditorWizardComponent: DatasetEditorWizardComponent;
isLinear = false;
isNew = true;
isSubmitted = false;
formGroup: UntypedFormGroup;
datasetCreateWizardModel: DatasetCreateWizardModel;
@ViewChild('stepper', { static: true }) stepper: MatStepper;
constructor(
private router: Router,
private formBuilder: UntypedFormBuilder,
public quickWizardService: QuickWizardService,
public language: TranslateService,
private uiNotificationService: UiNotificationService,
private dialog: MatDialog
) {
super();
}
ngOnInit() {
this.datasetCreateWizardModel = new DatasetCreateWizardModel();
this.formGroup = this.datasetCreateWizardModel.buildForm();
this.language.get('NAV-BAR.DATASET-DESCRIPTION-WIZARD').pipe(takeUntil(this._destroyed)).subscribe(x => {
// this.breadCrumbs = observableOf([
// {
// parentComponentName: 'Dashboard',
// label: x,
// url: '/datasetcreatewizard'
// }]
// );
})
}
save() {
if (this.formGroup.get('datasets') && this.formGroup.get('datasets').get('datasetsList') && (this.formGroup.get('datasets').get('datasetsList') as UntypedFormArray).length > 0) {
for (let control of (this.formGroup.get('datasets').get('datasetsList') as UntypedFormArray).controls) {
control.get('status').setValue(DatasetStatus.Draft);
}
// this.onSubmitSave();
const dmpId = this.formGroup.get('dmpMeta').get('dmp').value.id;
this.quickWizardService.createQuickDatasetWizard(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => this.onCallbackSuccess(dmpId)
);
} else {
return;
}
}
saveFinalize() {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
maxWidth: '300px',
restoreFocus: false,
data: {
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.FINALIZE-ITEM'),
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
isDeleteConfirmation: false
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
if (!this.isFormValid()) { return; }
if (this.formGroup.get('datasets') && this.formGroup.get('datasets').get('datasetsList') && (this.formGroup.get('datasets').get('datasetsList') as UntypedFormArray).length > 0) {
for (let control of (this.formGroup.get('datasets').get('datasetsList') as UntypedFormArray).controls) {
control.get('status').setValue(DatasetStatus.Finalized);
}
this.onSubmitSaveAndFinalize();
} else {
return;
}
}
});
}
// onSubmitSave() {
// const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
// data: {
// message: this.language.instant('QUICKWIZARD.SAVE-DIALOG.TITLE'),
// confirmButton: this.language.instant('QUICKWIZARD.SAVE-DIALOG.ACTIONS.AFFIRMATIVE'),
// cancelButton: this.language.instant('QUICKWIZARD.SAVE-DIALOG.ACTIONS.NEGATIVE')
// }
// });
// dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
// if (result) {
// this.datasetEditorWizardComponent.addDataset();
// } else if (result === false) {
// this.quickWizardService.createQuickDatasetWizard(this.formGroup.value)
// .pipe(takeUntil(this._destroyed))
// .subscribe(
// complete => this.onCallbackSuccess()
// )
// }
// });
// }
onSubmitSaveAndFinalize() {
const dmpId = this.formGroup.get('dmpMeta').get('dmp').value.id;
this.quickWizardService.createQuickDatasetWizard(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => this.onCallbackSuccess(dmpId)
);
}
hasDatasets() {
if ((this.formGroup.get('datasets').get('datasetsList') as UntypedFormArray).length > 0) {
return true;
} else {
return false;
}
}
public isFormValid() {
return this.formGroup.valid;
}
onCallbackSuccess(dmpId: string): void {
this.isSubmitted = true;
this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
this.router.navigate(['/plans/overview/' + dmpId]);
}
isActive(step: string): boolean {
switch (step) {
case 'step1':
return this.stepper.selectedIndex == 0;
case 'step2':
return this.stepper.selectedIndex == 1;
}
}
canDeactivate(): boolean {
return this.isSubmitted || !this.formGroup.dirty;
}
}

43
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.model.ts
View File

@ -1,43 +0,0 @@
import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
import { DmpCreateWizardFormModel } from '@app/core/model/dmp/dmp-create-wizard/dmp-create-wizard-form.model';
import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
import { DatasetEditorWizardModel } from '@app/ui/quick-wizard/dataset-editor/dataset-editor-wizard-model';
import { BackendErrorValidator } from '@common/forms/validation/custom-validator';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
import { ValidationContext } from '@common/forms/validation/validation-context';
export class DatasetCreateWizardModel {
public dmpMeta: DmpCreateWizardFormModel;
public datasets: DatasetEditorWizardModel;
public validationErrorModel: ValidationErrorModel = new ValidationErrorModel();
fromModelDmp(item: DmpCreateWizardFormModel): DatasetCreateWizardModel {
this.dmpMeta.fromModel(item);
return this;
}
fromModelDataset(item: DatasetWizardEditorModel[]): DatasetCreateWizardModel {
this.datasets.fromModel(item);
return this;
}
buildForm(context: ValidationContext = null): UntypedFormGroup {
if (context == null) { context = this.createValidationContext(); }
const formBuilder = new UntypedFormBuilder();
const formGroup = formBuilder.group({
dmpMeta: new DmpCreateWizardFormModel().buildForm(),
datasets: new DatasetEditorWizardModel().buildForm()
});
return formGroup;
}
createValidationContext(): ValidationContext {
const baseContext: ValidationContext = new ValidationContext();
baseContext.validation.push({ key: 'label', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'label')] });
baseContext.validation.push({ key: 'status', validators: [BackendErrorValidator(this.validationErrorModel, 'status')] });
return baseContext;
}
}

37
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.module.ts
View File

@ -1,37 +0,0 @@
import { NgModule } from '@angular/core';
import { FormattingModule } from '@app/core/formatting.module';
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
import { CanDeactivateGuard } from '@app/library/deactivate/can-deactivate.guard';
import { UrlListingModule } from '@app/library/url-listing/url-listing.module';
import { DatasetCreateWizard } from '@app/ui/dataset-create-wizard/dataset-create-wizard.component';
import { DatasetCreateWizardRoutingModule } from '@app/ui/dataset-create-wizard/dataset-create-wizard.routing';
import { DatasetDmpSelector } from '@app/ui/dataset-create-wizard/dmp-selector/dataset-dmp-selector.component';
import { DatasetDescriptionFormModule } from '@app/ui/misc/dataset-description-form/dataset-description-form.module';
import { OuickWizardModule } from '@app/ui/quick-wizard/quick-wizard.module';
import { QuickWizardRoutingModule } from '@app/ui/quick-wizard/quick-wizard.routing';
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
@NgModule({
imports: [
DatasetCreateWizardRoutingModule,
CommonUiModule,
CommonFormsModule,
AutoCompleteModule,
FormattingModule,
UrlListingModule,
ConfirmationDialogModule,
QuickWizardRoutingModule,
DatasetDescriptionFormModule,
OuickWizardModule,
],
declarations: [
DatasetCreateWizard,
DatasetDmpSelector,
],
providers: [
CanDeactivateGuard
]
})
export class DatasetCreateWizardModule { }

32
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.routing.ts
View File

@ -1,32 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DatasetCreateWizard } from './dataset-create-wizard.component';
import { DatasetDmpSelector } from './dmp-selector/dataset-dmp-selector.component';
import { CanDeactivateGuard } from '../../library/deactivate/can-deactivate.guard';
import { AuthGuard } from '@app/core/auth-guard.service';
const routes: Routes = [
{
path: '',
component: DatasetCreateWizard,
canActivate: [AuthGuard],
data: {
breadcrumb: true
},
canDeactivate: [CanDeactivateGuard]
},
{
path: '',
component: DatasetDmpSelector,
canActivate: [AuthGuard],
data: {
breadcrumb: true
},
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DatasetCreateWizardRoutingModule { }

20
dmp-frontend/src/app/ui/dataset-create-wizard/dmp-selector/dataset-dmp-selector.component.html
View File

@ -1,20 +0,0 @@
<div class="dataset-dmp-selector" [formGroup]="formGroup" *ngIf="formGroup">
<mat-card>
<div>
<mat-form-field class="col-md-12">
<app-single-auto-complete [required]="true" [formControl]="formGroup.get('dmp')" placeholder="{{'DATASET-CREATE-WIZARD.FIRST-STEP.PLACEHOLDER' | translate}}"
[configuration]="dmpAutoCompleteConfiguration">
</app-single-auto-complete>
</mat-form-field>
</div>
<div>
<mat-form-field class="col-md-12" *ngIf="availableProfiles.length > 1">
<mat-select (selectionChange)="datasetChanged($event)" placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="datasetProfile">
<mat-option *ngFor="let datasetProfile of availableProfiles" [value]="datasetProfile">
{{datasetProfile.label}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-card>
</div>

0
dmp-frontend/src/app/ui/dataset-create-wizard/dmp-selector/dataset-dmp-selector.component.scss
View File

104
dmp-frontend/src/app/ui/dataset-create-wizard/dmp-selector/dataset-dmp-selector.component.ts
View File

@ -1,104 +0,0 @@
import { Component, Input, OnInit } from '@angular/core';
import { UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { MatStepper } from '@angular/material/stepper';
import { ActivatedRoute, Router } from '@angular/router';
import { DmpStatus } from '@app/core/common/enum/dmp-status';
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';
import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
import { RequestItem } from '@app/core/query/request-item';
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
import { DmpService } from '@app/core/services/dmp/dmp.service';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { BaseComponent } from '@common/base/base.component';
import { Observable } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { DatePipe } from "@angular/common";
import { TranslateService } from "@ngx-translate/core";
@Component({
selector: 'dataset-dmp-selector-component',
templateUrl: 'dataset-dmp-selector.component.html',
styleUrls: ['./dataset-dmp-selector.component.scss'],
})
export class DatasetDmpSelector extends BaseComponent implements OnInit {
dmpAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
@Input() formGroup: UntypedFormGroup;
@Input() datasetFormGroup: UntypedFormGroup;
@Input() stepper: MatStepper;
formControl: UntypedFormControl;
availableProfiles: DatasetProfileModel[] = [];
constructor(
public dmpService: DmpService,
private datasetWizardService: DatasetWizardService,
private language: TranslateService,
private datepipe: DatePipe
) {
super();
}
ngOnInit() {
this.dmpAutoCompleteConfiguration = {
filterFn: this.searchDmp.bind(this),
initialItems: (extraData) => this.searchDmp(''),
displayFn: (item) => item['label'],
titleFn: (item) => item['label'],
subtitleFn: (item) => this.language.instant('QUICKWIZARD.CREATE-ADD.ADD.CREATED') + " " + this.datepipe.transform(item['creationTime'], 'yyyy-MM-dd')
};
this.formGroup.get('dmp').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => {
if (x) { this.loadDatasetProfiles(); }
else {
this.availableProfiles = [];
this.formGroup.get('datasetProfile').reset();
}
});
this.formGroup.get('datasetProfile').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => {
(this.datasetFormGroup.get('datasetsList') as UntypedFormArray).controls.length = 0;
});
}
searchDmp(query: string): Observable<DmpListingModel[]> {
const fields: Array<string> = new Array<string>();
fields.push('-created');
const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, null, { fields: fields });
dmpDataTableRequest.criteria = new DmpCriteria();
dmpDataTableRequest.criteria.status = DmpStatus.Draft;
dmpDataTableRequest.criteria.like = query;
return this.dmpService.getPaged(dmpDataTableRequest, "autocomplete").pipe(
map(y => y.data));
}
loadDatasetProfiles() {
const datasetProfileRequestItem: RequestItem<DatasetProfileCriteria> = new RequestItem();
datasetProfileRequestItem.criteria = new DatasetProfileCriteria();
datasetProfileRequestItem.criteria.id = this.formGroup.get('dmp').value.id;
if (datasetProfileRequestItem.criteria.id) {
this.datasetWizardService.getAvailableProfiles(datasetProfileRequestItem)
.pipe(takeUntil(this._destroyed))
.subscribe(items => {
this.availableProfiles = items;
if (this.availableProfiles.length === 1) {
this.formGroup.get('datasetProfile').patchValue(this.availableProfiles[0]);
this.stepper.next();
}
});
}
}
datasetChanged($event) {
this.stepper.next();
}
}

2
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
View File

@ -50,7 +50,7 @@ import {
LinkToScroll,
TableOfContents
} from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
import { FormService } from '@common/forms/form-service';
import {

4
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts
View File

@ -85,11 +85,11 @@ export class DatasetListingItemComponent extends BaseComponent implements OnInit
getItemLink(): string[] {
// return this.isPublic ? [`/datasets/publicEdit/${this.dataset.id}`] : [`/datasets/edit/${this.dataset.id}`];
return this.isPublic ? ['/datasets/publicOverview/' + this.dataset.id] : ['/datasets/overview/' + this.dataset.id];
return this.isPublic ? ['/datasets/overview/public/' + this.dataset.id] : ['/datasets/overview/' + this.dataset.id];
}
getDmpLink(): string[] {
return this.isPublic ? [`/explore-plans/publicOverview/${this.dataset.dmpId}`] : [`/plans/edit/${this.dataset.dmpId}`];
return this.isPublic ? [`/explore-plans/overview/public/${this.dataset.dmpId}`] : [`/plans/edit/${this.dataset.dmpId}`];
}
downloadPDF(dataset: DatasetListingModel): void {

4
dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts
View File

@ -123,7 +123,7 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
this.users = this.dataset.dmp.users;
// const breadCrumbs = [];
// breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.PUBLIC DATASETS'), url: "/explore" });
// breadCrumbs.push({ parentComponentName: 'DatasetListingComponent', label: this.dataset.label, url: '/datasets/publicOverview/' + this.dataset.id });
// breadCrumbs.push({ parentComponentName: 'DatasetListingComponent', label: this.dataset.label, url: '/datasets/overview/public/' + this.dataset.id });
// this.breadCrumbs = observableOf(breadCrumbs);
}, (error: any) => {
if (error.status === 404) {
@ -290,7 +290,7 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
dmpClicked(dmp: DmpOverviewModel) {
if (this.isPublicView) {
this.router.navigate(['/explore-plans/publicOverview/' + dmp.id]);
this.router.navigate(['/explore-plans/overview/public/' + dmp.id]);
} else {
this.router.navigate(['/plans/overview/' + dmp.id]);
}

107
dmp-frontend/src/app/ui/description/dataset-wizard/dataset-editor/dataset-editor.component.html
View File

@ -1,107 +0,0 @@
<form class="dataset-editor" *ngIf="formGroup" [formGroup]="formGroup">
<div class="col-12 intro">
<p>{{'DATASET-EDITOR.TITLE.INTRO' | translate}}</p>
<span>{{'DATASET-EDITOR.TITLE.INTRO-TIP' | translate}}</span>
</div>
<div class="col-12 card">
<!-- Title Field -->
<div class="row">
<div class="col-12">
<div class="heading">1.1 {{'DATASET-EDITOR.FIELDS.TITLE' | translate}}*</div>
<!-- <span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span> -->
<!-- <a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 1 }}" (click)="restartTour(formGroup.get('id').value + 1)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span> -->
<div class="title-form">
<mat-form-field>
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')"> {{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<!-- Description field -->
<div class="row">
<div class="col-12">
<div class="heading">1.2 {{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
<span class="hint">{{'DATASET-EDITOR.HINT.DESCRIPTION' | translate}}</span>
<!-- <span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span>
<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 2 }}" (click)="restartTour(formGroup.get('id').value + 2)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span> -->
<div class="description-form">
<rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
[wrapperClasses]="'full-width editor ' +
((formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')"
[editable]="!formGroup.get('description').disabled">
</rich-text-editor-component>
<div [class]="(formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div>
</div>
</div>
<!-- Uri field -->
<!-- <div class="row">
<div class="col-12">
<div class="heading">1.3 {{'DATASET-EDITOR.FIELDS.EXTERNAL-LINK' | translate}}</div>
<span class="hint"></span>
<div class="uri-form">
<mat-form-field>
<input matInput placeholder="{{'DATASET-EDITOR.PLACEHOLDER.EXTERNAL-LINK' | translate}}" type="text" name="uri" formControlName="uri">
<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div> -->
<!-- External Fields -->
<app-dataset-external-references-editor-component [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
<!-- Template Field -->
<div class="heading">1.4 {{'DATASET-EDITOR.FIELDS.PROFILE' | translate}}*</div>
<div class="profile-form">
<mat-form-field>
<mat-select placeholder="{{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" [compareWith]="compareWith" formControlName="profile">
<mat-option *ngFor="let profile of availableProfiles" [value]="profile">
<div (click)="checkMinMax($event, profile)">
{{profile.label}}
</div>
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</form>
<!-- <div class="container-fluid">
<div class="row dataset-editor" [formGroup]="formGroup">
<div class="col-12">
<div class="row">
<mat-form-field class="col-sm-12 col-md-6">
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="row" *ngIf="showUri">
<mat-form-field class="col-sm-12 col-md-6">
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri">
<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-sm-12 col-md-6">
<textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"></textarea>
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div> -->

145
dmp-frontend/src/app/ui/description/dataset-wizard/dataset-editor/dataset-editor.component.ts
View File

@ -1,145 +0,0 @@
import { Component, Input } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { BaseComponent } from '@common/base/base.component';
import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
import { TranslateService } from '@ngx-translate/core';
import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
import { takeUntil } from 'rxjs/operators';
import { DmpBlueprintService } from '@app/core/services/dmp/dmp-blueprint.service';
import { MatDialog } from '@angular/material/dialog';
import { PopupNotificationDialogComponent } from '@app/library/notification/popup/popup-notification.component';
import { Guid } from '@common/types/guid';
import { nameof } from 'ts-simple-nameof';
import { DescriptionTemplatesInSection, DmpBlueprint, DmpBlueprintDefinition, DmpBlueprintDefinitionSection, FieldInSection } from '@app/core/model/dmp-blueprint/dmp-blueprint';
@Component({
selector: 'app-dataset-editor-component',
templateUrl: 'dataset-editor.component.html',
styleUrls: ['./dataset-editor.component.scss']
})
export class DatasetEditorComponent extends BaseComponent {
@Input() formGroup: UntypedFormGroup;
// @Input() formGroup: FormGroup = null;
@Input() availableProfiles: DatasetProfileModel[];
@Input() dmpId: string;
showUri: boolean = false;
dmpText: string = null;
viewOnly = false;
constructor(
private router: Router,
private dmpBlueprintService: DmpBlueprintService,
private dialog: MatDialog,
private guidedTourService: GuidedTourService,
private language: TranslateService
) { super(); }
public dashboardTourDmp: GuidedTour = {
tourId: 'only-dmp-tour',
useOrb: true,
steps: [
{
title: this.dmpText,
content: 'Step 1',
orientation: Orientation.Bottom,
highlightPadding: 3,
isStepUnique: true,
customTopOffset: 8
}
]
};
checkMinMax(event, profile: DatasetProfileModel) {
event.stopPropagation();
const dmpSectionIndex = this.formGroup.get('dmpSectionIndex').value;
const blueprintId = this.formGroup.get('dmp').value.profile.id;
this.dmpBlueprintService.getSingle(blueprintId,
[
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.id)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.label)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.description)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.ordinal)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.hasTemplates)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.id)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.category)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.dataType)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.systemFieldType)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.label)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.placeholder)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.description)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.required)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.ordinal)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.id)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.descriptionTemplateId)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.label)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.minMultiplicity)].join('.'),
[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.maxMultiplicity)].join('.'),
]
)
.pipe(takeUntil(this._destroyed))
.subscribe(result => {
const section = result.definition.sections[dmpSectionIndex];
if(section.hasTemplates){
const foundTemplate = section.descriptionTemplates.find(template => template.descriptionTemplateId === Guid.parse(profile.id));
if (foundTemplate !== undefined) {
let count = 0;
if(this.formGroup.get('dmp').value.datasets != null){
for(let dataset of this.formGroup.get('dmp').value.datasets){
if(dataset.dmpSectionIndex === dmpSectionIndex && dataset.profile.id === foundTemplate.descriptionTemplateId){
count++;
}
}
if(count === foundTemplate.maxMultiplicity){
this.dialog.open(PopupNotificationDialogComponent, {
data: {
title: this.language.instant('DATASET-EDITOR.MAX-DESCRIPTION-DIALOG.TITLE'),
message: this.language.instant('DATASET-EDITOR.MAX-DESCRIPTION-DIALOG.MESSAGE')
}, maxWidth: '30em'
});
}
else{
this.formGroup.get('profile').setValue(profile);
}
}
}
else {
this.formGroup.get('profile').setValue(profile);
}
}
else {
this.formGroup.get('profile').setValue(profile);
}
});
}
getDmpText(): string {
return this.language.instant('DMP-LISTING.TEXT-INFO') + '\n\n' +
this.language.instant('DMP-LISTING.TEXT-INFO-QUESTION') + ' ' +
this.language.instant('DMP-LISTING.LINK-ZENODO') + ' ' +
this.language.instant('DMP-LISTING.GET-IDEA');
}
setDashboardTourDmp(label: string): void {
this.dashboardTourDmp.steps[0].title = this.getDmpText();
this.dashboardTourDmp.steps[0].selector = '.dmp-tour-' + label;
}
public restartTour(label: string): void {
this.setDashboardTourDmp(label);
this.guidedTourService.startTour(this.dashboardTourDmp);
}
public cancel(): void {
this.router.navigate(['/datasets']);
}
public compareWith(object1: any, object2: any) {
return object1 && object2 && object1.id === object2.id;
}
}

150
dmp-frontend/src/app/ui/description/dataset-wizard/description-editor.component.html
View File

@ -1,150 +0,0 @@
<div class="main-content">
<div class="container-fluid description-editor">
<form *ngIf="formGroup" [formGroup]="formGroup">
<!-- <form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()"> -->
<!-- Description Header -->
<div class="fixed-editor-header">
<div class="card description-editor-header">
<div class="col">
<div class="row">
<div class="col info">
<ng-container *ngIf="!viewOnly else viewOnlyTemplate">
<div *ngIf="isNew" class="description-title">{{'DMP-EDITOR.TITLE.ADD-DATASET' | translate}}</div>
<div *ngIf="!isNew" class="description-title">{{'DMP-EDITOR.TITLE.EDIT-DESCRIPTION' | translate}}</div>
<div class="description-subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="description-changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
</ng-container>
<ng-template #viewOnlyTemplate>
<div class="description-title">{{'DMP-EDITOR.TITLE.PREVIEW-DATASET' | translate}}</div>
</ng-template>
<div class="d-flex flex-direction-row dmp-info">
<div class="col-auto description-to-dmp">{{'DATASET-LISTING.TOOLTIP.TO-DMP' | translate}}</div>
<div class="dmp-title p-0">:&nbsp;{{ formGroup.get('dmp').value.label }}</div>
<div class="col-auto d-flex align-items-center">
<a [routerLink]="['/overview/' + formGroup.get('dmp').value.id]" target="_blank" class="pointer open-in-new-icon">
<mat-icon class="size-18">open_in_new</mat-icon>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-auto d-flex align-items-center">
<button *ngIf="formGroup.get('id').value" [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()"
mat-raised-button class="description-export-btn" type="button"
[matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();"
[matTooltip]="'DATASET-EDITOR.ACTIONS.DISABLED-EXPORT' | translate">
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
<mat-icon [disabled]="isDirty()" style="width: 14px;">expand_more</mat-icon>
</button>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF(formGroup.get('id').value)">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDOCX(formGroup.get('id').value)">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXML(formGroup.get('id').value)">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button>
</mat-menu>
</div>
<mat-divider *ngIf="formGroup.get('id').value && (!viewOnly || (!lockStatus && !viewOnly) || lockStatus || (hasReversableStatus() && !lockStatus))"
[vertical]="true" class="ml-2 mr-2"></mat-divider>
<div *ngIf="isDirty() && !viewOnly" class="col-auto d-flex align-items-center pr-0">
<button [disabled]="saving" type="button" mat-raised-button class="description-discard-btn" (click)="discardChanges()">
{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
</button>
</div>
<div class="col-auto d-flex align-items-center">
<button [disabled]="saving" *ngIf="!lockStatus && !viewOnly" mat-raised-button
class="description-save-btn mr-2" type="button">
<span class="d-flex flex-row row">
<span (click)="!saving?save():null" class="col">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</span>
<mat-divider [vertical]="true"></mat-divider>
<span *ngIf="!saving" class="align-items-center justify-content-center col-4 d-flex"
(click)="$event.stopPropagation();" [matMenuTriggerFor]="menu">
<mat-icon >expand_more</mat-icon>
</span>
<span *ngIf="saving" class="align-items-center justify-content-center col-4 d-flex">
<mat-icon >expand_more</mat-icon>
</span>
</span>
</button>
<mat-menu #menu="matMenu">
<button [disabled]="saving" mat-menu-item (click)="save(saveAnd.close)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
<button [disabled]="saving" mat-menu-item (click)="save(saveAnd.addNew)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</button>
<button [disabled]="saving" mat-menu-item (click)="save()" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
</mat-menu>
<button [disabled]="saving" *ngIf="!lockStatus && !viewOnly" mat-raised-button class="description-save-btn mr-2" type="button" (click)="saveFinalize()">{{ 'DATASET-WIZARD.ACTIONS.FINALIZE' | translate }}</button>
<!-- <button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="description-save-btn mr-2" (click)="save()" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
<button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="description-save-btn mr-2" (click)="save(saveAnd.close)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
<button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="description-save-btn mr-2" (click)="save(saveAnd.addNew)">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</button> -->
<button [disabled]="saving" *ngIf="lockStatus" mat-raised-button disabled class="description-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
<button [disabled]="saving" *ngIf="hasReversableStatus() && !lockStatus" mat-raised-button class="description-save-btn mr-2" (click)="reverse()" type="button">{{ 'DATASET-WIZARD.ACTIONS.REVERSE' | translate }}</button>
<!-- <button *ngIf="!lockStatus" mat-raised-button class="description-save-btn mr-2" (click)="touchForm()" type="button">{{ 'DATASET-WIZARD.ACTIONS.VALIDATE' | translate }}</button> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row editor-content">
<div class="col-auto description-stepper">
<div class="stepper-back d-flex flex-direction-row">
<div class="d-flex align-items-center pr-2 back-to-dmp" (click)="backToDmp(formGroup.get('dmp').value.id)">
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
<span class="pointer">{{'DATASET-WIZARD.ACTIONS.BACK-TO' | translate}}</span>
</div>
<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
</div>
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options" id="stepper-options">
<div class="col stepper-list">
<div (click)="table0fContents.onToCentrySelected()" *ngIf="!descriptionInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
<div (click)="table0fContents.onToCentrySelected()" *ngIf="descriptionInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
<div class="row toc-pane-container" #boundary>
<div #spacer></div>
<table-of-contents [visibilityRulesService]="visRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents
[showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step > 0"
[formGroup]="formGroup" *ngIf="formGroup && formGroup.get('descriptionProfileDefinition')" [links]="links"
[boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)"
(currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)"
[visibilityRules]="formGroup.get('descriptionProfileDefinition').get('rules').value"></table-of-contents>
</div>
</div>
</div>
<div class="stepper-actions">
<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
<span class="material-icons">chevron_left</span>
<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
</div>
<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn description-next ml-auto" (click)="nextStep()">
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
<div *ngIf="!formGroup.get('profile').value" mat-raised-button type="button" class="col-auto stepper-btn description-next next-disabled ml-auto">
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
<button [disabled]="saving" (click)="save(saveAnd.addNew)" *ngIf="(step === maxStep) && !lockStatus && formGroup.get('profile').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}
</button>
</div>
<div class="col-auto pr-0">
<app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDescriptionEditor]="true"></app-form-progress-indication>
</div>
</div>
<div class="col-auto form" id="description-editor-form">
<app-description-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [dmpId]="formGroup.get('dmp').value.id" [availableProfiles]="availableDescriptionTemplates" (formChanged)="formChanged()"></app-description-editor-component>
<app-description-description (visibilityRulesInstance)="visRulesService = $event" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hidden]="this.step === 0" *ngIf="formGroup && formGroup.get('descriptionProfileDefinition')" [form]="this.formGroup.get('descriptionProfileDefinition')" [visibilityRules]="formGroup.get('descriptionProfileDefinition').get('rules').value" [descriptionProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll" (fieldsetFocusChange)="fieldsetIdWithFocus = $event"></app-description-description>
</div>
</div>
</form>
</div>
</div>

67
dmp-frontend/src/app/ui/description/dataset-wizard/description-editor.resolver.ts
View File

@ -1,67 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
import { Description, DescriptionField, DescriptionReference, DescriptionTag, PropertyDefinition } from '@app/core/model/description/description';
import { Dmp, DmpDescriptionTemplate } from '@app/core/model/dmp/dmp';
import { Reference } from '@app/core/model/reference/reference';
import { Tag } from '@app/core/model/tag/tag';
import { DescriptionService } from '@app/core/services/description/description.service';
import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service';
import { BaseEditorResolver } from '@common/base/base-editor.resolver';
import { Guid } from '@common/types/guid';
import { takeUntil, tap } from 'rxjs/operators';
import { nameof } from 'ts-simple-nameof';
@Injectable()
export class DescriptionEditorResolver extends BaseEditorResolver {
constructor(private descriptionService: DescriptionService, private breadcrumbService: BreadcrumbService) {
super();
}
public static lookupFields(): string[] {
return [
...BaseEditorResolver.lookupFields(),
nameof<Description>(x => x.id),
nameof<Description>(x => x.label),
nameof<Description>(x => x.status),
nameof<Description>(x => x.description),
nameof<Description>(x => x.status),
[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.id)].join('.'),
[nameof<Description>(x => x.dmpDescriptionTemplate), nameof<DmpDescriptionTemplate>(x => x.id)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.id)].join('.'),
[nameof<Description>(x => x.properties), nameof<PropertyDefinition>(x => x.fields), nameof<DescriptionField>(x => x.key)].join('.'),
[nameof<Description>(x => x.properties), nameof<PropertyDefinition>(x => x.fields), nameof<DescriptionField>(x => x.value)].join('.'),
[nameof<Description>(x => x.descriptionTags), nameof<DescriptionTag>(x => x.id),].join('.'),
[nameof<Description>(x => x.descriptionTags), nameof<DescriptionTag>(x => x.tag), nameof<Tag>(x => x.label)].join('.'),
[nameof<Description>(x => x.descriptionReferences), nameof<DescriptionReference>(x => x.reference), nameof<Reference>(x => x.id)].join('.'),
[nameof<Description>(x => x.descriptionReferences), nameof<DescriptionReference>(x => x.reference), nameof<Reference>(x => x.label)].join('.'),
[nameof<Description>(x => x.descriptionReferences), nameof<DescriptionReference>(x => x.reference), nameof<Reference>(x => x.type)].join('.'),
[nameof<Description>(x => x.descriptionReferences), nameof<DescriptionReference>(x => x.reference), nameof<Reference>(x => x.reference)].join('.'),
nameof<Description>(x => x.createdAt),
nameof<Description>(x => x.hash),
nameof<Description>(x => x.isActive)
]
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const fields = [
...DescriptionEditorResolver.lookupFields()
];
const id = route.paramMap.get('id');
// const cloneid = route.paramMap.get('cloneid');
if (id != null) {
return this.descriptionService.getSingle(Guid.parse(id), fields).pipe(tap(x => this.breadcrumbService.addIdResolvedValue(x.id?.toString(), x.label)), takeUntil(this._destroyed));
}
//TODO: check this
// else if (cloneid != null) {
// return this.descriptionService.clone(Guid.parse(cloneid), fields).pipe(tap(x => this.breadcrumbService.addIdResolvedValue(x.id?.toString(), x.label)), takeUntil(this._destroyed));
// }
}
}

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

@ -1,84 +1,19 @@
import { NgModule } from '@angular/core';
import { FormattingModule } from '@app/core/formatting.module';
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
import { ExportMethodDialogModule } from '@app/library/export-method-dialog/export-method-dialog.module';
import { RichTextEditorModule } from "@app/library/rich-text-editor/rich-text-editor.module";
import { UrlListingModule } from '@app/library/url-listing/url-listing.module';
// import { DescriptionEditorComponent } from '@app/ui/description/description-wizard/description-editor/description-editor.component';
// import { DescriptionWizardComponent } from '@app/ui/description/description-wizard/description-wizard.component';
// import { DescriptionExternalReferencesEditorComponent } from '@app/ui/description/description-wizard/external-references/description-external-references-editor.component';
// import { DescriptionExternalDataRepositoryDialogEditorComponent } from '@app/ui/description/description-wizard/external-references/editors/data-repository/description-external-data-repository-dialog-editor.component';
// import { DescriptionExternalDescriptionDialogEditorComponent } from '@app/ui/description/description-wizard/external-references/editors/external-description/description-external-description-dialog-editor.component';
// import { DescriptionExternalRegistryDialogEditorComponent } from '@app/ui/description/description-wizard/external-references/editors/registry/description-external-registry-dialog-editor.component';
// import { DescriptionExternalServiceDialogEditorComponent } from '@app/ui/description/description-wizard/external-references/editors/service/description-external-service-dialog-editor.component';
// import { PrefillDescriptionComponent } from "@app/ui/description/description-wizard/prefill-description/prefill-description.component";
import { DescriptionRoutingModule } from '@app/ui/description/description.routing';
// import { DescriptionCriteriaComponent } from '@app/ui/description/listing/criteria/description-criteria.component';
// import { DescriptionUploadDialogue } from '@app/ui/description/listing/criteria/description-upload-dialogue/description-upload-dialogue.component';
import { DescriptionListingComponent } from '@app/ui/description/listing/description-listing.component';
import { DescriptionListingItemComponent } from '@app/ui/description/listing/listing-item/description-listing-item.component';
// import { DescriptionDescriptionFormModule } from '@app/ui/misc/description-description-form/description-description-form.module';
// import { TableOfContentsModule } from '@app/ui/misc/description-description-form/tableOfContentsMaterial/table-of-contents.module';
import { ExternalSourcesModule } from '@app/ui/misc/external-sources/external-sources.module';
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { FormValidationErrorsDialogModule } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.module';
import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
import { DescriptionCopyDialogModule } from './description-copy-dialog/description-copy-dialog.module';
import { DescriptionOverviewModule } from './overview/description-overview.module';
import { DescriptionEditorComponent } from './dataset-wizard/description-editor.component';
// import { FormProgressIndicationModule } from '../misc/description-description-form/components/form-progress-indication/form-progress-indication.module';
// import { DescriptionCopyDialogModule } from './description-wizard/description-copy-dialogue/description-copy-dialogue.module';
// import { DescriptionCriteriaDialogComponent } from './listing/criteria/description-criteria-dialogue/description-criteria-dialog.component';
// import { DescriptionOverviewModule } from './overview/description-overview.module';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
UrlListingModule,
FormattingModule,
ConfirmationDialogModule,
AutoCompleteModule,
ExternalSourcesModule,
ExportMethodDialogModule,
// DescriptionDescriptionFormModule,
// TableOfContentsModule,
AngularStickyThingsModule,
DescriptionRoutingModule,
FormValidationErrorsDialogModule,
// DescriptionCopyDialogModule,
// DescriptionOverviewModule,
// FormProgressIndicationModule,
RichTextEditorModule,
DescriptionCopyDialogModule,
DescriptionOverviewModule,
],
declarations: [
DescriptionListingComponent,
// DescriptionCriteriaComponent,
// DescriptionWizardComponent,
DescriptionEditorComponent,
// DescriptionExternalReferencesEditorComponent,
// DescriptionExternalDataRepositoryDialogEditorComponent,
// DescriptionExternalDescriptionDialogEditorComponent,
// DescriptionExternalRegistryDialogEditorComponent,
// DescriptionExternalServiceDialogEditorComponent,
// DescriptionUploadDialogue,
DescriptionListingItemComponent,
// DescriptionCriteriaDialogComponent,
// PrefillDescriptionComponent
],
exports: [
// DescriptionExternalReferencesEditorComponent,
// DescriptionExternalDataRepositoryDialogEditorComponent,
// DescriptionExternalDescriptionDialogEditorComponent,
// DescriptionExternalRegistryDialogEditorComponent,
// DescriptionExternalServiceDialogEditorComponent,
// DescriptionEditorComponent,
// DescriptionDescriptionFormModule
]
})
export class DescriptionModule { }

135
dmp-frontend/src/app/ui/description/description.routing.ts
View File

@ -1,136 +1,35 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '../../core/auth-guard.service';
// import { DescriptionWizardComponent } from './description-wizard/description-wizard.component';
import { DescriptionListingComponent } from './listing/description-listing.component';
import { DescriptionOverviewComponent } from './overview/description-overview.component';
import { CanDeactivateGuard } from '@app/library/deactivate/can-deactivate.guard';
import { DescriptionEditorComponent } from './dataset-wizard/description-editor.component';
import { AppPermission } from '@app/core/common/enum/permission.enum';
import { DescriptionEditorResolver } from './dataset-wizard/description-editor.resolver';
import { PendingChangesGuard } from '@common/forms/pending-form-changes/pending-form-changes-guard.service';
// import { DescriptionOverviewComponent } from './overview/description-overview.component';
import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service';
const routes: Routes = [
{
path: '',
component: DescriptionListingComponent,
// canActivate: [AuthGuard],
path: 'overview',
loadChildren: () => import('./overview/description-overview.module').then(m => m.DescriptionOverviewModule),
data: {
breadcrumb: true
},
},
{
path: 'dmp/:dmpId',
component: DescriptionListingComponent,
canActivate: [AuthGuard],
data: {
breadcrumb: true
},
},
{
path: 'overview/:id',
component: DescriptionOverviewComponent,
data: {
breadcrumb: true,
title: 'GENERAL.TITLES.DATASET-OVERVIEW'
},
},
{
path: 'publicOverview/:publicId',
component: DescriptionOverviewComponent,
data: {
breadcrumb: true,
title: 'GENERAL.TITLES.DATASET-OVERVIEW'
},
},
{
path: 'edit/:id',
canActivate: [AuthGuard],
component: DescriptionEditorComponent,
canDeactivate: [PendingChangesGuard],
resolve: {
'entity': DescriptionEditorResolver
},
data: {
...BreadcrumbService.generateRouteDataConfiguration({
title: 'BREADCRUMBS.EDIT-DESCRIPTION'
}),
authContext: {
permissions: [AppPermission.EditDescription]
}
}
},
// {
// path: 'new/:dmpId/:dmpSectionIndex',
// component: DescriptionWizardComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumb: true,
// title: 'GENERAL.TITLES.DATASET-NEW'
// },
// canDeactivate:[CanDeactivateGuard]
// },
// {
// path: 'edit/:id/finalize',
// component: DescriptionWizardComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumb: true,
// public: false,
// title: 'GENERAL.TITLES.DATASET-EDIT',
// finalize: true
// },
// canDeactivate:[CanDeactivateGuard]
// },
// {
// path: 'publicEdit/:publicId',
// component: DescriptionWizardComponent,
// //canActivate: [AuthGuard],
// data: {
// public: true,
// title: 'GENERAL.TITLES.DATASET-PUBLIC-EDIT'
// },
// canDeactivate:[CanDeactivateGuard]
// },
// {
// path: 'new',
// component: DescriptionWizardComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumb: true,
// title: 'GENERAL.TITLES.DATASET-NEW'
// },
// canDeactivate:[CanDeactivateGuard]
// },
// {
// path: 'copy/:id',
// component: DescriptionWizardComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumb: true,
// title: 'GENERAL.TITLES.DATASET-COPY'
// },
// canDeactivate:[CanDeactivateGuard]
// },
// {
// path: 'profileupdate/:updateId',
// component: DescriptionWizardComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumb: true,
// title: 'GENERAL.TITLES.DATASET-UPDATE'
// },
// canDeactivate:[CanDeactivateGuard]
// },
{
path: 'edit',
loadChildren: () => import('./editor/description-editor.module').then(m => m.DescriptionEditorModule),
data: {
breadcrumb: true
}
},
{
path: '',
loadChildren: () => import('./listing/description-listing.module').then(m => m.DescriptionListingModule),
data: {
breadcrumb: true
},
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: [DescriptionEditorResolver]
providers: []
})
export class DescriptionRoutingModule { }

58
dmp-frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html Normal file
View File

@ -0,0 +1,58 @@
<form class="description-base-fields-editor" *ngIf="formGroup" [formGroup]="formGroup">
<div class="col-12 intro">
<p>{{'DATASET-EDITOR.TITLE.INTRO' | translate}}</p>
<span>{{'DATASET-EDITOR.TITLE.INTRO-TIP' | translate}}</span>
</div>
<div class="col-12 card">
<!-- Title Field -->
<div class="row">
<div class="col-12">
<div class="heading">1.1 {{'DATASET-EDITOR.FIELDS.TITLE' | translate}}*</div>
<div class="title-form">
<mat-form-field>
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')"> {{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<!-- Description field -->
<div class="row">
<div class="col-12">
<div class="heading">1.2 {{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
<span class="hint">{{'DATASET-EDITOR.HINT.DESCRIPTION' | translate}}</span>
<div class="description-form">
<rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
[wrapperClasses]="'full-width editor ' +
((formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')"
[editable]="!formGroup.get('description').disabled">
</rich-text-editor-component>
<div [class]="(formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div>
</div>
</div>
<!-- External Fields -->
<!-- TODO: add external references -->
<!-- <app-dataset-external-references-editor-component [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component> -->
<!-- Template Field -->
<div class="heading">1.4 {{'DATASET-EDITOR.FIELDS.PROFILE' | translate}}*</div>
<!-- <div class="profile-form">
<mat-form-field>
<mat-select placeholder="{{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" [compareWith]="compareWith" formControlName="profile">
<mat-option *ngFor="let descriptionTemplates of availableDescriptionTemplates" [value]="profile">
<div (click)="checkMinMax($event, descriptionTemplates)">
{{descriptionTemplates.label}}
</div>
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div> -->
</div>
</form>

2
dmp-frontend/src/app/ui/description/dataset-wizard/dataset-editor/dataset-editor.component.scss → dmp-frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
View File

@ -1,4 +1,4 @@
.dataset-editor {
.description-base-fields-editor {
.intro {
text-align: left;
font-weight: 400;

90
dmp-frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.ts Normal file
View File

@ -0,0 +1,90 @@
import { Component, Input } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
import { BaseComponent } from '@common/base/base.component';
@Component({
selector: 'app-description-base-fields-editor-component',
templateUrl: 'description-base-fields-editor.component.html',
styleUrls: ['./description-base-fields-editor.component.scss']
})
export class DescriptionBaseFieldsEditorComponent extends BaseComponent {
@Input() formGroup: UntypedFormGroup;
@Input() availableDescriptionTemplates: DescriptionTemplate[];
@Input() dmpId: string;
viewOnly = false; //TODO: not used.
constructor(
) { super(); }
checkMinMax(event, profile: DescriptionTemplate) {
//TODO: Add logic for validating description templates.
// event.stopPropagation();
// const dmpSectionIndex = this.formGroup.get('dmpSectionIndex').value;
// const blueprintId = this.formGroup.get('dmp').value.profile.id;
// this.dmpBlueprintService.getSingle(blueprintId,
// [
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.id)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.label)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.description)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.ordinal)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.hasTemplates)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.id)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.category)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.dataType)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.systemFieldType)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.label)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.placeholder)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.description)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.required)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.fields), nameof<FieldInSection>(x => x.ordinal)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.id)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.descriptionTemplateId)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.label)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.minMultiplicity)].join('.'),
// [nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.maxMultiplicity)].join('.'),
// ]
// )
// .pipe(takeUntil(this._destroyed))
// .subscribe(result => {
// const section = result.definition.sections[dmpSectionIndex];
// if(section.hasTemplates){
// const foundTemplate = section.descriptionTemplates.find(template => template.descriptionTemplateId === Guid.parse(profile.id));
// if (foundTemplate !== undefined) {
// let count = 0;
// if(this.formGroup.get('dmp').value.datasets != null){
// for(let dataset of this.formGroup.get('dmp').value.datasets){
// if(dataset.dmpSectionIndex === dmpSectionIndex && dataset.profile.id === foundTemplate.descriptionTemplateId){
// count++;
// }
// }
// if(count === foundTemplate.maxMultiplicity){
// this.dialog.open(PopupNotificationDialogComponent, {
// data: {
// title: this.language.instant('DATASET-EDITOR.MAX-DESCRIPTION-DIALOG.TITLE'),
// message: this.language.instant('DATASET-EDITOR.MAX-DESCRIPTION-DIALOG.MESSAGE')
// }, maxWidth: '30em'
// });
// }
// else{
// this.formGroup.get('profile').setValue(profile);
// }
// }
// }
// else {
// this.formGroup.get('profile').setValue(profile);
// }
// }
// else {
// this.formGroup.get('profile').setValue(profile);
// }
// });
}
public compareWith(object1: any, object2: any) {
return object1 && object2 && object1.id === object2.id;
}
}

143
dmp-frontend/src/app/ui/description/editor/description-editor.component.html Normal file
View File

@ -0,0 +1,143 @@
<div class="main-content">
<div class="container-fluid description-editor">
<form *ngIf="formGroup" [formGroup]="formGroup">
<!-- <form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()"> -->
<!-- Description Header -->
<div class="fixed-editor-header">
<div class="card description-editor-header">
<div class="col">
<div class="row">
<div class="col info">
<ng-container *ngIf="!viewOnly else viewOnlyTemplate">
<div *ngIf="isNew" class="description-title">{{'DESCRIPTION-EDITOR.TITLE.ADD-DATASET' | translate}}</div>
<div *ngIf="!isNew" class="description-title">{{'DESCRIPTION-EDITOR.TITLE.EDIT-DESCRIPTION' | translate}}</div>
<div class="description-subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="description-changes">({{'DESCRIPTION-EDITOR.CHANGES' | translate}})</span></div>
</ng-container>
<ng-template #viewOnlyTemplate>
<div class="description-title">{{'DESCRIPTION-EDITOR.TITLE.PREVIEW-DATASET' | translate}}</div>
</ng-template>
<div class="d-flex flex-direction-row dmp-info">
<div class="col-auto description-to-dmp">{{'DESCRIPTION-EDITOR.TOOLTIP.TO-DMP' | translate}}</div>
<div class="dmp-title p-0">:&nbsp;{{ item.dmp.label }}</div>
<div class="col-auto d-flex align-items-center">
<a [routerLink]="['/overview/' + item.dmp.id]" target="_blank" class="pointer open-in-new-icon">
<mat-icon class="size-18">open_in_new</mat-icon>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-auto d-flex align-items-center">
<button *ngIf="formGroup.get('id').value" [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-raised-button class="description-export-btn" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'DATASET-EDITOR.ACTIONS.DISABLED-EXPORT' | translate">
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
<mat-icon [disabled]="isDirty()" style="width: 14px;">expand_more</mat-icon>
</button>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF(formGroup.get('id').value)">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDOCX(formGroup.get('id').value)">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXML(formGroup.get('id').value)">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button>
</mat-menu>
</div>
<mat-divider *ngIf="formGroup.get('id').value && (!viewOnly || (!lockStatus && !viewOnly) || lockStatus || (hasReversableStatus() && !lockStatus))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
<div *ngIf="isDirty() && !viewOnly" class="col-auto d-flex align-items-center pr-0">
<button [disabled]="saving" type="button" mat-raised-button class="description-discard-btn" (click)="discardChanges()">
{{'DESCRIPTION-EDITOR.ACTIONS.DISCARD' | translate}}
</button>
</div>
<div class="col-auto d-flex align-items-center">
<button [disabled]="saving" *ngIf="!lockStatus && !viewOnly" mat-raised-button class="description-save-btn mr-2" type="button">
<span class="d-flex flex-row row">
<span (click)="!saving?save():null" class="col">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate }}</span>
<mat-divider [vertical]="true"></mat-divider>
<span *ngIf="!saving" class="align-items-center justify-content-center col-4 d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menu">
<mat-icon>expand_more</mat-icon>
</span>
<span *ngIf="saving" class="align-items-center justify-content-center col-4 d-flex">
<mat-icon>expand_more</mat-icon>
</span>
</span>
</button>
<mat-menu #menu="matMenu">
<button [disabled]="saving" mat-menu-item (click)="save(saveAnd.close)" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
<button [disabled]="saving" mat-menu-item (click)="save(saveAnd.addNew)" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-ADD' | translate }}</button>
<button [disabled]="saving" mat-menu-item (click)="save()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
</mat-menu>
<button [disabled]="saving" *ngIf="!lockStatus && !viewOnly" mat-raised-button class="description-save-btn mr-2" type="button" (click)="saveFinalize()">{{ 'DESCRIPTION-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
<button [disabled]="saving" *ngIf="lockStatus" mat-raised-button disabled class="description-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
<button [disabled]="saving" *ngIf="hasReversableStatus() && !lockStatus" mat-raised-button class="description-save-btn mr-2" (click)="reverse()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.REVERSE' | translate }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row editor-content">
<div class="col-auto description-stepper">
<div class="stepper-back d-flex flex-direction-row">
<div class="d-flex align-items-center pr-2 back-to-dmp" (click)="backToDmp()">
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
<span class="pointer">{{'DESCRIPTION-EDITOR.ACTIONS.BACK-TO' | translate}}</span>
</div>
<div class="col-auto dmp-label ml-3">{{'DESCRIPTION-EDITOR.TOOLTIP.DMP' | translate}}</div>
</div>
<div class="stepper-title">{{'DESCRIPTION-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options" id="stepper-options">
<div class="col stepper-list">
<div (click)="table0fContents.onToCentrySelected()" *ngIf="!descriptionInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">0. {{'DESCRIPTION-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
<div (click)="table0fContents.onToCentrySelected()" *ngIf="descriptionInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DESCRIPTION-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
<div class="row toc-pane-container" #boundary>
<div #spacer></div>
<app-table-of-contents [visibilityRulesService]="visibilityRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step > 0" [propertiesFormGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)"></app-table-of-contents>
</div>
</div>
</div>
<div class="stepper-actions">
<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
<span class="material-icons">chevron_left</span>
<div>{{'DESCRIPTION-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
</div>
<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn description-next ml-auto" (click)="nextStep()">
<div>{{'DESCRIPTION-EDITOR.STEPPER.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
<div *ngIf="!formGroup.get('descriptionTemplateId').value" mat-raised-button type="button" class="col-auto stepper-btn description-next next-disabled ml-auto">
<div>{{'DESCRIPTION-EDITOR.STEPPER.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
<button [disabled]="saving" (click)="save(saveAnd.addNew)" *ngIf="(step === maxStep) && !lockStatus && formGroup.get('descriptionTemplateId').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-ADD' | translate }}
</button>
</div>
<div class="col-auto pr-0">
<app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDescriptionEditor]="true"></app-form-progress-indication>
</div>
</div>
<div class="col-auto form" id="description-editor-form">
<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [dmpId]="item.dmp.id" [availableDescriptionTemplates]="availableDescriptionTemplates" (formChanged)="formChanged()"></app-description-base-fields-editor-component>
<app-description-form
*ngIf="formGroup && formGroup.get('properties')"
[propertiesFormGroup]="formGroup.get('properties')"
[descriptionTemplate]="item.descriptionTemplate"
[visibilityRulesService]="visibilityRulesService"
[TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX"
[hidden]="this.step === 0"
[linkToScroll]="linkToScroll"
(fieldsetFocusChange)="fieldsetIdWithFocus = $event"></app-description-form>
</div>
</div>
</form>
</div>
</div>

0
dmp-frontend/src/app/ui/description/dataset-wizard/description-editor.component.scss → dmp-frontend/src/app/ui/description/editor/description-editor.component.scss
View File

649
dmp-frontend/src/app/ui/description/dataset-wizard/description-editor.component.ts → dmp-frontend/src/app/ui/description/editor/description-editor.component.ts
View File

@ -1,27 +1,11 @@
import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { UntypedFormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Router } from '@angular/router';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { DescriptionStatus } from '@app/core/common/enum/description-status';
import { DmpStatus } from '@app/core/common/enum/dmp-status';
import { SaveType } from '@app/core/common/enum/save-type';
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
import { DmpModel } from '@app/core/model/dmp/dmp';
import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
import { LockModel } from '@app/core/model/lock/lock.model';
import { UserInfoListingModel } from '@app/core/model/user/user-info-listing';
import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
import { RequestItem } from '@app/core/query/request-item';
import { AuthService } from '@app/core/services/auth/auth.service';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
import { DmpService } from '@app/core/services/dmp/dmp.service';
import {
ExternalSourcesConfigurationService
} from '@app/core/services/external-sources/external-sources-configuration.service';
import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
import { LockService } from '@app/core/services/lock/lock.service';
import { MatomoService } from '@app/core/services/matomo/matomo-service';
import {
@ -29,37 +13,34 @@ import {
UiNotificationService
} from '@app/core/services/notification/ui-notification-service';
import { FileUtils } from '@app/core/services/utilities/file-utils.service';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component';
import { PopupNotificationDialogComponent } from '@app/library/notification/popup/popup-notification.component';
// import { IBreadCrumbComponent } from '@app/ui/misc/breadcrumb/definition/IBreadCrumbComponent';
// import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
import { FormService } from '@common/forms/form-service';
import {
FormValidationErrorsDialogComponent
} from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { Guid } from '@common/types/guid';
import { TranslateService } from '@ngx-translate/core';
import * as FileSaver from 'file-saver';
import { Observable, interval, of as observableOf } from 'rxjs';
import { catchError, debounceTime, filter, map, takeUntil } from 'rxjs/operators';
import { DescriptionEditorService } from './description-editor.service';
import { BaseEditor } from '@common/base/base-editor';
import { DescriptionEditorModel } from './description-editor.model';
import { Description, DescriptionPersist } from '@app/core/model/description/description';
import { DatePipe } from '@angular/common';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { AppPermission } from '@app/core/common/enum/permission.enum';
import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
import { QueryParamsService } from '@app/core/services/utilities/query-params.service';
import { FilterService } from '@common/modules/text-filter/filter-service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';
import { Description, DescriptionPersist } from '@app/core/model/description/description';
import { DescriptionService } from '@app/core/services/description/description.service';
import { LoggingService } from '@app/core/services/logging/logging-service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { QueryParamsService } from '@app/core/services/utilities/query-params.service';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
import { BaseEditor } from '@common/base/base-editor';
import { FormService } from '@common/forms/form-service';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
import { FilterService } from '@common/modules/text-filter/filter-service';
import { Guid } from '@common/types/guid';
import { TranslateService } from '@ngx-translate/core';
import { map, takeUntil } from 'rxjs/operators';
import { DescriptionEditorModel } from './description-editor.model';
import { DescriptionEditorResolver } from './description-editor.resolver';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { DatePipe } from '@angular/common';
import { DescriptionEditorService } from './description-editor.service';
import { ToCEntry } from './table-of-contents/models/toc-entry';
import { TableOfContentsComponent } from './table-of-contents/table-of-contents.component';
import { ToCEntryType } from './table-of-contents/models/toc-entry-type.enum';
@Component({
selector: 'app-description-editor-component',
@ -72,6 +53,7 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
isNew = true;
isDeleted = false;
formGroup: UntypedFormGroup = null;
item: Description;
// showInactiveDetails = false;
// selectedSystemFields: Array<DescriptionSystemFieldType> = [];
// DescriptionSectionFieldCategory = DescriptionSectionFieldCategory;
@ -89,6 +71,14 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
// popupItemActionIcon: 'visibility'
// };
// hasChanges = false;
viewOnly = false;
lockStatus: Boolean;
@ViewChild('table0fContents') table0fContents: TableOfContentsComponent;
step: number = 0;
protected get canDelete(): boolean {
return !this.isDeleted && !this.isNew && this.hasPermission(this.authService.permissionEnum.DeleteDescription);
}
@ -126,14 +116,428 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
private descriptionEditorService: DescriptionEditorService,
private fileUtils: FileUtils,
private matomoService: MatomoService,
private dmpService: DmpService
private dmpService: DmpService,
private lockService: LockService,
public visibilityRulesService: VisibilityRulesService
) {
super(dialog, language, formService, router, uiNotificationService, httpErrorHandlingService, filterService, datePipe, route, queryParamsService);
}
ngOnInit(): void {
this.matomoService.trackPageView('Admin: DMP Blueprints');
this.matomoService.trackPageView('Description Editor');
super.ngOnInit();
// const params = this.route.snapshot.params;
// const queryParams = this.route.snapshot.queryParams;
// const data: any = this.route.snapshot.data;
// this.init();
this.route.params
.pipe(takeUntil(this._destroyed))
.subscribe((params: Params) => {
const isPublicDescription = params['public'];
const itemId = params['id'];
const newDmpId = params['newDmpId'];
// const publicId = params['publicId'];
// this.dmpId = params['dmpId'];
// this.dmpSectionIndex = parseInt(params['dmpSectionIndex']);
// this.newDmpId = queryParams['newDmpId'];
// this.publicId = params['publicId'];
// this.profileUpdateId = params['updateId'];
// this.finalize = data.finalize;
// this.itemId ? this.downloadDocumentId = this.itemId : this.downloadDocumentId = this.publicId
this.viewOnly = isPublicDescription;
// if (itemId != null) {
// this.isNew = false;
// this.isPublicView = false;
// this.descriptionService.getSingle(itemId, this.lookupFields())
// .pipe(takeUntil(this._destroyed))
// .subscribe(data => {
// this.description = data;
// this.researchers = this.referenceService.getReferencesForTypes(this.description?.dmp?.dmpReferences, [ReferenceType.Researcher]);
// // this.users = this.description.dmp.users;
// this.checkLockStatus(this.description.id);
// this.setIsUserOwner();
// }, (error: any) => {
// if (error.status === 404) {
// return this.onFetchingDeletedCallbackError('/descriptions/');
// }
// if (error.status === 403) {
// return this.onFetchingForbiddenCallbackError('/descriptions/');
// }
// });
// }
// else if (publicId != null) {
// this.isNew = false;
// this.isFinalized = true;
// this.isPublicView = true;
// this.descriptionService.getPublicSingle(publicId, this.lookupFields())
// .pipe(takeUntil(this._destroyed))
// .subscribe(data => {
// this.description = data;
// this.researchers = this.referenceService.getReferencesForTypes(this.description?.dmp?.dmpReferences, [ReferenceType.Researcher]);
// // this.users = this.description.dmp.users;
// // const breadCrumbs = [];
// // breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.PUBLIC DESCRIPTIONS'), url: "/explore" });
// // breadCrumbs.push({ parentComponentName: 'DescriptionListingComponent', label: this.description.label, url: '/descriptions/overview/public/' + this.description.id });
// // this.breadCrumbs = observableOf(breadCrumbs);
// }, (error: any) => {
// if (error.status === 404) {
// return this.onFetchingDeletedCallbackError('/explore-descriptions');
// }
// if (error.status === 403) {
// return this.onFetchingForbiddenCallbackError('/explore-descriptions');
// }
// });
// }
if (itemId != null && newDmpId == null) {
this.isNew = false;
this.lockService.checkLockStatus(itemId).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => {
this.lockStatus = lockStatus;
if (this.item.status === DescriptionStatus.Finalized || lockStatus) {
this.formGroup.disable();
this.viewOnly = true;
}
if (lockStatus) {
this.dialog.open(PopupNotificationDialogComponent, {
data: {
title: this.language.instant('DATASET-WIZARD.LOCKED.TITLE'),
message: this.language.instant('DATASET-WIZARD.LOCKED.MESSAGE')
}, maxWidth: '30em'
});
}
if (!lockStatus && !isNullOrUndefined(this.authService.currentAccountIsAuthenticated())) {
//TODO: lock it.
// const lockedBy: UserInfoListingModel = {
// email: this.authService.getUserProfileEmail(),
// id: this.authService.userId()?.toString(),
// name: this.authService.getPrincipalName(),
// role: 0 //TODO
// //role: this.authService.getRoles()?.at(0)
// }
// this.lock = new LockModel(data.id, lockedBy);
// this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
// this.lock.id = Guid.parse(result);
// interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock());
// });
}
// this.loadDescriptionProfiles();
// this.registerFormListeners();
});
}
// if (this.itemId != null && this.newDmpId == null) {
// this.isNew = false;
// this.descriptionService.getSingle(this.itemId)
// .pipe(takeUntil(this._destroyed))
// .subscribe(data => {
// this.lockService.checkLockStatus(data.id).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => {
// this.lockStatus = lockStatus;
// this.descriptionModel = new DescriptionEditorModel().fromModel(data);
// this.dmpSectionIndex = this.descriptionModel.dmpSectionIndex;
// this.needsUpdate();
// // this.breadCrumbs = observableOf([
// // {
// // parentComponentName: null,
// // label: this.descriptionModel.label,
// // url: '/descriptions/edit/' + this.descriptionModel.id,
// // notFoundResolver: [
// // {
// // parentComponentName: null,
// // label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS').toUpperCase(),
// // url: '/descriptions'
// // },
// // ]
// // }]);
// this.formGroup = this.descriptionModel.buildForm();
// let profiles = this.descriptionModel.dmp.profiles.filter(profile => profile.data.dmpSectionIndex.includes(this.descriptionModel.dmpSectionIndex));
// for (var profile of profiles) {
// this.availableDescriptionTemplates.push({ id: profile.descriptionTemplateId, label: profile.label, description: "" })
// }
// this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
// this.editMode = this.descriptionModel.status === DescriptionStatus.Draft;
// if (this.descriptionModel.status === DescriptionStatus.Finalized || lockStatus) {
// this.formGroup.disable();
// this.viewOnly = true;
// }
// if (!lockStatus && !isNullOrUndefined(this.authService.currentAccountIsAuthenticated())) {
// const lockedBy: UserInfoListingModel = {
// email: this.authService.getUserProfileEmail(),
// id: this.authService.userId()?.toString(),
// name: this.authService.getPrincipalName(),
// role: 0 //TODO
// //role: this.authService.getRoles()?.at(0)
// }
// this.lock = new LockModel(data.id, lockedBy);
// this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
// this.lock.id = Guid.parse(result);
// interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock());
// });
// }
// // if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Description edit like DMP.
// this.loadDescriptionProfiles();
// this.registerFormListeners();
// if (lockStatus) {
// this.dialog.open(PopupNotificationDialogComponent, {
// data: {
// title: this.language.instant('DATASET-WIZARD.LOCKED.TITLE'),
// message: this.language.instant('DATASET-WIZARD.LOCKED.MESSAGE')
// }, maxWidth: '30em'
// });
// }
// if (this.finalize && !this.lockStatus && !this.viewOnly) {
// setTimeout(() => {
// this.saveFinalize();
// }, 0);
// }
// // this.availableProfiles = this.descriptionModel.dmp.profiles;
// });
// },
// error => {
// switch (error.status) {
// case 403:
// this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-WIZARD.MESSAGES.DATASET-NOT-ALLOWED'), SnackBarNotificationLevel.Error);
// break;
// case 404:
// this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-WIZARD.MESSAGES.DATASET-NOT-FOUND'), SnackBarNotificationLevel.Error);
// break;
// default:
// this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.ERRORS.HTTP-REQUEST-ERROR'), SnackBarNotificationLevel.Error);
// }
// this.router.navigate(['/descriptions/']);
// return observableOf(null);
// });
// } else if (this.dmpId != null) {
// this.isNew = true;
// this.dmpService.getSingle(this.dmpId).pipe(map(data => data as DmpModel))
// .pipe(takeUntil(this._destroyed))
// .subscribe(data => {
// this.descriptionModel = new DescriptionEditorModel();
// setTimeout(() => {
// this.descriptionModel.dmp = data;
// this.descriptionModel.dmpSectionIndex = this.dmpSectionIndex;
// this.formGroup = this.descriptionModel.buildForm();
// let profiles = this.descriptionModel.dmp.profiles.filter(profile => profile.data.dmpSectionIndex.includes(this.dmpSectionIndex));
// for (var profile of profiles) {
// this.availableDescriptionTemplates.push({ id: profile.descriptionTemplateId, label: profile.label, description: "" })
// }
// this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
// this.editMode = this.descriptionModel.status === DescriptionStatus.Draft;
// this.formGroup.get('dmp').disable();
// const dialogRef = this.dialog.open(PrefillDescriptionComponent, {
// width: '590px',
// minHeight: '200px',
// restoreFocus: false,
// data: {
// availableProfiles: this.availableDescriptionTemplates,
// descriptionFormGroup: this.formGroup
// },
// panelClass: 'custom-modalbox'
// });
// dialogRef.afterClosed().subscribe(result => {
// if (result) {
// this.descriptionModel = this.descriptionModel.fromModel(result);
// this.descriptionModel.dmp = data;
// this.descriptionModel.dmpSectionIndex = this.dmpSectionIndex;
// this.formGroup = this.descriptionModel.buildForm();
// this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
// this.formGroup.get('dmp').disable();
// this.loadDescriptionProfiles();
// this.registerFormListeners();
// }
// })
// this.loadDescriptionProfiles();
// this.registerFormListeners();
// // this.availableProfiles = data.profiles;
// // this.breadCrumbs = observableOf([
// // {
// // parentComponentName: null,
// // label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'),
// // url: '/descriptions',
// // notFoundResolver: [
// // // {
// // // parentComponentName: null,
// // // label: this.descriptionModel.dmp.grant.label,
// // // url: '/grants/edit/' + this.descriptionModel.dmp.grant.id
// // // },
// // {
// // parentComponentName: null,
// // label: this.descriptionModel.dmp.label,
// // url: '/plans/edit/' + this.descriptionModel.dmp.id,
// // }]
// // }]);
// });
// });
// } else if (this.newDmpId != null) {
// this.isNew = false;
// this.isCopy = true;
// this.descriptionService.getSingle(this.itemId)
// .pipe(takeUntil(this._destroyed))
// .subscribe(data => {
// this.lockService.checkLockStatus(data.id).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => {
// this.lockStatus = lockStatus;
// this.descriptionModel = new DescriptionEditorModel().fromModel(data);
// this.dmpSectionIndex = this.descriptionModel.dmpSectionIndex;
// this.descriptionModel.status = 0;
// this.formGroup = this.descriptionModel.buildForm();
// this.formGroup.get('id').setValue(null);
// this.dmpService.getSingleNoDescriptions(this.newDmpId).pipe(map(data => data as DmpModel))
// .pipe(takeUntil(this._destroyed))
// .subscribe(data => {
// setTimeout(() => {
// this.descriptionModel.dmp = data;
// this.formGroup.get('dmp').setValue(this.descriptionModel.dmp);
// this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
// this.loadDescriptionProfiles();
// // this.breadCrumbs = observableOf([
// // {
// // parentComponentName: null,
// // label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'),
// // url: '/descriptions',
// // notFoundResolver: [
// // // {
// // // parentComponentName: null,
// // // label: this.descriptionModel.dmp.grant.label,
// // // url: '/grants/edit/' + this.descriptionModel.dmp.grant.id
// // // },
// // {
// // parentComponentName: null,
// // label: this.descriptionModel.dmp.label,
// // url: '/plans/edit/' + this.descriptionModel.dmp.id,
// // }
// // ]
// // }]);
// });
// });
// this.editMode = this.descriptionModel.status === DescriptionStatus.Draft;
// if (this.descriptionModel.status === DescriptionStatus.Finalized || lockStatus) {
// this.formGroup.disable();
// this.viewOnly = true;
// }
// if (!lockStatus && !isNullOrUndefined(this.authService.currentAccountIsAuthenticated())) {
// const lockedBy: UserInfoListingModel = {
// email: this.authService.getUserProfileEmail(),
// id: this.authService.userId()?.toString(),
// name: this.authService.getPrincipalName(),
// role: 0 //TODO
// //role: this.authService.getRoles()?.at(0)
// }
// this.lock = new LockModel(data.id, lockedBy);
// this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
// this.lock.id = Guid.parse(result);
// interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock());
// });
// }
// // if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Description edit like DMP.
// this.loadDescriptionProfiles();
// // this.availableProfiles = data.dmp.profiles;
// })
// });
// } else if (this.publicId != null) { // For Finalized -> Public Descriptions
// this.isNew = false;
// this.descriptionService.getSinglePublic(this.publicId)
// .pipe(takeUntil(this._destroyed)).pipe(
// catchError((error: any) => {
// this.uiNotificationService.snackBarNotification(error.error.message, SnackBarNotificationLevel.Error);
// this.router.navigate(['/descriptions/publicEdit/' + this.publicId]);
// return observableOf(null);
// }))
// .subscribe(data => {
// if (data) {
// this.descriptionModel = new DescriptionEditorModel().fromModel(data);
// this.formGroup = this.descriptionModel.buildForm();
// this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
// this.formGroup.disable();
// this.viewOnly = true;
// this.editMode = this.descriptionModel.status === DescriptionStatus.Draft;
// this.formGroup.get('dmp').setValue(this.descriptionModel.dmp);
// const breadcrumbs = [];
// breadcrumbs.push({
// parentComponentName: null,
// label: this.language.instant('NAV-BAR.PUBLIC DATASETS'),
// url: '/explore-descriptions'
// });
// breadcrumbs.push({
// parentComponentName: null,
// label: this.descriptionModel.label,
// url: '/descriptions/publicEdit/' + this.descriptionModel.id
// });
// // this.breadCrumbs = observableOf(breadcrumbs);
// }
// });
// this.publicMode = true;
// } else if (this.profileUpdateId != null) {
// this.descriptionService.updateDescriptionProfile(this.profileUpdateId)
// .pipe(takeUntil(this._destroyed))
// .subscribe(data => {
// this.descriptionModel = new DescriptionEditorModel().fromModel(data);
// this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
// this.needsUpdate();
// // this.breadCrumbs = observableOf([
// // {
// // parentComponentName: null,
// // label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'),
// // url: '/descriptions',
// // notFoundResolver: [
// // // {
// // // parentComponentName: null,
// // // label: this.descriptionModel.dmp.grant.label,
// // // url: '/grants/edit/' + this.descriptionModel.dmp.grant.id
// // // },
// // {
// // parentComponentName: null,
// // label: this.descriptionModel.dmp.label,
// // url: '/plans/edit/' + this.descriptionModel.dmp.id,
// // },
// // ]
// // }]);
// this.formGroup = this.descriptionModel.buildForm();
// this.editMode = this.descriptionModel.status === DescriptionStatus.Draft;
// if (this.descriptionModel.status === DescriptionStatus.Finalized) {
// this.formGroup.disable();
// this.viewOnly = true;
// }
// // if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Description edit like DMP.
// this.loadDescriptionProfiles();
// });
// } else {
// this.descriptionModel = new DescriptionEditorModel();
// this.formGroup = this.descriptionModel.buildForm();
// this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
// this.editMode = this.descriptionModel.status === DescriptionStatus.Draft;
// if (this.descriptionModel.status === DescriptionStatus.Finalized) {
// this.formGroup.disable();
// this.viewOnly = true;
// }
// //if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Description edit like DMP.
// this.registerFormListeners();
// this.dmpValueChanged(null);
// // this.breadCrumbs = observableOf([
// // {
// // parentComponentName: null,
// // label: this.language.instant('DATASET-LISTING.ACTIONS.CREATE-NEW').toUpperCase(),
// // url: '/descriptions/new/'
// // }]);
// }
});
}
getItem(itemId: Guid, successFunction: (item: Description) => void) {
@ -148,6 +552,7 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
prepareForm(data: Description) {
try {
this.editorModel = data ? new DescriptionEditorModel().fromModel(data) : new DescriptionEditorModel();
this.item = data;
this.isDeleted = data ? data.isActive === IsActive.Inactive : false;
this.buildForm();
} catch (error) {
@ -158,6 +563,8 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
buildForm() {
this.formGroup = this.editorModel.buildForm(null, this.isDeleted || !this.authService.hasPermission(AppPermission.EditDescription));
this.visibilityRulesService.buildVisibilityRules(this.visibilityRulesService.getVisibilityRulesFromDescriptionTempalte(this.item.descriptionTemplate), this.formGroup);
// this.selectedSystemFields = this.selectedSystemFieldDisabled();
this.descriptionEditorService.setValidationErrorModel(this.editorModel.validationErrorModel);
if (this.editorModel.status == DescriptionStatus.Finalized) {
@ -231,6 +638,148 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
this.formService.validateAllFormFields(this.formGroup);
}
//
//
// Misc
//
//
isDirty() {
return this.formGroup.dirty; //TODO: check if needed //&& this.hasChanges; // do we need this.formGroup.dirty
}
hasReversableStatus(): boolean {
if (this.item?.dmp) {
return (this.item.dmp.status == DmpStatus.Draft && this.formGroup.get('status').value == DescriptionStatus.Finalized);
} else {
return false;
}
}
descriptionInfoValid(): boolean {
return this.formGroup.get('label') && this.formGroup.get('label').valid && this.formGroup.get('descriptionTemplateId') && this.formGroup.get('descriptionTemplateId').valid;
}
//
//
// Table of Contents
//
//
public changeStep(selected: ToCEntry = null, execute: boolean = true) {
if (execute) {
if (selected) {
let fieldSet = this.getFirstFieldSet(selected);
let index = this.visibleFieldSets.findIndex(entry => entry.id === fieldSet.id);
this.step = index + (selected.type === ToCEntryType.FieldSet ? 1 : 0.5);
} else {
this.step = 0;
this.resetScroll();
}
}
}
getFirstFieldSet(entry: ToCEntry): ToCEntry {
if (entry.type === ToCEntryType.FieldSet && !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === entry.id.toString())) {
return entry;
} else {
let subEntries = entry.subEntries.filter(subEntry => !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === subEntry.id.toString()));
if (subEntries.length > 0) {
return this.getFirstFieldSet(subEntries[0]);
} else {
return null;
}
}
}
private resetScroll() {
document.getElementById('description-editor-form').scrollTop = 0;
}
get visibleFieldSets(): ToCEntry[] {
let fieldSets = [];
let arrays = this.table0fContents ? this.table0fContents.tocentries.
filter(entry => !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === entry.id.toString())).map(entry => {
return this.getEntryVisibleFieldSets(entry);
})
: [];
arrays.forEach(array => {
fieldSets = fieldSets.concat(array);
});
return fieldSets;
}
getEntryVisibleFieldSets(entry: ToCEntry): ToCEntry[] {
let fieldSets = [];
if (entry.type === ToCEntryType.FieldSet && !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === entry.id.toString())) {
fieldSets.push(entry);
} else if (entry.type !== ToCEntryType.FieldSet) {
entry.subEntries.forEach(subEntry => {
fieldSets = fieldSets.concat(this.getEntryVisibleFieldSets(subEntry));
});
}
return fieldSets;
}
// registerFormListeners() {
// // const dmpSubscription =
// this.formGroup.get('dmp').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// this.dmpValueChanged(x);
// });
// // const profileSubscription =
// this.formGroup.get('profile').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// if (x) {
// this.showtocentriesErrors = false;
// this.descriptionProfileValueChanged(x.id);
// this.formChanged();
// }
// });
// // const labelSubscription =
// this.formGroup.get('label').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// this.formChanged();
// });
// // const descriptionSubscription =
// this.formGroup.get('description').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// this.formChanged();
// });
// // const uriSubscription =
// this.formGroup.get('uri').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// this.formChanged();
// });
// // const tagsSubscription =
// this.formGroup.get('tags').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// this.formChanged();
// });
// if (this.formGroup.get('descriptionProfileDefinition')) {
// // const descriptionProfileDefinitionSubscription =
// this.formGroup.get('descriptionProfileDefinition').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// this.formChanged();
// });
// // this._listenersSubscription.add(descriptionProfileDefinitionSubscription);
// }
// // this._listenersSubscription.add(dmpSubscription);
// // this._listenersSubscription.add(profileSubscription);
// // this._listenersSubscription.add(labelSubscription);
// // this._listenersSubscription.add(descriptionSubscription);
// // this._listenersSubscription.add(uriSubscription);
// // this._listenersSubscription.add(tagsSubscription);
// }
// //
// //
// // Sections
@ -1167,13 +1716,7 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
// }
// hasReversableStatus(): boolean {
// if (this.formGroup.get('dmp').value) {
// return (this.formGroup.get('dmp').value.status == DmpStatus.Draft && this.formGroup.get('status').value == DescriptionStatus.Finalized);
// } else {
// return false;
// }
// }
// hasNotReversableStatus(): boolean {
// if (this.formGroup.get('dmp').value && !this.publicMode) {
@ -1664,9 +2207,7 @@ export class DescriptionEditorComponent extends BaseEditor<DescriptionEditorMode
// this.router.navigate(['/plans', 'edit', id]);
// }
// descriptionInfoValid(): boolean {
// return this.formGroup.get('label') && this.formGroup.get('label').valid && this.formGroup.get('profile') && this.formGroup.get('profile').valid;
// }
// getLinks(currentLinks: Link[]) {
// this.links = currentLinks;

32
dmp-frontend/src/app/ui/description/dataset-wizard/description-editor.model.ts → dmp-frontend/src/app/ui/description/editor/description-editor.model.ts
View File

@ -106,17 +106,27 @@ export class DescriptionPropertyDefinitionEditorModel implements PropertyDefinit
});
}
return this.formBuilder.group({
fields: this.formBuilder.array(
(this.fields ?? []).map(
(item, index) => new DescriptionFieldEditorModel(
this.validationErrorModel
).fromModel(item).buildForm({
rootPath: `${rootPath}fields[${index}].`
}), context.getValidation('fields')
)
),
});
const formGroup = this.formBuilder.group({});
(this.fields ?? []).map(
(item, index) => formGroup.addControl(item.key, new DescriptionFieldEditorModel(
this.validationErrorModel
).fromModel(item).buildForm({
rootPath: `${rootPath}fields[${index}].`
})), context.getValidation('fields')
)
return formGroup;
// return this.formBuilder.group({
// fields: this.formBuilder.array(
// (this.fields ?? []).map(
// (item, index) => new DescriptionFieldEditorModel(
// this.validationErrorModel
// ).fromModel(item).buildForm({
// rootPath: `${rootPath}fields[${index}].`
// }), context.getValidation('fields')
// )
// )
// });
}
static createValidationContext(params: {

37
dmp-frontend/src/app/ui/description/editor/description-editor.module.ts Normal file
View File

@ -0,0 +1,37 @@
import { NgModule } from '@angular/core';
import { FormattingModule } from '@app/core/formatting.module';
import { UrlListingModule } from '@app/library/url-listing/url-listing.module';
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { DescriptionBaseFieldsEditorComponent } from './description-base-fields-editor/description-base-fields-editor.component';
import { DescriptionEditorComponent } from './description-editor.component';
import { DescriptionEditorRoutingModule } from './description-editor.routing';
import { DescriptionFormModule } from './description-form/description-form.module';
import { VisibilityRulesService } from './description-form/visibility-rules/visibility-rules.service';
import { DescriptionFormProgressIndicationModule } from './form-progress-indication/form-progress-indication.module';
import { TableOfContentsModule } from './table-of-contents/table-of-contents.module';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
UrlListingModule,
FormattingModule,
ConfirmationDialogModule,
TableOfContentsModule,
DescriptionFormProgressIndicationModule,
DescriptionFormModule,
DescriptionEditorRoutingModule
],
declarations: [
DescriptionEditorComponent,
DescriptionBaseFieldsEditorComponent
],
exports: [
],
providers: [
VisibilityRulesService
]
})
export class DescriptionEditorModule { }

112
dmp-frontend/src/app/ui/description/editor/description-editor.resolver.ts Normal file
View File

@ -0,0 +1,112 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { DescriptionTemplate, DescriptionTemplateBaseFieldData, DescriptionTemplateDefinition, DescriptionTemplateField, DescriptionTemplateFieldSet, DescriptionTemplatePage, DescriptionTemplateRule, DescriptionTemplateSection } from '@app/core/model/description-template/description-template';
import { Description, DescriptionField, DescriptionReference, DescriptionTag, PropertyDefinition } from '@app/core/model/description/description';
import { Dmp, DmpDescriptionTemplate } from '@app/core/model/dmp/dmp';
import { Reference } from '@app/core/model/reference/reference';
import { Tag } from '@app/core/model/tag/tag';
import { DescriptionService } from '@app/core/services/description/description.service';
import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service';
import { BaseEditorResolver } from '@common/base/base-editor.resolver';
import { Guid } from '@common/types/guid';
import { takeUntil, tap } from 'rxjs/operators';
import { nameof } from 'ts-simple-nameof';
@Injectable()
export class DescriptionEditorResolver extends BaseEditorResolver {
constructor(private descriptionService: DescriptionService, private breadcrumbService: BreadcrumbService) {
super();
}
public static lookupFields(): string[] {
return [
...BaseEditorResolver.lookupFields(),
nameof<Description>(x => x.id),
nameof<Description>(x => x.label),
nameof<Description>(x => x.status),
nameof<Description>(x => x.description),
nameof<Description>(x => x.status),
[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.id)].join('.'),
[nameof<Description>(x => x.dmp), nameof<Dmp>(x => x.label)].join('.'),
[nameof<Description>(x => x.dmpDescriptionTemplate), nameof<DmpDescriptionTemplate>(x => x.id)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.id)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.id)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.ordinal)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.pages), nameof<DescriptionTemplatePage>(x => x.title)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.id)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.ordinal)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.defaultVisibility)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.multiplicity)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.numbering)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.page)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.title)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.description)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.extendedDescription)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.ordinal)].join('.'), // TODO: need to sort based on that
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.sections)].join('.'), // TODO: it is recursive here
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.id)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.ordinal)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.numbering)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.title)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.description)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.extendedDescription)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.additionalInformation)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.hasCommentField)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.multiplicity), nameof<DescriptionTemplateMultiplicity>(x => x.min)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.multiplicity), nameof<DescriptionTemplateMultiplicity>(x => x.max)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.multiplicity), nameof<DescriptionTemplateMultiplicity>(x => x.placeholder)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.multiplicity), nameof<DescriptionTemplateMultiplicity>(x => x.tableView)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.id)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.ordinal)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.numbering)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.schematics)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.defaultValue)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.defaultValue)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.fieldType)].join('.'),
// [nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.includeInExport)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.validations)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.visibilityRules), nameof<DescriptionTemplateRule>(x => x.target)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.visibilityRules), nameof<DescriptionTemplateRule>(x => x.value)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateBaseFieldData>(x => x.label)].join('.'),
[nameof<Description>(x => x.descriptionTemplate), nameof<DescriptionTemplate>(x => x.definition), nameof<DescriptionTemplateDefinition>(x => x.sections), nameof<DescriptionTemplateSection>(x => x.fieldSets), nameof<DescriptionTemplateFieldSet>(x => x.fields), nameof<DescriptionTemplateField>(x => x.data), nameof<DescriptionTemplateBaseFieldData>(x => x.fieldType)].join('.'),
[nameof<Description>(x => x.properties), nameof<PropertyDefinition>(x => x.fields), nameof<DescriptionField>(x => x.key)].join('.'),
[nameof<Description>(x => x.properties), nameof<PropertyDefinition>(x => x.fields), nameof<DescriptionField>(x => x.value)].join('.'),
[nameof<Description>(x => x.descriptionTags), nameof<DescriptionTag>(x => x.id),].join('.'),
[nameof<Description>(x => x.descriptionTags), nameof<DescriptionTag>(x => x.tag), nameof<Tag>(x => x.label)].join('.'),
[nameof<Description>(x => x.descriptionReferences), nameof<DescriptionReference>(x => x.reference), nameof<Reference>(x => x.id)].join('.'),
[nameof<Description>(x => x.descriptionReferences), nameof<DescriptionReference>(x => x.reference), nameof<Reference>(x => x.label)].join('.'),
[nameof<Description>(x => x.descriptionReferences), nameof<DescriptionReference>(x => x.reference), nameof<Reference>(x => x.type)].join('.'),
[nameof<Description>(x => x.descriptionReferences), nameof<DescriptionReference>(x => x.reference), nameof<Reference>(x => x.reference)].join('.'),
nameof<Description>(x => x.createdAt),
nameof<Description>(x => x.hash),
nameof<Description>(x => x.isActive)
]
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const fields = [
...DescriptionEditorResolver.lookupFields()
];
const id = route.paramMap.get('id');
// const cloneid = route.paramMap.get('cloneid');
if (id != null) {
return this.descriptionService.getSingle(Guid.parse(id), fields).pipe(tap(x => this.breadcrumbService.addIdResolvedValue(x.id?.toString(), x.label)), takeUntil(this._destroyed));
}
//TODO: check this
// else if (cloneid != null) {
// return this.descriptionService.clone(Guid.parse(cloneid), fields).pipe(tap(x => this.breadcrumbService.addIdResolvedValue(x.id?.toString(), x.label)), takeUntil(this._destroyed));
// }
}
}

101
dmp-frontend/src/app/ui/description/editor/description-editor.routing.ts Normal file
View File

@ -0,0 +1,101 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// import { DescriptionWizardComponent } from './description-wizard/description-wizard.component';
import { AppPermission } from '@app/core/common/enum/permission.enum';
import { PendingChangesGuard } from '@common/forms/pending-form-changes/pending-form-changes-guard.service';
// import { DescriptionOverviewComponent } from './overview/description-overview.component';
import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service';
import { DescriptionEditorComponent } from './description-editor.component';
import { DescriptionEditorResolver } from './description-editor.resolver';
import { AuthGuard } from '@app/core/auth-guard.service';
const routes: Routes = [
{
path: ':id',
canActivate: [AuthGuard],
component: DescriptionEditorComponent,
canDeactivate: [PendingChangesGuard],
resolve: {
'entity': DescriptionEditorResolver
},
data: {
...BreadcrumbService.generateRouteDataConfiguration({
title: 'BREADCRUMBS.EDIT-DESCRIPTION'
}),
authContext: {
permissions: [AppPermission.EditDescription]
}
}
},
// {
// path: 'new/:dmpId/:dmpSectionIndex',
// component: DescriptionWizardComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumb: true,
// title: 'GENERAL.TITLES.DATASET-NEW'
// },
// canDeactivate:[CanDeactivateGuard]
// },
// {
// path: 'edit/:id/finalize',
// component: DescriptionWizardComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumb: true,
// public: false,
// title: 'GENERAL.TITLES.DATASET-EDIT',
// finalize: true
// },
// canDeactivate:[CanDeactivateGuard]
// },
// {
// path: 'publicEdit/:publicId',
// component: DescriptionWizardComponent,
// //canActivate: [AuthGuard],
// data: {
// public: true,
// title: 'GENERAL.TITLES.DATASET-PUBLIC-EDIT'
// },
// canDeactivate:[CanDeactivateGuard]
// },
// {
// path: 'new',
// component: DescriptionWizardComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumb: true,
// title: 'GENERAL.TITLES.DATASET-NEW'
// },
// canDeactivate:[CanDeactivateGuard]
// },
// {
// path: 'copy/:id',
// component: DescriptionWizardComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumb: true,
// title: 'GENERAL.TITLES.DATASET-COPY'
// },
// canDeactivate:[CanDeactivateGuard]
// },
// {
// path: 'profileupdate/:updateId',
// component: DescriptionWizardComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumb: true,
// title: 'GENERAL.TITLES.DATASET-UPDATE'
// },
// canDeactivate:[CanDeactivateGuard]
// },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: [DescriptionEditorResolver]
})
export class DescriptionEditorRoutingModule { }

0
dmp-frontend/src/app/ui/description/dataset-wizard/description-editor.service.ts → dmp-frontend/src/app/ui/description/editor/description-editor.service.ts
View File

15
dmp-frontend/src/app/ui/description/editor/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" [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 Normal file
View File

@ -0,0 +1,31 @@
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);
}
}

25
dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.html Normal file
View File

@ -0,0 +1,25 @@
<div class="col-12">
<div class="row">
<h5 *ngIf="fieldSet.title && !isChild" class="col-auto compositeField toc-compositeField-header" [id]="fieldSet.id">
<!-- TODO: We need the numbering here. -->
<!-- {{tocentry? tocentry.numbering : form.get('numbering').value}} -->
{{fieldSet.title}}
</h5>
<mat-icon class="col-auto info-icon" *ngIf="fieldSet.additionalInformation && !isChild" matTooltip="{{fieldSet.additionalInformation}}">info</mat-icon>
</div>
</div>
<h6 *ngIf="fieldSet.description && !isChild" class="col-12" [innerHTML]="fieldSet.description"></h6>
<div *ngIf="fieldSet.extendedDescription && !isChild" class="col-12 mt-3 mb-3">
<div *ngIf="!showExtendedDescription" (click)="showExtendedDescription = !showExtendedDescription">
<span class="more d-flex justify-content-center">{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE' | translate}}</span>
</div>
<div *ngIf="showExtendedDescription">
<h6 [innerHTML]="fieldSet.extendedDescription"></h6>
<span class="more d-flex justify-content-center" (click)="showExtendedDescription = !showExtendedDescription">
{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-LESS' | translate}}
</span>
</div>
</div>

31
dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.scss Normal file
View File

@ -0,0 +1,31 @@
.compositeField {
// font-weight: bold;
// color: #3a3737;
// max-width: 100%;
// padding-top: 1em;
text-align: left;
font-weight: 700;
font-size: 18px;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-top: 1.625rem;
margin-bottom: 0.625rem;
}
.info-icon{
margin-top: 1.625rem;
}
h6 {
text-transform: none;
font-weight: 400;
}
.more {
text-decoration: underline;
color: var(--secondary-color);
cursor: pointer;
font-size: 1rem;
font-weight: 400;
}

21
dmp-frontend/src/app/ui/description/editor/description-form/components/form-composite-title/form-composite-title.component.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component, Input, OnInit } from '@angular/core';
import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template';
@Component({
selector: 'app-form-composite-title',
templateUrl: './form-composite-title.component.html',
styleUrls: ['./form-composite-title.component.scss']
})
export class DescriptionFormCompositeTitleComponent implements OnInit {
@Input() fieldSet: DescriptionTemplateFieldSet;
@Input() isChild: Boolean = false;
public showExtendedDescription: boolean = false;
constructor() { }
ngOnInit() {
}
}

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

@ -0,0 +1,54 @@
<div *ngIf="fieldSet && isVisibleByVisibilityService && !tableRow" class="dynamic-form-composite-field row">
<div *ngIf="fieldSet.fields.length === 1 && this.visibilityRulesService.isVisibleMap[fieldSet.fields.id] ?? true" class="col-12">
<div class="row">
<div *ngIf="showTitle" class="col-12">
<app-form-composite-title class="row" [fieldSet]="fieldSet" [isChild]="isChild"></app-form-composite-title>
</div>
<div class="col-12">
<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" [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">
<ng-container *ngIf="this.visibilityRulesService.isVisibleMap[field.id] ?? true">
<div class="row">
<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
</div>
<app-form-field class="col-12 compositeField" [propertiesFormGroup]="propertiesFormGroup" [field]="field" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-form-field>
</ng-container>
</div>
</div>
<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>
</div>
<ng-container *ngIf="fieldSet && isVisibleByVisibilityService && tableRow">
<ng-container *ngFor="let field of fieldSet.fields;">
<td *ngIf="this.visibilityRulesService.isVisibleMap[field.id] ?? true" class="text-wrap">{{propertiesFormGroup.get(field.id).get('value').getRawValue() | fieldValue | translate}}</td>
</ng-container>
<td class="actions">
<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()" [disabled]="propertiesFormGroup.get(field.id).disabled">
<mat-icon>edit</mat-icon>
</button>
<button *ngIf="showDelete" mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="propertiesFormGroup.get(field.id).disabled">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>

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

@ -0,0 +1,17 @@
.compositeField {
padding-left: 0em !important;
// padding-top: 2em !important;
}
// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
// background: #fafafa !important;
// }
// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
// font-size: 1rem;
// padding: 0.6em 0 1em 0 !important;
// }
.actions {
width: 110px;
}

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

@ -0,0 +1,115 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { MatDialog } from "@angular/material/dialog";
import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template';
import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators';
import { ToCEntry } from '../../../table-of-contents/models/toc-entry';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
@Component({
selector: 'app-form-field-set',
templateUrl: './form-field-set.component.html',
styleUrls: ['./form-field-set.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DescriptionFormFieldSetComponent extends BaseComponent {
@Input() fieldSet: DescriptionTemplateFieldSet;
@Input() propertiesFormGroup: UntypedFormGroup;
isVisibleByVisibilityService: boolean = true;
@Input() visibilityRulesService: VisibilityRulesService;
@Input() datasetProfileId: String;
// @Input() form: UntypedFormGroup;
@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,
private changeDetector: ChangeDetectorRef
) {
super();
}
ngOnInit() {
this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
if (x.has(this.fieldSet.id)) {
this.isVisibleByVisibilityService = x.get(this.fieldSet.id);
// this.changeDetector.markForCheck();
}
});
// if (this.tocentry) {
// this.form = this.tocentry.form as UntypedFormGroup;
// }
}
// editCompositeFieldInDialog() {
// const dialogRef = this.dialog.open(FormCompositeFieldDialogComponent, {
// width: '750px',
// disableClose: true,
// data: {
// formGroup: cloneAbstractControl(this.form),
// datasetProfileId: this.datasetProfileId,
// visibilityRulesService: this.visibilityRulesService
// }
// });
// dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
// if (data) {
// this.form.patchValue(data.value);
// this.changeDetector.detectChanges();
// }
// });
// }
// deleteCompositeField() {
// if (this.isChild) {
// this.deleteMultipeFieldFromCompositeFormGroup();
// } else {
// this.deleteCompositeFieldFormGroup();
// }
// }
// deleteCompositeFieldFormGroup() {
// const compositeFieldId = ((this.form.get('multiplicityItems') as UntypedFormArray).get('' + 0) as UntypedFormGroup).getRawValue().id;
// const fieldIds = (this.form.get('fields') as UntypedFormArray).controls.map(control => control.get('id').value) as string[];
// const numberOfItems = this.form.get('multiplicityItems').get('' + 0).get('fields').value.length;
// for (let i = 0; i < numberOfItems; i++) {
// const multiplicityItem = this.form.get('multiplicityItems').get('' + 0).get('fields').get('' + i).value;
// this.form.get('fields').get('' + i).patchValue(multiplicityItem);
// }
// (<UntypedFormArray>(this.form.get('multiplicityItems'))).removeAt(0);
// this.visibilityRulesService.removeAllIdReferences(compositeFieldId);
// fieldIds.forEach(x => this.visibilityRulesService.removeAllIdReferences(x));
// }
// deleteMultipeFieldFromCompositeFormGroup() {
// const parent = this.form.parent;
// const index = (parent as UntypedFormArray).controls.indexOf(this.form);
// const currentId = this.form.get('id').value;
// const fieldIds = (this.form.get('fields') as UntypedFormArray).controls.map(control => control.get('id').value) as string[];
// this.visibilityRulesService.removeAllIdReferences(currentId);
// fieldIds.forEach(x => this.visibilityRulesService.removeAllIdReferences(x));
// (parent as UntypedFormArray).removeAt(index);
// (parent as UntypedFormArray).controls.forEach((control, i) => {
// try {
// control.get('ordinal').setValue(i);
// } catch {
// throw 'Could not find ordinal';
// }
// });
// }
}

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

@ -0,0 +1,473 @@
<div *ngIf="field && visible" [id]="field.id"
[ngSwitch]="this.field?.data?.fieldType" class="dynamic-form-field row">
<h5 *ngIf="fieldSet.title && !isChild">{{fieldSet.title}}</h5>
<mat-icon *ngIf="fieldSet.additionalInformation && !isChild" matTooltip="{{fieldSet.additionalInformation}}">info</mat-icon>
<h5 *ngIf="fieldSet.description && !isChild" class="col-12">{{fieldSet.description}}
</h5>
<h5 *ngIf="fieldSet.extendedDescription && !isChild" class="col-12">
<i>{{fieldSet.extendedDescription}}</i>
</h5>
<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.FREE_TEXT" class="col-12">
<input matInput [formControl]="propertiesFormGroup.get(field.id).get('value')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [required]="isRequired">
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('pattern')">{{'GENERAL.VALIDATION.URL.MESSAGE' | translate}}</mat-error>
</mat-form-field>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.AUTO_COMPLETE" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '')}}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '')}}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.WORD_LIST" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<mat-select [formControl]="propertiesFormGroup.get(field.id).get('value')" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [required]="isRequired" [multiple]="field.data.multiList">
<mat-option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}
</mat-option>
</mat-select>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_RESEARCHERS" class="col-12">
<div class="row">
<mat-form-field class="col-md-12" >
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_DATASETS" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_DMPS" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="multipleAutoCompleteConfiguration">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="singleAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.CHECK_BOX" class="col-12">
<mat-checkbox [formControl]="propertiesFormGroup.get(field.id).get('value')" [required]="isRequired">
{{field.data.label}}</mat-checkbox>
</div>
<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"
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('')">
<mat-icon>close</mat-icon>
</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-form-field>
<ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA">
<rich-text-editor-component class="col-12"
[parentFormGroup]="propertiesFormGroup.get(field.id)" [controlName]="'value'"
[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>
<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">
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value')['errors'] && propertiesFormGroup.get(field.id).get('value').hasError('required') && propertiesFormGroup.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="descriptionTemplateFieldTypeEnum.UPLOAD">
<div class="col-12 d-flex justify-content-center">
<ngx-dropzone #drop class="drop-file col-12" (change)="fileChangeEvent($event, true)"
[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-label class="file-label">{{ propertiesFormGroup.get(field.id).get('value').value.name }}</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
</div>
<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"
[disabled]="!!propertiesFormGroup.get(field.id).get('value').value || propertiesFormGroup.get(field.id).get('value').disabled">
<mat-icon class="mr-2">upload</mat-icon>
<mat-label>{{ (field.data.label | translate)}}</mat-label>
</button>
<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">
<mat-icon class="mr-2">download</mat-icon>
<mat-label>{{ "TYPES.DATASET-PROFILE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label>
</button>
</div>
</ng-container>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION" class="col-12">
<mat-radio-group [formControl]="propertiesFormGroup.get(field.id).get('value')" [required]="isRequired">
<mat-radio-button class="radio-button-item" name="{{propertiesFormGroup.get(field.id).get('key').value}}" value="true">{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.ACTIONS.YES" | translate }}</mat-radio-button>
<mat-radio-button class="radio-button-item" name="{{propertiesFormGroup.get(field.id).get('key').value}}" value="false">{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.ACTIONS.NO" | translate }}</mat-radio-button>
</mat-radio-group>
<small class="text-danger d-block" *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required') && propertiesFormGroup.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</small>
<small class="text-muted d-inline-block" *ngIf="(isRequired) && !propertiesFormGroup.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</small>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.RADIO_BOX" class="col-12">
<mat-radio-group [formControl]="propertiesFormGroup.get(field.id).get('value')" [required]="isRequired">
<mat-radio-button *ngFor="let option of field.data.options let index = index" class="radio-button-item" [value]="option.value">{{option.label}}</mat-radio-button>
</mat-radio-group>
<small class="text-danger d-block" *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required') && propertiesFormGroup.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</small>
<small class="text-muted d-inline-block" *ngIf="(isRequired) && !propertiesFormGroup.get(field.id).get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}} *</small>
</div>
<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"
[formControl]="propertiesFormGroup.get(field.id).get('value')">
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
<mat-datepicker #date></mat-datepicker>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.EXTERNAL_DATASETS" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="externalDatasetAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="externalDatasetAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATA_REPOSITORIES" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.PUB_REPOSITORIES" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="pubRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.JOURNAL_REPOSITORIES" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="journalRepositoriesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAXONOMIES" class="col-12">
<div *ngIf="field.data" class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="taxonomiesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.LICENSES" class="col-12">
<div *ngIf="field.data" class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="licensesAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="licensesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.PUBLICATIONS" class="col-12">
<div *ngIf="field.data" class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="publicationsAutoCompleteConfiguration" [required]="isRequired">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="publicationsAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.REGISTRIES" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="registriesAutoCompleteConfiguration">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="registriesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.SERVICES" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="servicesAutoCompleteConfiguration">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="servicesAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAGS" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<app-multiple-auto-complete [configuration]="tagsAutoCompleteConfiguration" [formControl]="propertiesFormGroup.get(field.id).get('value')" placeholder="{{('DATASET-EDITOR.FIELDS.TAGS' | translate) + (isRequired? ' *': '')}}"></app-multiple-auto-complete>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.RESEARCHERS" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="researchersAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
</ng-container>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.ORGANIZATIONS" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<ng-container *ngIf="field.data.multiAutoComplete">
<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete>
</ng-container>
<ng-container *ngIf="!(field.data.multiAutoComplete)">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="organisationsAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</ng-container>
<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12">
<div class="row" *ngIf="datasetIdInitialized">
<mat-form-field class="col-md-12">
<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}"
[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>
</mat-form-field>
<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? ' *': '')"
[disabled]="propertiesFormGroup.get(field.id).get('value').disabled">
<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
{{ type.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.CURRENCY" class="col-12">
<div class="row">
<mat-form-field class="col-md-12">
<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup.get(field.id).get('value')"
[configuration]="currencyAutoCompleteConfiguration" [required]="isRequired">
</app-single-auto-complete>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
</div>
</div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.VALIDATION" class="col-12">
<div class="row align-items-baseline">
<mat-form-field class="col-md-4">
<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [required]="isRequired">
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field class="col-md-4">
<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-VALIDATOR.REPOSITORIES-PLACEHOLDER' | translate) + (isRequired? ' *': '')">
<mat-option *ngFor="let type of validationTypes" [value]="type.value">
{{ type.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<div class="col-md-2">
<button type="button" mat-button class="lightblue-btn" (click)="validateId()" [disabled]="propertiesFormGroup.get(field.id).get('value').disabled">{{ "TYPES.DATASET-PROFILE-VALIDATOR.ACTION" | translate }}</button>
<mat-error *ngIf="propertiesFormGroup.get(field.id).get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</div>
<div class="col-md-1">
<mat-progress-spinner *ngIf="validationIcon === 'loading'" mode="indeterminate" [diameter]="24"></mat-progress-spinner>
<mat-icon *ngIf="validationIcon !== 'loading'" [ngClass]="{'success': validationIcon === 'done', 'fail': validationIcon === 'clear'}">{{validationIcon}}</mat-icon>
</div>
</div>
</div>
</div>

105
dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.scss Normal file
View File

@ -0,0 +1,105 @@
.dynamic-form-field {
.radio-button-item {
margin-right: 1em;
}
.full-width {
width: 100%;
}
.text-area {
box-sizing: content-box;
}
.success {
color: green;
}
.fail {
color: red;
}
}
::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;
}
.attach-btn {
top: -20px;
}
.attach-file-btn {
min-width: 156px;
height: 44px;
color: #ffffff;
background: var(--primary-color) 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px;
}
.attach-file-btn:hover {
background-color: #ffffff;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
.attach-file-btn.mdc-button-disabled, .attach-file-btn.mdc-button-disabled:hover {
background-color: #ffffff;
border: 1px solid darkgray;
color: darkgrey !important;
}
//
//.mdc-button-disabled .attach-file-btn > ::ng-deep mdc-button-wrapper:hover > * {
// color: darkgrey !important;
//}
.drop-file {
background-color: #fafafa;
border: 1px dashed #d1d1d1;
border-radius: 4px;
//max-width: 480px;
height: 98px;
margin-top: 0.5rem;
}
.file-preview {
height: auto !important;
width: auto !important;
max-width: 500px !important;
min-height: 1rem !important;
background-color: #e0e0e0 !important;
background-image: none !important;
color: rgba(0, 0, 0, 0.87) !important;
font-weight: 500 !important;
border-radius: 24px !important;
line-height: 1.25 !important;
}
.file-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px !important;
}
::ng-deep ngx-dropzone-remove-badge {
opacity: 1 !important;
margin-left: .5rem !important;
position: initial !important;
}
::ng-deep .upload-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important;
}
::ng-deep .upload-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem;
padding: 0.6em 0 1em 0 !important;
}

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

@ -0,0 +1,764 @@
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, SimpleChanges } from '@angular/core';
import { FormControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { MatDialog } from "@angular/material/dialog";
import { DescriptionTemplateFieldType } from '@app/core/common/enum/description-template-field-type';
import { ReferenceType } from '@app/core/common/enum/reference-type';
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
import { DescriptionTemplateAutoCompleteData, DescriptionTemplateAutoCompleteSingleData, DescriptionTemplateField, DescriptionTemplateFieldSet, DescriptionTemplateUploadData, DescriptionTemplateWordListData } from '@app/core/model/description-template/description-template';
import { ExternalSourceItemModel } from '@app/core/model/external-sources/external-source-item';
import { LocalFetchModel } from '@app/core/model/local-fetch/local-fetch.model';
import { FetcherReference, Reference } from '@app/core/model/reference/reference';
import { DatasetExternalAutocompleteCriteria, DatasetExternalAutocompleteOptionsCriteria } from '@app/core/query/dataset/daatset-external-autocomplete-criteria';
import { DatasetCriteria } from '@app/core/query/dataset/dataset-criteria';
import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
import { ReferenceSearchLookup } from '@app/core/query/reference-search.lookup';
import { RegistryCriteria } from '@app/core/query/registry/registry-criteria';
import { RequestItem } from '@app/core/query/request-item';
import { ResearcherCriteria } from '@app/core/query/researcher/researcher-criteria';
import { ServiceCriteria } from '@app/core/query/service/service-criteria';
import { TagCriteria } from '@app/core/query/tag/tag-criteria';
import { TaxonomyCriteria } from "@app/core/query/taxonomy/taxonomy-criteria";
import { CurrencyService } from '@app/core/services/currency/currency.service';
import { DatasetExternalAutocompleteService } from '@app/core/services/dataset/dataset-external-autocomplete.service';
import { DatasetService } from '@app/core/services/dataset/dataset.service';
import { DmpService } from '@app/core/services/dmp/dmp.service';
import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
import { FileService } from "@app/core/services/file/file.service";
import {
SnackBarNotificationLevel,
UiNotificationService
} from "@app/core/services/notification/ui-notification-service";
import { ReferenceService } from '@app/core/services/reference/reference.service';
import { FileUtils } from '@app/core/services/utilities/file-utils.service';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { ExternalTagEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
import { BaseComponent } from '@common/base/base.component';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
import { DescriptionFieldEditorModel } from '../../../description-editor.model';
import { DescriptionTemplateFieldValidationType } from '@app/core/common/enum/description-template-field-validation-type';
@Component({
selector: 'app-form-field',
templateUrl: './form-field.component.html',
styleUrls: ['./form-field.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DescriptionFormFieldComponent extends BaseComponent implements OnInit {
@Input() field: DescriptionTemplateField;
@Input() fieldSet: DescriptionTemplateFieldSet;
@Input() propertiesFormGroup: UntypedFormGroup;
@Input() visibilityRulesService: VisibilityRulesService;
isRequired: boolean = false;
// @Input() field: Field;
// @Input() form: UntypedFormGroup;
@Input() datasetProfileId: any;
@Input() isChild: Boolean = false;
autocompleteOptions: DescriptionTemplateAutoCompleteSingleData[];
visible: boolean = true;
// change: Subscription;
// trackByFn = (index, item) => item ? item['id'] : null;
descriptionTemplateFieldTypeEnum = DescriptionTemplateFieldType;
public singleAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
public multipleAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
externalDatasetAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
dataRepositoriesAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
pubRepositoriesAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
journalRepositoriesAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
taxonomiesAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
licensesAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
publicationsAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
registriesAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
servicesAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
tagsAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
researchersAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
organisationsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
currencyAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
tags: ExternalTagEditorModel[] = [];
datasetIdInitialized: boolean = false;
validationIcon;
readonly datasetIdTypes: any[] = [
{ name: 'Handle', value: 'handle' },
{ name: 'DOI', value: 'doi' },
{ name: 'Ark', value: 'ark' },
{ name: 'Url', value: 'url' },
{ name: 'Other', value: 'other' }
];
readonly validationTypes: any[] = [
{ name: 'Zenodo', value: 'zenodo' }
];
filesToUpload: FileList;
constructor(
private datasetExternalAutocompleteService: DatasetExternalAutocompleteService,
private externalSourcesService: ExternalSourcesService,
private language: TranslateService,
private datasetService: DatasetService,
private dmpService: DmpService,
private currencyService: CurrencyService,
private fileService: FileService,
private cdr: ChangeDetectorRef,
private uiNotificationService: UiNotificationService,
public dialog: MatDialog,
private fileUtils: FileUtils,
private referenceService: ReferenceService
) {
super();
}
ngOnChanges(changes: SimpleChanges) {
if (changes['form']) {
}
}
ngOnInit() {
this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
if (x.has(this.field.id)){
this.visible = x.get(this.field.id);
}
});
//TODO: validate that this logic is correct. Validation contenxt path might need to be fixed.
if (this.propertiesFormGroup.get(this.field.id).get('value') == null) {
const item: DescriptionFieldEditorModel = new DescriptionFieldEditorModel();
item.key = this.field.id;
this.propertiesFormGroup.addControl(this.field.id, item.buildForm());
}
if (this.propertiesFormGroup.get(this.field.id).get('value').value) {
this.visibilityRulesService.updateValueAndVisibility(this.field?.id, this.propertiesFormGroup.get(this.field.id).get('value').value);
}
this.isRequired = this.field.validations?.includes(DescriptionTemplateFieldValidationType.Required);
if (this.field?.data?.fieldType === DescriptionTemplateFieldType.WORD_LIST) {
if ((this.field.data as DescriptionTemplateWordListData).multiList) {
const originalValue = <string>this.propertiesFormGroup.get(this.field.id).get('value').value;
if (originalValue !== null && typeof originalValue === 'string') {
let values = (<string>this.propertiesFormGroup.get(this.field.id).get('value').value).slice(1, -1).split(', ').filter((value) => !value.includes('"'));
let specialValue = (<string>this.propertiesFormGroup.get(this.field.id).get('value').value).split('"').filter((value) => !value.startsWith('[') && !value.endsWith(']') && !values.includes(value) && value !== ', ');
specialValue.forEach(value => values.push(value));
if (!originalValue.startsWith('[') && !originalValue.endsWith(']')) {
values = undefined;
values = [originalValue];
}
this.propertiesFormGroup.get(this.field.id).get('value').patchValue(values);
values.forEach(element => {
this.visibilityRulesService.updateValueAndVisibility(this.field?.id, element);
});
}
}
}
// Setup autocomplete configuration if needed
if (this.field?.data?.fieldType === DescriptionTemplateFieldType.AUTO_COMPLETE) {
if (!((this.field.data as DescriptionTemplateAutoCompleteData).multiAutoComplete)) {
this.singleAutoCompleteConfiguration = {
filterFn: this.searchFromAutocomplete.bind(this),
initialItems: () => this.searchFromAutocomplete(''),
displayFn: (item) => { try { return (item != null && item.length > 1) ? JSON.parse(item).label : item['label'] } catch { return '' } },
titleFn: (item) => { try { return item['label'] } catch { return '' } },
valueAssign: (item) => { try { return JSON.stringify(item) } catch { return '' } },
subtitleFn: (item) => { try { return item['source'] ? this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-SUBTITLE') + item['source'] : this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-NO-SOURCE') } catch { return '' } }
};
}
else {
this.multipleAutoCompleteConfiguration = {
filterFn: this.searchFromAutocomplete.bind(this),
initialItems: () => this.searchFromAutocomplete(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['label'] : item['label'] } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['label'] : item['label'] } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } },
subtitleFn: (item) => { try { return item['source'] ? this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-SUBTITLE') + item['source'] : this.language.instant('DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-AUTOCOMPLETE-NO-SOURCE') } catch { return '' } }
}
}
if (isNullOrUndefined(this.datasetProfileId)) {
this.autocompleteOptions = (this.field.data as DescriptionTemplateAutoCompleteData).autoCompleteSingleDataList;
}
}
switch (this.field?.data?.fieldType) {
case DescriptionTemplateFieldType.EXTERNAL_DATASETS:
this.externalDatasetAutoCompleteConfiguration = {
filterFn: this.searchDatasetExternalDatasets.bind(this),
initialItems: () => this.searchDatasetExternalDatasets(''),//.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE') } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.DATA_REPOSITORIES:
this.dataRepositoriesAutoCompleteConfiguration = {
filterFn: this.searchDatasetExternalDataRepositories.bind(this),
initialItems: () => this.searchDatasetExternalDataRepositories(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE') } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.PUB_REPOSITORIES:
this.pubRepositoriesAutoCompleteConfiguration = {
filterFn: this.searchDatasetExternalPubRepositories.bind(this),
initialItems: () => this.searchDatasetExternalPubRepositories(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE') } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.JOURNAL_REPOSITORIES:
this.journalRepositoriesAutoCompleteConfiguration = {
filterFn: this.searchDatasetExternalJournalRepositories.bind(this),
initialItems: () => this.searchDatasetExternalJournalRepositories(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE') } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.TAXONOMIES:
this.taxonomiesAutoCompleteConfiguration = {
filterFn: this.searchDatasetExternalTaxonomies.bind(this),
initialItems: () => this.searchDatasetExternalTaxonomies(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE') } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.LICENSES:
this.licensesAutoCompleteConfiguration = {
filterFn: this.searchDatasetExternalLicences.bind(this),
initialItems: () => this.searchDatasetExternalLicences(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE') } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.PUBLICATIONS:
this.publicationsAutoCompleteConfiguration = {
filterFn: this.searchDatasetExternalPublications.bind(this),
initialItems: () => this.searchDatasetExternalPublications(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE') } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.REGISTRIES:
this.registriesAutoCompleteConfiguration = {
filterFn: this.searchDatasetExternalRegistries.bind(this),
initialItems: () => this.searchDatasetExternalRegistries(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE') } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.SERVICES:
this.servicesAutoCompleteConfiguration = {
filterFn: this.searchDatasetExternalServices.bind(this),
initialItems: () => this.searchDatasetExternalServices(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE') } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.TAGS:
this.tagsAutoCompleteConfiguration = {
filterFn: this.filterTags.bind(this),
initialItems: (excludedItems: any[]) => this.filterTags('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
displayFn: (item) => { try { return this.showTag(item) } catch { return '' } },
titleFn: (item) => { try { return item['name'] } catch { return '' } },
valueAssign: (item) => { try { return this.addTag(item) } catch { return '' } }
};
this.parseTags();
break;
case DescriptionTemplateFieldType.RESEARCHERS:
this.researchersAutoCompleteConfiguration = {
filterFn: this.filterResearchers.bind(this),
initialItems: (excludedItems: any[]) => this.filterResearchers('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item['tag'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['tag'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')) } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.ORGANIZATIONS:
this.organisationsAutoCompleteConfiguration = {
filterFn: this.filterOrganisations.bind(this),
initialItems: (excludedItems: any[]) => this.filterOrganisations('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
subtitleFn: (item) => { try { return item['tag'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['tag'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')) } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.DATASET_IDENTIFIER:
const value = this.propertiesFormGroup.get(this.field.id).get('value').value;
const disabled = this.propertiesFormGroup.get(this.field.id).disabled;
//TODO: Refactor this.
// this.form.removeControl('value');
// this.form.addControl('value', new DatasetIdModel(value).buildForm());
// if (disabled) {
// this.form.disable();
// }
this.datasetIdInitialized = true;
break;
case DescriptionTemplateFieldType.CURRENCY:
this.currencyAutoCompleteConfiguration = {
filterFn: this.searchCurrency.bind(this),
initialItems: () => this.searchCurrency(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)['name'] : item.name } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } }
};
break;
case DescriptionTemplateFieldType.VALIDATION:
const value1 = this.propertiesFormGroup.get(this.field.id).get('value').value;
const disabled1 = this.propertiesFormGroup.get(this.field.id).disabled;
//TODO: Refactor this.
// this.form.removeControl('value');
// this.form.addControl('value', new DatasetIdModel(value1).buildForm());
// if (disabled1) {
// this.form.disable();
// }
break;
case DescriptionTemplateFieldType.INTERNAL_DMP_ENTRIES_RESEARCHERS:
this.makeAutocompleteConfiguration(this.searchResearchers.bind(this), "name", "tag");
break;
case DescriptionTemplateFieldType.INTERNAL_DMP_ENTRIES_DATASETS:
this.makeAutocompleteConfiguration(this.searchDatasets.bind(this), "label");
break;
case DescriptionTemplateFieldType.INTERNAL_DMP_ENTRIES_DMPS:
this.makeAutocompleteConfiguration(this.searchDmps.bind(this), "label");
break;
}
// this.form = this.visibilityRulesService.getFormGroup(this.field.id);
this.propertiesFormGroup.get(this.field.id).get('value').valueChanges
.pipe(
takeUntil(this._destroyed),
distinctUntilChanged()
)
.subscribe(item => {
// if (this.field?.data?.fieldType === DescriptionTemplateFieldType.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.WordList && this.form.get('data').value.multiList) {
// item.forEach(element => {
// this.visibilityRulesService.updateValueAndVisibility(this.field?.id, element);
// });
// } else {
this.visibilityRulesService.updateValueAndVisibility(this.field?.id, item);
// }
});
}
// _optionRemove(event) {
// const array = JSON.parse(this.propertiesFormGroup.get(this.field.id).get('value').value);
// if (array) {
// const index = array.map(x => x.id).indexOf(event.id);
// if (index >= 0) {
// array.splice(index, 1);
// }
// this.propertiesFormGroup.get(this.field.id).get('value').patchValue(JSON.stringify(array));
// }
// }
searchFromAutocomplete(query: string) {
if (this.autocompleteOptions) {
const autocompleteRequestItem: RequestItem<DatasetExternalAutocompleteOptionsCriteria> = new RequestItem();
autocompleteRequestItem.criteria = new DatasetExternalAutocompleteOptionsCriteria();
//TODO: refactor this
//autocompleteRequestItem.criteria.autoCompleteSingleDataList = this.autocompleteOptions;
autocompleteRequestItem.criteria.like = query;
return this.datasetExternalAutocompleteService.queryApi(autocompleteRequestItem);
}
else {
const autocompleteRequestItem: RequestItem<DatasetExternalAutocompleteCriteria> = new RequestItem();
autocompleteRequestItem.criteria = new DatasetExternalAutocompleteCriteria();
let parseIdArray: string[] = this.field?.id.split('_');
if (parseIdArray.length > 1) {
autocompleteRequestItem.criteria.fieldID = parseIdArray[parseIdArray.length - 1];
} else {
autocompleteRequestItem.criteria.fieldID = this.field?.id;
}
if (typeof this.datasetProfileId === 'string') {
autocompleteRequestItem.criteria.profileID = this.datasetProfileId;
}
else if (this.datasetProfileId != null) {
autocompleteRequestItem.criteria.profileID = this.datasetProfileId.id;
}
autocompleteRequestItem.criteria.like = query;
return this.datasetExternalAutocompleteService.queryAutocomplete(autocompleteRequestItem);
}
}
searchResearchers(query: string) {
const reasearcherAutocompleteRequestItem: RequestItem<ResearcherCriteria> = new RequestItem();
reasearcherAutocompleteRequestItem.criteria = new ResearcherCriteria;
reasearcherAutocompleteRequestItem.criteria.name = query;
return this.externalSourcesService.searchDMPResearchers(reasearcherAutocompleteRequestItem);
}
searchDatasets(query: string) {
let fields: Array<string> = new Array();
const datasetsAutocompleteRequestItem: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 25, { fields: fields });
datasetsAutocompleteRequestItem.criteria = new DatasetCriteria();
datasetsAutocompleteRequestItem.criteria.like = query;
return this.datasetService.getPaged(datasetsAutocompleteRequestItem).pipe(map(item => item.data));
}
searchDmps(query: string) {
let fields: Array<string> = new Array();
const dmpsAutocompleteRequestItem: DataTableRequest<DmpCriteria> = new DataTableRequest(0, 25, { fields: fields });
dmpsAutocompleteRequestItem.criteria = new DmpCriteria();
dmpsAutocompleteRequestItem.criteria.like = query;
return this.dmpService.getPaged(dmpsAutocompleteRequestItem).pipe(map(item => item.data));
}
makeAutocompleteConfiguration(myfunc: Function, title: string, subtitle?: string): void {
if (!((this.field.data as DescriptionTemplateAutoCompleteData).multiAutoComplete)) {
this.singleAutoCompleteConfiguration = {
filterFn: myfunc.bind(this),
initialItems: (extraData) => myfunc(''),
displayFn: (item) => { try { return (item != null && item.length > 1) ? JSON.parse(item)[title] : item[title] } catch { return '' } },
titleFn: (item) => { try { return item[title] } catch { return '' } },
valueAssign: (item) => JSON.stringify(item),
subtitleFn: (item) => { try { return item[subtitle] } catch { return '' } }
};
}
else {
this.multipleAutoCompleteConfiguration = {
filterFn: myfunc.bind(this),
initialItems: (extraData) => myfunc(''),
displayFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)[title] : item[title] } catch { return '' } },
titleFn: (item) => { try { return typeof (item) == 'string' ? JSON.parse(item)[title] : item[title] } catch { return '' } },
valueAssign: (item) => { try { return typeof (item) == 'string' ? item : JSON.stringify(item) } catch { return '' } },
subtitleFn: (item) => { try { return item[subtitle] } catch { return '' } }
}
}
}
searchDatasetExternalDatasets(query: string): Observable<Reference[]> {
// const requestItem: RequestItem<ExternalDatasetCriteria> = new RequestItem();
// requestItem.criteria = new ExternalDatasetCriteria();
// requestItem.criteria.like = query;
// requestItem.criteria.type = '';
// //return this.externalSourcesService.searchDatasetSExternalDatasetservice(requestItem);
// return this.externalSourcesService.listExternal(ReferenceType.Datasets, requestItem.criteria.like, requestItem.criteria.type);
const lookup = new ReferenceSearchLookup();
lookup.like = query;
lookup.key = '';
lookup.type = ReferenceType.Datasets;
return this.referenceService.search(lookup);
}
searchDatasetExternalDataRepositories(query: string): Observable<Reference[]> {
// const requestItem: RequestItem<DataRepositoryCriteria> = new RequestItem();
// requestItem.criteria = new DataRepositoryCriteria();
// requestItem.criteria.like = query;
// requestItem.criteria.type = '';
// return this.externalSourcesService.listExternal(ReferenceType.DataRepositories, requestItem.criteria.like, requestItem.criteria.type);
const lookup = new ReferenceSearchLookup();
lookup.like = query;
lookup.key = '';
lookup.type = ReferenceType.DataRepositories;
return this.referenceService.search(lookup);
}
searchDatasetExternalPubRepositories(query: string): Observable<Reference[]> {
// const requestItem: RequestItem<DataRepositoryCriteria> = new RequestItem();
// requestItem.criteria = new DataRepositoryCriteria();
// requestItem.criteria.like = query;
// requestItem.criteria.type = '';
// return this.externalSourcesService.listExternal(ReferenceType.PubRepositories, requestItem.criteria.like, requestItem.criteria.type);
const lookup = new ReferenceSearchLookup();
lookup.like = query;
lookup.key = '';
lookup.type = ReferenceType.PubRepositories;
return this.referenceService.search(lookup);
}
searchDatasetExternalJournalRepositories(query: string): Observable<Reference[]> {
// const requestItem: RequestItem<DataRepositoryCriteria> = new RequestItem();
// requestItem.criteria = new DataRepositoryCriteria();
// requestItem.criteria.like = query;
// requestItem.criteria.type = '';
// return this.externalSourcesService.listExternal(ReferenceType.Journals, requestItem.criteria.like, requestItem.criteria.type);
const lookup = new ReferenceSearchLookup();
lookup.like = query;
lookup.key = '';
lookup.type = ReferenceType.Journals;
return this.referenceService.search(lookup);
}
searchDatasetExternalTaxonomies(query: string): Observable<FetcherReference[]> {
const requestItem: RequestItem<TaxonomyCriteria> = new RequestItem();
requestItem.criteria = new TaxonomyCriteria();
requestItem.criteria.like = query;
requestItem.criteria.type = '';
return this.externalSourcesService.listExternal(ReferenceType.Taxonomies, requestItem.criteria.like, requestItem.criteria.type);
}
searchDatasetExternalLicences(query: string): Observable<Reference[]> {
// const requestItem: RequestItem<LicenseCriteria> = new RequestItem();
// requestItem.criteria = new LicenseCriteria();
// requestItem.criteria.like = query;
// requestItem.criteria.type = '';
// return this.externalSourcesService.listExternal(ReferenceType.Licenses, requestItem.criteria.like, requestItem.criteria.type);
const lookup = new ReferenceSearchLookup();
lookup.like = query;
lookup.key = '';
lookup.type = ReferenceType.Licenses;
return this.referenceService.search(lookup);
}
searchDatasetExternalPublications(query: string): Observable<Reference[]> {
// const requestItem: RequestItem<PublicationCriteria> = new RequestItem();
// requestItem.criteria = new PublicationCriteria();
// requestItem.criteria.like = query;
// requestItem.criteria.type = '';
//return this.externalSourcesService.listExternal(ReferenceType.Publications, requestItem.criteria.like, requestItem.criteria.type);
const lookup = new ReferenceSearchLookup();
lookup.like = query;
lookup.key = '';
lookup.type = ReferenceType.Publications;
return this.referenceService.search(lookup);
}
searchDatasetExternalRegistries(query: string): Observable<FetcherReference[]> {
const requestItem: RequestItem<RegistryCriteria> = new RequestItem();
requestItem.criteria = new RegistryCriteria();
requestItem.criteria.like = query;
requestItem.criteria.type = '';
return this.externalSourcesService.listExternal(ReferenceType.Registries, requestItem.criteria.like, requestItem.criteria.type);
}
searchDatasetExternalServices(query: string): Observable<FetcherReference[]> {
const requestItem: RequestItem<ServiceCriteria> = new RequestItem();
requestItem.criteria = new ServiceCriteria();
requestItem.criteria.like = query;
requestItem.criteria.type = '';
return this.externalSourcesService.listExternal(ReferenceType.Services, requestItem.criteria.like, requestItem.criteria.type);
}
searchDatasetTags(query: string): Observable<ExternalSourceItemModel[]> {
const requestItem: RequestItem<TagCriteria> = new RequestItem();
requestItem.criteria = new TagCriteria();
requestItem.criteria.like = query;
requestItem.criteria.type = '';
return this.externalSourcesService.searchDatasetTags(requestItem);
}
parseTags() {
try {
let stringValue = this.propertiesFormGroup.get(this.field.id).get('value').value;
if (typeof stringValue === 'string') {
stringValue = (<string>stringValue).replace(new RegExp('{', 'g'), '{"').replace(new RegExp('=', 'g'), '":"').replace(new RegExp(',', 'g'), '",').replace(new RegExp(', ', 'g'), ', "').replace(new RegExp('}', 'g'), '"}');
stringValue = stringValue.replace(new RegExp('}"', 'g'), '}').replace(new RegExp('"{', 'g'), '{');
} else if (stringValue instanceof Array) {
const tempArray = new Array();
for (let stringTag of stringValue) {
tempArray.push(JSON.parse(stringTag));
}
stringValue = JSON.stringify(tempArray);
}
const tagArray = JSON.parse(stringValue);
this.propertiesFormGroup.get(this.field.id).get('value').patchValue(tagArray);
} catch (e) {
console.warn('Could not parse tags');
}
}
filterTags(value: string): Observable<ExternalSourceItemModel[]> {
const requestItem: RequestItem<TagCriteria> = new RequestItem();
const criteria: TagCriteria = new TagCriteria();
criteria.like = value;
requestItem.criteria = criteria;
return this.externalSourcesService.searchDatasetTags(requestItem);
}
showTag(ev: any) {
if (typeof ev === 'string') {
return ev;
} else {
return ev.name;
}
}
addTag(ev: any) {
let item: ExternalTagEditorModel;
//this.filteredTags = this.formGroup.get('tags').value;
if (typeof ev === 'string') {
item = new ExternalTagEditorModel('', ev);
} else {
item = ev;
}
if (item.name !== '') {
return item;
}
}
filterOrganisations(value: string): Observable<Reference[]> {
//return this.externalSourcesService.searchDMPOrganizations(value);
//return this.externalSourcesService.listExternal(ReferenceType.Organizations, value, '');
const lookup = new ReferenceSearchLookup();
lookup.like = value;
lookup.key = '';
lookup.type = ReferenceType.Organizations;
return this.referenceService.search(lookup);
}
filterResearchers(value: string): Observable<Reference[]> {
//return this.externalSourcesService.searchDMPResearchers({ criteria: { name: value, like: null } });
//return this.externalSourcesService.listExternal(ReferenceType.Researcher, value, '');
const lookup = new ReferenceSearchLookup();
lookup.like = value;
lookup.key = '';
lookup.type = ReferenceType.Researcher;
return this.referenceService.search(lookup);
}
getDatasetIdControl(name: string): UntypedFormControl {
return this.propertiesFormGroup.get(this.field.id).get(name) as UntypedFormControl;
}
searchCurrency(query: string): Observable<LocalFetchModel[]> {
return this.currencyService.get(query);
}
validateId() {
const identifier = this.getDatasetIdControl('identifier').value;
const type = this.getDatasetIdControl('type').value;
this.validationIcon = 'loading';
this.externalSourcesService.validateIdentifier(identifier, type).pipe(takeUntil(this._destroyed)).subscribe(result => {
this.validationIcon = result === true ? 'done' : 'clear';
});
}
public upload() {
//TODO: refactor this
// this.fileService.upload(this.filesToUpload[0], this.datasetProfileId.id, this.form.value.id).subscribe((fileId: string) => {
// this.form.get("value").patchValue(
// { "name": this.filesToUpload[0].name, "id": fileId + "", "type": this.filesToUpload[0].type });
// this.cdr.detectChanges();
// }, error => {
// this.onCallbackUploadFail(error.error);
// })
}
private onCallbackUploadFail(error: any) {
this.makeFilesNull();
this.uiNotificationService.snackBarNotification(this.language.instant(error.message), SnackBarNotificationLevel.Error);
}
fileChangeEvent(fileInput: any, dropped: boolean = false) {
//TODO: refactor this
// if (this.form.value.value) {
// this.onRemove(false);
// }
// if (dropped) {
// this.filesToUpload = fileInput.addedFiles;
// } else {
// this.filesToUpload = fileInput.target.files;
// }
// let messages: string[] = [];
// if (this.filesToUpload.length == 0) {
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.NO-FILES-SELECTED'));
// return;
// } else {
// let fileToUpload = this.filesToUpload[0];
// if (this.form.get("data") && this.form.get("data").value.types
// && this.form.get("data").value.types.map(type => type.value).includes(fileToUpload.type)
// && this.form.get("data").value.maxFileSizeInMB
// && this.form.get("data").value.maxFileSizeInMB * 1048576 >= fileToUpload.size) {
// this.upload();
// } else {
// this.filesToUpload = null;
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.LARGE-FILE-OR-UNACCEPTED-TYPE'));
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.MAX-FILE-SIZE', { 'maxfilesize': this.form.get("data").value.maxFileSizeInMB }));
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.ACCEPTED-FILE-TYPES') + this.form.get("data").value.types.map(type => type.value).join(", "));
// }
// if (messages && messages.length > 0) {
// this.dialog.open(FormValidationErrorsDialogComponent, {
// data: {
// errorMessages: messages
// }
// })
// }
// }
}
onRemove(makeFilesNull: boolean = true) {
//TODO: refactor this
// delete from tmp folder - subscribe call
// this.fileService.deleteFromTempFolder(this.form.value.value.id).subscribe(res => {
// if (makeFilesNull) {
// this.makeFilesNull();
// }
// this.cdr.detectChanges();
// }, error => {
// if (makeFilesNull) {
// this.makeFilesNull();
// }
// })
}
makeFilesNull() {
//TODO: refactor this
// this.filesToUpload = null;
// this.form.value.value = null;
// this.form.get("value").patchValue(null);
}
typesToString() {
return (this.field.data as DescriptionTemplateUploadData).types.map(type => type.value).toString();
}
download(): void {
//TODO: refactor this
// this.fileService.download(this.form.value.value.id)
// .pipe(takeUntil(this._destroyed))
// .subscribe(response => {
// const blob = new Blob([response.body], { type: this.form.value.value.type });
// const filename = this.fileUtils.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
// FileSaver.saveAs(blob, filename);
// });
}
}

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

@ -0,0 +1,176 @@
<div class="dynamic-form-section row" [id]="section.id">
<mat-accordion class="col-12">
<mat-expansion-panel class="row expansion-panel toc-section-header" [id]="pathName" [(expanded)]="panelExpanded">
<!-- TODO: uncomment -->
<!-- <mat-expansion-panel-header>
<mat-panel-title>
<h6 class='panel-title'>{{tocentry? tocentry.numbering :form.get('numbering').value}}. {{section.title}}</h6>
</mat-panel-title>
</mat-expansion-panel-header>-->
<mat-panel-description class="col-12">
<h6 class='panel-desc' *ngIf="section.description" [innerHTML]="section.description"></h6>
</mat-panel-description>
<ng-container *ngIf="!tocentry else tocentryCase">
<div *ngFor="let fieldSet of section.fieldSets; let i = index;" class="col-12">
<!-- <div class="row" *ngIf="(this.visibilityRulesService.isVisibleMap[fieldSet.id] ?? true) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldSet.id)"> -->
<div class="row" *ngIf="(this.visibilityRulesService.isVisibleMap[fieldSet.id] ?? true) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldSet.id)">
<div class="col-12">
<div class="row">
<app-form-field-set class="align-self-center col" [propertiesFormGroup]="propertiesFormGroup" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId"
[isChild]="false"
></app-form-field-set>
<!-- [showDelete]="(compositeFieldFormGroup.get('multiplicityItems').length) > 0" TODO: add this above -->
</div>
</div>
<div *ngIf="fieldSet" class="col-12">
<div class="row">
<!-- <div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.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="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
<span class="d-inline-flex align-items-center" [ngClass]="compositeFieldFormGroup.disabled ? '' : 'pointer'" (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>
</div> -->
<div *ngIf="fieldSet.hasCommentField" class="col-12">
<rich-text-editor-component [parentFormGroup]="propertiesFormGroup.get('commentFieldValue' + fieldSet.id)" [controlName]="'value'"
[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>
</div>
<div *ngIf="section.sections" class="col-12">
<div *ngFor="let section of section.sections; let j = index;" class="row">
<app-form-section class="col-12" [section]="section" [propertiesFormGroup]="propertiesFormGroup" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" [linkToScroll]="subsectionLinkToScroll"
[visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId"></app-form-section>
</div>
</div>
</ng-container>
</mat-expansion-panel>
</mat-accordion>
</div>
<!-- WORKING WITH TOCENTRIES -->
<ng-template #tocentryCase>
<ng-container [ngSwitch]="tocentry.subEntriesType">
<ng-container *ngSwitchCase="tocentriesType.FieldSet">
<!-- FIELDSET CASE -->
<div *ngFor="let fieldsetEntry of tocentry.subEntries; let i = index;" class="col-12" [id]="TOCENTRY_ID_PREFIX+fieldsetEntry.id" (click)="onAskedToScroll(fieldsetEntry.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="col-12">
<div *ngIf="!fieldsetEntry.form.get('multiplicity').value.tableView" class="row">
<app-form-field-set [tocentry]="fieldsetEntry" class="align-self-center col" [form]="fieldsetEntry.form" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId"
[isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0"></app-form-field-set>
</div>
<ng-container *ngIf="fieldsetEntry.form.get('multiplicity').value.tableView">
<div class="row">
<div class="col-12">
<app-form-composite-title class="row" [fieldSet]="fieldsetEntry"></app-form-composite-title>
</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>
</ng-container>
<ng-container *ngSwitchCase="tocentriesType.Section">
<!-- SECTION CASE -->
<div *ngIf="form.get('sections')" class="col-12"><!-- MAYBEE NOT NEEDED-->
<ng-container *ngFor="let sectionEntry of tocentry.subEntries; let j = index;">
<div class="row" *ngIf="!hiddenEntriesIds.includes(sectionEntry.id)">
<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [form]="sectionEntry.form" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" [linkToScroll]="subsectionLinkToScroll"
[visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId"
(askedToScroll)="onAskedToScroll($event)"
[hiddenEntriesIds]="hiddenEntriesIds"
></app-form-section>
</div>
</ng-container>
</div>
</ng-container>
</ng-container>
</ng-template>

46
dmp-frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss Normal file
View File

@ -0,0 +1,46 @@
.dynamic-form-section {
.expansion-panel {
// background-color: #eeeeee54;
background-color: white;
margin-top: 1em;
margin-bottom: 1em;
// margin-bottom: 1em;
}
.addOneFieldButton {
margin-top: -15px;
margin-left: -11px;
color: var(--primary-color);
}
.panel-title,
.panel-desc {
text-align: left;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-top: 1.625rem;
margin-bottom: 0.625rem;
}
.panel-desc {
// text-transform: capitalize;
text-transform: none;
font-weight: 400;
margin-top: .5rem;
}
}
.styleBorder {
border: 0.2em solid lightgray;
border-radius: 0.5em;
margin-bottom: 0.5em;
}
.mat-expansion-panel-header-description {
padding-bottom: 18px;
color: black;
}
::ng-deep .mat-expansion-panel-header {
height: auto !important;
min-height: 48px;
}

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

@ -0,0 +1,266 @@
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges
} from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { DescriptionTemplateSection } from '@app/core/model/description-template/description-template';
import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators';
import { DescriptionFieldEditorModel } from '../../../description-editor.model';
import { ToCEntry } from '../../../table-of-contents/models/toc-entry';
import { ToCEntryType } from '../../../table-of-contents/models/toc-entry-type.enum';
import { LinkToScroll } from '../../../table-of-contents/table-of-contents.component';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
@Component({
selector: 'app-form-section',
templateUrl: './form-section.component.html',
styleUrls: ['./form-section.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DescriptionFormSectionComponent extends BaseComponent implements OnInit, OnChanges {
@Input() section: DescriptionTemplateSection;
@Input() propertiesFormGroup: UntypedFormGroup;
@Input() visibilityRulesService: VisibilityRulesService;
// @Input() datasetProfileId: String;
// @Input() form: UntypedFormGroup;
@Input() tocentry: ToCEntry;
@Input() pathName: string;
@Input() path: string;
@Input() linkToScroll: LinkToScroll;
@Input() hiddenEntriesIds: string[] = [];
panelExpanded = true;
subsectionLinkToScroll: LinkToScroll;
@Output() askedToScroll = new EventEmitter<string>();
tocentriesType = ToCEntryType;
@Input() TOCENTRY_ID_PREFIX = "";
constructor(
private changeDetector: ChangeDetectorRef
) {
super();
}
ngOnInit() {
this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
this.changeDetector.markForCheck();
});
// Set comment fields to properties
this.section.fieldSets.forEach(fieldSet => {
if (fieldSet.hasCommentField && !this.propertiesFormGroup.contains('commentFieldValue' + fieldSet.id)) {
const item: DescriptionFieldEditorModel = new DescriptionFieldEditorModel();
item.key = 'commentFieldValue' + fieldSet.id;
this.propertiesFormGroup.addControl('commentFieldValue' + fieldSet.id, item.buildForm());
}
});
//TODO uncomment
// if (this.tocentry) {//maybe not needed as well
// this.form = this.tocentry.form as UntypedFormGroup;
// }
// this.initMultipleFieldsVisibility();
}
ngOnChanges(changes: SimpleChanges) {
if (changes['linkToScroll']) {
if (changes['linkToScroll'].currentValue && changes['linkToScroll'].currentValue.section) {
if (this.pathName === changes['linkToScroll'].currentValue.section) {
this.panelExpanded = true;
} else if (changes['linkToScroll'].currentValue.section.includes(this.pathName)) {
this.subsectionLinkToScroll = changes['linkToScroll'].currentValue;
this.panelExpanded = true;
}
}
}
}
// 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));
// }
}

54
dmp-frontend/src/app/ui/description/editor/description-form/description-form.component.html Normal file
View File

@ -0,0 +1,54 @@

<div *ngIf="datasetDescription" class="col-12 intro" [innerHTML]="datasetDescription"></div>
<form *ngIf="descriptionTemplate && propertiesFormGroup" novalidate class="col-12 card">
<div class="row">
<div class="dynamic-form-editor p-0 col-md-12">
<div id="form-container">
<ng-container *ngIf="!tocentries else toctemplate">
<div *ngFor="let page of descriptionTemplate?.definition?.pages; let z = index;">
<div *ngFor="let section of getSectionsOfPage(page.id); let i = index;">
<div class="row">
<app-form-section class="col-12" [section]="section" [path]="z+1"
[pathName]="'pages.'+z+'.sections.'+i" [propertiesFormGroup]="propertiesFormGroup" [visibilityRulesService]="visibilityRulesService"
[linkToScroll]="linkToScroll"></app-form-section>
</div>
</div>
</div>
</ng-container>
<!-- TOCENTRIES -->
<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)">
<mat-expansion-panel-header>
<mat-panel-title>
<h4 class="panel-title toc-page-header">
{{pageEntry.numbering}}. {{pageEntry.label |uppercase}}
</h4>
</mat-panel-title>
</mat-expansion-panel-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)">
<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [path]="z+1"
[pathName]="'pages.'+z+'.sections.'+i" [datasetProfileId]="datasetProfileId" [visibilityRulesService]="visibilityRulesService"
[linkToScroll]="linkToScroll"
(askedToScroll)="onAskedToScroll(expansionPanel, $event)"
[hiddenEntriesIds]="hiddenEntriesIds"
></app-form-section>
</div>
</ng-container>
</mat-expansion-panel>
</ng-container>
</mat-accordion>
</ng-template>
</div>
</div>
</div>
</form>

47
dmp-frontend/src/app/ui/description/editor/description-form/description-form.component.scss Normal file
View File

@ -0,0 +1,47 @@
@media (max-width: 768px) {
.dynamic-form-editor {
.form-container {
padding: 0px;
}
}
}
.form-container {
}
.intro {
text-align: left;
font-weight: 400;
letter-spacing: 0px;
color: #212121;
opacity: 1;
margin: 3rem 0rem 3rem 0rem;
}
.dynamic-form-editor {
mat-vertical-stepper {
background-color: #ffffff;
}
}
// ::ng-deep .mat-form-field-flex > .mat-form-field-infix {padding: 0.4em 0px !important;}
// ::ng-deep .mat-form-field-label-wrapper {
// top: -1.5em;
// }
// ::ng-deep
// .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float
// .mat-form-field-label {
// transform: translateY(-1.1em) scale(0.75);
// width: 133.33333%;
// }
// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
// background: #fafafa !important;
// }
// ::ng-deep .mat-step-header .mat-step-icon-selected,
// .mat-step-header .mat-step-icon-state-done,
// .mat-step-header .mat-step-icon-state-edit {
// background-color: var(--primary-color) !important;
// }

371
dmp-frontend/src/app/ui/description/editor/description-form/description-form.component.ts Normal file
View File

@ -0,0 +1,371 @@
import { AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { MatExpansionPanel } from '@angular/material/expansion';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';
import { BaseComponent } from '@common/base/base.component';
import { LinkToScroll } from '../table-of-contents/table-of-contents.component';
import { VisibilityRulesService } from './visibility-rules/visibility-rules.service';
import { DescriptionTemplate, DescriptionTemplateSection } from '@app/core/model/description-template/description-template';
import { Guid } from '@common/types/guid';
@Component({
selector: 'app-description-form',
templateUrl: './description-form.component.html',
styleUrls: ['./description-form.component.scss']
})
export class DescriptionFormComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {
@Input() propertiesFormGroup: UntypedFormGroup;
@Input() descriptionTemplate: DescriptionTemplate;
@Input() visibilityRulesService: VisibilityRulesService;
// @ViewChild('stepper', { static: false }) stepper: MatStepper;
@Input() path: string;
@Input() visibilityRules: Rule[] = [];
@Input() datasetDescription: String;
@Input() linkToScroll: LinkToScroll;
@Output() formChanged: EventEmitter<any> = new EventEmitter();
@Output() fieldsetFocusChange: EventEmitter<string> = new EventEmitter<string>();
// tocentries: ToCEntry[];
@Input() TOCENTRY_ID_PREFIX = "";
@Output() visibilityRulesInstance = new EventEmitter<VisibilityRulesService>();
// public hiddenEntriesIds: string[] = [];
constructor(
) {
super();
}
ngOnInit() {
this.init();
}
ngOnChanges(changes: SimpleChanges) {
this.init();
// When the form is changed set stepper index to 0.
// if (this.stepper && changes['form'] && !changes['form'].isFirstChange()) {
// this.stepper.selectedIndex = 0;
// } else if (this.stepper && changes['linkToScroll'] && changes['linkToScroll'].currentValue) {
// if (changes['linkToScroll'].currentValue.page >= 0) {
// this.stepper.selectedIndex = changes['linkToScroll'].currentValue.page;
// }
// }
}
ngAfterViewInit() {
}
getSectionsOfPage(pageId: string) : DescriptionTemplateSection[]{ //TODO: change that to something more performant since its used at html page.
return this.descriptionTemplate.definition.sections.filter(x => x.page == pageId);
}
init() {
// this.tocentries = this.getTocEntries();
// 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))
// .subscribe(val => {
// this.formChanged.emit(val);
// });
// }
// this.visibilityRulesInstance.emit(this.visibilityRulesService);
// this.hiddenEntriesIds = this._findHiddenEntries(this.tocentries);
// this.visibilityRulesService.visibilityChange
// .pipe(
// takeUntil(this._destroyed),
// debounceTime(100)
// )
// .subscribe(_ => {
// this.hiddenEntriesIds = this._findHiddenEntries(this.tocentries);
// })
}
onAskedToScroll(panel: MatExpansionPanel, id?: string) {
panel.open();
this.fieldsetFocusChange.emit(id);
}
// private _enrichWithMultiplicityRules(tocentries: ToCEntry[]): Rule[] {
// if (tocentries) {
// return tocentries.map(entry => {
// if (entry.type === ToCEntryType.Field) return []; // * TODO Me to tora implementation den tha ftasei pote edo
// if (entry.type === ToCEntryType.FieldSet) {
// // if(multiplicity: )
// try {
// // TODO OTAN KANW HIDE MULTIPLE PEDIO TOTE STO ON SHOW HANO TA VALUES (AUTO MPOREI NA EINAI KAI LEGIT) ('NA DOUME AN ONTOS DIAGRAFONTAI I APLA DEN TA DEIXNOUME')
// // * UPDATE KANEI DESTROY TO COMPONENT H NGIF . PITHANOTATA NA XREIASTEI NA TO KANOUME HIDDEN AN THELOUME KATI ALLO
// const multiplicity = entry.form.get('multiplicity').value;
// if ((multiplicity.max > 1) && (multiplicity.min > 0) && (multiplicity.max >= multiplicity.min)) { // has valid multiplicity
// return this._createAndAppendVisibilityRule(entry);
// }
// } catch {
// }
// return [];
// }
// if (entry.subEntries) {
// return this._enrichWithMultiplicityRules(entry.subEntries);
// }
// })
// .reduce((r, c) => { return [...c, ...r] }, []);
// }
// return [];
// }
// private _createAndAppendVisibilityRule(entry: ToCEntry): Rule[] {
// const rules_to_append = [];
// if (entry && (entry.type === ToCEntryType.FieldSet)) {
// //childs that are either target or source
// const childIdsWithVisRules = (entry.form.get('fields') as UntypedFormArray).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;
// }, []) as Field[];
// const innerCompositeFieldOriginalIds = (entry.form.get('fields') as UntypedFormArray).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 *****
// if (childIdsWithVisRules.length && multiplicityItemsValue && multiplicityItemsValue.length) {
// //check each multiplicity item composite field
// multiplicityItemsValue.forEach(mi => {
// const multiplicityCompositeFieldIds = mi.fields.map(x => x.id);
// const idMappings = multiplicityCompositeFieldIds.map(x => {
// return {
// original: innerCompositeFieldOriginalIds.find(l => x.includes(l)),
// multiplicityIdValue: x
// }
// }) as { original: string, multiplicityIdValue: string }[];
// //each field of mutliplicity item
// mi.fields.forEach(field => {
// //get original visibility rules (original field)
// //original id
// const original_id = childIdsWithVisRules.find(x => field.id.includes(x.id)).id;
// //get vis rules
// //as source
// const original_as_source = this.visibilityRules.filter(x => x.sourceField === original_id);
// const original_as_target = this.visibilityRules.filter(x => x.targetField === original_id);
// if (original_as_source.length) {
// //inner dependencies
// const innerDep = original_as_source.filter(x => innerCompositeFieldOriginalIds.includes(x.targetField));
// innerDep.forEach(x => {
// const newRule = { ...x, sourceField: field.id, targetField: idMappings.find(l => l.original === x.targetField).multiplicityIdValue } as Rule;
// rules_to_append.push(newRule);
// })
// //outer dependencies
// const outerDep = original_as_source.filter(x => !innerCompositeFieldOriginalIds.includes(x.targetField));
// outerDep.forEach(x => {
// const newRule = { ...x, sourceField: field.id };
// rules_to_append.push(newRule);
// })
// }
// if (original_as_target.length) {
// //inner dependencies
// const innerDep = original_as_target.filter(x => innerCompositeFieldOriginalIds.includes(x.sourceField));
// innerDep.forEach(x => {
// 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 => {
// const newRule = { ...x, targetField: field.id } as Rule;
// rules_to_append.push(newRule);
// })
// }
// })
// });
// }
// // ** FIELDSET ITSELF IS TARGET
// // ** source it can never be
// const compositeFieldAsTargetRules = this.visibilityRules.filter(x => x.targetField === entry.id);
// const idCompositeFieldMappings = multiplicityItemsValue.map(x => {
// return {
// originalValue: entry.id,
// newValue: x.id
// }
// }) as { originalValue: string, newValue: string }[];
// if (compositeFieldAsTargetRules.length) {
// compositeFieldAsTargetRules.forEach(x => {
// idCompositeFieldMappings.forEach(l => {
// const newRule = { ...x, targetField: l.newValue };
// rules_to_append.push(newRule);
// });
// });
// }
// }
// return rules_to_append;
// }
// private _buildRecursively(form: UntypedFormGroup, whatAmI: ToCEntryType): ToCEntry {
// if (!form) return null;
// switch (whatAmI) {
// case ToCEntryType.Section:
// const sections = form.get('sections') as UntypedFormArray;
// const fieldsets = form.get('compositeFields') as UntypedFormArray;
// const tempResult: ToCEntry[] = [];
// if (sections && sections.length) {
// sections.controls.forEach(section => {
// tempResult.push(this._buildRecursively(section as UntypedFormGroup, ToCEntryType.Section));
// });
// } else if (fieldsets && fieldsets.length) {
// fieldsets.controls.forEach(fieldset => {
// tempResult.push(this._buildRecursively(fieldset as UntypedFormGroup, ToCEntryType.FieldSet));
// });
// }
// return {
// // form: form,
// id: form.get('id').value,
// label: form.get('title').value,
// numbering: '',
// subEntries: tempResult,
// subEntriesType: sections && sections.length ? ToCEntryType.Section : ToCEntryType.FieldSet,
// type: ToCEntryType.Section,
// ordinal: form.get('ordinal').value
// }
// case ToCEntryType.FieldSet:
// return {
// // form: form,
// label: form.get('title').value,
// id: form.get('id').value,
// numbering: 's',
// subEntries: [],
// subEntriesType: ToCEntryType.Field,
// type: ToCEntryType.FieldSet,
// ordinal: form.get('ordinal').value
// }
// }
// }
// private _sortByOrdinal(tocentries: ToCEntry[]) {
// if (!tocentries || !tocentries.length) return;
// tocentries.sort(this._customCompare);
// tocentries.forEach(entry => {
// this._sortByOrdinal(entry.subEntries);
// });
// }
// private _customCompare(a, b) {
// return a.ordinal - b.ordinal;
// }
// private _calculateNumbering(tocentries: ToCEntry[], depth: number[] = []) {
// if (!tocentries || !tocentries.length) {
// return;
// }
// let prefixNumbering = depth.length ? depth.join('.') : '';
// if (depth.length) prefixNumbering = prefixNumbering + ".";
// tocentries.forEach((entry, i) => {
// entry.numbering = prefixNumbering + (i + 1);
// this._calculateNumbering(entry.subEntries, [...depth, i + 1])
// });
// }
// getTocEntries(): ToCEntry[] {
// if (!this.form) { return []; }
// const result: ToCEntry[] = [];
// //build parent pages
// (this.form.get('pages') as UntypedFormArray).controls.forEach((pageElement, i) => {
// result.push({
// id: i + 'id',
// label: pageElement.get('title').value,
// type: ToCEntryType.Page,
// // form: pageElement,
// numbering: (i + 1).toString(),
// subEntriesType: ToCEntryType.Section,
// subEntries: [],
// ordinal: pageElement.get('ordinal').value
// } as ToCEntry)
// });
// result.forEach((entry, i) => {
// const sections = entry.form.get('sections') as UntypedFormArray;
// sections.controls.forEach(section => {
// const tempResults = this._buildRecursively(section as UntypedFormGroup, ToCEntryType.Section);
// entry.subEntries.push(tempResults);
// });
// });
// this._sortByOrdinal(result);
// //calculate numbering
// this._calculateNumbering(result);
// return result;
// }
}

41
dmp-frontend/src/app/ui/description/editor/description-form/description-form.module.ts Normal file
View File

@ -0,0 +1,41 @@
import { NgModule } from '@angular/core';
import { FormattingModule } from "@app/core/formatting.module";
import { FileService } from "@app/core/services/file/file.service";
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
import { RichTextEditorModule } from "@app/library/rich-text-editor/rich-text-editor.module";
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { NgxDropzoneModule } from "ngx-dropzone";
import { DescriptionFormCompositeTitleComponent } from './components/form-composite-title/form-composite-title.component';
import { DescriptionFormFieldSetComponent } from './components/form-field-set/form-field-set.component';
import { DescriptionFormFieldComponent } from './components/form-field/form-field.component';
import { DescriptionFormSectionComponent } from './components/form-section/form-section.component';
import { DescriptionFormComponent } from './description-form.component';
import { VisibilityRulesService } from './visibility-rules/visibility-rules.service';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
AutoCompleteModule,
RichTextEditorModule,
NgxDropzoneModule,
FormattingModule
],
declarations: [
DescriptionFormComponent,
DescriptionFormSectionComponent,
DescriptionFormFieldSetComponent,
DescriptionFormFieldComponent,
DescriptionFormCompositeTitleComponent
],
exports: [
DescriptionFormComponent
],
providers: [
FileService
]
})
export class DescriptionFormModule { }

4
dmp-frontend/src/app/ui/description/editor/description-form/visibility-rules/models/visibility-rule-source.ts Normal file
View File

@ -0,0 +1,4 @@
export class VisibilityRuleSource {
public sourceControlId: string;
public sourceControlValue: string;
}

6
dmp-frontend/src/app/ui/description/editor/description-form/visibility-rules/models/visibility-rule.ts Normal file
View File

@ -0,0 +1,6 @@
import { VisibilityRuleSource } from "./visibility-rule-source";
export class VisibilityRule {
public targetControlId: string;
public sourceVisibilityRules: Array<VisibilityRuleSource>;
}

47
dmp-frontend/src/app/ui/description/editor/description-form/visibility-rules/models/visibility-rules-context.ts Normal file
View File

@ -0,0 +1,47 @@
import { Rule } from "@app/core/model/dataset-profile-definition/rule";
import { VisibilityRule } from "./visibility-rule";
export class VisibilityRulesContext {
public rules: Array<VisibilityRule> = new Array();
constructor() { }
public getRulesFromKey(id: string): VisibilityRule {
for (let i = 0; i < this.rules.length; i++) {
if (id === this.rules[i].targetControlId) { return this.rules[i]; }
}
return null;
}
public buildVisibilityRuleContext(items: Array<Rule>) {
items.forEach(item => {
this.addToVisibilityRulesContext(item);
});
}
public addToVisibilityRulesContext(item: Rule): void {
for (let i = 0; i < this.rules.length; i++) {
if (this.rules[i].targetControlId === item.targetField) {
const newRule = { sourceControlId: item.sourceField, sourceControlValue: item.requiredValue };
const ruleExists = this.rules[i].sourceVisibilityRules.find(x => {
return Object.keys(x).reduce((exact, key) => {
if (!exact) return false;
return x[key] === newRule[key];
}, true);
})
if (!ruleExists) {
this.rules[i].sourceVisibilityRules.push(newRule);
}
return;
}
}
const newVisibilityRuleArray = [({ sourceControlId: item.sourceField, sourceControlValue: item.requiredValue })];
this.rules.push({ targetControlId: item.targetField, sourceVisibilityRules: newVisibilityRuleArray });
return;
}
}

453
dmp-frontend/src/app/ui/description/editor/description-form/visibility-rules/visibility-rules.service.ts Normal file
View File

@ -0,0 +1,453 @@
import { ApplicationRef, Injectable, NgZone } from '@angular/core';
import { AbstractControl, UntypedFormArray, UntypedFormGroup } from '@angular/forms';
import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
import { isNumeric } from '@app/utilities/enhancers/utils';
import { Observable, Subject } from 'rxjs';
import { VisibilityRule } from './models/visibility-rule';
import { VisibilityRuleSource } from './models/visibility-rule-source';
import { VisibilityRulesContext } from './models/visibility-rules-context';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';
import { DescriptionTemplate, DescriptionTemplateSection } from '@app/core/model/description-template/description-template';
@Injectable()
export class VisibilityRulesService {
private readonly VISIBILITY_RULE_LOGIC: 'OR' | 'AND' = 'OR';
private readonly DEFAULTVISIBILITY = false;
private visibilityRuleContext: VisibilityRulesContext;
private form: AbstractControl;
public elementVisibilityMap = new MapWithDefault();
private elementVisibilityMapSubject = new Subject<Map<String, boolean>>();
private elementComputationalMap = new Map<String, Map<String, boolean>>(); /// keep saved the values of each form control validity value
private _changeMade$ = new Subject<void>();
get isVisibleMap(): MapWithDefault {
// console.log('isVisibleMap');
return this.elementVisibilityMap;
}; /// keep saved the values of each form control validity value
constructor(
public applicationReference: ApplicationRef,
public ngZone: NgZone
) {
}
getElementVisibilityMapObservable(): Observable<Map<String, boolean>> {
this.isVisibleMap
console.log('getElementVisibilityMapObservable: ');
return this.elementVisibilityMapSubject.asObservable();
}
public checkElementVisibility(id: string): boolean {
console.log('checkElementVisibility: ' + id);
return true;
// if (this.visibilityRuleContext.rules.filter(item => item.targetControlId === id).length === 0) { return true; }
// console.log(this.elementVisibilityMap.has(id) ? this.elementVisibilityMap.get(id) : false);
// return this.elementVisibilityMap.has(id) ? this.elementVisibilityMap.get(id) : false;
}
public buildVisibilityRules(item: Array<Rule>, form: AbstractControl) {
this.visibilityRuleContext = new VisibilityRulesContext();
this.visibilityRuleContext.buildVisibilityRuleContext(item || []);
this.form = form;
this.resetVisibilityRules();
}
public updateValueAndVisibility(id: string, value: any) {
console.log('updateValueAndVisibility: ' + id + ' value: ' + value);
const visibilityRules = this.visibilityRuleContext.rules.filter(item => item.sourceVisibilityRules.filter(source => source.sourceControlId === id).length > 0);
if (visibilityRules.length > 0) {
visibilityRules.forEach(item => this.evaluateVisibility(item, value, id));
this.elementVisibilityMapSubject.next(this.elementVisibilityMap);
}
}
private evaluateVisibility(visibilityRule: VisibilityRule, value: any, sourceId: string) {// source controlId is the same
console.log('evaluateVisibility: ' + visibilityRule + ' value: ' + value + ' sourceId: ' + sourceId);
const targetId = visibilityRule.targetControlId;
const visibilityMap = this.elementComputationalMap.get(targetId) ? this.elementComputationalMap.get(targetId) : new Map<String, boolean>();
if (value instanceof Array) {
const parsedSourceControlValues = visibilityRule.sourceVisibilityRules.map(e => this.parseValue(e.sourceControlValue));
const parsedValues = value.map(e => this.parseValue(e));
const isVisible = parsedValues.map(v => parsedSourceControlValues.includes(v)).reduce((acc, current) => acc || current, false);
// if(isVisible){
// this._emitChangesIfNeeded(visibilityRule.targetControlId, true);
// this.elementVisibilityMap.set(visibilityRule.targetControlId, true);
// return;
// }
visibilityMap.set(sourceId, isVisible);
} else {
const visibilityDependencySource = visibilityRule.sourceVisibilityRules.filter(x => x.sourceControlId === sourceId);
const shouldBeVisible = visibilityDependencySource.reduce((isVisible, x) => {
const shouldBeHidden = value !== null && (this.parseValue(value) !== this.parseValue(x.sourceControlValue));
return this.VISIBILITY_RULE_LOGIC === 'OR' ? (isVisible || !shouldBeHidden) : (isVisible && !shouldBeHidden);
// if(value !== null && )
}, this.VISIBILITY_RULE_LOGIC === 'AND');
visibilityMap.set(sourceId, shouldBeVisible);
}
this.elementComputationalMap.set(targetId, visibilityMap);// unnessecary
const isVisible = this._computeVisibility(targetId);
this._emitChangesIfNeeded(targetId, isVisible);
const previousVisibility = this.elementVisibilityMap.get(targetId);
this.elementVisibilityMap.set(targetId, isVisible);
if (!isVisible && previousVisibility !== isVisible) {
this.resetControlWithId(this.form, targetId);
}
// for (let i = 0; i < visibilityRule.sourceVisibilityRules.length; i++) {
// if (value != null && (this.parseValue(value) !== this.parseValue(visibilityRule.sourceVisibilityRules[i].sourceControlValue))) {
// this._emitChangesIfNeeded(visibilityRule.targetControlId, false);
// this.elementVisibilityMap.set(visibilityRule.targetControlId, false);
// this.resetControlWithId(this.form, visibilityRule.targetControlId);
// //this.updateValueAndVisibility(visibilityRule.targetControlId, null);
// // this.clearValues(targetPathKey);
// return;
// }
// }
// this._emitChangesIfNeeded(visibilityRule.targetControlId, true);
// this.elementVisibilityMap.set(visibilityRule.targetControlId, true);
// this.updateValueAndVisibility(visibilityRule.targetControlId, null);
}
private _computeVisibility(targetId: string): boolean {
console.log('_computeVisibility: ' + targetId);
const visibilityMap = this.elementComputationalMap.get(targetId);
const values = visibilityMap.values();
let currentVal = values.next();
let visibilityValues: boolean[] = [];
while (!currentVal.done) {
visibilityValues.push(currentVal.value);
currentVal = values.next();
}
if (visibilityValues.length) {
return visibilityValues.reduce((r, c) => {
if (this.VISIBILITY_RULE_LOGIC === 'OR') {
return r || c;
} else {
return r && c;
}
}, visibilityValues[0]);
}
return this.DEFAULTVISIBILITY;
}
private resetVisibilityRules() {
console.log('resetVisibilityRules: ');
this.elementVisibilityMap.clear();
this.elementVisibilityMap = new MapWithDefault();
this.elementComputationalMap.clear();
this.elementComputationalMap = new Map<String, Map<String, boolean>>();
this._populateComputationMap(); /// !IMPORTANT FOR THE AND LOGIC
this._changeMade$.next();
}
private _populateComputationMap(): void {
console.log('_populateComputationMap: ');
this.visibilityRuleContext.rules.forEach(rule => {
const targetId = rule.targetControlId;
const visibilityMap = this.elementComputationalMap.get(targetId) ? this.elementComputationalMap.get(targetId) : new Map<String, boolean>();
rule.sourceVisibilityRules.forEach(vr => {
visibilityMap.set(vr.sourceControlId, this.DEFAULTVISIBILITY);
});
this.elementComputationalMap.set(targetId, visibilityMap);
});
}
parseValue(value: any) {
if (typeof value === 'string') {
if (isNumeric(value)) { return value; }
else if (value === 'true') {
return true;
}
else if (value === 'false') {
return false;
}
else { return this.translate(value); }
} else { return value; }
}
search(path, obj, target) {
for (const k in obj) {
if (obj.hasOwnProperty(k)) {
if (obj[k] === target) {
return path + '.' + k;
} else if (typeof obj[k] === 'object') {
const result = this.search(path + '.' + k, obj[k], target);
if (result) {
return result;
}
}
}
}
return false;
}
scanIfChildsOfCompositeFieldHasVisibleItems(compositeFieldParent: UntypedFormGroup): boolean {
// console.log('scanIfChildsOfCompositeFieldHasVisibleItems: ' + compositeFieldParent);
//TODO: implement this
return true;
// let isVisible = false;
// (<UntypedFormArray>(compositeFieldParent.get('fields'))).controls.forEach(element => {
// if (this.checkElementVisibility(element.get('id').value)) {
// isVisible = true;
// }
// });
// return isVisible;
}
private translate(item: any) {
try {
return JSON.parse(item).value;
} catch (error) {
return item;
}
}
private resetControlWithId(formControl: AbstractControl, id: string) {
console.log('resetControlWithId: ' + id);
//TODO: implement this
// if (formControl instanceof UntypedFormGroup) {
// if ((formControl as UntypedFormGroup).contains('id') && (formControl as UntypedFormGroup).contains('value') && (formControl as UntypedFormGroup).get('id').value === id) {
// this.resetFieldFormGroup(formControl);
// } if ((formControl as UntypedFormGroup).contains('id') && (formControl as UntypedFormGroup).contains('fields') && (formControl as UntypedFormGroup).get('id').value === id) {
// this.resetCompositeFieldFormGroup(formControl);
// } else {
// Object.keys(formControl.controls).forEach(item => {
// const control = formControl.get(item);
// this.resetControlWithId(control, id);
// });
// }
// } else if (formControl instanceof UntypedFormArray) {
// formControl.controls.forEach(item => {
// this.resetControlWithId(item, id);
// });
// }
}
private resetFieldFormGroup(formGroup: UntypedFormGroup) {
console.log('resetFieldFormGroup: ' + formGroup);
//TODO: implement this
// const renderStyle = formGroup.getRawValue().viewStyle.renderStyle;
// if (renderStyle === DatasetProfileFieldViewStyle.Validation || renderStyle === DatasetProfileFieldViewStyle.DatasetIdentifier) {
// formGroup.get('value').setValue({ identifier: '', type: '' });
// } else {
// formGroup.get('value').setValue(formGroup.get('defaultValue').value ? this.parseValue(formGroup.get('defaultValue').value.value) : undefined);
// }
}
private resetCompositeFieldFormGroup(formGroup: UntypedFormGroup) {
console.log('resetCompositeFieldFormGroup: ' + formGroup);
//TODO: implement this
// (formGroup.get('fields') as UntypedFormArray).controls.forEach((element: UntypedFormGroup) => {
// this.resetFieldFormGroup(element);
// });
// (formGroup.get('multiplicityItems') as UntypedFormArray).controls.splice(0);
}
private _emitChangesIfNeeded(id: string, valueToBeSet: boolean) {
if (this.elementVisibilityMap.has(id)) {
if (this.elementVisibilityMap.get(id) != valueToBeSet) {
this._changeMade$.next();
}
} else {
this._changeMade$.next();
}
}
public get visibilityChange() {
return this._changeMade$.asObservable();
}
public getVisibilityDependency(targetId: string): VisibilityRuleSource[] | null {
console.log('getVisibilityDependency: ' + targetId);
return this.visibilityRuleContext.rules.reduce((hasDependency, rule) => {
if (hasDependency) return hasDependency;
if (rule.targetControlId === targetId) {
return rule.sourceVisibilityRules;
}
return null;
}, null) as VisibilityRuleSource[];
}
public getVisibilityTargets(sourceId: string): string[] {
console.log('getVisibilityTargets: ' + sourceId);
return this.visibilityRuleContext.rules.filter(x => {
const result = x.sourceVisibilityRules.filter(y => y.sourceControlId === sourceId);
return result.length;
}).map(x => x.targetControlId);
}
// public appendVisibilityRule(rule: VisibilityRule): void{
// const existingTargetRule = this.visibilityRuleContext.rules.find( r => r.targetControlId === rule.targetControlId);
// if(existingTargetRule){
// rule.sourceVisibilityRules.forEach(svr =>{
// existingTargetRule.sourceVisibilityRules.push(svr);
// });
// }else{
// this.visibilityRuleContext.rules.push(rule);
// }
// }
//removes rule that has the specific id either as a source either as a target
public removeAllIdReferences(id: string): void {
console.log('removeAllIdReferences: ' + id);
// * Remove from visibility rues and visibility rules context
//remove as a target
const temp = this.visibilityRuleContext.rules.map((x, i) => (x.targetControlId === id) ? i : null);
const indexes = temp.filter(x => x !== null);
indexes.reverse().forEach(index => this.visibilityRuleContext.rules.splice(index, 1));
this.elementVisibilityMap.delete(id);
//remove as a source
const tbd = this.visibilityRuleContext.rules.reduce((to_be_deleted, rule, ruleIdx) => {
const idxs = rule.sourceVisibilityRules.map((x, i) => (x.sourceControlId === id) ? i : null).filter(x => x !== null);
idxs.reverse().forEach(index => rule.sourceVisibilityRules.splice(index, 1));
if (!rule.sourceVisibilityRules.length) {
to_be_deleted.push(ruleIdx);
}
return to_be_deleted
}, []);
//clean up empty
tbd.reverse().forEach(index => {
this.visibilityRuleContext.rules.splice(index, 1);
});
// * Remove from computational map
// as a target
if (this.elementComputationalMap.get(id)) {
this.elementComputationalMap.delete(id);
}
// as a source
const keyIterator = this.elementComputationalMap.keys();
let currentKey = keyIterator.next();
while (!currentKey.done) {
const currentVals = this.elementComputationalMap.get(currentKey.value);
currentVals.delete(id);
currentKey = keyIterator.next();
}
}
public addNewRule(rule: Rule, currentVisibility = this.DEFAULTVISIBILITY): void {
console.log('addNewRule: ' + rule + ' currentVisibility: ' + currentVisibility);
const targetId = rule.targetField;
const sourceId = rule.sourceField;
this.visibilityRuleContext.addToVisibilityRulesContext(rule);
let visibilityMap = this.elementComputationalMap.get(targetId);
if (!visibilityMap) {
visibilityMap = new Map<String, boolean>();
this.elementComputationalMap.set(targetId, visibilityMap);
}
visibilityMap.set(sourceId, currentVisibility);
const isVisible = this._computeVisibility(targetId);
this._emitChangesIfNeeded(targetId, isVisible);
this.elementVisibilityMap.set(targetId, isVisible);
this.elementVisibilityMapSubject.next(this.elementVisibilityMap);
}
/**
* Check what sourceId hides or shows the target field
* return true if no rule found
*/
public checkTargetVisibilityProvidedBySource(sourceId: string, targetId: string): boolean {
console.log('checkTargetVisibilityProvidedBySource: ' + sourceId + ' targetId: ' + targetId);
const computationalMap = this.elementComputationalMap.get(targetId);
if (computationalMap) {
return !!computationalMap.get(sourceId);
}
return true;
}
public getVisibilityRulesFromDescriptionTempalte(descriptionTemplate: DescriptionTemplate): Rule[] {
console.log('getVisibilityRulesFromDescriptionTempalte: ' + descriptionTemplate);
const result: Rule[] = this.getVisibilityRulesFromDescriptionTempalteSections(descriptionTemplate?.definition?.sections);
return result;
}
public getVisibilityRulesFromDescriptionTempalteSections(sections: DescriptionTemplateSection[]): Rule[] {
console.log('getVisibilityRulesFromDescriptionTempalteSections: ' + sections);
const result: Rule[] = [];
sections.forEach(section => {
if (section.sections != null) { result.push(...this.getVisibilityRulesFromDescriptionTempalteSections(section.sections)); };
section?.fieldSets?.forEach(fieldSet => {
fieldSet?.fields?.forEach(field => {
field.visibilityRules?.forEach(visibilityRule => {
result.push({
sourceField: field.id.toString(),
targetField: visibilityRule.target,
requiredValue: visibilityRule.value
})
});
});
});
});
return result;
}
}
class MapWithDefault extends Map<string, boolean> {
get(key) {
console.log('MapWithDefault');
if (!this.has(key)) {
this.set(key, true);
}
return super.get(key);
}
}

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/dataset-external-references-editor.component.html → dmp-frontend/src/app/ui/description/editor/external-references/dataset-external-references-editor.component.html
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/dataset-external-references-editor.component.scss → dmp-frontend/src/app/ui/description/editor/external-references/dataset-external-references-editor.component.scss
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/dataset-external-references-editor.component.ts → dmp-frontend/src/app/ui/description/editor/external-references/dataset-external-references-editor.component.ts
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/data-repository/dataset-external-data-repository-dialog-editor.component.html → dmp-frontend/src/app/ui/description/editor/external-references/editors/data-repository/dataset-external-data-repository-dialog-editor.component.html
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/data-repository/dataset-external-data-repository-dialog-editor.component.scss → dmp-frontend/src/app/ui/description/editor/external-references/editors/data-repository/dataset-external-data-repository-dialog-editor.component.scss
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/data-repository/dataset-external-data-repository-dialog-editor.component.ts → dmp-frontend/src/app/ui/description/editor/external-references/editors/data-repository/dataset-external-data-repository-dialog-editor.component.ts
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/external-dataset/dataset-external-dataset-dialog-editor.component.html → dmp-frontend/src/app/ui/description/editor/external-references/editors/external-dataset/dataset-external-dataset-dialog-editor.component.html
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/external-dataset/dataset-external-dataset-dialog-editor.component.scss → dmp-frontend/src/app/ui/description/editor/external-references/editors/external-dataset/dataset-external-dataset-dialog-editor.component.scss
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/external-dataset/dataset-external-dataset-dialog-editor.component.ts → dmp-frontend/src/app/ui/description/editor/external-references/editors/external-dataset/dataset-external-dataset-dialog-editor.component.ts
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/registry/dataset-external-registry-dialog-editor.component.html → dmp-frontend/src/app/ui/description/editor/external-references/editors/registry/dataset-external-registry-dialog-editor.component.html
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/registry/dataset-external-registry-dialog-editor.component.scss → dmp-frontend/src/app/ui/description/editor/external-references/editors/registry/dataset-external-registry-dialog-editor.component.scss
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/registry/dataset-external-registry-dialog-editor.component.ts → dmp-frontend/src/app/ui/description/editor/external-references/editors/registry/dataset-external-registry-dialog-editor.component.ts
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/service/dataset-external-service-dialog-editor.component.html → dmp-frontend/src/app/ui/description/editor/external-references/editors/service/dataset-external-service-dialog-editor.component.html
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/service/dataset-external-service-dialog-editor.component.scss → dmp-frontend/src/app/ui/description/editor/external-references/editors/service/dataset-external-service-dialog-editor.component.scss
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/external-references/editors/service/dataset-external-service-dialog-editor.component.ts → dmp-frontend/src/app/ui/description/editor/external-references/editors/service/dataset-external-service-dialog-editor.component.ts
View File

5
dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html Normal file
View File

@ -0,0 +1,5 @@
<div class="demo-progress-bar-container">
<div *ngIf="isEditor()" class="percentage d-flex justify-content-center">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</div>
<mat-progress-bar class="form-progress-bar" [ngClass]="{'progress-bar': isEditor()}" mode="determinate" [value]="value"></mat-progress-bar>
<div *ngIf="isEditor()" class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">{{value}}%</div>
</div>

16
dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss Normal file
View File

@ -0,0 +1,16 @@
.percentage {
color: #212121;
opacity: 0.7;
font-weight: 400;
font-size: 0.875rem;
}
.progress-bar {
border-radius: 20px;
height: 11px;
}
::ng-deep .mat-progress-bar .mat-progress-bar-fill::after {
border-radius: 20px !important;
}

211
dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.ts Normal file
View File

@ -0,0 +1,211 @@
import {ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'app-form-progress-indication',
templateUrl: './form-progress-indication.component.html',
styleUrls: ['./form-progress-indication.component.scss']
})
export class FormProgressIndicationComponent extends BaseComponent implements OnInit, OnChanges {
@Input() formGroup: UntypedFormGroup;
@Input() isDmpEditor: boolean;
@Input() isDatasetEditor: boolean;
@Input() public progressValueAccuracy = 2;
determinateProgressValue: number;
progressSoFar: number;
total: number;
percent: number;
constructor(private visibilityRulesService: VisibilityRulesService) { super(); }
public value = 0;
ngOnInit() {
this.init();
}
ngOnChanges(changes: SimpleChanges) {
if(changes.formGroup) {
this.init();
}
}
init() {
setTimeout(() => {this.calculateValueForProgressbar();});
this.formGroup
.valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(control => {
setTimeout(() => {this.calculateValueForProgressbar();});
});
}
calculateValueForProgressbar() {
if (this.isDmpEditor) {
this.progressSoFar = this.countFormControlsValidForProgress(this.formGroup);
this.total = this.countFormControlsRequiredFieldsForTotal(this.formGroup);
} else if (this.isDatasetEditor) {
this.progressSoFar = this.countFormControlsValidForProgress(this.formGroup) + this.countFormControlsWithValueForProgress(this.formGroup);
this.total = this.countFormControlsRequiredFieldsForTotal(this.formGroup, true) + this.CountFormControlDepthLengthFotTotal(this.formGroup);
} else {
this.progressSoFar = this.countFormControlsWithValueForProgress(this.formGroup);
this.total = this.CountFormControlDepthLengthFotTotal(this.formGroup);
}
this.percent = (this.progressSoFar / this.total) * 100;
this.value = Number.parseFloat(this.percent.toPrecision(this.progressValueAccuracy));
}
countFormControlsWithValueForProgress(formControl: AbstractControl): number {
let valueCurent = 0;
if (formControl instanceof UntypedFormGroup) {
if (this.checkFormsIfIsFieldsAndVisible(formControl) && this.checkIfIsRequired((formControl as UntypedFormGroup))) {
if (this.hasValue(formControl))
valueCurent++;
}
if (this.chechFieldIfIsFieldSetAndVisible((formControl as UntypedFormGroup)) && this.checkIfIsRequired((formControl as UntypedFormGroup))) {
valueCurent = valueCurent + this.compositeFieldsGetChildsForProgress(formControl);
} else {
Object.keys(formControl.controls).forEach(item => {
const control = formControl.get(item);
valueCurent = valueCurent + this.countFormControlsWithValueForProgress(control);
});
}
} else if (formControl instanceof UntypedFormArray) {
formControl.controls.forEach(item => {
valueCurent = valueCurent + this.countFormControlsWithValueForProgress(item);
});
}
return valueCurent;
}
private hasValue(formGroup: UntypedFormGroup): boolean {
return formGroup.get('value').valid && formGroup.get('value').value != null && formGroup.get('value').value !== '' && (this.visibilityRulesService.isVisibleMap[formGroup.get('id').value] ?? true);
}
private compositeFieldsGetChildsForProgress(formGroup: UntypedFormGroup): number {
let valueCurent = 0;
if (this.visibilityRulesService.isVisibleMap[formGroup.get('id').value] ?? true) {
(formGroup.get('fields') as UntypedFormArray).controls.forEach((element: UntypedFormGroup) => {
valueCurent = valueCurent + this.countFormControlsWithValueForProgress(element);
});
(formGroup.get('multiplicityItems') as UntypedFormArray).controls.forEach((element: UntypedFormGroup) => {
valueCurent = valueCurent + this.countFormControlsWithValueForProgress(element);
});
}
return valueCurent;
}
private checkIfIsRequired(formControl: UntypedFormGroup): boolean {
return !!(formControl.get('validationRequired') && formControl.get('validationRequired').value);
}
private checkFormsIfIsFieldsAndVisible(formControl: UntypedFormGroup): boolean {
if (formControl.contains('id') && formControl.contains('value')) {
return true;
}
return false;
}
private chechFieldIfIsFieldSetAndVisible(formControl: UntypedFormGroup): boolean {
if (formControl.contains('id') && formControl.contains('fields')) {
return true;
}
return false;
}
CountFormControlDepthLengthFotTotal(formControl: AbstractControl): number {
let valueCurent = 0;
if (formControl instanceof UntypedFormArray) {
formControl.controls.forEach(item => {
valueCurent = valueCurent + this.CountFormControlDepthLengthFotTotal(item);
});
} else if (formControl instanceof UntypedFormGroup) {
if ((formControl as UntypedFormGroup).contains('id') && (formControl as UntypedFormGroup).contains('value') && (this.visibilityRulesService.isVisibleMap[(formControl as UntypedFormGroup).get('id').value] ?? true) && this.checkIfIsRequired((formControl as UntypedFormGroup))) {
valueCurent++;
} else if ((formControl as UntypedFormGroup).contains('id') && (formControl as UntypedFormGroup).contains('fields')) {
valueCurent = valueCurent + this.compositeFieldsGetChildsForTotal(formControl);
} else {
Object.keys(formControl.controls).forEach(item => {
const control = formControl.get(item);
valueCurent = valueCurent + this.CountFormControlDepthLengthFotTotal(control);
});
}
}
return valueCurent;
}
private compositeFieldsGetChildsForTotal(formGroup: UntypedFormGroup): number {
let valueCurent = 0;
if (this.visibilityRulesService.isVisibleMap[formGroup.get('id').value] ?? true) {
(formGroup.get('fields') as UntypedFormArray).controls.forEach((element: UntypedFormGroup) => {
valueCurent = valueCurent + this.CountFormControlDepthLengthFotTotal(element);
});
(formGroup.get('multiplicityItems') as UntypedFormArray).controls.forEach((element: UntypedFormGroup) => {
valueCurent = valueCurent + this.CountFormControlDepthLengthFotTotal(element);
});
}
return valueCurent;
}
countFormControlsValidForProgress(formControl: AbstractControl): number {
let valueCurrent = 0;
if (formControl instanceof UntypedFormControl) {
if (this.controlRequired(formControl) && this.controlEnabled(formControl) && formControl.valid) {
valueCurrent++;
}
} else if (formControl instanceof UntypedFormGroup) {
Object.keys(formControl.controls).forEach(item => {
const control = formControl.get(item);
valueCurrent = valueCurrent + this.countFormControlsValidForProgress(control);
});
} else if (formControl instanceof UntypedFormArray) {
formControl.controls.forEach(item => {
valueCurrent = valueCurrent + this.countFormControlsValidForProgress(item);
});
}
return valueCurrent;
}
countFormControlsRequiredFieldsForTotal(formControl: AbstractControl, checkVisibility = false): number {
let valueCurrent = 0;
if (formControl instanceof UntypedFormControl) {
if (this.controlRequired(formControl) && this.controlEnabled(formControl)) {
valueCurrent++;
}
} else if (formControl instanceof UntypedFormGroup) {
if(!checkVisibility || (!formControl.get('id')?.value || (this.visibilityRulesService.isVisibleMap[formControl.get('id').value] ?? true))) {
Object.keys(formControl.controls).forEach(item => {
const control = formControl.get(item);
valueCurrent = valueCurrent + this.countFormControlsRequiredFieldsForTotal(control, checkVisibility);
});
}
} else if (formControl instanceof UntypedFormArray) {
formControl.controls.forEach(item => {
valueCurrent = valueCurrent + this.countFormControlsRequiredFieldsForTotal(item, checkVisibility);
});
}
return valueCurrent;
}
controlRequired(formControl: AbstractControl) {
if (formControl.validator) {
const validator = formControl.validator({} as AbstractControl);
if (validator && validator.required) {
return true;
}
} else { return false }
}
controlEnabled(formControl: AbstractControl) {
if (formControl.enabled) {
return true;
} else { return false }
}
isEditor(): boolean {
return this.isDmpEditor || this.isDatasetEditor;
}
}

18
dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.module.ts Normal file
View File

@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { FormProgressIndicationComponent } from './form-progress-indication.component';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule
],
declarations: [
FormProgressIndicationComponent
],
exports: [
FormProgressIndicationComponent
]
})
export class DescriptionFormProgressIndicationModule { }

0
dmp-frontend/src/app/ui/description/dataset-wizard/prefill-dataset/prefill-dataset.component.html → dmp-frontend/src/app/ui/description/editor/prefill-description/prefill-description.component.html
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/prefill-dataset/prefill-dataset.component.scss → dmp-frontend/src/app/ui/description/editor/prefill-description/prefill-description.component.scss
View File

0
dmp-frontend/src/app/ui/description/dataset-wizard/prefill-dataset/prefill-dataset.component.ts → dmp-frontend/src/app/ui/description/editor/prefill-description/prefill-description.component.ts
View File

6
dmp-frontend/src/app/ui/description/editor/table-of-contents/models/toc-entry-type.enum.ts Normal file
View File

@ -0,0 +1,6 @@
export enum ToCEntryType {
Page = 0,
Section = 1,
FieldSet = 2,
Field = 3
}

14
dmp-frontend/src/app/ui/description/editor/table-of-contents/models/toc-entry.ts Normal file
View File

@ -0,0 +1,14 @@
import { Guid } from "@common/types/guid";
import { ToCEntryType } from "./toc-entry-type.enum";
export interface ToCEntry {
id: string;
label: string;
subEntriesType: ToCEntryType;
subEntries: ToCEntry[];
type: ToCEntryType;
// form: AbstractControl;
numbering: string;
ordinal: number;
hidden?: boolean
}

50
dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.html Normal file
View File

@ -0,0 +1,50 @@
<div *ngFor="let entry of tocentries; index as idx">
<!-- check if is visible -->
<ng-container *ngIf="!hiddenEntries.includes(entry.id)">
<!-- Is fieldset and has no visible inputs -->
<!-- <ng-container *ngIf="!(entry.type === tocEntryTypeEnum.FieldSet && !visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(entry.form))"> TODO: add this bellow -->
<ng-container *ngIf="!(entry.type === tocEntryTypeEnum.FieldSet)">
<span class="table-entry"
(click)="toggleExpand(idx);navigateToFieldSet(entry, $event); onEntrySelected(entry)"
[ngStyle]="calculateStyle(entry)"
[ngClass]="calculateClass(entry)"
>
<span [class.text-danger]="showErrors && propertiesFormGroup.get('entry.id')?.invalid && ( entry.type === tocEntryTypeEnum.FieldSet || (entry.type !== tocEntryTypeEnum.FieldSet && !expandChildren[idx])) && invalidChildsVisible(entry) ">
{{entry.numbering}}. {{entry.label}}
</span>
<!-- <mat-icon style="transform: translateY(3px);" class="text-danger"
*ngIf="showErrors && entry.form.invalid && entry.type !== tocEntryTypeEnum.FieldSet && !expandChildren[idx]">
priority_high
</mat-icon> -->
<!-- <ng-container *ngIf="entry.subEntries && entry.subEntries.length && !expandChildren[idx]">
<small>
({{entry.subEntries.length}})
</small>
</ng-container> -->
</span>
<!-- <div class="table-entry-container">
</div> -->
<div class="internal-table">
<table-of-contents-internal
[tocentries]="entry.subEntries"
*ngIf="entry.subEntries && entry.subEntries.length && expandChildren[idx]"
(entrySelected)="onEntrySelected($event)"
[selected]="selected"
[TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX"
[showErrors]="showErrors"
[hiddenEntries]="hiddenEntries"
[visibilityRulesService]="visibilityRulesService"
>
</table-of-contents-internal>
</div>
</ng-container>
</ng-container>
</div>

33
dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.scss Normal file
View File

@ -0,0 +1,33 @@
.internal-table{
margin-left: 1em;
padding-left: 0.2rem;
}
.table-entry{
text-overflow: ellipsis;
overflow: hidden;
padding-left: 0.2rem;
color: rgba(0, 0, 0, 0.54);
transition: color 100ms;
display: block;
span{
white-space: nowrap;
}
}
.table-entry:hover{
background-color: #ececec;
border-radius: 6px;
}
.selected {
color: #212121 !important;
font-weight: 700 !important;
opacity: 1 !important;
}
.section{
line-height: 1.7em;
}

168
dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.ts Normal file
View File

@ -0,0 +1,168 @@
import { Component, EventEmitter, Input, OnInit, Output, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { Guid } from '@common/types/guid';
import { ToCEntry } from '../models/toc-entry';
import { ToCEntryType } from '../models/toc-entry-type.enum';
@Component({
selector: 'table-of-contents-internal',
styleUrls: ['./table-of-contents-internal.scss'],
templateUrl: './table-of-contents-internal.html'
})
export class TableOfContentsInternal implements OnInit {
@Input() tocentries: ToCEntry[] = null;
@Input() selected: ToCEntry = null;
// @Input() visibilityRules:Rule[] = [];
@Output() entrySelected = new EventEmitter<ToCEntry>();
@Input() propertiesFormGroup: UntypedFormGroup;
expandChildren: boolean[];
tocEntryTypeEnum = ToCEntryType;
@Input() TOCENTRY_ID_PREFIX = "";
@Input() showErrors: boolean = false;
@Input() hiddenEntries: string[] = [];
@Input() visibilityRulesService: VisibilityRulesService;
@ViewChildren(TableOfContentsInternal) internalTables: QueryList<TableOfContentsInternal>;
constructor() {
}
ngOnInit(): void {
// console.log('component created');
if (this.tocentries) {
this.expandChildren = this.tocentries.map(() => false);
if (this.selected) {
for (let i = 0; i < this.tocentries.length; i++) {
if (this._findTocEntryById(this.selected.id, this.tocentries[i].subEntries)) {
if (this.expandChildren) {
this.expandChildren[i] = true;
}
break;
}
}
}
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes.selected && this.selected) {
for (let i = 0; i < this.tocentries.length; i++) {
if (this._findTocEntryById(this.selected.id, this.tocentries[i].subEntries)) {
if (this.expandChildren) {
this.expandChildren[i] = true;
}
break;
}
}
}
// if (!this.isActive && this.links && this.links.length > 0) {
// this.links.forEach(link => {
// link.selected = false;
// })
// this.links[0].selected = true;
// }
}
toggleExpand(index) {
this.expandChildren[index] = !this.expandChildren[index];
// console.log(this.expandChildren);
}
navigateToFieldSet(entry: ToCEntry, event) {
if (entry.type === ToCEntryType.FieldSet) {
const fieldSetId = entry.id;
const element = document.getElementById(this.TOCENTRY_ID_PREFIX + fieldSetId);
if (element) {
element.click();//open mat expansion panel
//scroll asyn in 200 ms so the expansion panel is expanded and the element coordinates are updated
setTimeout(() => {
const element = document.getElementById(this.TOCENTRY_ID_PREFIX + fieldSetId);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}, 300);
}
}
}
onEntrySelected(entry: ToCEntry) {
this.entrySelected.emit(entry);
}
calculateStyle(entry: ToCEntry) {
const style = {};
style['font-size'] = entry.type === this.tocEntryTypeEnum.FieldSet ? '.9em' : '1em';
return style;
}
calculateClass(entry: ToCEntry) {
const myClass = {};
if (this.selected && entry.id === this.selected.id) {
myClass['selected'] = true;
}
if (entry.type != this.tocEntryTypeEnum.FieldSet) {
myClass['section'] = true;
}
return myClass;
}
private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry {
if (!tocentries || !tocentries.length) {
return null;
}
let tocEntryFound = tocentries.find(entry => entry.id === id);
if (tocEntryFound) {
return tocEntryFound;
}
for (let entry of tocentries) {
const result = this._findTocEntryById(id, entry.subEntries);
if (result) {
tocEntryFound = result;
break;
}
}
return tocEntryFound ? tocEntryFound : null;
}
public invalidChildsVisible(entry: ToCEntry): boolean {
if (!entry || !this.visibilityRulesService) {
return false;
}
if (entry.type != this.tocEntryTypeEnum.FieldSet) {
return entry.subEntries.some(_ => this.invalidChildsVisible(_));
}
if (entry.type === this.tocEntryTypeEnum.FieldSet) {
const id = entry.id;
if (!(this.visibilityRulesService.isVisibleMap[id.toString()] ?? true)) {
return false;
}
// const fieldsArray = entry.form.get('fields') as UntypedFormArray;
const hasError = !entry.subEntries.every(field => {//every invalid field should be invisible
//TODO: check this
// if (field.invalid) {
// const id = field.id;
// const isVisible = this.visibilityRulesService.isVisibleMap[id);
// if (isVisible) {
// return false;
// }
// }
return true;
});
return hasError;
}
return false;
}
}

24
dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.html Normal file
View File

@ -0,0 +1,24 @@
<div *ngIf="links?.length" class="docs-toc-container">
<div class="scroll-container">
<span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-level-{{link.type}} docs-link mt-0" [class.docs-active]="link.active">
<span *ngIf="link.show" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
</span>
</div>
</div>
<div *ngIf="tocentries" class="docs-toc-container">
<div class="scroll-container col-12 internal-table">
<table-of-contents-internal #internalTable [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [tocentries]="tocentries"
[showErrors]="showErrors"
(entrySelected)="onToCentrySelected($event)"
[selected]="tocentrySelected"
[hiddenEntries]="hiddenEntries"
[visibilityRulesService]="visibilityRulesService"
[propertiesFormGroup]="propertiesFormGroup"
>
</table-of-contents-internal>
</div>
</div>
{{hiddenEntries | json}}

80
dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss Normal file
View File

@ -0,0 +1,80 @@
.docs-toc-container {
width: 100%;
padding: 5px 0 10px 0px;
cursor: pointer;
// border-left: solid 4px #0c7489;
.scroll-container {
overflow-y: auto;
// calc(100vh - 250px)
// height: calc(100vh - 250px);
}
.docs-link {
color: rgba(0, 0, 0, 0.54);
// color: mat-color($app-blue-theme-foreground, secondary-text);
transition: color 100ms;
&:hover,
&.docs-active {
.link-name {
background-color: #ececec;
border-radius: 6px;
// color: #0c7489;
}
// color: mat-color($primary, if($is-dark-theme, 200, default));
}
}
}
.docs-toc-heading {
margin: 0;
padding: 0;
font-size: 13px;
font-weight: bold;
}
span {
line-height: 16px;
margin: 6px 0 0;
position: relative;
text-decoration: none;
display: block;
overflow: hidden;
color: #21212194;
font-weight: 400;
max-width: 290px;
min-width: 290px;
padding: 0rem .4rem;
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
width: 100%;
}
}
.selected {
color: #212121 !important;
font-weight: 700 !important;
opacity: 1 !important;
}
// .docs-level-mat-expansion-panel {
// margin-left: 12px;
// }
.docs-level-h5 {
margin-left: 24px;
}
// .internal-table-outer{
// padding-left: 1.1em;
// width: 100%;
// }
.internal-table{
max-width: 320px;
min-width: 320px;
}

514
dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.ts Normal file
View File

@ -0,0 +1,514 @@
import { DOCUMENT } from '@angular/common';
import { Component, EventEmitter, Inject, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { DescriptionTemplate, DescriptionTemplateField, DescriptionTemplateFieldSet, DescriptionTemplateSection } from '@app/core/model/description-template/description-template';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { BaseComponent } from '@common/base/base.component';
import { Subject, Subscription, interval } from 'rxjs';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { ToCEntry } from './models/toc-entry';
import { ToCEntryType } from './models/toc-entry-type.enum';
import { TableOfContentsInternal } from './table-of-contents-internal/table-of-contents-internal';
export interface Link {
/* id of the section*/
id: string;
/* header type h3/h4 */
type: string;
/* If the anchor is in view of the page */
active: boolean;
/* name of the anchor */
name: string;
/* top offset px of the anchor */
top: number;
page: number;
section: number;
show: boolean;
selected: boolean;
}
@Component({
selector: 'app-table-of-contents',
styleUrls: ['./table-of-contents.component.scss'],
templateUrl: './table-of-contents.component.html'
})
export class TableOfContentsComponent extends BaseComponent implements OnInit, OnChanges {
@ViewChild('internalTable') internalTable: TableOfContentsInternal;
@Input() links: Link[];
container: string;
headerSelectors = '.toc-page-header, .toc-section-header, .toc-compositeField-header';
@Output() stepFound = new EventEmitter<LinkToScroll>();
@Output() currentLinks = new EventEmitter<Link[]>();
@Output() entrySelected = new EventEmitter<any>();
subscription: Subscription;
linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
@Input() isActive: boolean;
tocentries: ToCEntry[] = null;
@Input() TOCENTRY_ID_PREFIX = '';
@Input() showErrors: boolean = false;
@Input() selectedFieldsetId: string;
private _tocentrySelected: ToCEntry = null;
private isSelecting: boolean = false;
private _intersectionObserver: IntersectionObserver;
private _actOnObservation: boolean = true;
public hiddenEntries: string[] = [];
get tocentrySelected() {
return this.hasFocus ? this._tocentrySelected : null;
}
set tocentrySelected(value) {
this._tocentrySelected = value;
}
@Input() propertiesFormGroup: UntypedFormGroup;
@Input() descriptionTemplate: DescriptionTemplate;
@Input() hasFocus: boolean = false;
@Input() visibilityRulesService: VisibilityRulesService;
show: boolean = false;
constructor(
@Inject(DOCUMENT) private _document: Document,
// public visibilityRulesService: VisibilityRulesService
) {
super();
}
ngOnInit(): void {
if (this.descriptionTemplate) {
this.tocentries = this.getTocEntries(this.descriptionTemplate);
if (this.visibilityRulesService) {
this.hiddenEntries = this._findHiddenEntries(this.tocentries);
}
} else {
//emit value every 500ms
const source = interval(500);
this.subscription = source.subscribe(val => {
const headers = Array.from(this._document.querySelectorAll(this.headerSelectors)) as HTMLElement[];
this.linksSubject.next(headers);
});
if (!this.links || this.links.length === 0) {
this.linksSubject.asObservable()
.pipe(distinctUntilChanged((p: HTMLElement[], q: HTMLElement[]) => JSON.stringify(p) == JSON.stringify(q)))
.subscribe(headers => {
const links: Array<Link> = [];
if (headers.length) {
let page;
let section;
let show
for (const header of headers) {
let name;
let id;
if (header.classList.contains('toc-page-header')) { // deprecated after removing stepper
name = header.innerText.trim().replace(/^link/, '');
id = header.id;
page = header.id.split('_')[1];
section = undefined;
show = true;
} else if (header.classList.contains('toc-section-header')) {
name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, '');
id = header.id;
page = header.id.split('.')[1];
section = header.id;
if (header.id.split('.')[4]) { show = false; }
else { show = true; }
} else if (header.classList.contains('toc-compositeField-header')) {
name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
id = header.id;
// id = header.parentElement.parentElement.parentElement.id;
show = false;
}
const { top } = header.getBoundingClientRect();
links.push({
name,
id,
type: header.tagName.toLowerCase(),
top: top,
active: false,
page: page,
section: section,
show: show,
selected: false
});
}
}
this.links = links;
// Initialize selected for button next on dataset wizard component editor
this.links.length > 0 ? this.links[0].selected = true : null;
})
}
}
}
private _findHiddenEntries(tocentries: ToCEntry[]): string[] {
if (!tocentries) return [];
const invisibleEntries: string[] = []
tocentries.forEach(entry => {
if (entry.type === ToCEntryType.FieldSet) {
const isVisible = this.visibilityRulesService.isVisibleMap[entry.id.toString()] ?? true;
if (!isVisible) {
invisibleEntries.push(entry.id.toString());
} else {
//check field inputs
const oneFieldAtLeastIsVisible = entry.subEntries.some(field => this.visibilityRulesService.isVisibleMap[field.id.toString()] ?? true);
if (!oneFieldAtLeastIsVisible) {
invisibleEntries.push(entry.id.toString());
}
}
} else {
const hiddenEntries = this._findHiddenEntries(entry.subEntries);
if (entry.subEntries && (entry.subEntries.every(e => hiddenEntries.includes(e.id.toString())))) {
//all children all hidden then hide parent node;
invisibleEntries.push(entry.id.toString());
} else {
invisibleEntries.push(...hiddenEntries);
}
}
})
return invisibleEntries;
}
private _visibilityRulesSubscription: Subscription;
ngOnChanges(changes: SimpleChanges) {
if (this.selectedFieldsetId) {
this.onToCentrySelected(this._findTocEntryById(this.selectedFieldsetId, this.tocentries), false);
this._actOnObservation = false;
setTimeout(() => {
this._actOnObservation = true;
}, 1000);
}
if (changes['hasFocus'] && changes.hasFocus.currentValue) {
this._resetObserver();
}
if ('visibilityRulesService') {
if (this._visibilityRulesSubscription) {
this._visibilityRulesSubscription.unsubscribe();
this._visibilityRulesSubscription = null;
}
if (!this.visibilityRulesService) return;
this._visibilityRulesSubscription = this.visibilityRulesService.visibilityChange
.pipe(takeUntil(this._destroyed))
.pipe(debounceTime(200))
.subscribe(_ => {
if (this.hasFocus) {
this._resetObserver();
this.hiddenEntries = this._findHiddenEntries(this.tocentries);
}
});
this.hiddenEntries = this._findHiddenEntries(this.tocentries);
}
// if (!this.isActive && this.links && this.links.length > 0) {
// this.links.forEach(link => {
// link.selected = false;
// })
// this.links[0].selected = true;
// }
}
private _resetObserver() {
if (this._intersectionObserver) {//clean up
this._intersectionObserver.disconnect();
this._intersectionObserver = null;
}
const options = {
root: null,
rootMargin: '-38% 0px -60% 0px',
threshold: 0
}
this._intersectionObserver = new IntersectionObserver((entries, observer) => {
if (!this._actOnObservation) {
return;
}
entries.forEach(ie => {
if (ie.isIntersecting) {
try {
const target_id = ie.target.id.replace(this.TOCENTRY_ID_PREFIX, '');
if (this.visibilityRulesService.isVisibleMap[target_id] ?? true) {
this.onToCentrySelected(this._findTocEntryById(target_id, this.tocentries));
}
} catch {
}
}
})
}, options);
const fieldsetsEtries = this._getAllFieldSets(this.tocentries);
fieldsetsEtries.forEach(e => {
if (e.type === ToCEntryType.FieldSet) {
try {
const targetElement = document.getElementById(this.TOCENTRY_ID_PREFIX + e.id);
this._intersectionObserver.observe(targetElement);
} catch {
console.log('element not found');
}
}
});
}
goToStep(link: Link) {
this.stepFound.emit({
page: link.page,
section: link.section
});
this.currentLinks.emit(this.links);
setTimeout(() => {
const target = document.getElementById(link.id);
target.scrollIntoView(true);
var scrolledY = window.scrollY;
if (scrolledY) {
window.scroll(0, scrolledY - 70);
}
}, 500);
}
toggle(headerLink: Link) {
const headerPage = +headerLink.name.split(" ", 1);
let innerPage;
for (const link of this.links) {
link.selected = false;
if (link.type === 'mat-expansion-panel') {
innerPage = +link.name.split(".", 1)[0];
if (isNaN(innerPage)) { innerPage = +link.name.split(" ", 1) }
} else if (link.type === 'h5') {
innerPage = +link.name.split(".", 1)[0];
}
if (headerPage === innerPage && (link.type !== 'mat-expansion-panel' || (link.type === 'mat-expansion-panel' && link.id.split(".")[4]))) {
link.show = !link.show;
}
}
headerLink.selected = true;
}
// getIndex(link: Link): number {
// return +link.id.split("_", 2)[1];
// }
private _buildRecursivelySection(item: DescriptionTemplateSection): ToCEntry {
if (!item) return null;
const sections = item.sections;
const fieldsets = item.fieldSets;
const tempResult: ToCEntry[] = [];
if (sections && sections.length) {
sections.forEach(section => {
tempResult.push(this._buildRecursivelySection(section));
});
} else if (fieldsets && fieldsets.length) {
fieldsets.forEach(fieldset => {
tempResult.push(this._buildRecursivelyFieldSet(fieldset));
});
}
return {
// form: form,
id: item.id,
label: item.title,
numbering: '',
subEntries: tempResult,
subEntriesType: sections && sections.length ? ToCEntryType.Section : ToCEntryType.FieldSet,
type: ToCEntryType.Section,
ordinal: item.ordinal
}
}
private _buildRecursivelyFieldSet(item: DescriptionTemplateFieldSet): ToCEntry {
if (!item) return null;
const tempResult: ToCEntry[] = [];
if (item && item.fields.length > 0) {
item.fields.forEach(field => {
tempResult.push(this._buildRecursivelyField(field));
});
}
return {
// form: form,
id: item.id,
label: item.title,
numbering: 's',
subEntries: tempResult,
subEntriesType: ToCEntryType.Field,
type: ToCEntryType.FieldSet,
ordinal: item.ordinal
};
}
private _buildRecursivelyField(item: DescriptionTemplateField): ToCEntry {
if (!item) return null;
return {
// form: form,
id: item.id,
label: null,
numbering: 's',
subEntries: null,
subEntriesType: null,
type: ToCEntryType.Field,
ordinal: item.ordinal,
hidden: true
};
}
private _sortByOrdinal(tocentries: ToCEntry[]) {
if (!tocentries || !tocentries.length) return;
tocentries.sort(this._customCompare);
tocentries.forEach(entry => {
this._sortByOrdinal(entry.subEntries);
});
}
private _customCompare(a, b) {
return a.ordinal - b.ordinal;
}
private _calculateNumbering(tocentries: ToCEntry[], depth: number[] = []) {
if (!tocentries || !tocentries.length) {
return;
}
let prefixNumbering = depth.length ? depth.join('.') : '';
if (depth.length) prefixNumbering = prefixNumbering + ".";
tocentries.forEach((entry, i) => {
entry.numbering = prefixNumbering + (i + 1);
this._calculateNumbering(entry.subEntries, [...depth, i + 1])
});
}
getTocEntries(descriptionTemplate: DescriptionTemplate): ToCEntry[] {
if (descriptionTemplate == null) { return []; }
const result: ToCEntry[] = [];
//build parent pages
descriptionTemplate.definition.pages.forEach((pageElement, i) => {
const tocEntry: ToCEntry = {
// id: i + 'id',
id: pageElement.id,
label: pageElement.title,
type: ToCEntryType.Page,
// form: pageElement,
numbering: (i + 1).toString(),
subEntriesType: ToCEntryType.Section,
subEntries: [],
ordinal: pageElement.ordinal
};
const sections = descriptionTemplate.definition.sections.filter(x => x.page == pageElement.id);
sections.forEach(section => {
const tempResults = this._buildRecursivelySection(section);
tocEntry.subEntries.push(tempResults);
});
result.push(tocEntry)
});
this._sortByOrdinal(result);
//calculate numbering
this._calculateNumbering(result);
return result;
}
onToCentrySelected(entry: ToCEntry = null, execute: boolean = true) {
if (!this.isSelecting) {
this.isSelecting = true;
this.tocentrySelected = entry;
this.entrySelected.emit({ entry: entry, execute: execute });
setTimeout(() => {
this.isSelecting = false;
}, 600);
}
}
private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry {
if (!tocentries || !tocentries.length) {
return null;
}
let tocEntryFound = tocentries.find(entry => entry.id === id);
if (tocEntryFound) {
return tocEntryFound;
}
for (let entry of tocentries) {
const result = this._findTocEntryById(id, entry.subEntries);
if (result) {
tocEntryFound = result;
break;
}
}
return tocEntryFound ? tocEntryFound : null;
}
/**
* Get all filedsets in a tocentry array;
* @param entries Tocentries to search in
* @returns The tocentries that are Fieldsets provided in the entries
*/
private _getAllFieldSets(entries: ToCEntry[]): ToCEntry[] {
const fieldsets: ToCEntry[] = [];
if (!entries || !entries.length) return fieldsets;
entries.forEach(e => {
if (e.type === ToCEntryType.FieldSet) {
fieldsets.push(e);
} else {
fieldsets.push(...this._getAllFieldSets(e.subEntries));
}
});
return fieldsets;
}
public hasVisibleInvalidFields(): boolean {
if (!this.internalTable || !this.tocentries) {
return false;
}
return this.tocentries.some(e => this.internalTable.invalidChildsVisible(e));
}
protected readonly console = console;
}
export interface LinkToScroll {
page: number;
section: number;
}

15
dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.module.ts Normal file
View File

@ -0,0 +1,15 @@
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import { TableOfContentsInternal } from './table-of-contents-internal/table-of-contents-internal';
import { MatIconModule } from '@angular/material/icon';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { TableOfContentsComponent } from './table-of-contents.component';
@NgModule({
imports: [CommonModule, RouterModule, MatIconModule],
declarations: [TableOfContentsComponent, TableOfContentsInternal],
exports: [TableOfContentsComponent],
providers: [VisibilityRulesService]
})
export class TableOfContentsModule { }

27
dmp-frontend/src/app/ui/description/listing/description-listing.module.ts Normal file
View File

@ -0,0 +1,27 @@
import { NgModule } from '@angular/core';
import { FormattingModule } from '@app/core/formatting.module';
import { UrlListingModule } from '@app/library/url-listing/url-listing.module';
import { DescriptionListingComponent } from '@app/ui/description/listing/description-listing.component';
import { DescriptionListingItemComponent } from '@app/ui/description/listing/listing-item/description-listing-item.component';
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { DescriptionListingRoutingModule } from './description-listing.routing';
import { DescriptionCopyDialogModule } from '../description-copy-dialog/description-copy-dialog.module';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
UrlListingModule,
FormattingModule,
DescriptionCopyDialogModule,
DescriptionListingRoutingModule
],
declarations: [
DescriptionListingComponent,
DescriptionListingItemComponent,
],
exports: [
]
})
export class DescriptionListingModule { }

30
dmp-frontend/src/app/ui/description/listing/description-listing.routing.ts Normal file
View File

@ -0,0 +1,30 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '@app/core/auth-guard.service';
import { DescriptionListingComponent } from './description-listing.component';
const routes: Routes = [
{
path: '',
component: DescriptionListingComponent,
// canActivate: [AuthGuard],
data: {
breadcrumb: true
},
},
{
path: 'dmp/:dmpId',
component: DescriptionListingComponent,
canActivate: [AuthGuard],
data: {
breadcrumb: true
},
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: []
})
export class DescriptionListingRoutingModule { }

Some files were not shown because too many files have changed in this diff Show More