diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts index 260e97f02..01aefd5ac 100644 --- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts +++ b/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'), - url: '/datasets', + label: this.datasetWizardModel.label, + url: '/datasets/edit/' + this.datasetWizardModel.id, notFoundResolver: [ { parentComponentName: null, - label: this.datasetWizardModel.dmp.project.label, - url: '/projects/edit/' + this.datasetWizardModel.dmp.project.id + label: this.datasetWizardModel.dmp.label, + url: '/plans/overview/' + this.datasetWizardModel.dmp.id }, { parentComponentName: null, - label: this.datasetWizardModel.dmp.label, - url: '/plans/edit/' + this.datasetWizardModel.dmp.id, + label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS').toUpperCase(), + 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 diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts index 5709478ed..31706b52d 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts +++ b/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" }]); } diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts index a64f9c131..0cf9c06ee 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts +++ b/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, - url: breadcrumb.url, + label: this.dmp.label, + 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', } ]); diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts index fd03f6eea..94651518f 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts +++ b/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) { - const dmplabel = this.route.snapshot.queryParams.groupLabel; - breadCrumbs.push({ - parentComponentName: null, - label: this.language.instant('NAV-BAR.DMPS'), - url: '/plans' - }); - } - else breadCrumbs.push({ - parentComponentName: null, - label: this.language.instant('NAV-BAR.DMPS'), - url: "/plans" + // if (this.itemId) { + // const dmplabel = this.route.snapshot.queryParams.groupLabel; + // breadCrumbs.push({ + // parentComponentName: null, + // label: this.language.instant('NAV-BAR.DMPS'), + // url: '/plans' + // }); + // } + // else + breadCrumbs.push({ + parentComponentName: null, + label: this.language.instant('NAV-BAR.MY-DMPS'), + url: "/plans" }) this.breadCrumbs = Observable.of(breadCrumbs); this.criteria.setCriteria(this.getDefaultCriteria()); diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts index 3197887a0..3607df7aa 100644 --- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts +++ b/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: 'DmpListingComponent', label: this.dmp.label, url: '/overview/' + this.dmp.id }); + breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-DMPS'), url: "/plans" }); + breadCrumbs.push({ parentComponentName: 'DmpListingComponent', label: this.dmp.label, url: '/plans/overview/' + this.dmp.id }); this.breadCrumbs = Observable.of(breadCrumbs); }) } diff --git a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html index 4edfe5012..e4ce76eb5 100644 --- a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html +++ b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.html @@ -1,13 +1,13 @@
-
+
{{ breadcrumb.icon }} - {{ breadcrumb.label }} + {{ breadcrumb.label }} {{ breadcrumb.icon }} - {{ breadcrumb.label }} + {{ breadcrumb.label }} chevron_right
diff --git a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.scss b/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.scss index 1b0559dab..c80112f1a 100644 --- a/dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.scss +++ b/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; - line-height: 1em; + height: auto; + 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; - width: auto; - height: auto; + font-size: 1em; + width: 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; + } } } diff --git a/dmp-frontend/src/app/ui/misc/search/search.component.css b/dmp-frontend/src/app/ui/misc/search/search.component.css index a49af0f09..ad462e08a 100644 --- a/dmp-frontend/src/app/ui/misc/search/search.component.css +++ b/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; + } +} diff --git a/dmp-frontend/src/app/ui/project/editor/project-editor.component.ts b/dmp-frontend/src/app/ui/project/editor/project-editor.component.ts index a6cd0c991..9ffae41c8 100644 --- a/dmp-frontend/src/app/ui/project/editor/project-editor.component.ts +++ b/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'), - url: '/projects' - }]); + label: this.project.label, + url: '/projects/edit/' + this.project.id + }); + this.breadCrumbs = Observable.of(breadCrumbs); }); } else { - this.breadCrumbs = Observable.of([{ - parentComponentName: 'ProjectListingComponent', - label: this.language.instant('NAV-BAR.PROJECTS'), + const breadCrumbs = []; + breadCrumbs.push({ + 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(), - error => this.onCallbackError(error) + complete => this.onCallbackSuccess(), + 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() }, - error => this.onCallbackError(error) + complete => { this.onCallbackSuccess() }, + error => this.onCallbackError(error) ); } }); diff --git a/dmp-frontend/src/app/ui/project/listing/project-listing.component.ts b/dmp-frontend/src/app/ui/project/listing/project-listing.component.ts index a33d34f54..4c9f83db7 100644 --- a/dmp-frontend/src/app/ui/project/listing/project-listing.component.ts +++ b/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 = Observable.of([]); + breadCrumbs: Observable; 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) { diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index a94f5ab72..d510514d4 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/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": {