From 9c4c0bcb66795a83a354a53898fa8209fa2be448 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Fri, 31 May 2024 17:29:03 +0300
Subject: [PATCH] added dmp breadcrumbs

---
 .../editor/description-editor.component.scss  |  2 +-
 .../dmp-editor.component.html                 | 82 +++++++++++--------
 .../dmp-editor.component.scss                 |  6 +-
 .../dmp-editor.component.ts                   |  3 +
 .../dmp-editor.routing.ts                     |  6 --
 dmp-frontend/src/app/ui/dmp/dmp.routing.ts    |  6 ++
 dmp-frontend/src/assets/i18n/en.json          |  2 +-
 7 files changed, 60 insertions(+), 47 deletions(-)

diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss b/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss
index e489b04e5..35525b6cb 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss
+++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss
@@ -365,7 +365,7 @@
       // left: 362px;
       width: calc(100% - 366px);
       overflow-y: auto;
-      height: calc(100vh - 218px);
+      height: calc(100vh - 250px);
     }
   }
 
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
index 45de1aba8..93857b784 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
@@ -30,46 +30,56 @@
 				</div>
 			</div>
 
+			<div class="container-fluid">
+				<div class="row pt-2">
+					<div class="col-12">
+						<app-navigation-breadcrumb />
+					</div>
+				</div>
+			</div>
+
 			<!-- First Step -->
-			<div class="row" id="editor-form" *ngIf="this.step === 0 && this.isNew">
-				<div class="col-12 blueprint-section">
-					<div class="row">
-						<div class="heading2 col-12">{{'DMP-EDITOR.FIELDS.TITLE' | translate}} *</div>
-						<div class="col-12">
+			<div class="container-fluid">
+				<div class="row" id="editor-form" *ngIf="this.step === 0 && this.isNew">
+					<div class="col-12 blueprint-section">
+						<div class="row">
+							<div class="heading2 col-12">{{'DMP-EDITOR.FIELDS.TITLE' | translate}} *</div>
+							<div class="col-12">
+								<mat-form-field class="w-100">
+									<mat-label>{{'DMP-EDITOR.FIELDS.TITLE' | translate}}</mat-label>
+									<input matInput type="text" name="label" [formControl]="formGroup.get('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 class="row">
+							<div class="heading2 col-12">{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}} *</div>
+							<div class="col-12">
+								<rich-text-editor-component [form]="formGroup.get('description')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="true">
+								</rich-text-editor-component>
+							</div>
+						</div>
+						<div class="dmp-blueprint-form" style="margin-top: 3%;">
+							<div class="heading2">{{'DMP-EDITOR.FIELDS.BLUEPRINT' | translate}} *</div>
 							<mat-form-field class="w-100">
-								<mat-label>{{'DMP-EDITOR.FIELDS.TITLE' | translate}}</mat-label>
-								<input matInput type="text" name="label" [formControl]="formGroup.get('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-label>{{'DMP-EDITOR.FIELDS.BLUEPRINT' | translate}}</mat-label>
+								<app-single-auto-complete [required]="false" [formControl]="formGroup.get('blueprint')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.BLUEPRINT' | translate}}" [configuration]="singleAutocompleteBlueprintConfiguration">
+								</app-single-auto-complete>
 							</mat-form-field>
 						</div>
-					</div>
-					<div class="row">
-						<div class="heading2 col-12">{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}} *</div>
-						<div class="col-12">
-							<rich-text-editor-component [form]="formGroup.get('description')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="true">
-							</rich-text-editor-component>
-						</div>
-					</div>
-					<div class="dmp-blueprint-form" style="margin-top: 3%;">
-						<div class="heading2">{{'DMP-EDITOR.FIELDS.BLUEPRINT' | translate}} *</div>
-						<mat-form-field class="w-100">
-							<mat-label>{{'DMP-EDITOR.FIELDS.BLUEPRINT' | translate}}</mat-label>
-							<app-single-auto-complete [required]="false" [formControl]="formGroup.get('blueprint')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.BLUEPRINT' | translate}}" [configuration]="singleAutocompleteBlueprintConfiguration">
-							</app-single-auto-complete>
-						</mat-form-field>
-					</div>
-					<div class="row">
-						<div class="col-5">
-							<button mat-button class="action-btn" [disabled]="!(formGroup.get('blueprint').value && formGroup.get('label').value && formGroup.get('description').value)" (click)="selectBlueprint()">{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</button>
-						</div>
-						<div class="col-7" *ngIf="formGroup.get('blueprint').value == null || (formGroup.get('blueprint').value && formGroup.get('blueprint').value.id !== defaultBlueprintId)">
-							<div class="row">
-								<div class="col-6">
-									<p>{{'DMP-EDITOR.ACTIONS.OR-CONTINUE-WITH' | translate}}</p>
-								</div>
-								<div class="col-6">
-									<button mat-button class="action-btn" style="float: right;" (click)="selectDefaultBlueprint()">{{'DMP-EDITOR.ACTIONS.DEFAULT-BLUEPRINT' | translate}}</button>
+						<div class="row">
+							<div class="col-5">
+								<button mat-button class="action-btn" [disabled]="!(formGroup.get('blueprint').value && formGroup.get('label').value && formGroup.get('description').value)" (click)="selectBlueprint()">{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</button>
+							</div>
+							<div class="col-7" *ngIf="formGroup.get('blueprint').value == null || (formGroup.get('blueprint').value && formGroup.get('blueprint').value.id !== defaultBlueprintId)">
+								<div class="row">
+									<div class="col-6">
+										<p>{{'DMP-EDITOR.ACTIONS.OR-CONTINUE-WITH' | translate}}</p>
+									</div>
+									<div class="col-6">
+										<button mat-button class="action-btn" style="float: right;" (click)="selectDefaultBlueprint()">{{'DMP-EDITOR.ACTIONS.DEFAULT-BLUEPRINT' | translate}}</button>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.scss b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.scss
index 01e1199f7..34ea9391a 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.scss
@@ -246,14 +246,14 @@ mat-icon.size-16 {
     // left: 362px;
     width: calc(100% - 366px);
     overflow-y: auto;
-    height: calc(100vh - 218px);
+    height: calc(100vh - 250px);
 }
 
 .formForStep0 {
     position: relative;
     width: 100%;
     overflow-y: auto;
-    height: calc(100vh - 218px);
+    height: calc(100vh - 250px);
 }
 
 .action-btn {
@@ -281,7 +281,7 @@ mat-icon.size-16 {
     letter-spacing: 0px;
     color: #212121;
     opacity: 1;
-    margin: 3rem 0rem 3rem 0rem;
+    margin: 1rem 0rem 3rem 0rem;
 }
 
 .changes {
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts
index b3fa4cc43..c2178bde1 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts
@@ -52,6 +52,7 @@ import { DmpEditorService } from './dmp-editor.service';
 import { Title } from '@angular/platform-browser';
 import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
 import { DmpContactPrefillDialogComponent } from '../dmp-contact-prefill-dialog/dmp-contact-prefill-dialog.component';
+import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service';
 
 @Component({
 	selector: 'app-dmp-editor',
@@ -166,6 +167,7 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
 		public descriptionService: DescriptionService,
 		public titleService: Title,
 		private analyticsService: AnalyticsService,
+		private breadcrumbService: BreadcrumbService
 	) {
 		const descriptionLabel:string = route.snapshot.data['entity']?.label;
 		if (descriptionLabel) {
@@ -273,6 +275,7 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
 
 	refreshData(): void {
 		this.getItem(this.editorModel.id, (data: Dmp) => {
+			this.breadcrumbService.addIdResolvedValue(data.id.toString(), data.label);
 			this.prepareForm(data)
 			if (this.isNew === false && this.step===0) this.nextStep();
 		});
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.routing.ts b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.routing.ts
index 85e0e8ba5..afaa11e06 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.routing.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.routing.ts
@@ -17,9 +17,6 @@ const routes: Routes = [
 		canDeactivate: [PendingChangesGuard],
 		data: {
 			breadcrumb: true,
-			...BreadcrumbService.generateRouteDataConfiguration({
-				hideNavigationItem: true
-			}),
 			authContext: {
 				permissions: [AppPermission.NewDmp]
 			}
@@ -35,9 +32,6 @@ const routes: Routes = [
 		},
 		data: {
 			breadcrumb: true,
-			...BreadcrumbService.generateRouteDataConfiguration({
-				hideNavigationItem: true
-			}),
 			getFromTitleService: true,
 			usePrefix: false
 		}
diff --git a/dmp-frontend/src/app/ui/dmp/dmp.routing.ts b/dmp-frontend/src/app/ui/dmp/dmp.routing.ts
index 591ac8540..f77673f7b 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp.routing.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp.routing.ts
@@ -18,6 +18,9 @@ const routes: Routes = [
 		loadChildren: () => import('./dmp-editor-blueprint/dmp-editor.module').then(m => m.DmpEditorModule),
 		data: {
 			breadcrumb: true,
+			...BreadcrumbService.generateRouteDataConfiguration({
+				title: 'DMP-EDITOR.TITLE-NEW'
+			}),
 			title: 'DMP-EDITOR.TITLE-NEW'
 		}
 	},
@@ -26,6 +29,9 @@ const routes: Routes = [
 		loadChildren: () => import('./dmp-editor-blueprint/dmp-editor.module').then(m => m.DmpEditorModule),
 		data: {
 			breadcrumb: true,
+			...BreadcrumbService.generateRouteDataConfiguration({
+				hideNavigationItem: true
+			}),
 			title: 'DMP-EDITOR.TITLE-EDIT'
 		}
 	},
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 7afdccab4..3baa94813 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -1547,7 +1547,7 @@
 	"DMP-EDITOR": {
 		"TITLE-NEW": "New Plan",
 		"TITLE-EDIT": "Editing Plan",
-		"TITLE": "Plan Blueprint",
+		"TITLE": "Plan Template",
 		"UNSAVED-CHANGES": "unsaved changes",
 		"LOCKED": "Locked",
 		"DESCRIPTION": "Description",