From 5534f4f4a93cbf87ca73880e1fe56ebe41674345 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Tue, 27 Oct 2020 12:04:11 +0200 Subject: [PATCH] Adds template preview on: clone dialog select template field, dmp upload select template field --- .../clone-dialog/clone-dialog.component.html | 2 +- .../clone-dialog/clone-dialog.component.ts | 36 +++++- .../dmp-upload-dialogue.component.html | 6 +- .../dmp-upload-dialogue.component.scss | 14 +++ .../dmp-upload-dialogue.component.ts | 41 ++++++- .../start-new-dataset-dialog.component.scss | 107 +++++++++--------- .../start-new-dmp-dialog.component.html | 6 +- 7 files changed, 147 insertions(+), 65 deletions(-) diff --git a/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html b/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html index 5ec71e67b..2f3e58286 100644 --- a/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html +++ b/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html @@ -36,7 +36,7 @@
{{'DMP-EDITOR.FIELDS.TEMPLATES' | translate}}
- + {{data.formGroup.get('profiles').getError('backendError').message}} diff --git a/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.ts index 41325f3de..9386b4d9e 100644 --- a/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.ts +++ b/dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.ts @@ -1,5 +1,5 @@ import { Component, Inject } from '@angular/core'; -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { DmpService } from '@app/core/services/dmp/dmp.service'; import { map, takeUntil } from 'rxjs/operators'; import { DmpModel } from '@app/core/model/dmp/dmp'; @@ -11,13 +11,15 @@ import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile'; import { DataTableRequest } from '@app/core/model/data-table/data-table-request'; import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria'; import { AvailableProfilesComponent } from '../../editor/available-profiles/available-profiles.component'; +import { DatasetPreviewDialogComponent } from '../../dataset-preview/dataset-preview-dialog.component'; +import { BaseComponent } from '@common/base/base.component'; @Component({ selector: 'app-clone-dialog', templateUrl: './clone-dialog.component.html', styleUrls: ['./clone-dialog.component.scss'] }) -export class CloneDialogComponent { +export class CloneDialogComponent extends BaseComponent { agreePrivacyPolicyNames = false; initialItems = []; @@ -25,9 +27,12 @@ export class CloneDialogComponent { constructor( public dialogRef: MatDialogRef, + private dialog: MatDialog, private dmpService: DmpService, @Inject(MAT_DIALOG_DATA) public data: any ) { + super(); + this.selectionChanged(this.initialItems) this.profilesAutoCompleteConfiguration = { @@ -78,4 +83,31 @@ export class CloneDialogComponent { return this.dmpService.searchDMPProfiles(request); } + onPreviewTemplate(event) { + const dialogRef = this.dialog.open(DatasetPreviewDialogComponent, { + width: '590px', + minHeight: '200px', + restoreFocus: false, + data: { + template: event + }, + panelClass: 'custom-modalbox' + }); + dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { + if (result) { + let profiles = this.data.formGroup.get('profiles').value; + profiles.push(event); + this.data.formGroup.get('profiles').setValue(profiles); + this.profilesAutoCompleteConfiguration = { + filterFn: this.filterProfiles.bind(this), + initialItems: (excludedItems: any[]) => this.filterProfiles('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))), + displayFn: (item) => item['label'], + titleFn: (item) => item['label'], + subtitleFn: (item) => item['description'], + popupItemActionIcon: 'visibility' + }; + } + }); + } + } diff --git a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html index 279603fa8..cfcad8106 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html +++ b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html @@ -31,17 +31,17 @@
- +
- +
- +
diff --git a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.scss b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.scss index 39d84134c..be50ce8e5 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.scss +++ b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.scss @@ -46,6 +46,20 @@ font-weight: 500; } +.next-btn-disabled { + width: 100px; + height: 43px; + background: #ffffff 0% 0% no-repeat padding-box; + border: 1px solid #b5b5b5; + border-radius: 30px; + opacity: 1; +} + +.next-btn:hover { + background: #129d99; + color: #ffffff; +} + .attach-btn { top: -20px; } diff --git a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.ts b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.ts index 95ae0f6c7..5a147355d 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.ts +++ b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.ts @@ -1,19 +1,21 @@ import { Component, Inject } from '@angular/core'; -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { DmpService } from '../../../../core/services/dmp/dmp.service'; import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration'; -import { map } from 'rxjs/operators'; +import { map, takeUntil } from 'rxjs/operators'; import { Observable } from 'rxjs'; import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile'; import { DataTableRequest } from '@app/core/model/data-table/data-table-request'; import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria'; +import { DatasetPreviewDialogComponent } from '../../dataset-preview/dataset-preview-dialog.component'; +import { BaseComponent } from '@common/base/base.component'; @Component({ selector: 'dmp-upload-dialogue', templateUrl: './dmp-upload-dialogue.component.html', styleUrls: ['./dmp-upload-dialogue.component.scss'] }) -export class DmpUploadDialogue { +export class DmpUploadDialogue extends BaseComponent { dmpTitle: string; dmpProfiles: any[] = []; files: File[] = []; @@ -31,8 +33,11 @@ export class DmpUploadDialogue { constructor( public dialogRef: MatDialogRef, private _service: DmpService, + private dialog: MatDialog, @Inject(MAT_DIALOG_DATA) public data: any, - ) { } + ) { + super(); + } cancel() { this.data.success = false; @@ -79,6 +84,34 @@ export class DmpUploadDialogue { this.dmpTitle = null; } + onPreviewTemplate(event) { + const dialogRef = this.dialog.open(DatasetPreviewDialogComponent, { + width: '590px', + minHeight: '200px', + restoreFocus: false, + data: { + template: event + }, + panelClass: 'custom-modalbox' + }); + dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { + if (result) { + if(!this.dmpProfiles) { + this.dmpProfiles = []; + } + this.dmpProfiles.push(event); + this.profilesAutoCompleteConfiguration = { + filterFn: this.filterProfiles.bind(this), + initialItems: (excludedItems: any[]) => this.filterProfiles('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))), + displayFn: (item) => item['label'], + titleFn: (item) => item['label'], + subtitleFn: (item) => item['description'], + popupItemActionIcon: 'visibility' + }; + } + }); + } + filterProfiles(value: string): Observable { const request = new DataTableRequest(null, null, { fields: ['+label'] }); const criteria = new DatasetProfileCriteria(); diff --git a/dmp-frontend/src/app/ui/dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component.scss index a6bbcd590..6eff0e1c6 100644 --- a/dmp-frontend/src/app/ui/dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component.scss +++ b/dmp-frontend/src/app/ui/dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component.scss @@ -1,96 +1,101 @@ ::ng-deep .mat-dialog-container { - border-radius: 8px; + border-radius: 8px; } .form-container { - width: 33rem; - min-height: 14rem; - padding: 0.28rem 0.34rem 0rem 0.625rem; + width: 33rem; + min-height: 14rem; + padding: 0.28rem 0.34rem 0rem 0.625rem; } .logo { - width: 8.44rem; + width: 8.44rem; } .close-icon { - cursor: pointer; + cursor: pointer; } .content { - margin: 2.17rem 0rem 1.1875rem 0rem; + margin: 2.17rem 0rem 1.1875rem 0rem; } .title, .text { - font-size: 1.25rem; - font-weight: lighter; - color: #000000; - opacity: 0.8; + font-size: 1.25rem; + font-weight: lighter; + color: #000000; + opacity: 0.8; } .title { - text-align: left; - font-weight: 500; - font-size: 1.25rem; - letter-spacing: 0px; - color: #212121; - opacity: 1; + text-align: left; + font-weight: 500; + font-size: 1.25rem; + letter-spacing: 0px; + color: #212121; + opacity: 1; } .text { - margin-bottom: 2.9375rem; - line-height: 1.9rem; + margin-bottom: 2.9375rem; + line-height: 1.9rem; } .cancel-btn { - background: #ffffff 0% 0% no-repeat padding-box; - border: 1px solid #b5b5b5; - border-radius: 30px; - width: 101px; - height: 43px; - color: #212121; - font-weight: 500; + background: #ffffff 0% 0% no-repeat padding-box; + border: 1px solid #b5b5b5; + border-radius: 30px; + width: 101px; + height: 43px; + color: #212121; + font-weight: 500; } .next-btn { - background: #ffffff 0% 0% no-repeat padding-box; - border: 1px solid #129d99; - border-radius: 30px; - opacity: 1; - width: 101px; - height: 43px; - color: #129d99; - font-weight: 500; + background: #ffffff 0% 0% no-repeat padding-box; + border: 1px solid #129d99; + border-radius: 30px; + opacity: 1; + width: 101px; + height: 43px; + color: #129d99; + font-weight: 500; +} + +.next-btn:hover { + background-color: #129d99; + color: white; } .disabled-btn { - border: 1px solid #b5b5b5; - border-radius: 30px; - opacity: 1; - width: 101px; - height: 43px; - color: #b5b5b5; - font-weight: 500; + border: 1px solid #b5b5b5; + border-radius: 30px; + opacity: 1; + width: 101px; + height: 43px; + color: #b5b5b5; + font-weight: 500; } .actions { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .new-dmp { - text-align: left; - text-decoration: underline; - letter-spacing: 0px; - color: #008887; - cursor: pointer; + text-align: left; + text-decoration: underline; + letter-spacing: 0px; + color: #008887; + cursor: pointer; } ::ng-deep .dmp-form .mat-form-field-appearance-outline .mat-form-field-outline { - background: #fafafa !important; + background: #fafafa !important; } ::ng-deep .dmp-form .mat-form-field-appearance-outline .mat-form-field-infix { - font-size: 1rem; - padding: 0.6em 0 1em 0 !important; + font-size: 1rem; + padding: 0.6em 0 1em 0 !important; } diff --git a/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html b/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html index 774191881..44e0ca662 100644 --- a/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html +++ b/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html @@ -7,14 +7,12 @@

{{'NAV-BAR.START-NEW-DMP' | translate}}

{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}

-

{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}

-