refactor: change title depending on the facility/case

Signed-off-by: Ingo Sternberg <[email protected]>
#100

apps/frontend/src/app/components/header/header.component.html

@@ -22,14 +22,6 @@
         }
     </ix-breadcrumb>
 
-    <ix-content-header
-        class="pl-4 pt-4"
-        [hasBackButton]="backButtonPresent()"
-        [headerTitle]="title()"
-        [headerSubtitle]="subtitle()"
-        (backButtonClick)="goBack()"
-    ></ix-content-header>
-
     <ix-menu>
         <ix-menu-item icon="building1" [routerLink]="['/facilities']">Facilities</ix-menu-item>
         <ix-menu-item icon="tasks-open" [routerLink]="['/cases']">Cases</ix-menu-item>

apps/frontend/src/app/components/header/header.component.ts

@@ -34,29 +34,6 @@ export class HeaderComponent {
         { initialValue: null },
     );
 
-    private readonly _lastRoute = computed(() => {
-        this.routerEvents();
-
-        let currentRoute = this._activatedRoute.root;
-        while (currentRoute.firstChild) {
-            currentRoute = currentRoute.firstChild;
-        }
-
-        return currentRoute;
-    });
-
-    readonly title = computed(() => {
-        return this._lastRoute().snapshot.data['title'];
-    });
-
-    readonly subtitle = computed(() => {
-        return this._lastRoute().snapshot.data['subtitle'];
-    });
-
-    readonly backButtonPresent = computed(() => {
-        return this.breadcrumbs().length > 1;
-    });
-
     readonly breadcrumbs = computed(() => {
         this.routerEvents();
 
@@ -89,8 +66,4 @@ export class HeaderComponent {
         return urlSegments.slice(0, urlSegments.length - n).join('/');
     }
 
-    goBack(n = 1) {
-        this._router.navigateByUrl(this.cutUrl(n));
-    }
-
 }

apps/frontend/src/app/pages/home/home.component.html

@@ -1,3 +1,8 @@
+<ix-content-header
+    class="pl-8 pt-4"
+    headerTitle="Home Page"
+></ix-content-header>
+
 <ix-content class="p-8 ml-5 items-center">
 	<div class="flex items-center gap-x-36">
 		<div>

libs/cases/frontend/shell/src/lib/shell.routes.ts

@@ -26,8 +26,6 @@ export const CASES_SHELL_ROUTES: Route[] = [
 				path: 'create',
 				data: {
 					breadcrumb: 'Create',
-					title: 'Create a Case',
-					subtitle: '',
 				},
 				loadComponent: () =>
 					import('cases-frontend-view').then((m) => m.CreateCaseComponent),
@@ -37,8 +35,6 @@ export const CASES_SHELL_ROUTES: Route[] = [
 				path: ':id',
 				data: {
 					breadcrumb: 'Details',
-					title: 'Detail of Case',
-					subtitle: '',
 				},
 				loadComponent: () =>
 					import('cases-frontend-view').then((m) => m.DetailCaseComponent),

libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html

@@ -2,6 +2,14 @@
 	<ix-button [routerLink]="['/cases/create']" icon="plus"> Create Case </ix-button>
 </div>
 
+<ix-content-header
+    class="pl-4 pt-4"
+    hasBackButton="true"
+    headerTitle="Cases Overview"
+    headerSubtitle="View all cases including their status, priority and type"
+    (backButtonClick)="router.navigate(['../'], { relativeTo: route });"
+></ix-content-header>
+
 <ix-content>
 	<div class="flex flex-col gap-y-2 pb-2">
 		<div class="flex gap-x-2">

libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts

@@ -8,7 +8,7 @@ import {
 	ViewEncapsulation,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { XdCasesFacade } from '@frontend/cases/frontend/domain';
 import { ICaseResponse } from '@frontend/cases/shared/models';
 import { IxModule } from '@siemens/ix-angular';
@@ -131,6 +131,11 @@ export class CaseBrowseComponent {
 		return cases;
 	});
 
+    constructor(
+        protected router: Router,
+        protected route: ActivatedRoute
+    ) {}
+
 	getStatusClasses(_case: ICaseResponse) {
 		return {
 			emergency: _case.priority === 'EMERGENCY',

libs/cases/frontend/view/src/lib/components/create-case/create-case.component.html

@@ -1,3 +1,11 @@
+<ix-content-header
+    class="pl-4 pt-4"
+    hasBackButton="true"
+    headerTitle="Create a new Case"
+    headerSubtitle="View all facilities and their status"
+    (backButtonClick)="router.navigate(['../'], { relativeTo: route });"
+></ix-content-header>
+
 <ix-content>
     <div class="grid grid-cols-[auto_250px] gap-10">
         <form

libs/cases/frontend/view/src/lib/components/create-case/create-case.component.ts

@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import {  FormsModule, NG_VALUE_ACCESSOR, NgForm } from '@angular/forms';
-import { RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { faker } from '@faker-js/faker';
 import { XdCasesFacade } from '@frontend/cases/frontend/domain';
 import { ECasePriority, ECaseStatus, ECaseType } from '@frontend/cases/shared/models';
@@ -43,8 +43,11 @@ export class CreateCaseComponent implements OnInit {
     typePlaceholder = signal('Select Type');
     priorityPlaceholder = signal('Select Priority');
 
-    constructor(private readonly toastService: ToastService) {
-    }
+    constructor(
+        protected readonly router: Router,
+        protected readonly route: ActivatedRoute,
+        private readonly toastService: ToastService
+    ) {}
 
     casePriority = ECasePriority;
     caseType = ECaseType;

libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.html

@@ -1,3 +1,5 @@
+@if(casedetail(); as _case){
+
 <ix-button class="absolute top-20 right-32 !z-[50]" (click)="toggleEdit()">
     {{ isEditing ? 'Submit changes' : 'Update Case' }}
 </ix-button>
@@ -7,8 +9,17 @@
 <ix-button  class="absolute top-20 right-4 !z-[50]" (click)="deleting()">
     Delete Case
 </ix-button>
+
+<ix-content-header
+    class="pl-4 pt-4"
+    hasBackButton="true"
+    headerTitle="Details of Facility {{ _case.title }}"
+    headerSubtitle="View all facilities and their status"
+    (backButtonClick)="router.navigate(['../'], { relativeTo: route });"
+></ix-content-header>
+
 <ix-content>
-    @if(casedetail(); as _case){
+
         <div class="container" >
             <h1>_Case {{ _case.handle }} </h1>
             <form class="form-content" #caseForm="ngForm">
@@ -67,5 +78,5 @@ <h1>_Case {{ _case.handle }} </h1>
                 </div>
             </form>
         </div>
-    }
 </ix-content>
+}

libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { XdCasesFacade } from '@frontend/cases/frontend/domain';
 import { ECasePriority, ECaseStatus, ECaseType, ICaseResponse } from '@frontend/cases/shared/models';
 import { IxModule, ModalService, ToastService } from '@siemens/ix-angular';
@@ -13,9 +13,9 @@ import DeleteModalComponent from './delete-modal/deleteModal.component';
 @Component({
     selector: 'lib-detail-case',
     standalone: true,
-    imports: [ CommonModule, FormsModule, IxModule, RouterLink ],
+    imports: [CommonModule, FormsModule, IxModule, RouterLink],
     templateUrl: './detail-case.component.html',
-    styleUrls: [ './detail-case.component.scss' ],
+    styleUrls: ['./detail-case.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -33,9 +33,12 @@ export class DetailCaseComponent {
     isEditing = false;
     datePattern = /^\d{4}-\d{2}-\d{2}T00:00:00\.000Z$/;
 
-
-    constructor(private route: ActivatedRoute, private readonly _modalService: ModalService, private readonly toastService: ToastService) {
-    }
+    constructor(
+        protected router: Router,
+        protected route: ActivatedRoute,
+        private readonly _modalService: ModalService,
+        private readonly toastService: ToastService
+    ) {}
 
     deleteCase() {
         const caseId = this.mapCaseId(this.casedetail());
@@ -81,7 +84,7 @@ export class DetailCaseComponent {
     onSubmit(): void {
         const casedetail = this.casedetail();
 
-        if(casedetail !== undefined) {
+        if (casedetail !== undefined) {
             const validationString = this.validateForm(casedetail);
             if (validationString === 'valid') {
                 const caseId = this.mapCaseId(this.casedetail());
@@ -98,7 +101,7 @@ export class DetailCaseComponent {
         }
     }
 
-    validateForm(casedetail: ICaseResponse ) {
+    validateForm(casedetail: ICaseResponse) {
 
 
         if (casedetail !== undefined) {

libs/facilities/frontend/shell/src/lib/shell.routes.ts

@@ -25,8 +25,6 @@ export const FACILITIES_SHELL_ROUTES: Route[] = [
 				path: ':id',
 				data: {
 					breadcrumb: 'Details',
-					title: 'Details of Facility',
-					subtitle: '',
 				},
 				loadComponent: () => import('facilities-frontend-view').then((m) => m.XdDetailPage),
 			},

libs/facilities/frontend/view/src/lib/components/browse/browse.page.html

@@ -6,6 +6,15 @@
         {{ filter() ? 'Remove Filter for Issues' : 'Filter Facilities with Issues' }}
     </ix-button>
 </div>
+
+<ix-content-header
+    class="pl-4 pt-4"
+    hasBackButton="true"
+    headerTitle="Facilities Overview"
+    headerSubtitle="View all facilities and their status"
+    (backButtonClick)="router.navigate(['../'], { relativeTo: route });"
+></ix-content-header>
+
 <ix-content>
 	@if (showCardList) {
         @if (facilities(); as facilities) {

libs/facilities/frontend/view/src/lib/components/browse/browse.page.ts

@@ -8,7 +8,7 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { XdBrowseFacade } from '@frontend/facilities/frontend/domain';
 import { StatusToColorRecord } from '@frontend/facilities/frontend/models';
 import { IxModule } from '@siemens/ix-angular';
@@ -42,7 +42,10 @@ export class XdBrowsePage {
        }
     });
 
-	toggleView() {
+    constructor(protected readonly router: Router, protected readonly route: ActivatedRoute) {
+    }
+
+    toggleView() {
 		this.showCardList = !this.showCardList;
 	}
 

libs/facilities/frontend/view/src/lib/components/detail/detail.page.html

@@ -1,4 +1,13 @@
 @if (facility(); as facility) {
+
+<ix-content-header
+    class="pl-4 pt-4"
+    hasBackButton="true"
+    headerTitle="Details of Facility {{ facility.heading }}"
+    headerSubtitle="On this page you can see detailed information about the facility including charts about the pump and environment data"
+    (backButtonClick)="router.navigate(['../'], { relativeTo: route });"
+></ix-content-header>
+
 <ix-content>
     <div class="details-grid gap-x-6 gap-y-4 pb-32">
 

libs/facilities/frontend/view/src/lib/components/detail/detail.page.ts

@@ -10,7 +10,7 @@ import {
 	ViewEncapsulation,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { XdDetailsFacade } from '@frontend/facilities/frontend/domain';
 import { StatusToColorRecord } from '@frontend/facilities/frontend/models';
 import { themeSwitcher } from '@siemens/ix';
@@ -36,7 +36,7 @@ export class XdDetailPage implements OnInit {
 	protected theme = convertThemeName(themeSwitcher.getCurrentTheme());
 	protected readonly locked = signal(true);
 	protected readonly StatusToColorRecord = StatusToColorRecord;
-	private readonly _assetId = this._route.snapshot.params['id'];
+	private readonly _assetId = this.route.snapshot.params['id'];
 	private readonly _currentTime = new Date();
 	private readonly _28MinutesAgo = new Date(this._currentTime.getTime() - 28 * 60 * 1000);
 	private readonly _detailsFacade = inject(XdDetailsFacade);
@@ -179,7 +179,8 @@ export class XdDetailPage implements OnInit {
 	});
 
 	constructor(
-		private _route: ActivatedRoute,
+        protected router: Router,
+		protected route: ActivatedRoute,
 		private readonly _modalService: ModalService,
 	) {}