use scroll directive

intershop · Feb 1, 2022 · 755e19e · 755e19e
1 parent c1908c5
commit 755e19e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/...ared/components/basket/basket-validation-results/basket-validation-results.component.html b/...ared/components/basket/basket-validation-results/basket-validation-results.component.html
@@ -1,24 +1,37 @@
 <!-- error messages -->
 <div
-  *ngFor="let message of errorMessages$ | async"
+  *ngFor="let message of errorMessages$ | async; let first = first"
   class="alert alert-danger"
   role="alert"
+  [ishScroll]="first"
+  [scrollDuration]="scrollDuration"
+  [scrollSpacing]="scrollSpacing"
   data-testing-id="validation-error-message"
 >
   {{ message }}
 </div>
 
 <!-- info messages -->
 <div
-  *ngFor="let message of infoMessages$ | async"
+  *ngFor="let message of infoMessages$ | async; let first = first"
   class="alert alert-info"
   role="alert"
+  [ishScroll]="first"
+  [scrollDuration]="scrollDuration"
+  [scrollSpacing]="scrollSpacing"
   data-testing-id="validation-info-message"
 >
   {{ message }}
 </div>
 
-<div *ngIf="hasGeneralBasketError$ | async" class="alert alert-danger" data-testing-id="general-validation-message">
+<div
+  *ngIf="hasGeneralBasketError$ | async"
+  class="alert alert-danger"
+  [ishScroll]="true"
+  [scrollDuration]="scrollDuration"
+  [scrollSpacing]="scrollSpacing"
+  data-testing-id="general-validation-message"
+>
   {{ 'basket.validation.general.error' | translate }}
 </div>
 
@@ -28,6 +41,9 @@
     *ngIf="undeliverableItems.length"
     class="alert alert-box"
     role="alert"
+    [ishScroll]="true"
+    [scrollDuration]="scrollDuration"
+    [scrollSpacing]="scrollSpacing"
     data-testing-id="undeliverable-items-message"
   >
     <div class="alert-box-header">
@@ -49,7 +65,14 @@
 
 <!-- removed items messages -->
 <ng-container *ngIf="removedItems$ | async as removedItems">
-  <div *ngIf="removedItems.length" class="alert alert-danger" data-testing-id="validation-removed-message">
+  <div
+    *ngIf="removedItems.length"
+    class="alert alert-danger"
+    [ishScroll]="true"
+    [scrollDuration]="scrollDuration"
+    [scrollSpacing]="scrollSpacing"
+    data-testing-id="validation-removed-message"
+  >
     {{ 'shopping_cart.adjusted_items.warnung' | translate }}
   </div>
   <ish-basket-validation-products [items]="removedItems"></ish-basket-validation-products>

diff --git a/...d/components/basket/basket-validation-results/basket-validation-results.component.spec.ts b/...d/components/basket/basket-validation-results/basket-validation-results.component.spec.ts
@@ -1,9 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { of } from 'rxjs';
 import { anyString, instance, mock, verify, when } from 'ts-mockito';
 
+import { ScrollDirective } from 'ish-core/directives/scroll.directive';
 import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
 import { BasketValidationResultType } from 'ish-core/models/basket-validation/basket-validation.model';
 import { BasketValidationItemsComponent } from 'ish-shared/components/basket/basket-validation-items/basket-validation-items.component';
@@ -26,6 +27,7 @@ describe('Basket Validation Results Component', () => {
         BasketValidationResultsComponent,
         MockComponent(BasketValidationItemsComponent),
         MockComponent(BasketValidationProductsComponent),
+        MockDirective(ScrollDirective),
       ],
       imports: [TranslateModule.forRoot()],
       providers: [{ provide: CheckoutFacade, useFactory: () => instance(checkoutFacadeMock) }],

diff --git a/...shared/components/basket/basket-validation-results/basket-validation-results.component.ts b/...shared/components/basket/basket-validation-results/basket-validation-results.component.ts
@@ -31,6 +31,10 @@ export class BasketValidationResultsComponent implements OnInit, OnDestroy {
 
   itemHasBeenRemoved = false;
 
+  // default values to controll scrolling behavior
+  scrollDuration = 500;
+  scrollSpacing = 64;
+
   private destroy$ = new Subject();
 
   constructor(private checkoutFacade: CheckoutFacade) {}