Adds dynamic page titles

This commit is contained in:
apapachristou 2019-09-16 18:46:19 +03:00
parent 3164ee4144
commit ffebb8f365
15 changed files with 192 additions and 73 deletions

View File

@ -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'
},
},
{

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 { }
export class DmpProfileRoutingModule { }

View File

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

View File

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

View File

@ -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'
},
},
{

View File

@ -15,7 +15,8 @@ const routes: Routes = [
path: 'overview/:publicId',
component: DmpOverviewComponent,
data: {
breadcrumb: true
breadcrumb: true,
title: 'GENERAL.TITLES.EXPLORE-PLANS-OVERVIEW'
},
}
];

View File

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

View File

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

View File

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

View File

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