File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-saved-cart-list |
| templateUrl |
./saved-cart-list.component.html |
Methods
|
goToSavedCartDetails
|
goToSavedCartDetails(cart: Cart)
|
|
|
Parameters :
| Name |
Type |
Optional |
| cart |
Cart
|
No
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
openDialog
|
openDialog(event: Event, cart: Cart)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
| cart |
Cart
|
No
|
|
|
isLoading$
|
Type : Observable<boolean>
|
|
|
|
restoreButton
|
Type : ElementRef
|
Decorators :
@ViewChild('element')
|
|
|
|
savedCarts$
|
Type : Observable<Cart[]>
|
Default value : this.savedCartService.getList().pipe(
map((lists) =>
lists.sort((a: Cart, b: Cart) => {
let date1: number = a.saveTime
? new Date(a.saveTime).getTime()
: new Date().getTime();
let date2: number = b.saveTime
? new Date(b.saveTime).getTime()
: new Date().getTime();
return date2 - date1;
})
)
)
|
|
|
|
Private
subscription
|
Default value : new Subscription()
|
|
|
import {
ChangeDetectionStrategy,
Component,
ElementRef,
OnDestroy,
OnInit,
ViewChild,
ViewContainerRef,
} from '@angular/core';
import {
SavedCartFacade,
SavedCartFormType,
} from '@spartacus/cart/saved-cart/root';
import { Cart, RoutingService } from '@spartacus/core';
import { LaunchDialogService, LAUNCH_CALLER } from '@spartacus/storefront';
import { Observable, Subscription } from 'rxjs';
import { map, take } from 'rxjs/operators';
@Component({
selector: 'cx-saved-cart-list',
templateUrl: './saved-cart-list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SavedCartListComponent implements OnInit, OnDestroy {
private subscription = new Subscription();
@ViewChild('element') restoreButton: ElementRef;
isLoading$: Observable<boolean>;
savedCarts$: Observable<Cart[]> = this.savedCartService.getList().pipe(
map((lists) =>
lists.sort((a: Cart, b: Cart) => {
let date1: number = a.saveTime
? new Date(a.saveTime).getTime()
: new Date().getTime();
let date2: number = b.saveTime
? new Date(b.saveTime).getTime()
: new Date().getTime();
return date2 - date1;
})
)
);
constructor(
protected routing: RoutingService,
protected savedCartService: SavedCartFacade,
protected vcr: ViewContainerRef,
protected launchDialogService: LaunchDialogService
) {}
ngOnInit(): void {
this.isLoading$ = this.savedCartService.getSavedCartListProcessLoading();
this.savedCartService.loadSavedCarts();
}
goToSavedCartDetails(cart: Cart): void {
this.routing.go({
cxRoute: 'savedCartsDetails',
params: { savedCartId: cart?.code },
});
}
openDialog(event: Event, cart: Cart): void {
const dialog = this.launchDialogService.openDialog(
LAUNCH_CALLER.SAVED_CART,
this.restoreButton,
this.vcr,
{ cart, layoutOption: SavedCartFormType.RESTORE }
);
if (dialog) {
this.subscription.add(dialog.pipe(take(1)).subscribe());
}
event.stopPropagation();
}
ngOnDestroy(): void {
this.savedCartService.clearSavedCarts();
this.savedCartService.clearSaveCart();
this.savedCartService.clearRestoreSavedCart();
this.subscription?.unsubscribe();
}
}
<ng-container *ngIf="savedCarts$ | async as savedCarts">
<ng-container *ngIf="!(isLoading$ | async); else loading">
<div class="cx-saved-cart-list-header">
<h3>
{{
'savedCartList.savedCarts' | cxTranslate: { count: savedCarts.length }
}}
</h3>
</div>
<ng-container *ngIf="savedCarts?.length > 0; else noSavedCarts">
<table class="table cx-saved-cart-list-table">
<thead class="cx-saved-cart-list-thead-mobile">
<th scope="col">
{{ 'savedCartList.cartName' | cxTranslate }}
</th>
<th scope="col">{{ 'savedCartList.cartId' | cxTranslate }}</th>
<th scope="col">{{ 'savedCartList.dateSaved' | cxTranslate }}</th>
<th scope="col">
{{ 'savedCartList.quantity' | cxTranslate }}
</th>
<th scope="col">{{ 'savedCartList.total' | cxTranslate }}</th>
<th scope="col">
{{ 'savedCartList.actions' | cxTranslate }}
</th>
</thead>
<tbody>
<tr
*ngFor="let savedCart of savedCarts"
(click)="goToSavedCartDetails(savedCart)"
>
<td class="cx-saved-cart-list-cart-name">
<div class="cx-table-label-mobile cx-saved-cart-list-label">
{{ 'savedCartList.cartName' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'savedCartsDetails',
params: { savedCartId: savedCart?.code }
} | cxUrl
"
class="cx-saved-cart-list-value"
>
{{ savedCart?.name }}</a
>
</td>
<td class="cx-saved-cart-list-cart-id">
<div class="cx-table-label-mobile cx-saved-cart-list-label">
{{ 'savedCartList.cartId' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'savedCartsDetails',
params: { savedCartId: savedCart?.code }
} | cxUrl
"
class="cx-saved-cart-list-value"
>{{ savedCart?.code }}</a
>
</td>
<td class="cx-saved-cart-list-date-saved">
<div class="cx-table-label-mobile cx-saved-cart-list-label">
{{ 'savedCartList.dateSaved' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'savedCartsDetails',
params: { savedCartId: savedCart?.code }
} | cxUrl
"
class="cx-saved-cart-list-value"
>{{ savedCart?.saveTime | cxDate: 'longDate' }}</a
>
</td>
<td class="cx-saved-cart-list-quantity">
<div class="cx-table-label-mobile cx-saved-cart-list-label">
{{ 'savedCartList.quantity' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'savedCartsDetails',
params: { savedCartId: savedCart?.code }
} | cxUrl
"
class="cx-saved-cart-list-value"
>
{{ savedCart?.totalUnitCount }}</a
>
</td>
<td class="cx-saved-cart-list-total">
<div class="cx-table-label-mobile cx-saved-cart-list-label">
{{ 'savedCartList.total' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'savedCartsDetails',
params: { savedCartId: savedCart?.code }
} | cxUrl
"
class="cx-saved-cart-list-value"
>
{{ savedCart?.totalPrice?.formattedValue }}</a
>
</td>
<td class="cx-saved-cart-list-make-cart-active">
<div class="cx-table-label-mobile cx-saved-cart-list-label"></div>
<button
#element
class="link cx-action-link cx-saved-cart-make-active"
(click)="openDialog($event, savedCart)"
>
{{ 'savedCartList.makeCartActive' | cxTranslate }}
</button>
</td>
</tr>
</tbody>
</table>
</ng-container>
<!-- NO SAVED CART CONTAINER -->
<ng-template #noSavedCarts>
<div class="cx-saved-cart-list-no-saved-carts row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div>{{ 'savedCartList.notFound' | cxTranslate }}</div>
</div>
</div>
</ng-template>
</ng-container>
<ng-template #loading>
<div class="cx-spinner">
<cx-spinner></cx-spinner>
</div>
</ng-template>
</ng-container>
Legend
Html element with directive