Merged PR 937: #882 Filialkürzel im Header anzeigen

#882 Filialkürzel im Header anzeigen

Related work items: #882

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

@@ -11,12 +11,12 @@
       </div>
       <div class="align-center">
         <div class="icons-grid pt-5">
-          <div class="align-center">
+          <div class="header-item align-center">
             <button class="header-icon dashboard" type="button" [routerLink]="['/dashboard']" routerLinkActive="active">
               <ui-icon icon="dashboard" size="26px"></ui-icon>
             </button>
           </div>
-          <div class="align-center">
+          <div class="header-item align-center">
             <button
               class="header-icon notification"
               type="button"
@@ -28,7 +28,10 @@
               <ui-icon icon="notification" size="26px"></ui-icon>
             </button>
           </div>
-          <div class="align-center">
+          <div class="header-item align-center">
+            <span class="current-branch" *ngIf="currentBranch$ | async; let currentBranch" [title]="currentBranch.name">
+              {{ currentBranch.key | uppercase }}
+            </span>
             <button class="header-icon logout" type="button" (click)="logoff()">
               <ui-icon icon="logout" size="26px"></ui-icon>
             </button>

apps/sales/src/app/components/header/header.component.scss

@@ -14,6 +14,10 @@ button.header-icon {
       @apply text-inactive-customer;
     }
   }
+
+  .current-branch {
+    @apply text-wild-blue-yonder;
+  }
 }
 
 ::ng-deep .branch app-header {
@@ -26,6 +30,10 @@ button.header-icon {
       @apply text-active-branch;
     }
   }
+
+  .current-branch {
+    @apply text-cool-grey;
+  }
 }
 
 button.notification {
@@ -37,6 +45,14 @@ button.notification {
   z-index: 10;
 }
 
+.header-item {
+  @apply flex;
+
+  .current-branch {
+    @apply flex items-center font-bold;
+  }
+}
+
 .header-wrapper {
   background-color: white;
   position: fixed;

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

@@ -12,6 +12,7 @@ import { ApplicationService } from '@core/application';
 import { NotificationsHub } from '@hub/notifications';
 import { UiModalService } from '@ui/modal';
 import { ModalNotificationsComponent } from 'apps/modal/notifications/src/public-api';
+import { DomainAvailabilityService } from '@domain/availability';
 
 @Component({
   selector: 'app-header',
@@ -28,6 +29,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
   notificationCount$ = this.notifications$.pipe(map((message) => message?.data?.length));
 
+  currentBranch$ = this._availabilityService.getCurrentBranch();
+
   constructor(
     private store: Store,
     private router: Router,
@@ -35,7 +38,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
     private applicationService: ApplicationService,
     private cdr: ChangeDetectorRef,
     private _notificationsHub: NotificationsHub,
-    private _modal: UiModalService
+    private _modal: UiModalService,
+    private _availabilityService: DomainAvailabilityService
   ) {}
 
   customer = 'Kunden';