fix: loading overlay for quickorder

intershop · Jan 31, 2021 · 0fc7045 · 0fc7045
1 parent c96477f
commit 0fc7045
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/e2e/cypress/integration/specs/quickorder/quickorder-handling.b2b.e2e-spec.ts b/e2e/cypress/integration/specs/quickorder/quickorder-handling.b2b.e2e-spec.ts
@@ -1,4 +1,4 @@
-import { at } from '../../framework';
+import { at, waitLoadingEnd } from '../../framework';
 import { HomePage } from '../../pages/home.page';
 import { QuickorderPage } from '../../pages/quickorder/quickorder.page';
 
@@ -25,6 +25,7 @@ describe('Quick Order', () => {
   it('should add all products to cart', () => {
     at(QuickorderPage, page => {
       page.addToCart();
+      waitLoadingEnd(1000);
       // number of items + one free gift
       page.header.miniCart.text.should('contain', '40 items');
     });

diff --git a/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html b/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html
@@ -147,3 +147,5 @@ <h3>{{ 'quickorder.page.csv.title' | translate }}</h3>
     </div>
   </div>
 </form>
+
+<ish-loading *ngIf="loading$ | async"></ish-loading>
diff --git a/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.spec.ts b/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.spec.ts
@@ -4,8 +4,10 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
 import { instance, mock } from 'ts-mockito';
 
+import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
 import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
 import { BreadcrumbComponent } from 'ish-shared/components/common/breadcrumb/breadcrumb.component';
+import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
 import { InputComponent } from 'ish-shared/forms/components/input/input.component';
 
 import { QuickorderPageComponent } from './quickorder-page.component';
@@ -18,8 +20,16 @@ describe('Quickorder Page Component', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ReactiveFormsModule, TranslateModule.forRoot()],
-      declarations: [MockComponent(BreadcrumbComponent), MockComponent(InputComponent), QuickorderPageComponent],
-      providers: [{ provide: ShoppingFacade, useFactory: () => instance(mock(ShoppingFacade)) }],
+      declarations: [
+        MockComponent(BreadcrumbComponent),
+        MockComponent(InputComponent),
+        MockComponent(LoadingComponent),
+        QuickorderPageComponent,
+      ],
+      providers: [
+        { provide: ShoppingFacade, useFactory: () => instance(mock(ShoppingFacade)) },
+        { provide: CheckoutFacade, useFactory: () => instance(mock(CheckoutFacade)) },
+      ],
     }).compileComponents();
   });
 

diff --git a/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.ts b/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.ts
@@ -1,8 +1,9 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { AsyncValidatorFn, FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { EMPTY } from 'rxjs';
+import { EMPTY, Observable } from 'rxjs';
 import { debounceTime, map, mapTo, switchMap, tap } from 'rxjs/operators';
 
+import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
 import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
 import { ProductCompletenessLevel, ProductHelper } from 'ish-core/models/product/product.model';
 import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
@@ -59,9 +60,18 @@ export class QuickorderPageComponent implements OnInit {
   quickOrderForm: FormGroup;
   csvForm: FormGroup;
 
-  constructor(private shoppingFacade: ShoppingFacade, private qf: FormBuilder, private cdRef: ChangeDetectorRef) {}
+  loading$: Observable<boolean>;
+
+  constructor(
+    private shoppingFacade: ShoppingFacade,
+    private checkoutFacade: CheckoutFacade,
+    private qf: FormBuilder,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
+    this.loading$ = this.checkoutFacade.basketLoading$;
+
     this.initForms();
     // Dummy data to test search suggestion styling, typing 1234 will show the dropwdown with this product
     this.searchSuggestions.push({