MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Adds breadcrumbs responsiveness and fixes their context

This commit is contained in:
apapachristou 2019-06-07 14:03:10 +03:00
parent fe69154353
commit 1e5b01a875
11 changed files with 229 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

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

@ -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"
}]);
}

28
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
View File

@ -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',
}
]);

25
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
View File

@ -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());

4
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
View File

@ -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);
})
}

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

@ -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>

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

@ -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;
}
}
}

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

@ -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;
}
}

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

@ -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)
);
}
});

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

@ -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) {

6
dmp-frontend/src/assets/i18n/en.json
View File

@ -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": {