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 pull request #217 from amosproj/refactor/xd-100
Refactor/xd 100
- Loading branch information
Showing
20 changed files
with
189 additions
and
196 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
66 changes: 29 additions & 37 deletions
66
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,43 +1,35 @@ | ||
| <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="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-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-item icon="building1" [routerLink]="['/facilities']">Facilities</ix-menu-item> | ||
| <ix-menu-item icon="tasks-open" [routerLink]="['/cases']">Cases</ix-menu-item> | ||
|
|
||
| <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> | ||
| <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
127 changes: 44 additions & 83 deletions
127
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,69 @@ | ||
| 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']; | ||
| }); | ||
| private readonly _activatedRoute: ActivatedRoute = inject(ActivatedRoute); | ||
| private readonly _router: Router = inject(Router); | ||
|
|
||
| readonly backButtonPresent = computed(() => { | ||
| const breadcrumbs = this.breadcrumbs(); | ||
| let tempHeader = ''; | ||
| if (breadcrumbs.length > 0) { | ||
| tempHeader = breadcrumbs[breadcrumbs.length - 1].label; | ||
| } | ||
| readonly routerEvents = toSignal( | ||
| this._router.events.pipe(filter((e) => e instanceof NavigationEnd)), | ||
| { initialValue: null }, | ||
| ); | ||
|
|
||
| if (tempHeader === 'Home') { | ||
| return false; | ||
| } | ||
| readonly breadcrumbs = computed(() => { | ||
| this.routerEvents(); | ||
|
|
||
| return true; | ||
| }); | ||
| 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) | ||
|
|
||
| /** | ||
| * Build breadcrumbs recursively | ||
| * @param route | ||
| * @param breadcrumbs | ||
| */ | ||
| static buildBreadcrumbRecursively( | ||
| route: ActivatedRoute, | ||
| breadcrumbs: IBreadcrumbData[] = [], | ||
| ): IBreadcrumbData[] { | ||
| const breadcrumbData = route.snapshot.data['breadcrumbs'] as IBreadcrumbData; | ||
| currentRoute = currentRoute.firstChild; | ||
| } | ||
|
|
||
| if (breadcrumbData && !find(breadcrumbs, breadcrumbData)) { | ||
| breadcrumbs.push(breadcrumbData); | ||
| } | ||
| const breadcrumb = currentRoute.snapshot.data['breadcrumb']; | ||
| if(breadcrumb && breadcrumbs[breadcrumbs.length - 1] !== breadcrumb) | ||
| breadcrumbs.push(breadcrumb) | ||
|
|
||
| if (route.firstChild == null) { | ||
| return breadcrumbs; | ||
| } | ||
| return breadcrumbs; | ||
| }); | ||
|
|
||
| return this.buildBreadcrumbRecursively(route.firstChild, 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() { | ||
| this._router.navigate([ this._router.url.split('/').slice(0, -1).join('/') ]); | ||
| } | ||
| } |
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.