From d667d574af727245467fb0773b68848952e454d4 Mon Sep 17 00:00:00 2001
From: Kristan Ntavidi <kntavidi@cite.gr>
Date: Tue, 30 Mar 2021 11:36:09 +0300
Subject: [PATCH] Dataset Profile editor. Create section button on page
 component. Dataset profile listing:  Add Download Option. Minor ui fixes.

---
 ...file-editor-composite-field.component.html | 14 +++++----
 ...file-editor-composite-field.component.scss |  4 ++-
 ...ile-editor-section-fieldset.component.html |  4 +--
 .../dataset-profile-editor.component.html     |  5 +++-
 .../dataset-profile-editor.component.scss     |  9 ++++++
 .../dataset-profile-listing.component.html    |  4 +++
 .../dataset-profile-listing.component.ts      | 29 +++++++++++++++++++
 .../table-of-contents/table-of-contents.html  |  2 +-
 dmp-frontend/src/assets/i18n/de.json          |  3 +-
 dmp-frontend/src/assets/i18n/en.json          |  3 +-
 dmp-frontend/src/assets/i18n/es.json          |  3 +-
 dmp-frontend/src/assets/i18n/gr.json          |  3 +-
 dmp-frontend/src/assets/i18n/pt.json          |  3 +-
 dmp-frontend/src/assets/i18n/sk.json          |  3 +-
 dmp-frontend/src/assets/i18n/sr.json          |  3 +-
 dmp-frontend/src/assets/i18n/tr.json          |  3 +-
 16 files changed, 77 insertions(+), 18 deletions(-)

diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
index 72d1685fd..35a28de3b 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
@@ -57,7 +57,7 @@
 
 
 <!-- MAIN CONTENT -->
-<div class="main-content-page">
+<div class="main-content-page" [ngClass]="{'pb-2': !hasFocus}">
 	<!-- TITLE -->
 	<div class="col-12">
 		<div class="row fielset-header">
@@ -184,9 +184,11 @@
 		<!-- PREVIEW -->
 
 		<div class="col-12" >
-			<span style="font-weight: bold;" *ngIf="hasFocus">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
+			<div class="mb-1" *ngIf="hasFocus">
+				<span style="font-weight: bold;">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
+			</div>
 
-			<div class="mt-3" style="margin-right: -15px; margin-left: -15px;" *ngIf="previewForm && form?.get('fields').controls[0].get('viewStyle')?.value.renderStyle">
+			<div style="margin-right: -15px; margin-left: -15px;" *ngIf="previewForm && form?.get('fields').controls[0].get('viewStyle')?.value.renderStyle">
 				<app-form-section-inner  [form]="previewForm">
 
 				</app-form-section-inner>
@@ -212,7 +214,9 @@
 
 					
 					<li class="list-inline-item"  *ngIf="!viewOnly">
-						<mat-icon [matMenuTriggerFor]="inputmenu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate">folder</mat-icon>
+						<img src="/assets/images/editor/icons/add_input_set.svg" [matMenuTriggerFor]="inputmenu" style="width: 18px;transform: translateY(-1px);" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate" class="input_icon" alt="Add Input icon">
+
+						<!-- <mat-icon [matMenuTriggerFor]="inputmenu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate">folder</mat-icon> -->
 						<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">
 							
 							<!-- <button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.TextArea)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}</button>
@@ -373,7 +377,7 @@
 					</li>
 					<li class="list-inline-item">
 						<!-- <mat-icon>more_vert</mat-icon> -->
-						<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.MORE' | translate">more_vert</mat-icon>
+						<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
 						<mat-menu #menu="matMenu">
 							<!-- TODO to check -->
 							<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</mat-checkbox>  
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss
index 39d036704..94cebbcc9 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss
@@ -104,7 +104,9 @@ $blue-color-light: #5cf7f2;
 ::ng-deep .mat-menu-panel{
     max-height: 32em;
 }
-
+:host ::ng-deep  .fielset-header .mat-form-field-wrapper{
+    padding-bottom: 0px;
+}
 
 // ::ng-deep .underline-line-field .mat-form-field-appearance-legacy .mat-form-field-wapper{
 //     padding-bottom: 1.25em !important;
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html
index 18ac093a4..f23669afd 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html
@@ -14,7 +14,7 @@
                     </app-dataset-profile-editor-section-component>
                 </mat-card-content>
             </mat-card>
-            <div class="col-2 col-xl-auto ml-4" *ngIf="!selectedFieldSetId">
+            <div class="col-2 col-xl-auto ml-4" *ngIf="!selectedFieldSetId && !viewOnly">
 
                 <div class="row bg-white actions-list">
                     <nav *ngIf="!viewOnly">
@@ -69,7 +69,7 @@
                     </mat-card-content>
             </mat-card>
 
-            <div class="col-2 col-xl-auto ml-4" *ngIf="selectedFieldSetId === fieldset.get('id').value">
+            <div class="col-2 col-xl-auto ml-4" *ngIf="selectedFieldSetId === fieldset.get('id').value &&(!viewOnly)">
 
                 <div class="row bg-white actions-list">
                     <nav *ngIf="!viewOnly">
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
index f0a552e15..5c2725326 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
@@ -219,7 +219,7 @@
 									<form [formGroup]="selectedTocEntry.form" class="page-infos">
 										<div class="row">
 											<!-- PAGE NAME -->
-											<div class="col">
+											<div class="col-12">
 												<div class="heading">{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *</div>
 												<div class="hint">{{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}</div>
 												<mat-form-field>
@@ -228,6 +228,9 @@
 												</mat-form-field>
 											</div>
 											
+											<div class="col-12" *ngIf="!viewOnly && (!selectedTocEntry?.subEntries?.length)">
+												<button class="create-section-btn" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">Create section</button>
+											</div>
 											<!-- PAGE ID -->
 											<!-- <div class="col">
 												<div class="heading">Page id *</div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
index d152f3adc..c66aa6f9e 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
@@ -106,6 +106,15 @@ background-color: #CBCBCB;
 color: #FFF;
 }
 
+.create-section-btn {
+	border-radius: 30px;
+	background-color: #f7dd72;
+	border: 1px solid transparent;
+	padding-left: 1em;
+	padding-right: 1em;
+	box-shadow: 0px 3px 6px #1E202029;
+	line-height: 1.7em;
+}
 
 
 $blue-color : #129D99;
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html
index e367c6848..6414e32fb 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html
@@ -67,6 +67,10 @@
 								<mat-icon>library_books</mat-icon>
 								{{'DATASET-PROFILE-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
 							</button>
+							<button mat-menu-item (click)="downloadXML(row.id)" *ngIf="row.status === datasetStatusEnum.Finalized">
+								<mat-icon>download</mat-icon>
+								{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate}}
+							</button>
 							<button mat-menu-item (click)="deleteTemplate(row.id)">
 								<mat-icon>delete</mat-icon>
 								{{'DATASET-PROFILE-LISTING.ACTIONS.DELETE' | translate}}
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.ts
index 34b10bab3..e5bc2af41 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.ts
@@ -19,6 +19,7 @@ import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-it
 import { BaseComponent } from '@common/base/base.component';
 import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
+import * as FileSaver from 'file-saver';
 import { merge as observableMerge, Observable, of as observableOf } from 'rxjs';
 import { map, startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { DialogConfirmationUploadDatasetProfiles } from './criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
@@ -42,6 +43,7 @@ export class DatasetProfileListingComponent extends BaseComponent implements OnI
 	titlePrefix: String;
 	dmpId: String;
 	itemId: string;
+	datasetStatusEnum = DatasetStatus;
 
 	constructor(
 		private datasetService: DatasetProfileService,
@@ -124,6 +126,33 @@ export class DatasetProfileListingComponent extends BaseComponent implements OnI
 	viewVersions(rowId, rowLabel) {
 		this.router.navigate(['/dataset-profiles/versions/' + rowId], { queryParams: { groupLabel: rowLabel } });
 	}
+	downloadXML(datasetProfileId: string): void {
+		this.datasetProfileService.downloadXML(datasetProfileId)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/xml' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+	getFilenameFromContentDispositionHeader(header: string): string {
+		const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g);
+
+		const matches = header.match(regex);
+		let filename: string;
+		for (let i = 0; i < matches.length; i++) {
+			const match = matches[i];
+			if (match.includes('filename="')) {
+				filename = match.substring(10, match.length - 1);
+				break;
+			} else if (match.includes('filename=')) {
+				filename = match.substring(9);
+				break;
+			}
+		}
+		return filename;
+	}
 
 	deleteTemplate(id: string){
 		if(id){
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html
index edc561ba6..1ebc7a9fc 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html
@@ -1,6 +1,6 @@
 <div class="">
 
-	<h3 id="guide-steps">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</h3>
+	<h3 id="guide-steps">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TEMPLATE-OUTLINE' | translate}}</h3>
 	<div class="scroll-container" id="tocentrytable">
 		
 		<app-dataset-profile-table-of-contents-internal-section [links]="links" (itemClick)="itemClicked($event)"
diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json
index bef562b06..a87dd52bd 100644
--- a/dmp-frontend/src/assets/i18n/de.json
+++ b/dmp-frontend/src/assets/i18n/de.json
@@ -291,7 +291,8 @@
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled",
-				"QUESTION": "Question"
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
 			},
 			"PAGE-INFO": {
 				"PAGE-NAME": "Chapter Name",
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 2078c5685..1da824f17 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -291,7 +291,8 @@
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled",
-				"QUESTION": "Question"
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
 			},
 			"PAGE-INFO": {
 				"PAGE-NAME": "Chapter Name",
diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json
index ddd3c6b3a..a9348fe93 100644
--- a/dmp-frontend/src/assets/i18n/es.json
+++ b/dmp-frontend/src/assets/i18n/es.json
@@ -291,7 +291,8 @@
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled",
-				"QUESTION": "Question"
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
 			},
 			"PAGE-INFO": {
 				"PAGE-NAME": "Chapter Name",
diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json
index e41d595de..6e9989db3 100644
--- a/dmp-frontend/src/assets/i18n/gr.json
+++ b/dmp-frontend/src/assets/i18n/gr.json
@@ -291,7 +291,8 @@
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled",
-				"QUESTION": "Question"
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
 			},
 			"PAGE-INFO": {
 				"PAGE-NAME": "Chapter Name",
diff --git a/dmp-frontend/src/assets/i18n/pt.json b/dmp-frontend/src/assets/i18n/pt.json
index 35a732e8d..791cd7edf 100644
--- a/dmp-frontend/src/assets/i18n/pt.json
+++ b/dmp-frontend/src/assets/i18n/pt.json
@@ -291,7 +291,8 @@
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled",
-				"QUESTION": "Question"
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
 			},
 			"PAGE-INFO": {
 				"PAGE-NAME": "Chapter Name",
diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json
index 9c07718b8..b78be54c1 100644
--- a/dmp-frontend/src/assets/i18n/sk.json
+++ b/dmp-frontend/src/assets/i18n/sk.json
@@ -291,7 +291,8 @@
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled",
-				"QUESTION": "Question"
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
 			},
 			"PAGE-INFO": {
 				"PAGE-NAME": "Chapter Name",
diff --git a/dmp-frontend/src/assets/i18n/sr.json b/dmp-frontend/src/assets/i18n/sr.json
index ac1e38e84..dd158f37e 100644
--- a/dmp-frontend/src/assets/i18n/sr.json
+++ b/dmp-frontend/src/assets/i18n/sr.json
@@ -291,7 +291,8 @@
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled",
-				"QUESTION": "Question"
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
 			},
 			"PAGE-INFO": {
 				"PAGE-NAME": "Chapter Name",
diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json
index 39886a703..e8d3671ff 100644
--- a/dmp-frontend/src/assets/i18n/tr.json
+++ b/dmp-frontend/src/assets/i18n/tr.json
@@ -291,7 +291,8 @@
 				"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
 				"DATASET-TEMPLATE-DESCRIPTION-PLACEHOLDER": "Dataset template description",
 				"UNTITLED": "Untitled",
-				"QUESTION": "Question"
+				"QUESTION": "Question",
+				"TEMPLATE-OUTLINE":"Template outline"
 			},
 			"PAGE-INFO": {
 				"PAGE-NAME": "Chapter Name",