From ffebb8f3656d752881394ea67de273c3065977c1 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Mon, 16 Sep 2019 18:46:19 +0300
Subject: [PATCH] Adds dynamic page titles

---
 dmp-frontend/src/app/app-routing.module.ts    | 42 ++++++++++++-------
 dmp-frontend/src/app/app.component.ts         | 32 ++++++++++++++
 dmp-frontend/src/app/app.module.ts            |  4 +-
 .../dataset-profile.routing.ts                | 20 +++++++--
 .../dataset-profile-editor.component.html     | 38 ++++++++---------
 .../dataset-profile-editor.component.ts       |  4 ++
 .../admin/dmp-profile/dmp-profile.routing.ts  |  6 +--
 .../src/app/ui/dataset/dataset.routing.ts     | 18 +++++---
 .../app/ui/dmp/clone/dmp-clone.component.html |  4 +-
 dmp-frontend/src/app/ui/dmp/dmp.routing.ts    | 18 +++++---
 .../app/ui/explore-dmp/explore-dmp.routing.ts |  3 +-
 .../ui/grant/editor/grant-editor.component.ts | 26 ++++++------
 .../src/app/ui/grant/grant.routing.ts         |  6 ++-
 dmp-frontend/src/assets/i18n/en.json          | 42 ++++++++++++++++++-
 dmp-frontend/src/index.html                   |  2 +-
 15 files changed, 192 insertions(+), 73 deletions(-)

diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index 708befe87..6e0f16745 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -7,7 +7,8 @@ const appRoutes: Routes = [
 		path: '',
 		redirectTo: '/home',
 		data: {
-			breadcrumbs: false
+			breadcrumbs: false,
+			title: 'GENERAL.TITLES.GENERAL'
 		},
 		pathMatch: 'full'
 	},
@@ -15,70 +16,80 @@ const appRoutes: Routes = [
 		path: 'datasetcreatewizard',
 		loadChildren: './ui/dataset-create-wizard/dataset-create-wizard.module#DatasetCreateWizardModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DATASETCREATEWIZARD'
 		}
 	},
 	{
 		path: 'explore',
 		loadChildren: './ui/explore-dataset/explore-dataset.module#ExploreDatasetModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.EXPLORE'
 		}
 	},
 	{
 		path: 'explore-plans',
 		loadChildren: './ui/explore-dmp/explore-dmp.module#ExploreDmpModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.EXPLORE-PLANS'
 		}
 	},
 	{
 		path: 'datasets',
 		loadChildren: './ui/dataset/dataset.module#DatasetModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DATASETS'
 		}
 	},
 	{
 		path: 'about',
 		loadChildren: './ui/about/about.module#AboutModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.ABOUT'
 		}
 	},
 	{
 		path: 'grants',
 		loadChildren: './ui/grant/grant.module#GrantModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.GRANTS'
 		}
 	},
 	{
 		path: 'plans',
 		loadChildren: './ui/dmp/dmp.module#DmpModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.PLANS'
 		}
 	},
 	{
 		path: 'dmp-profiles',
 		loadChildren: './ui/admin/dmp-profile/dmp-profile.module#DmpProfileModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DMP-PROFILES'
 		}
 	},
 	{
 		path: 'quick-wizard',
 		loadChildren: './ui/quick-wizard/quick-wizard.module#OuickWizardModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: "GENERAL.TITLES.QUICK-WIZARD"
 		}
 	},
 	{
 		path: 'dataset-profiles',
 		loadChildren: './ui/admin/dataset-profile/dataset-profile.module#DatasetProfileModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DATASET-PROFILES'
 		}
 	},
 	{
@@ -99,14 +110,16 @@ const appRoutes: Routes = [
 		path: 'users',
 		loadChildren: './ui/admin/user/user.module#UserModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.USERS'
 		},
 	},
 	{
 		path: 'profile',
 		loadChildren: './ui/user-profile/user-profile.module#UserProfileModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.PROFILE'
 		},
 	},
 	{
@@ -120,7 +133,8 @@ const appRoutes: Routes = [
 		path: 'login',
 		loadChildren: './ui/auth/login/login.module#LoginModule',
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.LOGIN'
 		},
 	},
 	{
diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index 43529279e..4c0a5ade9 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -6,6 +6,8 @@ import { environment } from '../environments/environment';
 import { AuthService } from './core/services/auth/auth.service';
 import { CultureService } from './core/services/culture/culture-service';
 import { BreadCrumbResolverService } from './ui/misc/breadcrumb/service/breadcrumb.service';
+import { filter, map } from 'rxjs/operators';
+import { Title } from '@angular/platform-browser';
 
 
 declare const gapi: any;
@@ -28,6 +30,8 @@ export class AppComponent implements OnInit {
 		private authentication: AuthService,
 		private translate: TranslateService,
 		private breadCrumbResolverService: BreadCrumbResolverService,
+		private titleService: Title,
+		private language: TranslateService,
 		private cultureService: CultureService
 	) {
 		this.initializeServices();
@@ -48,6 +52,34 @@ export class AppComponent implements OnInit {
 			.map(route => route.firstChild)
 			.switchMap(route => route.data)
 			.map(data => data['breadcrumb']);
+
+		const appTitle = this.titleService.getTitle();
+		this.router
+			.events.pipe(
+				filter(event => event instanceof NavigationEnd),
+				map(() => {
+					let child = this.route.firstChild;
+					while (child.firstChild) {
+						child = child.firstChild;
+					}
+					if (child.snapshot.data['title']) {
+						return child.snapshot.data['title'];
+					}
+					return appTitle;
+				})
+			).subscribe((ttl: string) => {
+				if (ttl.length > 0) {
+					this.language.get(ttl).subscribe((translated: string) => {
+						this.language.get('GENERAL.TITLES.PREFIX').subscribe( (titlePrefix: string) => {
+							this.titleService.setTitle(titlePrefix + translated);
+						});
+					});
+				} else {
+					this.language.get('GENERAL.TITLES.GENERAL').subscribe((translated: string) => {
+						this.titleService.setTitle(translated);
+					});
+				}
+			});
 	}
 
 	login() {
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 0bf68a38d..7d4640e5e 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -3,7 +3,7 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { LOCALE_ID, NgModule } from '@angular/core';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';
 import { MatMomentDateModule, MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@@ -23,7 +23,6 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { DatasetCreateWizardModule } from './ui/dataset-create-wizard/dataset-create-wizard.module';
 import { NavbarModule } from './ui/navbar/navbar.module';
 import { SidebarModule } from './ui/sidebar/sidebar.module';
-import { SearchComponent } from './ui/misc/search/search.component';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient) {
@@ -76,6 +75,7 @@ export function HttpLoaderFactory(http: HttpClient) {
 			deps: [CultureService],
 			useFactory: (cultureService) => cultureService.getCurrentCulture().name
 		},
+		Title
 	],
 	bootstrap: [AppComponent]
 })
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.routing.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.routing.ts
index 8f9b99fc5..5ec05da21 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.routing.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.routing.ts
@@ -6,19 +6,31 @@ import { DatasetProfileListingComponent } from './listing/dataset-profile-listin
 const routes: Routes = [
 	{
 		path: 'new',
-		component: DatasetProfileEditorComponent
+		component: DatasetProfileEditorComponent,
+		data: {
+			title: 'GENERAL.TITLES.DATASET-PROFILES-NEW'
+		}
 	},
 	{
 		path: ':id',
-		component: DatasetProfileEditorComponent
+		component: DatasetProfileEditorComponent,
+		data: {
+			title: 'GENERAL.TITLES.DATASET-PROFILES-EDIT'
+		}
 	},
 	{
 		path: 'clone/:cloneid',
-		component: DatasetProfileEditorComponent
+		component: DatasetProfileEditorComponent,
+		data: {
+			title: 'GENERAL.TITLES.DATASET-PROFILES-CLONE'
+		}
 	},
 	{
 		path: 'newversion/:newversionid',
-		component: DatasetProfileEditorComponent
+		component: DatasetProfileEditorComponent,
+		data: {
+			title: 'GENERAL.TITLES.DATASET-PROFILES-NEW-VERSION'
+		}
 	},
 	{
 		path: 'versions/:groupId',
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 7c99265c8..65945f77d 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
@@ -1,30 +1,35 @@
 <div class="main-content">
 	<div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'>
+		<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
+		<h3 *ngIf="isNew && isClone">
+			<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
+			{{form.get('label').value}}
+		</h3>
+		<h3 *ngIf="isNew && isNewVersion">
+			<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
+			{{form.get('label').value}}
+		</h3>
+		<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
 		<mat-form-field class="full-width">
-			<input matInput formControlName="label" [disabled]="newVersionId"
-				placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required>
+			<input matInput formControlName="label" [disabled]="newVersionId" placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required>
 			<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 			</mat-error>
 		</mat-form-field>
 		<mat-form-field class="full-width">
-			<input matInput formControlName="description" [disabled]="newVersionId"
-				placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-DESCRIPTION' | translate}}" required>
+			<input matInput formControlName="description" [disabled]="newVersionId" placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-DESCRIPTION' | translate}}" required>
 			<mat-error *ngIf="form.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 			</mat-error>
 		</mat-form-field>
 		<div class="d-flex justify-content-end pb-3" *ngIf="form.get('status').value==1">
-			<button mat-raised-button color="primary" (click)="downloadXML();"
-			type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
+			<button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
 		</div>
 		<mat-horizontal-stepper [linear]="true" #stepper>
 			<mat-step>
 				<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.TITLE' | translate}}</ng-template>
 				<div class="row">
-					<app-dataset-profile-editor-page-component class="col-12" [form]="form.get('pages')"
-						[viewOnly]="viewOnly"></app-dataset-profile-editor-page-component>
+					<app-dataset-profile-editor-page-component class="col-12" [form]="form.get('pages')" [viewOnly]="viewOnly"></app-dataset-profile-editor-page-component>
 					<div class="col-12">
-						<button mat-button class="full-width" (click)="addPage()"
-							[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-PAGE' | translate}}</button>
+						<button mat-button class="full-width" (click)="addPage()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-PAGE' | translate}}</button>
 					</div>
 				</div>
 			</mat-step>
@@ -41,16 +46,13 @@
 								</button>
 							</mat-expansion-panel-header>
 							<div id="{{'s' + i}}" class="row" *ngIf="panel.expanded">
-								<app-dataset-profile-editor-section-component class="col-12"
-									[form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i"
-									[viewOnly]="viewOnly">
+								<app-dataset-profile-editor-section-component class="col-12" [form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i" [viewOnly]="viewOnly">
 								</app-dataset-profile-editor-section-component>
 							</div>
 						</mat-expansion-panel>
 					</mat-accordion>
 					<div class="col-12">
-						<button mat-button (click)="addSection()" class="full-width"
-							[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
+						<button mat-button (click)="addSection()" class="full-width" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
 					</div>
 				</div>
 			</mat-step>
@@ -65,10 +67,8 @@
 			<!-- SAVE BUTTON -->
 			<div class="col-6 d-flex" *ngIf="!viewOnly">
 				<div class="row mt-4">
-					<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto"
-						(click)='onSubmit()' [disabled]="!form.valid">Save</button>
-					<button mat-raised-button class="col-auto" color="primary" type="button col-auto"
-						(click)='finalize()' [disabled]="!form.valid">Finalize</button>
+					<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='onSubmit()' [disabled]="!form.valid">Save</button>
+					<button mat-raised-button class="col-auto" color="primary" type="button col-auto" (click)='finalize()' [disabled]="!form.valid">Finalize</button>
 				</div>
 			</div>
 			<!-- DELETE BUTTON -->
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
index fbf53931a..0f3b1ece8 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
@@ -32,6 +32,8 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.
 export class DatasetProfileEditorComponent extends BaseComponent implements OnInit {
 
 	isNew = true;
+	isNewVersion = false;
+	isClone = false;
 	isDeleted = false;
 	dataModel: DatasetProfileEditorModel;
 	form: FormGroup;
@@ -92,6 +94,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 						url: '/dataset-profiles/' + this.datasetProfileId
 					}]);
 			} else if (cloneId != null) {
+				this.isClone = true;
 				this.datasetProfileService.clone(cloneId)
 					.pipe(map(data => data as DatasetProfile), takeUntil(this._destroyed))
 					.subscribe(
@@ -110,6 +113,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 					error => this.onCallbackError(error)
 					);
 			} else if (this.newVersionId != null) {
+				this.isNewVersion = true;
 				this.datasetProfileService.getDatasetProfileById(this.newVersionId)
 					.pipe(map(data => data as DatasetProfile), takeUntil(this._destroyed))
 					.subscribe(
diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.routing.ts b/dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.routing.ts
index 700b2e106..d9d7ac1b4 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.routing.ts
+++ b/dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.routing.ts
@@ -6,12 +6,12 @@ import { DmpProfileListingComponent } from './listing/dmp-profile-listing.compon
 
 const routes: Routes = [
 	{ path: '', component: DmpProfileListingComponent, canActivate: [AuthGuard] },
-	{ path: 'new', component: DmpProfileEditorComponent, canActivate: [AuthGuard] },
-	{ path: ':id', component: DmpProfileEditorComponent, canActivate: [AuthGuard] },
+	{ path: 'new', component: DmpProfileEditorComponent, canActivate: [AuthGuard], data: { title: 'GENERAL.TITLES.DMP-PROFILE-NEW' } },
+	{ path: ':id', component: DmpProfileEditorComponent, canActivate: [AuthGuard], data: { title: 'GENERAL.TITLES.DMP-PROFILE-EDIT' } },
 ];
 
 @NgModule({
 	imports: [RouterModule.forChild(routes)],
 	exports: [RouterModule]
 })
-export class DmpProfileRoutingModule { }
\ No newline at end of file
+export class DmpProfileRoutingModule { }
diff --git a/dmp-frontend/src/app/ui/dataset/dataset.routing.ts b/dmp-frontend/src/app/ui/dataset/dataset.routing.ts
index b21150984..99bbf7c95 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset.routing.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset.routing.ts
@@ -10,7 +10,8 @@ const routes: Routes = [
 		component: DatasetWizardComponent,
 		canActivate: [AuthGuard],
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DATASET-NEW'
 		},
 	},
 	{
@@ -19,7 +20,8 @@ const routes: Routes = [
 		canActivate: [AuthGuard],
 		data: {
 			breadcrumb: true,
-			public: false
+			public: false,
+			title: 'GENERAL.TITLES.DATASET-EDIT'
 		},
 	},
 	{
@@ -27,7 +29,8 @@ const routes: Routes = [
 		component: DatasetWizardComponent,
 		//canActivate: [AuthGuard],
 		data: {
-			public: true
+			public: true,
+			title: 'GENERAL.TITLES.DATASET-PUBLIC-EDIT'
 		}
 	},
 	{
@@ -35,7 +38,8 @@ const routes: Routes = [
 		component: DatasetWizardComponent,
 		canActivate: [AuthGuard],
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DATASET-NEW'
 		},
 	},
 	{
@@ -59,7 +63,8 @@ const routes: Routes = [
 		component: DatasetWizardComponent,
 		canActivate: [AuthGuard],
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DATASET-COPY'
 		},
 	},
 	{
@@ -67,7 +72,8 @@ const routes: Routes = [
 		component: DatasetWizardComponent,
 		canActivate: [AuthGuard],
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DATASET-UPDATE'
 		},
 	}
 ];
diff --git a/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
index eba79873d..e79ab5628 100644
--- a/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
+++ b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
@@ -6,8 +6,8 @@
 					<h4 class="card-title">{{ formGroup.get('label').value }}</h4>
 				</div>
 				<div class="d-flex ml-auto p-2">
-					<span *ngIf="!isNewVersion" class="clone-mode">{{ 'DMP-LISTING.ACTIONS.CLONE' | translate}}</span> &nbsp;
-					<span *ngIf="isNewVersion" class="clone-mode">{{ 'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}</span> &nbsp;
+					<span *ngIf="!isNewVersion" class="clone-mode">{{ 'DMP-LISTING.ACTIONS.CLONE' | translate}} &nbsp;</span>
+					<span *ngIf="isNewVersion" class="clone-mode">{{ 'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}} &nbsp;</span>
 					<span class="clone-mode-text"> {{ 'GENERAL.PREPOSITIONS.OF' | translate}} {{ parentDmpLabel }}</span>
 				</div>
 			</div>
diff --git a/dmp-frontend/src/app/ui/dmp/dmp.routing.ts b/dmp-frontend/src/app/ui/dmp/dmp.routing.ts
index 7bd555b5d..bd7f84dd1 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp.routing.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp.routing.ts
@@ -33,21 +33,24 @@ const routes: Routes = [
 		path: 'edit/:id',
 		component: DmpEditorComponent,
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DMP-EDIT'
 		},
 	},
 	{
 		path: 'publicEdit/:publicId',
 		component: DmpEditorComponent,
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DMP-PUBLIC-EDIT'
 		},
 	},
 	{
 		path: 'overview/:id',
 		component: DmpOverviewComponent,
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DMP-OVERVIEW'
 		},
 	},
 	{
@@ -61,7 +64,8 @@ const routes: Routes = [
 		path: 'new',
 		component: DmpEditorComponent,
 		data: {
-			breadcrumbs: 'new'
+			breadcrumbs: 'new',
+			title: 'GENERAL.TITLES.PLANS-NEW'
 		}
 	},
 	{
@@ -70,7 +74,8 @@ const routes: Routes = [
 		component: DmpCloneComponent,
 		data: {
 			clone: false,
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DMP-NEW-VERSION'
 		},
 	},
 	{
@@ -78,7 +83,8 @@ const routes: Routes = [
 		component: DmpCloneComponent,
 		data: {
 			clone: false,
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.DMP-CLONE'
 		},
 	},
 	{
diff --git a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp.routing.ts b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp.routing.ts
index a5740d1f9..6b5ad0cb9 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp.routing.ts
+++ b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp.routing.ts
@@ -15,7 +15,8 @@ const routes: Routes = [
 		path: 'overview/:publicId',
 		component: DmpOverviewComponent,
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.EXPLORE-PLANS-OVERVIEW'
 		},
 	}
 ];
diff --git a/dmp-frontend/src/app/ui/grant/editor/grant-editor.component.ts b/dmp-frontend/src/app/ui/grant/editor/grant-editor.component.ts
index 9aca12d53..a893eb3d7 100644
--- a/dmp-frontend/src/app/ui/grant/editor/grant-editor.component.ts
+++ b/dmp-frontend/src/app/ui/grant/editor/grant-editor.component.ts
@@ -64,7 +64,7 @@ export class GrantEditorComponent extends BaseComponent implements OnInit, IBrea
 							breadCrumbs.push({
 								parentComponentName: null,
 								label: this.language.instant('NAV-BAR.GRANTS').toUpperCase(),
-								url: '/grants' + this.grant.id
+								url: '/grants'
 							});
 							breadCrumbs.push({
 								parentComponentName: 'GrantListingComponent',
@@ -74,18 +74,20 @@ export class GrantEditorComponent extends BaseComponent implements OnInit, IBrea
 							this.breadCrumbs = Observable.of(breadCrumbs);
 						});
 				} else {
-					const breadCrumbs = [];
-					breadCrumbs.push({
-						parentComponentName: null,
-						label: this.language.instant('NAV-BAR.GRANTS').toUpperCase(),
-						url: '/grants'
+					this.language.get('QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW-GRANT').pipe(takeUntil(this._destroyed)).subscribe(x => {
+						this.breadCrumbs = Observable.of([
+							{
+								parentComponentName: null,
+								label: this.language.instant('NAV-BAR.GRANTS').toUpperCase(),
+								url: '/grants'
+							},
+							{
+								parentComponentName: 'GrantListingComponent',
+								label: x,
+								url: '/grants/new/'
+							}]
+						);
 					});
-					breadCrumbs.push({
-						parentComponentName: 'GrantListingComponent',
-						label: this.language.instant('QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW').toUpperCase(),
-						url: '/grants/new/'
-					});
-					this.breadCrumbs = Observable.of(breadCrumbs);
 
 					this.grant = new GrantEditorModel();
 					setTimeout(() => {
diff --git a/dmp-frontend/src/app/ui/grant/grant.routing.ts b/dmp-frontend/src/app/ui/grant/grant.routing.ts
index 8817762bc..95808665c 100644
--- a/dmp-frontend/src/app/ui/grant/grant.routing.ts
+++ b/dmp-frontend/src/app/ui/grant/grant.routing.ts
@@ -15,14 +15,16 @@ const routes: Routes = [
 		path: 'edit/:id',
 		component: GrantEditorComponent,
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.GRANT-EDIT'
 		}
 	},
 	{
 		path: 'new',
 		component: GrantEditorComponent,
 		data: {
-			breadcrumb: true
+			breadcrumb: true,
+			title: 'GENERAL.TITLES.GRANT-NEW'
 		},
 	}
 ];
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 96c499b74..a68eb11ff 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -55,6 +55,43 @@
 		},
 		"PREPOSITIONS": {
 			"OF": "of"
+		},
+		"TITLES": {
+			"PREFIX": "Open DMP - ",
+			"GENERAL": "Data Management Plans Creator",
+			"ABOUT": "About",
+			"PLANS": "My DMPs",
+			"EXPLORE-PLANS": "Published DMPs",
+			"QUICK-WIZARD": "New DMP (Wizard)",
+			"PLANS-NEW": "New DMP (Expert)",
+			"DATASETS": "My Dataset Descriptions",
+			"EXPLORE": "Published Dataset Descriptions",
+			"DATASETCREATEWIZARD": "Add Dataset Description (Wizard)",
+			"GRANTS": "My Grants",
+			"DMP-PROFILES": "DMP Templates",
+			"DATASET-PROFILES": "Dataset Description Templates",
+			"USERS": "Users",
+			"PROFILE": "My Profile",
+			"LOGIN": "Login",
+			"DMP-OVERVIEW": "DMP Overview",
+			"DMP-EDIT": "Edit DMP",
+			"DATASET-EDIT": "Dataset View/Edit",
+			"DMP-NEW-VERSION": "DMP New Version",
+			"DMP-CLONE": "Clone DMP",
+			"DATASET-NEW": "New Dataset Description",
+			"GRANT-NEW": "New Grant",
+			"GRANT-EDIT": "View/Edit Grant",
+			"DMP-PROFILE-NEW": "New DMP Template",
+			"DMP-PROFILE-EDIT": "Edit DMP Template",
+			"DATASET-PROFILES-NEW": "New Dataset Description Template",
+			"DATASET-PROFILES-EDIT": "Edit Dataset Description Template",
+			"EXPLORE-PLANS-OVERVIEW": "Published DMP Overview",
+			"DATASET-PUBLIC-EDIT": "View Published Dataset",
+			"DMP-PUBLIC-EDIT": "View Published DMP",
+			"DATASET-COPY": "Copy Dataset Description",
+			"DATASET-UPDATE": "Update Dataset Description",
+			"DATASET-PROFILES-NEW-VERSION": "New Version of Dataset Description Template",
+			"DATASET-PROFILES-CLONE": "New Clone of Dataset Description Template"
 		}
 	},
 	"EMAIL-CONFIRMATION": {
@@ -127,7 +164,10 @@
 	},
 	"DATASET-PROFILE-EDITOR": {
 		"TITLE": {
-			"NEW": "New API Client"
+			"NEW": "New API Client",
+			"NEW-PROFILE": "New Dataset Description Template",
+			"NEW-PROFILE-VERSION": "New Version Of ",
+			"NEW-PROFILE-CLONE": "New Clone Of "
 		},
 		"FIELDS": {
 			"DATASET-TITLE": "Dataset Description Template Name",
diff --git a/dmp-frontend/src/index.html b/dmp-frontend/src/index.html
index 0b2d05b55..7475f1450 100644
--- a/dmp-frontend/src/index.html
+++ b/dmp-frontend/src/index.html
@@ -7,7 +7,7 @@
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<title>Data Management Plans Creator</title>
+	<!-- <title>Data Management Plans Creator</title> -->
 	<base href="/">
 	<meta name="csrf-token" content="2c64def7de30197c40276fe1a7ea874ca8871f70be7d7dc3305465a4d5c565e4">
 	<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->