From 4542c1f3461049245c5e5d6da7dbe5a777a8101e Mon Sep 17 00:00:00 2001 From: Ingo Sternberg Date: Fri, 28 Jun 2024 18:32:47 +0200 Subject: [PATCH 1/3] refactor: simplify how breadcrumbs work Signed-off-by: Ingo Sternberg #100 --- apps/frontend/src/app/app.routes.ts | 15 +- .../components/header/header.component.html | 72 ++++---- .../header/header.component.spec.ts | 11 +- .../app/components/header/header.component.ts | 170 ++++++++---------- .../frontend/shell/src/lib/shell.routes.ts | 12 +- .../frontend/shell/src/lib/shell.routes.ts | 5 +- 6 files changed, 127 insertions(+), 158 deletions(-) diff --git a/apps/frontend/src/app/app.routes.ts b/apps/frontend/src/app/app.routes.ts index ea37f2a4..d140d083 100644 --- a/apps/frontend/src/app/app.routes.ts +++ b/apps/frontend/src/app/app.routes.ts @@ -7,10 +7,7 @@ export const APP_ROUTES: Route[] = [ path: '', component: HeaderComponent, data: { - breadcrumbs: { - label: 'Home', - url: '/', - }, + breadcrumb: 'Home', title: 'Home Page', subtitle: '', }, @@ -23,10 +20,7 @@ export const APP_ROUTES: Route[] = [ { path: 'facilities', data: { - breadcrumbs: { - label: 'Facilities', - url: 'facilities', - }, + breadcrumb: 'Facilities', title: 'Facilities Dashboard', subtitle: 'List of all Facilities', }, @@ -36,10 +30,7 @@ export const APP_ROUTES: Route[] = [ { path: 'cases', data: { - breadcrumbs: { - label: 'Cases', - url: 'cases', - }, + breadcrumb: 'Cases', title: 'Cases', subtitle: '', }, diff --git a/apps/frontend/src/app/components/header/header.component.html b/apps/frontend/src/app/components/header/header.component.html index 92bf7918..d0e29792 100644 --- a/apps/frontend/src/app/components/header/header.component.html +++ b/apps/frontend/src/app/components/header/header.component.html @@ -1,43 +1,43 @@ - - - - Powered by Siemens Xcelerator - - - + + + + Powered by Siemens Xcelerator + + + - - @for (breadcrumb of breadcrumbs(); track breadcrumb.url) { - - } - + + @for (breadcrumb of breadcrumbs(); track breadcrumb; let i=$index; let length=$count) { + + } + - + - - Facilities - Cases + + Facilities + Cases - - - - + + + + - + diff --git a/apps/frontend/src/app/components/header/header.component.spec.ts b/apps/frontend/src/app/components/header/header.component.spec.ts index 8254058b..504fb0c3 100644 --- a/apps/frontend/src/app/components/header/header.component.spec.ts +++ b/apps/frontend/src/app/components/header/header.component.spec.ts @@ -2,19 +2,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ActivatedRoute, NavigationEnd, Router, RouterEvent } from '@angular/router'; import { ReplaySubject } from 'rxjs'; -import { HeaderComponent, IBreadcrumbData } from './header.component'; +import { HeaderComponent } from './header.component'; const HEADER_ROUTES = { root: { snapshot: { data: { - breadcrumbs: { label: 'Layer 1', url: '/layer1' } as IBreadcrumbData, + breadcrumb: 'Layer 1', }, }, firstChild: { snapshot: { data: { - breadcrumbs: { label: 'Layer 2', url: '/layer2' } as IBreadcrumbData, + breadcrumb: 'Layer 2', }, }, }, @@ -30,6 +30,7 @@ describe('HeaderComponent', () => { beforeEach(async () => { routerMock = { events: eventsSubject.asObservable(), + url: '/Layer1/Layer2', } as unknown as Router; await TestBed.configureTestingModule({ @@ -71,8 +72,6 @@ describe('HeaderComponent', () => { eventsSubject.next(new NavigationEnd(1, '', '')); const breadcrumbs = component.breadcrumbs(); - expect(breadcrumbs.length).toBe(2); - expect(breadcrumbs[0]).toEqual({ label: 'Layer 1', url: '/layer1' }); - expect(breadcrumbs[1]).toEqual({ label: 'Layer 2', url: '/layer2' }); + expect(breadcrumbs).toEqual([ 'Layer 1', 'Layer 2' ]); }); }); diff --git a/apps/frontend/src/app/components/header/header.component.ts b/apps/frontend/src/app/components/header/header.component.ts index 043435fb..14c2b53a 100644 --- a/apps/frontend/src/app/components/header/header.component.ts +++ b/apps/frontend/src/app/components/header/header.component.ts @@ -1,108 +1,96 @@ import { CommonModule } from '@angular/common'; import { - ChangeDetectionStrategy, - Component, - computed, - inject, - ViewEncapsulation, + ChangeDetectionStrategy, + Component, + computed, + inject, + ViewEncapsulation, } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router'; import { IxModule } from '@siemens/ix-angular'; -import { find } from 'lodash'; import { filter } from 'rxjs'; import { LegalInformationComponent } from './legal-information/legal-information.component'; -/** - * Breadcrumb data interface - */ -export interface IBreadcrumbData { - label: string; - url: string; -} - /** * Header component */ @Component({ - selector: 'app-header', - standalone: true, - imports: [ CommonModule, IxModule, RouterLink, RouterOutlet, LegalInformationComponent ], - templateUrl: './header.component.html', - styleUrl: './header.component.scss', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'app-header', + standalone: true, + imports: [ CommonModule, IxModule, RouterLink, RouterOutlet, LegalInformationComponent ], + templateUrl: './header.component.html', + styleUrl: './header.component.scss', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class HeaderComponent { - private readonly _activatedRoute: ActivatedRoute = inject(ActivatedRoute); - private readonly _router: Router = inject(Router); - - readonly routerEvents = toSignal( - this._router.events.pipe(filter((e) => e instanceof NavigationEnd)), - { initialValue: null }, - ); - - readonly breadcrumbs = computed(() => { - this.routerEvents(); - return HeaderComponent.buildBreadcrumbRecursively(this._activatedRoute.root); - }); - - readonly title = computed(() => { - this.routerEvents(); - let currentRoute = this._activatedRoute.root; - while (currentRoute.firstChild) { - currentRoute = currentRoute.firstChild; - } - return currentRoute.snapshot.data['title']; - }); - - readonly subtitle = computed(() => { - this.routerEvents(); - let curentRoute = this._activatedRoute.root; - while (curentRoute.firstChild) { - curentRoute = curentRoute.firstChild; - } - return curentRoute.snapshot.data['subtitle']; - }); - - readonly backButtonPresent = computed(() => { - const breadcrumbs = this.breadcrumbs(); - let tempHeader = ''; - if (breadcrumbs.length > 0) { - tempHeader = breadcrumbs[breadcrumbs.length - 1].label; - } - - if (tempHeader === 'Home') { - return false; - } - - return true; - }); - - /** - * Build breadcrumbs recursively - * @param route - * @param breadcrumbs - */ - static buildBreadcrumbRecursively( - route: ActivatedRoute, - breadcrumbs: IBreadcrumbData[] = [], - ): IBreadcrumbData[] { - const breadcrumbData = route.snapshot.data['breadcrumbs'] as IBreadcrumbData; - - if (breadcrumbData && !find(breadcrumbs, breadcrumbData)) { - breadcrumbs.push(breadcrumbData); - } - - if (route.firstChild == null) { - return breadcrumbs; - } - - return this.buildBreadcrumbRecursively(route.firstChild, breadcrumbs); - } - - goBack() { - this._router.navigate([ this._router.url.split('/').slice(0, -1).join('/') ]); - } + private readonly _activatedRoute: ActivatedRoute = inject(ActivatedRoute); + private readonly _router: Router = inject(Router); + + readonly routerEvents = toSignal( + this._router.events.pipe(filter((e) => e instanceof NavigationEnd)), + { 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(); + + const breadcrumbs = []; + let currentRoute = this._activatedRoute.root; + while (currentRoute.firstChild) { + const breadcrumb = currentRoute.snapshot.data['breadcrumb']; + if(breadcrumb && breadcrumbs[breadcrumbs.length - 1] !== breadcrumb) + breadcrumbs.push(breadcrumb) + + currentRoute = currentRoute.firstChild; + } + + const breadcrumb = currentRoute.snapshot.data['breadcrumb']; + if(breadcrumb && breadcrumbs[breadcrumbs.length - 1] !== breadcrumb) + breadcrumbs.push(breadcrumb) + + return breadcrumbs; + }); + + /** + * from the right cut the current url until a '/' is reached n times + * So for /cases/10/abc, goBack(1) yields /cases/10 + * + * @param n + */ + cutUrl(n: number) { + const currentUrl = this._router.url; + const urlSegments = currentUrl.split('/'); + return urlSegments.slice(0, urlSegments.length - n).join('/'); + } + + goBack(n = 1) { + this._router.navigateByUrl(this.cutUrl(n)); + } + } diff --git a/libs/cases/frontend/shell/src/lib/shell.routes.ts b/libs/cases/frontend/shell/src/lib/shell.routes.ts index be449522..1439b6f1 100644 --- a/libs/cases/frontend/shell/src/lib/shell.routes.ts +++ b/libs/cases/frontend/shell/src/lib/shell.routes.ts @@ -25,10 +25,7 @@ export const CASES_SHELL_ROUTES: Route[] = [ // Route to create a case path: 'create', data: { - breadcrumbs: { - label: 'Create', - url: 'cases/create', - }, + breadcrumb: 'Create', title: 'Create a Case', subtitle: '', }, @@ -39,11 +36,8 @@ export const CASES_SHELL_ROUTES: Route[] = [ // Route to detail case path: ':id', data: { - breadcrumbs: { - label: 'Details', - url: 'cases/:id', - }, - title: 'Detail of case', + breadcrumb: 'Details', + title: 'Detail of Case', subtitle: '', }, loadComponent: () => diff --git a/libs/facilities/frontend/shell/src/lib/shell.routes.ts b/libs/facilities/frontend/shell/src/lib/shell.routes.ts index 9e666571..fb4992f2 100644 --- a/libs/facilities/frontend/shell/src/lib/shell.routes.ts +++ b/libs/facilities/frontend/shell/src/lib/shell.routes.ts @@ -24,10 +24,7 @@ export const FACILITIES_SHELL_ROUTES: Route[] = [ // Route to detail page path: ':id', data: { - breadcrumbs: { - label: 'Details', - url: 'facilities/:id', - }, + breadcrumb: 'Details', title: 'Details of Facility', subtitle: '', }, From 508837f98f9a9fe378d29282a65d8023f24b3e38 Mon Sep 17 00:00:00 2001 From: Ingo Sternberg Date: Fri, 28 Jun 2024 18:40:25 +0200 Subject: [PATCH 2/3] refactor: rename the "browseFacadesService" that is responsible for cases to "casesFacade" Signed-off-by: Ingo Sternberg #100 --- ...owse.facades.spec.ts => cases.facade.spec.ts} | 16 ++++++++-------- .../{browse.facades.ts => cases.facade.ts} | 2 +- .../domain/src/lib/application/facades/index.ts | 2 +- .../case-browse/case-browse.component.ts | 6 +++--- .../create-case/create-case.component.ts | 6 +++--- .../detail-case/detail-case.component.ts | 10 +++++----- 6 files changed, 21 insertions(+), 21 deletions(-) rename libs/cases/frontend/domain/src/lib/application/facades/{browse.facades.spec.ts => cases.facade.spec.ts} (76%) rename libs/cases/frontend/domain/src/lib/application/facades/{browse.facades.ts => cases.facade.ts} (96%) diff --git a/libs/cases/frontend/domain/src/lib/application/facades/browse.facades.spec.ts b/libs/cases/frontend/domain/src/lib/application/facades/cases.facade.spec.ts similarity index 76% rename from libs/cases/frontend/domain/src/lib/application/facades/browse.facades.spec.ts rename to libs/cases/frontend/domain/src/lib/application/facades/cases.facade.spec.ts index 25f9d0aa..dee34471 100644 --- a/libs/cases/frontend/domain/src/lib/application/facades/browse.facades.spec.ts +++ b/libs/cases/frontend/domain/src/lib/application/facades/cases.facade.spec.ts @@ -3,10 +3,10 @@ import { ICaseParams } from '@frontend/cases/shared/models'; import { firstValueFrom, of } from 'rxjs'; import { XdCasesRequestService } from '../../infrastructure/cases-request.service'; -import { XdBrowseFacadesService } from './browse.facades'; +import { XdCasesFacade } from './cases.facade'; -describe('XdBrowseFacadesService', () => { - let service: XdBrowseFacadesService; +describe('XdCasesFacade', () => { + let facade: XdCasesFacade; let casesRequestService: XdCasesRequestService; beforeEach(() => { @@ -17,22 +17,22 @@ describe('XdBrowseFacadesService', () => { TestBed.configureTestingModule({ providers: [ - XdBrowseFacadesService, + XdCasesFacade, { provide: XdCasesRequestService, useValue: timeseriesRequestServiceMock }, ], }); - service = TestBed.inject(XdBrowseFacadesService); + facade = TestBed.inject(XdCasesFacade); casesRequestService = TestBed.inject(XdCasesRequestService); }); it('should be created', () => { - expect(service).toBeTruthy(); + expect(facade).toBeTruthy(); }); describe('getAllTimeseries', () => { it('should call getAllTimeseries of TimeseriesRequestService', async () => { - const response = await firstValueFrom(service.getAllCases()); + const response = await firstValueFrom(facade.getAllCases()); expect(casesRequestService.getAllCases).toHaveBeenCalledTimes(1); expect(response).toEqual([]); @@ -43,7 +43,7 @@ describe('XdBrowseFacadesService', () => { it('should call getTimeSeries of TimeseriesRequestService with correct parameters', async () => { const params: ICaseParams = { id: 1 } as ICaseParams; - const response = await firstValueFrom(service.getTimeSeries(params)); + const response = await firstValueFrom(facade.getTimeSeries(params)); expect(casesRequestService.getTimeSeries).toHaveBeenCalledWith(params); expect(response).toEqual({}); diff --git a/libs/cases/frontend/domain/src/lib/application/facades/browse.facades.ts b/libs/cases/frontend/domain/src/lib/application/facades/cases.facade.ts similarity index 96% rename from libs/cases/frontend/domain/src/lib/application/facades/browse.facades.ts rename to libs/cases/frontend/domain/src/lib/application/facades/cases.facade.ts index 4e11ade1..89d8a9c5 100644 --- a/libs/cases/frontend/domain/src/lib/application/facades/browse.facades.ts +++ b/libs/cases/frontend/domain/src/lib/application/facades/cases.facade.ts @@ -8,7 +8,7 @@ import { XdCasesRequestService } from '../../infrastructure/cases-request.servic * Browse facades service. */ @Injectable({ providedIn: 'root' }) -export class XdBrowseFacadesService { +export class XdCasesFacade { private readonly _scanService = inject(XdCasesRequestService); /** diff --git a/libs/cases/frontend/domain/src/lib/application/facades/index.ts b/libs/cases/frontend/domain/src/lib/application/facades/index.ts index 069f0a8a..5ce2c239 100644 --- a/libs/cases/frontend/domain/src/lib/application/facades/index.ts +++ b/libs/cases/frontend/domain/src/lib/application/facades/index.ts @@ -1 +1 @@ -export * from './browse.facades'; +export * from './cases.facade'; diff --git a/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts b/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts index 2e1f05b0..da6c1157 100644 --- a/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts +++ b/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts @@ -9,7 +9,7 @@ import { } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { RouterLink } from '@angular/router'; -import { XdBrowseFacadesService } from '@frontend/cases/frontend/domain'; +import { XdCasesFacade } from '@frontend/cases/frontend/domain'; import { ICaseResponse } from '@frontend/cases/shared/models'; import { IxModule } from '@siemens/ix-angular'; @@ -40,8 +40,8 @@ export class CaseBrowseComponent { protected readonly showStatusCancelled = signal(false); protected readonly showStatusArchived = signal(false); - protected readonly _browseFacade = inject(XdBrowseFacadesService); - protected readonly _cases = toSignal(this._browseFacade.getAllCases()); + protected readonly _casesFacade = inject(XdCasesFacade); + protected readonly _cases = toSignal(this._casesFacade.getAllCases()); protected readonly _sortedCases = computed(() => { let cases = this._cases(); if (cases === undefined) { diff --git a/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.ts b/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.ts index a4f1b13b..c80aed99 100644 --- a/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.ts +++ b/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.ts @@ -10,7 +10,7 @@ import { toSignal } from '@angular/core/rxjs-interop'; import { FormsModule, NG_VALUE_ACCESSOR, NgForm } from '@angular/forms'; import { RouterLink } from '@angular/router'; import { faker } from '@faker-js/faker'; -import { XdBrowseFacadesService } from '@frontend/cases/frontend/domain'; +import { XdCasesFacade } from '@frontend/cases/frontend/domain'; import { ECasePriority, ECaseStatus, ECaseType } from '@frontend/cases/shared/models'; import { XdBrowseFacade } from '@frontend/facilities/frontend/domain'; import { IxModule, IxSelectCustomEvent, ToastService } from '@siemens/ix-angular'; @@ -36,7 +36,7 @@ import { DateDropdownWrapperComponent } from './date-dropdown-accessor'; }) export class CreateCaseComponent implements OnInit { private readonly _browseFacade = inject(XdBrowseFacade); - protected readonly _browseFacade2 = inject(XdBrowseFacadesService); + protected readonly _casesFacade = inject(XdCasesFacade); protected readonly facilities = toSignal(this._browseFacade.getAllFacilities()); facilityPlaceholder = signal('Select Facility'); @@ -75,7 +75,7 @@ export class CreateCaseComponent implements OnInit { if (form.valid) { const caseData = this.mapFormData(form.form.value); - this._browseFacade2.createCase(caseData).subscribe({ + this._casesFacade.createCase(caseData).subscribe({ // eslint-disable-next-line @typescript-eslint/no-unused-vars next: (_) => { this.showSuccessToast(); diff --git a/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts b/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts index 768107b4..a768da43 100644 --- a/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts +++ b/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts @@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation import { toSignal } from '@angular/core/rxjs-interop'; import { FormsModule } from '@angular/forms'; import { ActivatedRoute, RouterLink } from '@angular/router'; -import { XdBrowseFacadesService } from '@frontend/cases/frontend/domain'; +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'; @@ -20,8 +20,8 @@ import DeleteModalComponent from './delete-modal/deleteModal.component'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class DetailCaseComponent { - private readonly _browseFacade = inject(XdBrowseFacadesService); - protected readonly _cases = toSignal(this._browseFacade.getAllCases()); + private readonly _casesFacade = inject(XdCasesFacade); + protected readonly _cases = toSignal(this._casesFacade.getAllCases()); protected readonly casedetail = computed(() => { const _case = this._cases(); if (_case === undefined) { @@ -41,7 +41,7 @@ export class DetailCaseComponent { const caseId = this.mapCaseId(this.casedetail()); if (caseId !== undefined) { // The subscribe is necessary, otherwise the request is not sent - this._browseFacade.deleteCase(caseId).subscribe(); + this._casesFacade.deleteCase(caseId).subscribe(); } } @@ -89,7 +89,7 @@ export class DetailCaseComponent { if (caseId !== undefined && caseData !== undefined) { // The subscribe is necessary, otherwise the request is not sent - this._browseFacade.updateCase(caseId, caseData).subscribe({}); + this._casesFacade.updateCase(caseId, caseData).subscribe({}); } this.isEditing = false; } else { From 13f0a4288a66b697c6bae0c1e1534068b0ee345e Mon Sep 17 00:00:00 2001 From: Ingo Sternberg Date: Fri, 28 Jun 2024 19:32:31 +0200 Subject: [PATCH 3/3] refactor: change title depending on the facility/case Signed-off-by: Ingo Sternberg #100 --- .../components/header/header.component.html | 8 ------ .../app/components/header/header.component.ts | 27 ------------------- .../src/app/pages/home/home.component.html | 5 ++++ .../frontend/shell/src/lib/shell.routes.ts | 4 --- .../case-browse/case-browse.component.html | 8 ++++++ .../case-browse/case-browse.component.ts | 7 ++++- .../create-case/create-case.component.html | 8 ++++++ .../create-case/create-case.component.ts | 9 ++++--- .../detail-case/detail-case.component.html | 15 +++++++++-- .../detail-case/detail-case.component.ts | 19 +++++++------ .../frontend/shell/src/lib/shell.routes.ts | 2 -- .../lib/components/browse/browse.page.html | 9 +++++++ .../src/lib/components/browse/browse.page.ts | 7 +++-- .../lib/components/detail/detail.page.html | 9 +++++++ .../src/lib/components/detail/detail.page.ts | 7 ++--- 15 files changed, 84 insertions(+), 60 deletions(-) diff --git a/apps/frontend/src/app/components/header/header.component.html b/apps/frontend/src/app/components/header/header.component.html index d0e29792..bda3b3b4 100644 --- a/apps/frontend/src/app/components/header/header.component.html +++ b/apps/frontend/src/app/components/header/header.component.html @@ -22,14 +22,6 @@ } - - Facilities Cases diff --git a/apps/frontend/src/app/components/header/header.component.ts b/apps/frontend/src/app/components/header/header.component.ts index 14c2b53a..a8cb7d1d 100644 --- a/apps/frontend/src/app/components/header/header.component.ts +++ b/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)); - } - } diff --git a/apps/frontend/src/app/pages/home/home.component.html b/apps/frontend/src/app/pages/home/home.component.html index cf711d6a..8f658603 100644 --- a/apps/frontend/src/app/pages/home/home.component.html +++ b/apps/frontend/src/app/pages/home/home.component.html @@ -1,3 +1,8 @@ + +
diff --git a/libs/cases/frontend/shell/src/lib/shell.routes.ts b/libs/cases/frontend/shell/src/lib/shell.routes.ts index 1439b6f1..aecaa33e 100644 --- a/libs/cases/frontend/shell/src/lib/shell.routes.ts +++ b/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), diff --git a/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html b/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html index c92170b2..3905ef5f 100644 --- a/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html +++ b/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html @@ -2,6 +2,14 @@ Create Case
+ +
diff --git a/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts b/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts index da6c1157..1d773a2d 100644 --- a/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts +++ b/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', diff --git a/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.html b/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.html index a2e5899a..3506f69a 100644 --- a/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.html +++ b/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.html @@ -1,3 +1,11 @@ + +
{{ isEditing ? 'Submit changes' : 'Update Case' }} @@ -7,8 +9,17 @@ Delete Case + + + - @if(casedetail(); as _case){ +

_Case {{ _case.handle }}

@@ -67,5 +78,5 @@

_Case {{ _case.handle }}

- } +} diff --git a/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts b/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts index a768da43..65423b4d 100644 --- a/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts +++ b/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) { diff --git a/libs/facilities/frontend/shell/src/lib/shell.routes.ts b/libs/facilities/frontend/shell/src/lib/shell.routes.ts index fb4992f2..8234a557 100644 --- a/libs/facilities/frontend/shell/src/lib/shell.routes.ts +++ b/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), }, diff --git a/libs/facilities/frontend/view/src/lib/components/browse/browse.page.html b/libs/facilities/frontend/view/src/lib/components/browse/browse.page.html index 58bf2216..85ca71d4 100644 --- a/libs/facilities/frontend/view/src/lib/components/browse/browse.page.html +++ b/libs/facilities/frontend/view/src/lib/components/browse/browse.page.html @@ -6,6 +6,15 @@ {{ filter() ? 'Remove Filter for Issues' : 'Filter Facilities with Issues' }}
+ + + @if (showCardList) { @if (facilities(); as facilities) { diff --git a/libs/facilities/frontend/view/src/lib/components/browse/browse.page.ts b/libs/facilities/frontend/view/src/lib/components/browse/browse.page.ts index 7d4a39a9..57b43180 100644 --- a/libs/facilities/frontend/view/src/lib/components/browse/browse.page.ts +++ b/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; } diff --git a/libs/facilities/frontend/view/src/lib/components/detail/detail.page.html b/libs/facilities/frontend/view/src/lib/components/detail/detail.page.html index 44267522..e86b782e 100644 --- a/libs/facilities/frontend/view/src/lib/components/detail/detail.page.html +++ b/libs/facilities/frontend/view/src/lib/components/detail/detail.page.html @@ -1,4 +1,13 @@ @if (facility(); as facility) { + + +
diff --git a/libs/facilities/frontend/view/src/lib/components/detail/detail.page.ts b/libs/facilities/frontend/view/src/lib/components/detail/detail.page.ts index 900b1b9b..a72668b0 100644 --- a/libs/facilities/frontend/view/src/lib/components/detail/detail.page.ts +++ b/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, ) {}