Adds breadcrumbs responsiveness and fixes their context

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts

@@ -135,18 +135,18 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 					this.breadCrumbs = Observable.of([
 						{
 							parentComponentName: null,
-							label: this.language.instant('NAV-BAR.DATASET'),
+							label: this.datasetWizardModel.label,
-							url: '/datasets',
+							url: '/datasets/edit/' + this.datasetWizardModel.id,
 							notFoundResolver: [
 								{
 									parentComponentName: null,
-									label: this.datasetWizardModel.dmp.project.label,
+									label: this.datasetWizardModel.dmp.label,
-									url: '/projects/edit/' + this.datasetWizardModel.dmp.project.id
+									url: '/plans/overview/' + this.datasetWizardModel.dmp.id
 								},
 								{
 									parentComponentName: null,
-									label: this.datasetWizardModel.dmp.label,
+									label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS').toUpperCase(),
-									url: '/plans/edit/' + this.datasetWizardModel.dmp.id,
+									url: '/datasets'
 								},
 							]
 						}]);
@@ -160,7 +160,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 					this.loadDatasetProfiles();
 					this.formGroup.get('dmp').valueChanges
 						.pipe(takeUntil(this._destroyed))
-						.subscribe( () => {
+						.subscribe(() => {
 							this.dmpValueChanged(this.formGroup.get('dmp').value);
 						});
 					this.formGroup.get('profile').valueChanges
@@ -187,7 +187,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 						this.breadCrumbs = Observable.of([
 							{
 								parentComponentName: null,
-								label: this.language.instant('NAV-BAR.DATASETS'),
+								label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'),
 								url: '/datasets',
 								notFoundResolver: [
 									{
@@ -223,7 +223,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 								this.breadCrumbs = Observable.of([
 									{
 										parentComponentName: null,
-										label: this.language.instant('NAV-BAR.DATASETS'),
+										label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'),
 										url: '/datasets',
 										notFoundResolver: [
 											{
@@ -269,7 +269,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 						this.breadCrumbs = Observable.of([
 							{
 								parentComponentName: null,
-								label: this.language.instant('NAV-BAR.DATASETS'),
+								label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'),
 								url: '/datasets',
 								notFoundResolver: [
 									{
@@ -295,7 +295,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 					this.breadCrumbs = Observable.of([
 						{
 							parentComponentName: null,
-							label: this.language.instant('NAV-BAR.DATASETS'),
+							label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'),
 							url: '/datasets',
 							notFoundResolver: [
 								{
@@ -339,6 +339,12 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 					this.datasetProfileValueChanged(x);
 				});
 			this.dmpValueChanged(null);
+			this.breadCrumbs = Observable.of([
+				{
+					parentComponentName: null,
+					label: this.language.instant('DATASET-LISTING.ACTIONS.CREATE-NEW').toUpperCase(),
+					url: '/datasets/new/'
+				}]);
 		}
 
 		// this.route.params

dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts

@@ -73,7 +73,7 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 					this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
 					this.breadCrumbs = Observable.of([{
 						parentComponentName: null,
-						label: this.language.instant('NAV-BAR.DATASET-DESCRIPTIONS'),
+						label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'),
 						url: "/datasets"
 					}]);
 				}

dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts

@@ -119,15 +119,14 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 								const breadCrumbs = [];
 								breadCrumbs.push({
 									parentComponentName: null,
-									label: this.language.instant('NAV-BAR.DMPS'),
+									label: this.language.instant('NAV-BAR.MY-DMPS'),
 									url: "/plans"
 								});
 								const breadcrumb = await this.projectService.getSingle(this.dmp.project.id).map(x => ({ label: x.label, url: '/projects/edit/' + x.id }) as BreadcrumbItem).toPromise();
-								breadCrumbs.push(
+								breadCrumbs.push({
-									{
 										parentComponentName: 'DmpListingComponent',
-										label: breadcrumb.label,
+										label: this.dmp.label,
-										url: breadcrumb.url,
+										url: '/plans/edit/' + this.dmp.id,
 										// notFoundResolver: [await this.projectService.getSingle(this.dmp.project.id).map(x => ({ label: x.label, url: '/projects/edit/' + x.id }) as BreadcrumbItem).toPromise()]
 									}
 								);
@@ -163,7 +162,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 								this.breadCrumbs = Observable.of([
 									{
 										parentComponentName: 'DmpListingComponent',
-										label: this.language.instant('NAV-BAR.DMPS'),
+										label: this.language.instant('NAV-BAR.MY-DMPS'),
 										url: 'plans',
 										notFoundResolver: [await this.projectService.getSingle(this.dmp.project.id).map(x => ({ label: x.label, url: '/projects/edit/' + x.id }) as BreadcrumbItem).toPromise()]
 									}]
@@ -175,6 +174,21 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 					this.dmp = new DmpEditorModel();
 					this.formGroup = this.dmp.buildForm();
 					this.registerFormEventsForNewItem();
+					if (this.isAuthenticated) {
+						const breadCrumbs = [];
+						breadCrumbs.push({
+							parentComponentName: null,
+							label: this.language.instant('NAV-BAR.MY-DMPS'),
+							url: "/plans"
+						});
+						breadCrumbs.push({
+								parentComponentName: null,
+								label: "CREATE NEW DMP",
+								url: "/plans/new"
+							}
+						);
+						this.breadCrumbs = Observable.of(breadCrumbs);
+					}
 				}
 			});
 
@@ -194,7 +208,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		this.breadCrumbs = Observable.of([
 			{
 				parentComponentName: 'DmpListingComponent',
-				label: this.language.instant('NAV-BAR.DMPS'),
+				label: this.language.instant('NAV-BAR.MY-DMPS'),
 				url: 'plans',
 			}
 		]);

dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts

@@ -67,18 +67,19 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 					this.showProject = true;
 					const breadCrumbs = [];
 
-					if (this.itemId) {
+					// if (this.itemId) {
-						const dmplabel = this.route.snapshot.queryParams.groupLabel;
+					// 	const dmplabel = this.route.snapshot.queryParams.groupLabel;
-						breadCrumbs.push({
+					// 	breadCrumbs.push({
-							parentComponentName: null,
+					// 		parentComponentName: null,
-							label: this.language.instant('NAV-BAR.DMPS'),
+					// 		label: this.language.instant('NAV-BAR.DMPS'),
-							url: '/plans'
+					// 		url: '/plans'
-						});
+					// 	});
-					}
+					// }
-					else breadCrumbs.push({
+					// else
-						parentComponentName: null,
+					breadCrumbs.push({
-						label: this.language.instant('NAV-BAR.DMPS'),
+					parentComponentName: null,
-						url: "/plans"
+					label: this.language.instant('NAV-BAR.MY-DMPS'),
+					url: "/plans"
 					})
 					this.breadCrumbs = Observable.of(breadCrumbs);
 					this.criteria.setCriteria(this.getDefaultCriteria());

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts

@@ -54,8 +54,8 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 						.subscribe(data => {
 							this.dmp = data;
 							const breadCrumbs = [];
-							breadCrumbs.push({ parentComponentName: null, label: 'DMPs', url: "/plans" });
+							breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-DMPS'), url: "/plans" });
-							breadCrumbs.push({ parentComponentName: 'DmpListingComponent', label: this.dmp.label, url: '/overview/' + this.dmp.id });
+							breadCrumbs.push({ parentComponentName: 'DmpListingComponent', label: this.dmp.label, url: '/plans/overview/' + this.dmp.id });
 							this.breadCrumbs = Observable.of(breadCrumbs);
 						})
 				}

dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html

@@ -1,13 +1,13 @@
 <div class="row" *ngIf="(buildBreadCrumb(this.activatedRoute) | async) as items" [class.app-breadcrumb]="items.length > 0">
-	<div *ngFor="let breadcrumb of items; let i = index; let length = count" class="col-auto">
+	<div *ngFor="let breadcrumb of items; let i = index; let length = count" class="col-auto breadcrumb-box">
 		<div class="row breadcrumb-item">
 			<a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params" class="navbar-brand breadcrumb-title col-auto active" *ngIf="i == (items.length - 1)">
 				<mat-icon *ngIf="breadcrumb.icon" class="icon mr-2">{{ breadcrumb.icon }}</mat-icon>
-				<span>{{ breadcrumb.label }}</span>
+				<span class="breadcrumb-label">{{ breadcrumb.label }}</span>
 			</a>
 			<a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params" class="navbar-brand breadcrumb-title col-auto" *ngIf="i != (items.length - 1)">
 				<mat-icon *ngIf="breadcrumb.icon" class="icon mr-2">{{ breadcrumb.icon }}</mat-icon>
-				<span>{{ breadcrumb.label }}</span>
+				<span class="breadcrumb-label">{{ breadcrumb.label }}</span>
 			</a>
 			<mat-icon class="arrow col-auto">chevron_right</mat-icon>
 		</div>

dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.scss

@@ -22,12 +22,13 @@
     background-color: #f8f8f8;
     font-size: 16px;
     font-weight: 400;
-    padding: 0.5em 0.5em;
+	padding: 0.5em 0.5em;
+	margin-right: 0rem;
   }
 
   .breadcrumb-title {
-	height: auto;
+    height: auto;
-	line-height: 1em;
+    line-height: 1em;
   }
 
   .breadcrumb-item {
@@ -35,13 +36,124 @@
     align-items: center;
   }
 
+  .breadcrumb-label {
+    max-width: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .active {
     color: #4687f0;
   }
 
   .icon {
-	font-size: 1em;
+    font-size: 1em;
-	width: auto;
+    width: auto;
-	height: auto;
+    height: auto;
+  }
+}
+
+@media screen and (max-width: 1668px) {
+  .app-breadcrumb {
+    .breadcrumb-box {
+      padding: 0px;
+    }
+
+    .navbar-brand {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f8f8f8;
+      font-size: 15px;
+      font-weight: 400;
+	  padding: 0.5em 0.5em;
+	  margin-left: 2rem;
+    }
+
+    .breadcrumb-label {
+      max-width: 170px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+@media screen and (max-width: 1446px) {
+  .app-breadcrumb {
+    .breadcrumb-box {
+      padding: 0px;
+    }
+
+    .navbar-brand {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f8f8f8;
+      font-size: 14px;
+      font-weight: 400;
+	  padding: 0.5em 0.5em;
+	  margin-left: 2rem;
+    }
+
+    .breadcrumb-label {
+      max-width: 130px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+@media screen and (max-width: 1280px) {
+  .app-breadcrumb {
+    .breadcrumb-box {
+      padding: 0px;
+    }
+
+    .navbar-brand {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f8f8f8;
+      font-size: 14px;
+      font-weight: 400;
+	  padding: 0.5em 0.5em;
+	  margin-left: 2rem;
+    }
+
+    .breadcrumb-label {
+      max-width: 90px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+@media screen and (max-width: 570px) {
+  .app-breadcrumb {
+    .breadcrumb-box {
+      padding: 0px;
+    }
+
+    .navbar-brand {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f8f8f8;
+      font-size: 12px;
+      font-weight: 400;
+	  padding: 0.5em 0.5em;
+	  margin-left: 2rem;
+    }
+
+    .breadcrumb-label {
+      max-width: 70px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 }

dmp-frontend/src/app/ui/misc/search/search.component.css

@@ -14,3 +14,14 @@
 	line-height: inherit;
 	height: 50px;
 }
+
+
+@media screen and (max-width: 1136px) {
+	.input-search {
+		width: 150px;
+		border: 1px solid rgb(218, 218, 218);
+		border-radius: 6px;
+		padding-left: 10px;
+		margin-right: 20px;
+	}
+}

dmp-frontend/src/app/ui/project/editor/project-editor.component.ts

@@ -60,18 +60,33 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
 						.subscribe(data => {
 							this.project = new ProjectEditorModel().fromModel(data);
 							this.formGroup = this.project.buildForm(null, this.project.type === ProjectType.External || !this.editMode);
-							this.breadCrumbs = Observable.of([{
+							const breadCrumbs = [];
+							breadCrumbs.push({
+								parentComponentName: null,
+								label: this.language.instant('NAV-BAR.PROJECTS').toUpperCase(),
+								url: '/projects' + this.project.id
+							});
+							breadCrumbs.push({
 								parentComponentName: 'ProjectListingComponent',
-								label: this.language.instant('NAV-BAR.PROJECTS'),
+								label: this.project.label,
-								url: '/projects'
+								url: '/projects/edit/' + this.project.id
-							}]);
+							});
+							this.breadCrumbs = Observable.of(breadCrumbs);
 						});
 				} else {
-					this.breadCrumbs = Observable.of([{
+					const breadCrumbs = [];
-						parentComponentName: 'ProjectListingComponent',
+					breadCrumbs.push({
-						label: this.language.instant('NAV-BAR.PROJECTS'),
+						parentComponentName: null,
+						label: this.language.instant('NAV-BAR.PROJECTS').toUpperCase(),
 						url: '/projects'
-					}]);
+					});
+					breadCrumbs.push({
+						parentComponentName: 'ProjectListingComponent',
+						label: this.language.instant('QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW').toUpperCase(),
+						url: '/projects/new/'
+					});
+					this.breadCrumbs = Observable.of(breadCrumbs);
+
 					this.project = new ProjectEditorModel();
 					setTimeout(() => {
 						this.formGroup = this.project.buildForm();
@@ -94,8 +109,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
 		this.projectService.createProject(this.formGroup.value)
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(
-			complete => this.onCallbackSuccess(),
+				complete => this.onCallbackSuccess(),
-			error => this.onCallbackError(error)
+				error => this.onCallbackError(error)
 			);
 	}
 
@@ -133,8 +148,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
 				this.projectService.delete(this.project.id)
 					.pipe(takeUntil(this._destroyed))
 					.subscribe(
-					complete => { this.onCallbackSuccess() },
+						complete => { this.onCallbackSuccess() },
-					error => this.onCallbackError(error)
+						error => this.onCallbackError(error)
 					);
 			}
 		});

dmp-frontend/src/app/ui/project/listing/project-listing.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, MatSort } from '@angular/material';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute, Params } from '@angular/router';
 import { Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { BaseComponent } from '../../../core/common/base/base.component';
@@ -13,6 +13,7 @@ import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item
 import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
 import { ProjectCriteriaComponent } from './criteria/project-criteria.component';
 import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
 	selector: 'app-project-listing-component',
@@ -25,24 +26,32 @@ export class ProjectListingComponent extends BaseComponent implements OnInit, IB
 	@ViewChild(MatSort) sort: MatSort;
 	@ViewChild(ProjectCriteriaComponent) criteria: ProjectCriteriaComponent;
 
-	breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
+	breadCrumbs: Observable<BreadcrumbItem[]>;
 	totalCount: number;
 	listingItems: ProjectListingModel[] = [];
 
 	constructor(
 		private projectService: ProjectService,
 		private router: Router,
+		private route: ActivatedRoute,
+		public language: TranslateService,
 		public languageResolverService: LanguageResolverService
 	) {
 		super();
 	}
 
 	ngOnInit() {
-		this.breadCrumbs = Observable.of([]);
 
 		this.criteria.setCriteria(this.getDefaultCriteria());
 		this.refresh();
 		this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
+
+		this.breadCrumbs = Observable.of([{
+			parentComponentName: null,
+			label: this.language.instant('NAV-BAR.PROJECTS').toUpperCase(),
+			url: '/projects'
+		}]);
+
 	}
 
 	refresh(resetPages = false) {

dmp-frontend/src/assets/i18n/en.json

@@ -56,6 +56,7 @@
 		"PROJECT": "Project",
 		"DMP": "Dmp",
 		"DMPS": "DMPs",
+		"MY-DMPS": "MY DMPs",
 		"DATASETS": "Datasets",
 		"DATASET": "Dataset",
 		"PUBLIC-DATASETS": "Explore OpenDMP",
@@ -63,7 +64,7 @@
 		"DATASETS-ADMIN": "Dataset Profiles",
 		"DMP-PROFILES": "DMP Profiles",
 		"ABOUT": "About",
-		"DATASET-DESCRIPTIONS": "DATASET DESCRIPTIONS",
+		"MY-DATASET-DESCRIPTIONS": "MY DATASET DESCRIPTIONS",
 		"DATASET-DESCRIPTION-WIZARD": "Dataset description wizard",
 		"PUBLIC DATASETS": "PUBLIC DATASETS",
 		"PUBLIC DMPS": "PUBLIC DMPS",
@@ -351,7 +352,8 @@
 			"EDIT": "Edit",
 			"MAKE-IT-PUBLIC": "Make it public",
 			"VIEW": "View",
-			"NEW": "New Dataset Description"
+			"NEW": "New Dataset Description",
+			"CREATE-NEW":"Create new dataset description"
 		}
 	},
 	"DATASET-PUBLIC-LISTING": {