sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merged PR 1269: #3158 UiSpinner anstatt leerer Warenkorb Meldung beim Laden

Browse Source 
#3158 UiSpinner anstatt leerer Warenkorb Meldung beim Laden

Related work items: #3158
This commit is contained in:
Andreas Schickinger
2022-06-09 08:54:31 +00:00
committed by Lorenz Hilpert
parent fa10bc9c30
commit d577312b24
2 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/page/checkout/src/lib/checkout-review/checkout-review.component.html
View File

@@ -1,4 +1,4 @@
<ng-container *ngIf="(groupedItems$ | async)?.length <= 0">
<ng-container *ngIf="(groupedItems$ | async)?.length <= 0 && !(fetching$ | async); else shoppingCart">
<div class="card stretch card-empty">
<div class="empty-message">
<span class="cart-icon">
@@ -20,7 +20,11 @@
</div>
</ng-container>
<ng-container *ngIf="(groupedItems$ | async)?.length > 0">
<div class="flex items-center justify-center card stretch card-empty" *ngIf="fetching$ | async">
<ui-spinner show="true"> </ui-spinner>
</div>
<ng-template #shoppingCart>
<ng-container *ngIf="shoppingCart$ | async; let shoppingCart">
<div class="card stretch">
<div class="cta-print-wrapper">
@@ -180,4 +184,4 @@
</div>
</div>
</ng-container>
</ng-container>
</ng-template>

16
apps/page/checkout/src/lib/checkout-review/checkout-review.component.ts
View File

@@ -9,7 +9,7 @@ import { PrintModalData, PrintModalComponent } from '@modal/printer';
import { PurchasingOptionsModalComponent, PurchasingOptionsModalData } from '../modals/purchasing-options-modal';
import { PurchasingOptions } from '../modals/purchasing-options-modal/purchasing-options-modal.store';
import { AuthService } from '@core/auth';
import { first, map, shareReplay, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
import { first, map, shareReplay, switchMap, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
import { Subject, NEVER, combineLatest, BehaviorSubject } from 'rxjs';
import { DomainCatalogService } from '@domain/catalog';
import { BreadcrumbService } from '@core/breadcrumb';
@@ -25,6 +25,7 @@ import { ComponentStore, tapResponse } from '@ngrx/component-store';
export interface CheckoutReviewComponentState {
shoppingCart: ShoppingCartDTO;
shoppingCartItems: ShoppingCartItemDTO[];
fetching: boolean;
}
@Component({
@@ -52,6 +53,14 @@ export class CheckoutReviewComponent extends ComponentStore<CheckoutReviewCompon
}
readonly shoppingCartItems$ = this.select((s) => s.shoppingCartItems);
get fetching() {
return this.get((s) => s.fetching);
}
set fetching(fetching: boolean) {
this.patchState({ fetching });
}
readonly fetching$ = this.select((s) => s.fetching);
payer$ = this.applicationService.activatedProcessId$.pipe(
takeUntil(this._orderCompleted),
switchMap((processId) => this.domainCheckoutService.getPayer({ processId })),
@@ -234,6 +243,7 @@ export class CheckoutReviewComponent extends ComponentStore<CheckoutReviewCompon
super({
shoppingCart: undefined,
shoppingCartItems: [],
fetching: false,
});
}
@@ -249,6 +259,7 @@ export class CheckoutReviewComponent extends ComponentStore<CheckoutReviewCompon
loadShoppingCart = this.effect(($) =>
$.pipe(
tap(() => (this.fetching = true)),
withLatestFrom(this.applicationService.activatedProcessId$),
switchMap(([_, processId]) => {
return this.domainCheckoutService.getShoppingCart({ processId, latest: true }).pipe(
@@ -265,7 +276,8 @@ export class CheckoutReviewComponent extends ComponentStore<CheckoutReviewCompon
() => {}
)
);
})
}),
tap(() => (this.fetching = false))
)
);