Get page title from routes, including for menu items
- Fixed the user always being set to root instead of node because of the $USERNAME variable
This commit is contained in:
parent
dd375b6948
commit
e4ff4f5acf
7 changed files with 104 additions and 18 deletions
|
@ -2,4 +2,4 @@
|
||||||
|
|
||||||
cd backend || exit
|
cd backend || exit
|
||||||
docker-compose build backend
|
docker-compose build backend
|
||||||
USERNAME="0" docker-compose run -e COMMAND=deploy -v /var/run/docker.sock:/var/run/docker.sock backend
|
SZD_USERNAME="0" docker-compose run -e COMMAND=deploy -v /var/run/docker.sock:/var/run/docker.sock backend
|
||||||
|
|
|
@ -16,7 +16,7 @@ services:
|
||||||
environment:
|
environment:
|
||||||
- COMMAND=run
|
- COMMAND=run
|
||||||
- DATABASE_URL=mysql://szakdolgozat:DevelopmentPassword@database/szakdolgozat
|
- DATABASE_URL=mysql://szakdolgozat:DevelopmentPassword@database/szakdolgozat
|
||||||
user: ${USERNAME:-node}
|
user: ${SZD_USERNAME:-node}
|
||||||
database:
|
database:
|
||||||
image: mysql:5.6
|
image: mysql:5.6
|
||||||
ports:
|
ports:
|
||||||
|
|
|
@ -13,7 +13,11 @@ const routes: Routes = [
|
||||||
path: '',
|
path: '',
|
||||||
canActivate: [AuthCheck],
|
canActivate: [AuthCheck],
|
||||||
children: [
|
children: [
|
||||||
{path: 'users', loadChildren: async () => (await import('./users/users.module')).UsersModule}
|
{
|
||||||
|
path: 'users',
|
||||||
|
loadChildren: async () => (await import('./users/users.module')).UsersModule,
|
||||||
|
data: {title: 'Felhasználók'} as RouteData
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
@ -24,3 +28,5 @@ const routes: Routes = [
|
||||||
})
|
})
|
||||||
export class AppRoutingModule {
|
export class AppRoutingModule {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type RouteData = { title: string; };
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
*ngIf="isHandset$ | async">
|
*ngIf="isHandset$ | async">
|
||||||
<mat-icon aria-label="Oldalsáv">menu</mat-icon>
|
<mat-icon aria-label="Oldalsáv">menu</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<span>Szakdolgozat</span>
|
<span>{{ pageTitle }}</span>
|
||||||
<span class="toolbar-spacer"></span>
|
<span class="toolbar-spacer"></span>
|
||||||
<span *ngIf="loginService.token">
|
<span *ngIf="loginService.token">
|
||||||
<span>{{ loginService.user.name }}</span>
|
<span>{{ loginService.user.name }}</span>
|
||||||
|
|
|
@ -1,11 +1,13 @@
|
||||||
import {Component, OnInit} from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
||||||
import {Observable} from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import {map, shareReplay} from 'rxjs/operators';
|
import { filter, map, shareReplay } from 'rxjs/operators';
|
||||||
import {LoginService} from './auth/login.service';
|
import { LoginService } from './auth/login.service';
|
||||||
import {Router} from '@angular/router';
|
import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Route, Router, Routes } from '@angular/router';
|
||||||
import {ApiService} from './api.service';
|
import { ApiService } from './api.service';
|
||||||
import {UserRole} from './model/user.model';
|
import { UserRole } from './model/user.model';
|
||||||
|
import { RouteData } from './app-routing.module';
|
||||||
|
import { Title } from '@angular/platform-browser';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
|
@ -21,14 +23,89 @@ export class AppComponent implements OnInit {
|
||||||
);
|
);
|
||||||
|
|
||||||
menu: MenuItem[] = [
|
menu: MenuItem[] = [
|
||||||
{path: 'users', title: 'Felhasználók', requiredRole: 'admin'}
|
{path: 'users', requiredRole: 'admin'}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
routeSegments: RouteSegment[];
|
||||||
|
|
||||||
|
pageTitle: string;
|
||||||
|
|
||||||
constructor(private breakpointObserver: BreakpointObserver, public loginService: LoginService, private api: ApiService,
|
constructor(private breakpointObserver: BreakpointObserver, public loginService: LoginService, private api: ApiService,
|
||||||
private router: Router, private login: LoginService) {
|
private router: Router, private login: LoginService, private activeRoute: ActivatedRoute,
|
||||||
|
private title: Title) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
for (const item of this.menu) {
|
||||||
|
const res = this.getRoutes([{path: item.path, routes: this.router.config}]);
|
||||||
|
if (res.length) {
|
||||||
|
const data = res[0].currentRoute.data as RouteData;
|
||||||
|
item.title = data.title;
|
||||||
|
} else {
|
||||||
|
item.title = 'NOTFOUND';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setPageTitle();
|
||||||
|
}
|
||||||
|
|
||||||
|
getRoutes(data: { path: string, routes: Routes }[]): { routes: Routes, path: string, currentRoute: Route }[] {
|
||||||
|
for (const datum of data) {
|
||||||
|
const path = datum.path;
|
||||||
|
const res = datum.routes.filter(route => path.startsWith(route.path)).map(route => {
|
||||||
|
return {
|
||||||
|
currentRoute: route,
|
||||||
|
routes: route.children ?? [],
|
||||||
|
path: path.substring(route.path.length).replace(/^\//, '')
|
||||||
|
};
|
||||||
|
});
|
||||||
|
if (!res.length) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const ret = this.getRoutes(res);
|
||||||
|
if (!ret.length && res.length && res[0].path.length === 0) { // Ha a következő már üres, akkor leellenőrizzük, hogy megtaláltuk-e
|
||||||
|
return res;
|
||||||
|
} else { // Ha megtaláltuk a megoldást, visszaadjuk végig
|
||||||
|
const results = ret.filter(obj => obj.path.length === 0);
|
||||||
|
if (results.length) {
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
getRouteSegments(snapshot: ActivatedRouteSnapshot): RouteSegment[] {
|
||||||
|
let routeParts: RouteSegment[] = [];
|
||||||
|
if (snapshot) {
|
||||||
|
if (snapshot.firstChild) {
|
||||||
|
routeParts = routeParts.concat(this.getRouteSegments(snapshot.firstChild));
|
||||||
|
}
|
||||||
|
if (!snapshot.data) {
|
||||||
|
return routeParts;
|
||||||
|
}
|
||||||
|
const data = snapshot.data as RouteData;
|
||||||
|
if (data.title && snapshot.url.length) {
|
||||||
|
routeParts.push({
|
||||||
|
title: data.title,
|
||||||
|
url: snapshot.url[0].path
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return routeParts;
|
||||||
|
}
|
||||||
|
|
||||||
|
setPageTitle(): void {
|
||||||
|
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
|
||||||
|
const routeParts = this.getRouteSegments(this.activeRoute.snapshot);
|
||||||
|
if (!routeParts.length) {
|
||||||
|
this.pageTitle = 'Szakdolgozat';
|
||||||
|
return this.title.setTitle('Szakdolgozat');
|
||||||
|
}
|
||||||
|
let pageTitle = routeParts.reverse().map(part => part.title).reduce((partA, partI) => `${partA} > ${partI}`);
|
||||||
|
this.pageTitle = pageTitle;
|
||||||
|
pageTitle += ` | Szakdolgozat`;
|
||||||
|
this.title.setTitle(pageTitle);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async logout(): Promise<void> {
|
async logout(): Promise<void> {
|
||||||
|
@ -41,4 +118,5 @@ export class AppComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
type MenuItem = { path: string, title: string, requiredRole: UserRole | 'admin' };
|
type MenuItem = { path: string, requiredRole: UserRole | 'admin', title?: string };
|
||||||
|
type RouteSegment = { title: string, url: string };
|
||||||
|
|
|
@ -7,10 +7,11 @@ import { MatInputModule } from '@angular/material/input';
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
import { RouterModule, Routes } from '@angular/router';
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
import { RouteData } from '../app-routing.module';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{path: 'login', component: LoginComponent},
|
{path: 'login', component: LoginComponent, data: {title: 'Bejelentkezés'} as RouteData},
|
||||||
{path: 'register', component: RegisterComponent}
|
{path: 'register', component: RegisterComponent, data: {title: 'Regisztráció'} as RouteData}
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
|
@ -2,9 +2,10 @@ import { NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { UserListComponent } from './user-list/user-list.component';
|
import { UserListComponent } from './user-list/user-list.component';
|
||||||
import { RouterModule, Routes } from '@angular/router';
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
import { RouteData } from '../app-routing.module';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{path: '', component: UserListComponent}
|
{path: '', component: UserListComponent, data: {title: 'Felhasználók'} as RouteData}
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
Loading…
Reference in a new issue