Adds template preview on: clone dialog select template field, dmp upload select template field

dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html

@@ -36,7 +36,7 @@
 		<div class="col-12">
 			<div class="heading">{{'DMP-EDITOR.FIELDS.TEMPLATES' | translate}}</div>
 			<mat-form-field>
-				<app-multiple-auto-complete required='true' [formControl]="this.data.formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
+				<app-multiple-auto-complete required='true' [formControl]="this.data.formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
 				</app-multiple-auto-complete>
 				<mat-error *ngIf="data.formGroup.get('profiles').hasError('backendError')">
 					{{data.formGroup.get('profiles').getError('backendError').message}}</mat-error>

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<CloneDialogComponent>,
+		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'
+				};
+			}
+		});
+	}
+
 }

dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html

@@ -31,17 +31,17 @@
 		</div>
 		<div class="upload-form col-sm-12 col-md-12">
 			<mat-form-field>
-				<app-multiple-auto-complete required='true' [(ngModel)]="dmpProfiles" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
+				<app-multiple-auto-complete required='true' [(ngModel)]="dmpProfiles" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
 				</app-multiple-auto-complete>
 			</mat-form-field>
 		</div>
 	</div>
 	<div class="row mt-3">
 		<div class="col-auto ml-auto">
-			<button mat-button type="button" class="cancel-btn" (click)="confirm()" [disabled]="data.fileList.length === 0">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
+			<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
 		</div>
 		<div class="col-auto">
-			<button mat-button type="button" class="next-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
+			<button mat-button type="button" (click)="confirm()" [disabled]="data.fileList.length === 0" [ngClass]="{'next-btn-disabled': data.fileList.length === 0, 'next-btn': data.fileList.length !== 0}">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
 		</div>
 	</div>
 </div>

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;
 }

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<DmpUploadDialogue>,
 		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<DatasetProfileModel[]> {
 		const request = new DataTableRequest<DatasetProfileCriteria>(null, null, { fields: ['+label'] });
 		const criteria = new DatasetProfileCriteria();

dmp-frontend/src/app/ui/dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component.scss

@@ -63,6 +63,11 @@
 	font-weight: 500;
 }
 
+.next-btn:hover {
+	background-color: #129d99;
+	color: white;
+}
+
 .disabled-btn {
 	border: 1px solid #b5b5b5;
 	border-radius: 30px;

dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html

@@ -7,14 +7,12 @@
 		<h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
 		<p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p>
 		<div class="actions">
-			<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center"
+			<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
-				(click)="uploadFile($event)">
 				<mat-icon class="pr-2">file_upload</mat-icon>
 				{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
 			</button>
 			<p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p>
-			<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center"
+			<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
-				(click)="startWizard()">
 				<mat-icon>chevron_right</mat-icon>
 				{{ 'NAV-BAR.START-WIZARD' | translate }}
 			</button>