From f97ba937672946d8ba58c06f87c2fb499e9a49b5 Mon Sep 17 00:00:00 2001
From: richardlt <richard.le.terrier@gmail.com>
Date: Mon, 30 Nov 2020 10:34:33 +0100
Subject: [PATCH] fix(ui): route title

Signed-off-by: richardlt <richard.le.terrier@gmail.com>
---
 .../src/app/@routes/base/base.component.ts    | 50 +++++--------
 ui/dashboard/src/app/app-routing.module.ts    | 74 ++++---------------
 2 files changed, 30 insertions(+), 94 deletions(-)

diff --git a/ui/dashboard/src/app/@routes/base/base.component.ts b/ui/dashboard/src/app/@routes/base/base.component.ts
index 85d22369..22d38569 100644
--- a/ui/dashboard/src/app/@routes/base/base.component.ts
+++ b/ui/dashboard/src/app/@routes/base/base.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router, NavigationEnd, Event } from '@angular/router';
-import get from 'lodash-es/get';
+import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
 import Meta from 'projects/utask-lib/src/lib/@models/meta.model';
+import { filter, map, mergeMap } from 'rxjs/operators';
 
 @Component({
   templateUrl: './base.html',
@@ -12,43 +13,26 @@ export class BaseComponent implements OnInit {
 
   constructor(
     private _activatedRoute: ActivatedRoute,
-    private router: Router
+    private _router: Router,
+    private _titleService: Title
   ) {
-    this.router.events.subscribe((event: Event) => {
-      if (event instanceof NavigationEnd) {
-        window.scroll(0, 0);
-        // Navigation Service - Title & history
-        let route = this._activatedRoute;
+    this._router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .pipe(map(() => this._activatedRoute))
+      .pipe(map((route) => {
         while (route.firstChild) {
-          route = route.firstChild;
+            route = route.firstChild;
         }
-        route.data.subscribe((values) => {
-          // Title
-          if (typeof values.title === 'string') {
-            document.title = values.title;
-          } else if (values.title) {
-            let title = '';
-            const args = values.title.args.map((s: string) => {
-              return get(values, s);
-            });
-            title = this.format(values.title.value, ...args);
-            document.title = title;
-          }
-        });
-      }
-    });
+        return route;
+    }))
+      .pipe(filter(route => route.outlet === 'primary'))
+      .pipe(mergeMap(route => route.data))
+      .subscribe((routeData) => {
+        this._titleService.setTitle((routeData.title ? routeData.title + ' - ' : '') + routeData.meta.application_name);
+      });
   }
 
   ngOnInit() {
     this.meta = this._activatedRoute.snapshot.data.meta;
   }
-
-  private format(str: string, ...args) {
-    return str.replace(/{(\d+)}/g, function (match, number) {
-      return typeof args[number] != 'undefined'
-        ? args[number]
-        : match
-        ;
-    });
-  }
 }
diff --git a/ui/dashboard/src/app/app-routing.module.ts b/ui/dashboard/src/app/app-routing.module.ts
index d976230b..cf5b20d4 100644
--- a/ui/dashboard/src/app/app-routing.module.ts
+++ b/ui/dashboard/src/app/app-routing.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule, Router } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
@@ -37,12 +37,8 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
 
 const routes: Routes = [
-  {
-    path: 'error', component: ErrorComponent
-  },
-  {
-    path: '', redirectTo: '/tasks', pathMatch: 'full'
-  },
+  { path: 'error', component: ErrorComponent },
+  { path: '', redirectTo: '/tasks', pathMatch: 'full' },
   {
     path: '',
     component: BaseComponent,
@@ -55,85 +51,45 @@ const routes: Routes = [
       {
         path: 'tasks',
         component: TasksComponent,
-        data: {
-          title: {
-            value: '{0}',
-            args: ['meta.application_name']
-          }
-        }
+        data: { title: 'Tasks' }
       },
       {
         path: 'templates',
         component: TemplatesComponent,
-        data: {
-          title: {
-            value: 'Templates - {0}',
-            args: ['meta.application_name']
-          }
-        },
+        data: { title: 'Templates' },
       },
       {
         path: 'template/:templateName',
         component: TemplateComponent,
         runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-        data: {
-          title: {
-            value: 'Template - {1}',
-            args: ['meta.application_name']
-          }
-        },
+        data: { title: 'Template' }
       },
       {
         path: 'functions',
         component: FunctionsComponent,
-        data: {
-          title: {
-            value: 'Functions - {0}',
-            args: ['meta.application_name']
-          }
-        },
+        data: { title: 'Functions' },
       },
       {
         path: 'function/:functionName',
         component: FunctionComponent,
         runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-        data: {
-          title: {
-            value: 'Function - {1}',
-            args: ['meta.application_name']
-          }
-        },
+        data: { title: 'Function' },
       },
       {
         path: 'task/:id',
         component: TaskComponent,
         runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-        data: {
-          title: {
-            value: 'Task - {0}',
-            args: ['meta.application_name']
-          }
-        },
+        data: { title: 'Task' }
       },
       {
         path: 'new',
         component: NewComponent,
-        data: {
-          title: {
-            value: 'New task - {0}',
-            args: ['meta.application_name']
-          }
-        },
+        data: { title: 'New task' },
       },
       {
         path: 'stats',
         component: StatsComponent,
-        data: {
-          title: {
-            value: 'Stats - {0}',
-            args: ['meta.application_name']
-          }
-        },
+        data: { title: 'Stats' },
         resolve: {
           stats: StatsResolve
         }
@@ -173,13 +129,9 @@ const routes: Routes = [
     MatButtonToggleModule,
     MatCheckboxModule,
     MatButtonModule,
-    ToastrModule.forRoot({
-      positionClass: 'toast-bottom-right',
-    }),
+    ToastrModule.forRoot({ positionClass: 'toast-bottom-right', }),
     UTaskModule,
-    UTaskLibModule.forRoot({
-      apiBaseUrl: environment.apiBaseUrl
-    }),
+    UTaskLibModule.forRoot({ apiBaseUrl: environment.apiBaseUrl }),
     RouterModule.forRoot(
       routes,
       {