Header Anpassungen

apps/core/application/src/lib/application.service.ts

@@ -31,14 +31,8 @@ export class ApplicationService {
     return this.activatedProcessIdSubject.asObservable();
   }
 
-  title$ = this.store.select(selectTitle);
-
   constructor(private store: Store) {}
 
-  setTitle(title: string) {
-    this.store.dispatch(setTitle({ title }));
-  }
-
   getProcesses$(section?: 'customer' | 'branch') {
     const processes$ = this.store.select(selectProcesses);
     return processes$.pipe(map((processes) => processes.filter((process) => (section ? process.section === section : true))));
@@ -52,6 +46,14 @@ export class ApplicationService {
     return this.store.select(selectSection);
   }
 
+  getTitle$() {
+    return this.getSection$().pipe(
+      map((section) => {
+        return section === 'customer' ? 'Kundenbereich' : 'Filialbereich';
+      })
+    );
+  }
+
   /** @deprecated */
   getActivatedProcessId$() {
     return this.store.select(selectActivatedProcess).pipe(map((process) => process?.id));

apps/isa-app/src/config/config.json

@@ -287,6 +287,11 @@
                 "name": "assignment-return",
                 "data": "m479-333 43-43-74-74h182v-60H448l74-74-43-43-147 147 147 147ZM180-120q-24.75 0-42.375-17.625T120-180v-600q0-24.75 17.625-42.375T180-840h205q5-35 32-57.5t63-22.5q36 0 63 22.5t32 57.5h205q24.75 0 42.375 17.625T840-780v600q0 24.75-17.625 42.375T780-120H180Zm0-60h600v-600H180v600Zm300-617q14 0 24.5-10.5T515-832q0-14-10.5-24.5T480-867q-14 0-24.5 10.5T445-832q0 14 10.5 24.5T480-797ZM180-180v-600 600Z",
                 "viewBox": "0 -960 960 960"
+            },
+            {
+                "name": "dashboard",
+                "data": "M510-570v-270h330v270H510ZM120-450v-390h330v390H120Zm390 330v-390h330v390H510Zm-390 0v-270h330v270H120Zm60-390h210v-270H180v270Zm390 330h210v-270H570v270Zm0-450h210v-150H570v150ZM180-180h210v-150H180v150Zm210-330Zm180-120Zm0 180ZM390-330Z",
+                "viewBox": "0 -960 960 960"
             }
             
         ],

apps/page/assortment/src/lib/assortment.component.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { ApplicationService } from '@core/application';
 import { Breadcrumb, BreadcrumbService } from '@core/breadcrumb';
 import { Config } from '@core/config';
 
@@ -14,11 +13,10 @@ export class AssortmentComponent implements OnInit {
     return this._config.get('process.ids.assortment');
   }
 
-  constructor(private _config: Config, private _breadcrumb: BreadcrumbService, private _app: ApplicationService) {}
+  constructor(private _config: Config, private _breadcrumb: BreadcrumbService) {}
 
   ngOnInit() {
     this.createBreadcrumbIfNotExists();
-    this._app.setTitle('Sortiment');
   }
 
   async createBreadcrumbIfNotExists(): Promise<void> {

apps/page/catalog/src/lib/page-catalog.component.ts

@@ -67,8 +67,6 @@ export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy {
     this.activatedProcessId$ = this.application.activatedProcessId$.pipe(map((processId) => String(processId)));
 
     this.selectedBranch$ = this.activatedProcessId$.pipe(switchMap((processId) => this.application.getSelectedBranch$(Number(processId))));
-
-    this.application.setTitle('Artikelsuche');
   }
 
   ngAfterViewInit(): void {

apps/page/checkout/src/lib/page-checkout.component.ts

@@ -13,7 +13,5 @@ export class PageCheckoutComponent implements OnInit {
 
   constructor(private applicationService: ApplicationService) {}
 
-  ngOnInit() {
-    this.applicationService.setTitle('Warenkorb');
-  }
+  ngOnInit() {}
 }

apps/page/customer-order/src/lib/customer-order.component.ts

@@ -46,8 +46,6 @@ export class CustomerOrderComponent implements OnInit {
     this.selectedBranch$ = this.application.activatedProcessId$.pipe(
       switchMap((processId) => this.application.getSelectedBranch$(Number(processId)))
     );
-
-    this.application.setTitle('Kundenbestellung');
   }
 
   async patchProcessData(selectedBranch: BranchDTO) {

apps/page/customer/src/lib/page-customer.component.ts

@@ -14,7 +14,5 @@ export class PageCustomerComponent implements OnInit {
 
   constructor(public application: ApplicationService) {}
 
-  ngOnInit() {
-    this.application.setTitle('Kundensuche');
-  }
+  ngOnInit() {}
 }

apps/page/dashboard/src/lib/dashboard.component.ts

@@ -20,7 +20,5 @@ export class DashboardComponent implements OnInit {
   ngOnInit(): void {
     this._app.setSection('customer');
     this._app.activateProcess(undefined);
-
-    this._app.setTitle('Dashboard');
   }
 }

apps/page/goods-in/src/lib/goods-in.component.ts

@@ -1,5 +1,4 @@
 import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { ApplicationService } from '@core/application';
 import { Config } from '@core/config';
 
 @Component({
@@ -11,9 +10,7 @@ import { Config } from '@core/config';
 export class GoodsInComponent implements OnInit {
   goodsInKey = this._config.get('process.ids.goodsIn');
 
-  constructor(private readonly _config: Config, private _app: ApplicationService) {}
+  constructor(private readonly _config: Config) {}
 
-  ngOnInit() {
-    this._app.setTitle('Abholfach');
-  }
+  ngOnInit() {}
 }

apps/page/goods-out/src/lib/goods-out.component.ts

@@ -1,6 +1,5 @@
 import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { ApplicationService } from '@core/application';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -12,9 +11,7 @@ import { map } from 'rxjs/operators';
 export class GoodsOutComponent implements OnInit {
   processId$ = this._activatedRoute.data.pipe(map((data) => String(data.processId)));
 
-  constructor(private _activatedRoute: ActivatedRoute, private _app: ApplicationService) {}
+  constructor(private _activatedRoute: ActivatedRoute) {}
 
-  ngOnInit() {
-    this._app.setTitle('Warenausgabe');
-  }
+  ngOnInit() {}
 }

apps/page/package-inspection/src/lib/package-inspection.component.ts

@@ -14,12 +14,10 @@ export class PackageInspectionComponent implements OnInit {
     return this._config.get('process.ids.packageInspection');
   }
 
-  constructor(private _config: Config, private _breadcrumb: BreadcrumbService, private _app: ApplicationService) {}
+  constructor(private _config: Config, private _breadcrumb: BreadcrumbService) {}
 
   ngOnInit(): void {
     this.createBreadcrumbIfNotExists();
-
-    this._app.setTitle('Packstück Prüfung');
   }
 
   async createBreadcrumbIfNotExists(): Promise<void> {

apps/page/remission/src/lib/remission.component.ts

@@ -45,8 +45,6 @@ export class RemissionComponent implements OnInit, OnDestroy {
       });
 
     this.updateProcess();
-
-    this._applicationService.setTitle('Remission');
   }
 
   ngOnDestroy(): void {

apps/page/task-calendar/src/lib/page-task-calendar.component.ts

@@ -38,12 +38,7 @@ export class PageTaskCalendarComponent implements OnInit, OnDestroy {
   @ViewChild(TaskSearchbarComponent)
   searchbar: TaskSearchbarComponent;
 
-  constructor(
-    private taskCalendarStore: TaskCalendarStore,
-    private _activatedRoute: ActivatedRoute,
-    private readonly _config: Config,
-    private _app: ApplicationService
-  ) {
+  constructor(private taskCalendarStore: TaskCalendarStore, private _activatedRoute: ActivatedRoute, private readonly _config: Config) {
     this.taskCalendarStore.loadFilter();
   }
 
@@ -61,8 +56,6 @@ export class PageTaskCalendarComponent implements OnInit, OnDestroy {
     });
 
     this.taskCalendarStore.loadItems();
-
-    this._app.setTitle('Tätigkeitenkalender');
   }
 
   ngOnDestroy(): void {

apps/shared/shell/src/lib/process-bar/process-bar.component.ts

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { ApplicationProcess, ApplicationService } from '@core/application';
 import { ProductCatalogNavigationService } from '@shared/services';
-import { NEVER, Observable } from 'rxjs';
+import { NEVER, Observable, of } from 'rxjs';
 import { first, map, switchMap } from 'rxjs/operators';
 
 @Component({
@@ -33,7 +33,8 @@ export class ShellProcessBarComponent implements OnInit {
   }
 
   initSection$() {
-    this.section$ = this._app.getSection$();
+    // this.section$ = this._app.getSection$();
+    this.section$ = of('customer');
   }
 
   initProcesses$() {

apps/shared/shell/src/lib/shell.component.html

@@ -3,7 +3,7 @@
 </div>
 
 <shell-side-menu
-  class="fixed top-[4.625rem] desktop-small:top-[8.125rem] bottom-0 z-[148] -translate-x-full transition-transform duration-200 ease-in-out desktop-small:translate-x-0 desktop-small:transition-none"
+  class="fixed top-[8.125rem] bottom-0 z-[148] -translate-x-full transition-transform duration-200 ease-in-out desktop-small:translate-x-0 desktop-small:transition-none"
   [class.translate-x-0]="sideMenuOpen$ | async"
 ></shell-side-menu>
 

apps/shared/shell/src/lib/top-bar/top-bar.component.html

@@ -6,14 +6,20 @@
     {{ title }}
   </span>
   <div class="grow"></div>
+
+  <a class="btn btn-white" [routerLink]="['/kunde/dashboard']"> <ui-svg-icon icon="dashboard"></ui-svg-icon> Dashboard </a>
+
+  <button type="button" class="btn btn-white" (click)="logout()">
+    <ui-svg-icon icon="logout"></ui-svg-icon>
+    <strong>{{ branchKey$ | async }}</strong>
+  </button>
+
+  <div class="w-4"></div>
+
   <button class="btn btn-icon btn-light relative" [disabled]="(notificationCount$ | async) === 0" (click)="openNotifications()">
     <ui-svg-icon icon="notifications"></ui-svg-icon>
     <div class="grid absolute -top-2 -right-2 bg-brand text-white rounded-full w-6 h-6" *ngIf="notificationCount$ | async; let count">
       <span class="place-self-center text-xs font-bold">{{ count }}</span>
     </div>
   </button>
-  <button class="btn customer:btn-accent-1 branch:btn-accent-2 ml-4" *ifRole="'Store'" (click)="toggleSection()">
-    <ui-svg-icon icon="swap-horiz"></ui-svg-icon>
-    Bereich wechseln
-  </button>
 </header>

apps/shared/shell/src/lib/top-bar/top-bar.component.ts

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { first, map, take } from 'rxjs/operators';
+import { first, map, retry, take } from 'rxjs/operators';
 import { ShellService } from '../shell.service';
 import { BehaviorSubject } from 'rxjs';
 import { NotificationsHub } from '@hub/notifications';
@@ -8,6 +8,8 @@ import { ModalNotificationsComponent } from '@modal/notifications';
 import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { Router } from '@angular/router';
+import { StockService } from '@swagger/wws';
+import { AuthService } from '@core/auth';
 
 @Component({
   selector: 'shell-top-bar',
@@ -16,7 +18,7 @@ import { Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShellTopBarComponent implements OnInit {
-  title$ = this._app.title$;
+  title$ = this._app.getTitle$();
 
   menuIcon$ = this._shellService.sideMenuOpen$.pipe(map((open) => (open ? 'close' : 'menu')));
 
@@ -26,8 +28,15 @@ export class ShellTopBarComponent implements OnInit {
 
   notificationCount$ = this.notifications$.pipe(map((message) => message?.data?.length));
 
+  branchKey$ = this._stockService.StockCurrentBranch().pipe(
+    retry(3),
+    map((x) => x.result.key)
+  );
+
   constructor(
     private _shellService: ShellService,
+    private _stockService: StockService,
+    private _authService: AuthService,
     private readonly _notificationsHub: NotificationsHub,
     private _modal: UiModalService,
     private _app: ApplicationService,
@@ -73,4 +82,8 @@ export class ShellTopBarComponent implements OnInit {
       },
     });
   }
+
+  async logout() {
+    await this._authService.logout();
+  }
 }

apps/shared/shell/src/lib/top-bar/top-bar.module.ts

@@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common';
 import { ShellTopBarComponent } from './top-bar.component';
 import { UiIconModule } from '@ui/icon';
 import { AuthModule } from '@core/auth';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, AuthModule],
+  imports: [CommonModule, UiIconModule, AuthModule, RouterModule],
   exports: [ShellTopBarComponent],
   declarations: [ShellTopBarComponent],
 })

tailwind-plugins/button.plugin.js

@@ -8,7 +8,7 @@ module.exports = plugin(function ({ addComponents, theme, addBase, addUtilities
       '--btn-min-width': theme('spacing.12'),
       '--btn-background-color': theme('colors.components.button.DEFAULT'),
       '--btn-color': theme('colors.components.button.content'),
-      '--btn-border-radius': theme('borderRadius.button'),
+      '--btn-border-radius': theme('borderRadius.DEFAULT'),
       '--btn-hover-background-color': theme('colors.components.button.hover.DEFAULT'),
       '--btn-hover-color': theme('colors.components.button.hover.content'),
       '--btn-active-background-color': theme('colors.components.button.active.DEFAULT'),
@@ -23,6 +23,14 @@ module.exports = plugin(function ({ addComponents, theme, addBase, addUtilities
       '--btn-background-color': theme('colors.button.light.DEFAULT'),
       '--btn-color': theme('colors.button.light.content'),
     },
+    '.btn-white': {
+      '--btn-background-color': theme('colors.white'),
+      '--btn-color': theme('colors.black'),
+      '--btn-hover-background-color': theme('colors.white'),
+      '--btn-hover-color': theme('colors.black'),
+      '--btn-active-background-color': theme('colors.white'),
+      '--btn-active-color': theme('colors.black'),
+    },
   });
 
   for (const key in theme('colors.accent')) {