#3360 Bestandsanzeige einer anderen Filiale

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html

@@ -33,13 +33,30 @@
     <ui-select-bullet [ngModel]="selected" (ngModelChange)="setSelected($event)"></ui-select-bullet>
   </div>
 
-  <div class="item-stock">
-    <ui-icon icon="home" size="1em"></ui-icon>
-    <span *ngIf="inStock$ | async; let stock" [class.skeleton]="stock.inStock === undefined" class="min-w-[1rem] text-right inline-block">{{
-      stock?.inStock
-    }}</span>
-    x
+  <div class="item-stock z-dropdown" [uiOverlayTrigger]="tooltip" [overlayTriggerDisabled]="!(stockTooltipText$ | async)">
+    <ng-container *ngIf="isOrderBranch$ | async">
+      <div class="flex flex-row items-center justify-between">
+        <ui-icon icon="home" size="1em"></ui-icon>
+        <span
+          *ngIf="inStock$ | async; let stock"
+          [class.skeleton]="stock.inStock === undefined"
+          class="min-w-[1rem] text-right inline-block"
+          >{{ stock?.inStock }}</span
+        >
+        <span>x</span>
+      </div>
+    </ng-container>
+    <ng-container *ngIf="!(isOrderBranch$ | async)">
+      <div class="flex flex-row items-center justify-between z-dropdown">
+        <ui-icon class="block" icon="home" size="1em"></ui-icon>
+        <span class="min-w-[1rem] text-center inline-block">-</span>
+        <span>x</span>
+      </div>
+    </ng-container>
   </div>
+  <ui-tooltip #tooltip yPosition="above" xPosition="after" [yOffset]="-8" [closeable]="true">
+    {{ stockTooltipText$ | async }}
+  </ui-tooltip>
   <!-- <div class="item-stock"><ui-icon icon="home" size="1em"></ui-icon> {{ item?.stockInfos | stockInfos }} x</div> -->
 
   <div class="item-ssc" [class.xs]="item?.catalogAvailability?.sscText?.length >= 60">

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts

@@ -7,7 +7,7 @@ import { ItemDTO } from '@swagger/cat';
 import { DateAdapter } from '@ui/common';
 import { isEqual } from 'lodash';
 import { combineLatest } from 'rxjs';
-import { debounceTime, switchMap, tap } from 'rxjs/operators';
+import { debounceTime, switchMap, map, tap, shareReplay } from 'rxjs/operators';
 import { ArticleSearchService } from '../article-search.store';
 
 export interface SearchResultItemComponentState {
@@ -83,6 +83,30 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
     switchMap((processId) => this.applicationService.getSelectedBranch$(processId))
   );
 
+  isOrderBranch$ = combineLatest([this.defaultBranch$, this.selectedBranchId$]).pipe(
+    map(([defaultBranch, selectedBranch]) => {
+      const branch = selectedBranch ?? defaultBranch;
+      return branch.branchType !== 4;
+    }),
+    shareReplay(1)
+  );
+
+  stockTooltipText$ = combineLatest([this.defaultBranch$, this.selectedBranchId$]).pipe(
+    map(([defaultBranch, selectedBranch]) => {
+      if (defaultBranch?.branchType === 4) {
+        if (!selectedBranch) {
+          return 'Wählen Sie eine Filiale aus, um den Bestand zu sehen.';
+        }
+      } else {
+        if (selectedBranch && defaultBranch.id !== selectedBranch?.id) {
+          return 'Sie sehen den Bestand einer anderen Filiale.';
+        }
+      }
+      return '';
+    }),
+    shareReplay(1)
+  );
+
   inStock$ = combineLatest([this.item$, this.selectedBranchId$, this.defaultBranch$]).pipe(
     debounceTime(100),
     switchMap(([item, branch, defaultBranch]) =>

apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts

@@ -7,6 +7,7 @@ import { DomainCatalogModule } from '@domain/catalog';
 import { UiCommonModule } from '@ui/common';
 import { UiIconModule } from '@ui/icon';
 import { UiSelectBulletModule } from '@ui/select-bullet';
+import { UiTooltipModule } from '@ui/tooltip';
 import { UiOrderByFilterModule } from 'apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.module';
 import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module';
 import { AddedToCartModalComponent } from './added-to-cart-modal/added-to-cart-modal.component';
@@ -28,6 +29,7 @@ import { SearchResultSelectedPipe } from './selected/search-result-selected.pipe
     UiSpinnerModule,
     UiOrderByFilterModule,
     ScrollingModule,
+    UiTooltipModule,
   ],
   exports: [ArticleSearchResultsComponent, SearchResultItemComponent],
   declarations: [

apps/ui/common/src/lib/overlay-trigger/overlay-trigger.directive.ts

@@ -24,8 +24,7 @@ export class UiOverlayTriggerDirective implements OnInit, OnDestroy, OnChanges {
   component: UiOverlayTrigger;
 
   @Input()
-  @HostBinding('disabled')
-  disabled: boolean;
+  overlayTriggerDisabled: boolean;
 
   private overlayRef: OverlayRef;
   private viewRef: EmbeddedViewRef<any>;
@@ -59,8 +58,15 @@ export class UiOverlayTriggerDirective implements OnInit, OnDestroy, OnChanges {
     this._onDestroy$.complete();
   }
 
-  @HostListener('click')
-  toggle() {
+  @HostListener('click', ['$event'])
+  toggle(event: Event) {
+    if (this.overlayTriggerDisabled) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+
     if (this.viewRef) {
       this.close();
     } else {