Merged PR 1570: #4135 #4144 Responsive Design Product Search Result List Select Bullet Logic...

#4135 #4144 Responsive Design Product Search Result List Select Bullet Logic updated

apps/page/catalog/src/lib/article-search/search-results/added-to-cart-modal/added-to-cart-modal.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
+import { EnvironmentService } from '@core/environment';
+import { ProductCatalogNavigationService } from '@shared/services';
 import { UiModalRef } from '@ui/modal';
 
 @Component({
@@ -10,13 +12,21 @@ import { UiModalRef } from '@ui/modal';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddedToCartModalComponent {
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
   constructor(
     public ref: UiModalRef<any, any>,
     private readonly _router: Router,
-    private readonly _applicationService: ApplicationService
+    private readonly _applicationService: ApplicationService,
+    private readonly _navigation: ProductCatalogNavigationService,
+    private readonly _environment: EnvironmentService
   ) {}
-  continue() {
-    this._router.navigate([`/kunde/${this._applicationService.activatedProcessId}/product/search`]);
+  async continue() {
+    if (this.isTablet) {
+      await this._navigation.navigateToProductSearch({ processId: this._applicationService.activatedProcessId });
+    }
     this.ref.close();
   }
 

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

@@ -154,9 +154,10 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
     const isSelected = this._articleSearchService.selectedItemIds.includes(this.item?.id);
     this._articleSearchService.setSelected({ selected: !isSelected, itemId: this.item?.id });
 
-    if (!this.isTablet) {
-      this.selectedChange.emit(this.item);
-    }
+    // #4135 Code auskommentiert bis zur Klärung
+    // if (!this.isTablet) {
+    //   this.selectedChange.emit(this.item);
+    // }
   }
 
   @HostBinding('style') get class() {

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

@@ -47,36 +47,40 @@
   </shared-order-by-filter>
 </div>
 
-<cdk-virtual-scroll-viewport
-  #scrollContainer
-  class="product-list"
-  [itemSize]="(mainOutletActive$ | async) ? 98 : 187"
-  minBufferPx="935"
-  maxBufferPx="1200"
-  (scrolledIndexChange)="scrolledIndexChange($event)"
->
-  <search-result-item
-    class="page-search-results__result-item"
-    [class.page-search-results__result-item-main]="mainOutletActive$ | async"
-    *cdkVirtualFor="let item of results$ | async; trackBy: trackByItemId"
-    (selectedChange)="addToCart($event)"
-    [selectable]="isSelectable(item)"
-    [item]="item"
-    [mainOutletActive]="mainOutletActive$ | async"
-  ></search-result-item>
-  <page-search-result-item-loading
-    [mainOutletActive]="mainOutletActive$ | async"
-    *ngIf="fetching$ | async"
-  ></page-search-result-item-loading>
-</cdk-virtual-scroll-viewport>
-
-<div *ngIf="isTablet" class="actions z-fixed">
-  <button
-    [disabled]="loading$ | async"
-    *ngIf="(selectedItemIds$ | async)?.length > 0"
-    class="cta-cart cta-action-primary"
-    (click)="addToCart()"
+<div class="h-full relative">
+  <cdk-virtual-scroll-viewport
+    #scrollContainer
+    class="product-list h-full"
+    [itemSize]="(mainOutletActive$ | async) ? 98 : 187"
+    minBufferPx="935"
+    maxBufferPx="1200"
+    (scrolledIndexChange)="scrolledIndexChange($event)"
   >
-    <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
-  </button>
+    <search-result-item
+      class="page-search-results__result-item"
+      [class.page-search-results__result-item-main]="mainOutletActive$ | async"
+      *cdkVirtualFor="let item of results$ | async; trackBy: trackByItemId"
+      (selectedChange)="addToCart($event)"
+      [selectable]="isSelectable(item)"
+      [item]="item"
+      [mainOutletActive]="mainOutletActive$ | async"
+    ></search-result-item>
+    <page-search-result-item-loading
+      [mainOutletActive]="mainOutletActive$ | async"
+      *ngIf="fetching$ | async"
+    ></page-search-result-item-loading>
+  </cdk-virtual-scroll-viewport>
+  <div class="actions z-sticky h-0">
+    <button
+      [disabled]="loading$ | async"
+      *ngIf="(selectedItemIds$ | async)?.length > 0"
+      class="cta-cart cta-action-primary"
+      (click)="addToCart()"
+    >
+      <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
+    </button>
+  </div>
 </div>
+
+<!-- #4135 Code auskommentiert bis zur Klärung -->
+<!-- <div *ngIf="isTablet" class="actions z-fixed"> -->

apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss

@@ -30,9 +30,7 @@
 }
 
 .actions {
-  @apply fixed bottom-16 inline-grid grid-flow-col gap-7;
-  left: 50%;
-  transform: translateX(-50%);
+  @apply flex sticky bottom-10 items-center justify-center;
 
   .cta-cart {
     @apply border-2 border-solid border-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap no-underline;