generated from amosproj/amos202Xss0Y-projname
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into feat/xd-206
- Loading branch information
Showing
24 changed files
with
286 additions
and
282 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 31 additions & 37 deletions
68
apps/frontend/src/app/components/header/header.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,38 @@ | ||
| <ix-application class="h-screen !z-0"> | ||
| <ix-application-header name="Xcelerator Demo App"> | ||
| <button class="placeholder-logo" slot="logo" [routerLink]="['/']"> | ||
| <img | ||
| src="https://cdn.c2comms.cloud/images/logo-collection/2.1/sie-logo-white-rgb.svg" | ||
| class="h-5" | ||
| alt="Siemens logo" | ||
| /> | ||
| </button> | ||
| <ix-button class="mt-1" variant="secondary" ghost> | ||
| Powered by Siemens Xcelerator | ||
| </ix-button> | ||
| <ix-avatar username="John Doe" extra="Administrator"> </ix-avatar> | ||
| </ix-application-header> | ||
| <ix-application-header name="Xcelerator Demo App"> | ||
| <button class="placeholder-logo" slot="logo" [routerLink]="['/']"> | ||
| <img | ||
| [src]=getCorrectImage() | ||
| class="h-5" | ||
| alt="Siemens logo" | ||
| /> | ||
| </button> | ||
| <ix-button class="mt-1" variant="secondary" ghost> | ||
| Powered by Siemens Xcelerator | ||
| </ix-button> | ||
| <ix-avatar username="John Doe" extra="Administrator"> </ix-avatar> | ||
| </ix-application-header> | ||
|
|
||
| <ix-breadcrumb visibleItemCount="3" class="ml-8"> | ||
| @for (breadcrumb of breadcrumbs(); track breadcrumb.url) { | ||
| <ix-breadcrumb-item | ||
| [routerLink]="[breadcrumb.url]" | ||
| [label]="breadcrumb.label" | ||
| ></ix-breadcrumb-item> | ||
| } | ||
| </ix-breadcrumb> | ||
| <ix-breadcrumb visibleItemCount="3" class="ml-8"> | ||
| @for (breadcrumb of breadcrumbs(); track breadcrumb; let i=$index; let length=$count) { | ||
| <ix-breadcrumb-item | ||
| [label]="breadcrumb" | ||
| [routerLink]="cutUrl(length - i - 1)" | ||
| ></ix-breadcrumb-item> | ||
| } | ||
| </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> | ||
| <ix-menu-item icon="home" [routerLink]="['/']">Home</ix-menu-item> | ||
| <ix-menu-item icon="building1" [routerLink]="['/facilities']">Facilities</ix-menu-item> | ||
| <ix-menu-item icon="tasks-open" [routerLink]="['/cases']">Cases</ix-menu-item> | ||
| <ix-menu-item icon="building1" [routerLink]="['/facilities']">Facilities</ix-menu-item> | ||
| <ix-menu-item icon="tasks-open" [routerLink]="['/cases']">Cases</ix-menu-item> | ||
| <ix-menu-item [icon]=getCorrectIcon() slot="bottom" (click)="toggleMode()">toggle theme</ix-menu-item> | ||
|
|
||
| <ix-menu-about> | ||
| <app-legal-information></app-legal-information> | ||
| </ix-menu-about> | ||
| </ix-menu> | ||
|
|
||
| <ix-menu-about> | ||
| <app-legal-information></app-legal-information> | ||
| </ix-menu-about> | ||
| </ix-menu> | ||
|
|
||
| <router-outlet></router-outlet> | ||
| <router-outlet></router-outlet> | ||
| </ix-application> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
143 changes: 62 additions & 81 deletions
143
apps/frontend/src/app/components/header/header.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,108 +1,89 @@ | ||
| 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 { themeSwitcher } from '@siemens/ix'; | ||
| 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); | ||
| }); | ||
| private readonly _activatedRoute: ActivatedRoute = inject(ActivatedRoute); | ||
| private readonly _router: Router = inject(Router); | ||
| private _lightMode = false; | ||
|
|
||
| readonly title = computed(() => { | ||
| this.routerEvents(); | ||
| let currentRoute = this._activatedRoute.root; | ||
| while (currentRoute.firstChild) { | ||
| currentRoute = currentRoute.firstChild; | ||
| } | ||
| return currentRoute.snapshot.data['title']; | ||
| }); | ||
| readonly routerEvents = toSignal( | ||
| this._router.events.pipe(filter((e) => e instanceof NavigationEnd)), | ||
| { initialValue: null }, | ||
| ); | ||
|
|
||
| readonly subtitle = computed(() => { | ||
| this.routerEvents(); | ||
| let curentRoute = this._activatedRoute.root; | ||
| while (curentRoute.firstChild) { | ||
| curentRoute = curentRoute.firstChild; | ||
| } | ||
| return curentRoute.snapshot.data['subtitle']; | ||
| }); | ||
| readonly breadcrumbs = computed(() => { | ||
| this.routerEvents(); | ||
|
|
||
| readonly backButtonPresent = computed(() => { | ||
| const breadcrumbs = this.breadcrumbs(); | ||
| let tempHeader = ''; | ||
| if (breadcrumbs.length > 0) { | ||
| tempHeader = breadcrumbs[breadcrumbs.length - 1].label; | ||
| } | ||
| 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) | ||
|
|
||
| if (tempHeader === 'Home') { | ||
| return false; | ||
| } | ||
| currentRoute = currentRoute.firstChild; | ||
| } | ||
|
|
||
| return true; | ||
| }); | ||
| const breadcrumb = currentRoute.snapshot.data['breadcrumb']; | ||
| if(breadcrumb && breadcrumbs[breadcrumbs.length - 1] !== breadcrumb) | ||
| breadcrumbs.push(breadcrumb) | ||
|
|
||
| /** | ||
| * Build breadcrumbs recursively | ||
| * @param route | ||
| * @param breadcrumbs | ||
| */ | ||
| static buildBreadcrumbRecursively( | ||
| route: ActivatedRoute, | ||
| breadcrumbs: IBreadcrumbData[] = [], | ||
| ): IBreadcrumbData[] { | ||
| const breadcrumbData = route.snapshot.data['breadcrumbs'] as IBreadcrumbData; | ||
| return breadcrumbs; | ||
| }); | ||
|
|
||
| if (breadcrumbData && !find(breadcrumbs, breadcrumbData)) { | ||
| breadcrumbs.push(breadcrumbData); | ||
| } | ||
| /** | ||
| * 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('/'); | ||
| } | ||
|
|
||
| if (route.firstChild == null) { | ||
| return breadcrumbs; | ||
| } | ||
| toggleMode() { | ||
| themeSwitcher.toggleMode(); | ||
| this._lightMode = !this._lightMode; | ||
| } | ||
|
|
||
| return this.buildBreadcrumbRecursively(route.firstChild, breadcrumbs); | ||
| } | ||
| getCorrectImage() { | ||
| if (this._lightMode) { | ||
| return "https://cdn.c2comms.cloud/images/logo-collection/2.1/sie-logo-black-rgb.svg"; | ||
| } | ||
| return "https://cdn.c2comms.cloud/images/logo-collection/2.1/sie-logo-white-rgb.svg"; | ||
| } | ||
|
|
||
| goBack() { | ||
| this._router.navigate([ this._router.url.split('/').slice(0, -1).join('/') ]); | ||
| } | ||
| getCorrectIcon() { | ||
| if (this._lightMode) { | ||
| return "sun-filled"; | ||
| } | ||
| return "sun"; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
libs/cases/frontend/domain/src/lib/application/facades/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| export * from './browse.facades'; | ||
| export * from './cases.facade'; |
Oops, something went wrong.