File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-order-return-request-list |
| templateUrl |
./order-return-request-list.component.html |
Methods
|
changeSortCode
|
changeSortCode(sortCode: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| sortCode |
string
|
No
|
|
|
Private
fetchReturnRequests
|
fetchReturnRequests(event: literal type)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
literal type
|
No
|
|
|
getSortLabels
|
getSortLabels()
|
|
|
|
Returns : Observable<literal type>
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
pageChange
|
pageChange(page: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| page |
number
|
No
|
|
|
Private
PAGE_SIZE
|
Type : number
|
Default value : 5
|
|
|
|
returnRequests$
|
Type : Observable<ReturnRequestList | undefined>
|
Default value : this.returnRequestService.getOrderReturnRequestList(this.PAGE_SIZE).pipe(
tap((requestList: ReturnRequestList | undefined) => {
if (requestList?.pagination?.sort) {
this.sortType = requestList.pagination.sort;
}
})
)
|
|
|
|
tabTitleParam$
|
Type : Observable<number>
|
Default value : this.returnRequests$.pipe(
map((returnRequests) => returnRequests?.pagination?.totalResults),
filter(isNotUndefined),
take(1)
)
|
|
|
When "Order Return" feature is enabled, this component becomes one tab in
TabParagraphContainerComponent. This can be read from TabParagraphContainer.
|
import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
import {
isNotUndefined,
ReturnRequestList,
TranslationService,
} from '@spartacus/core';
import { OrderReturnRequestFacade } from '@spartacus/order/root';
import { combineLatest, Observable } from 'rxjs';
import { filter, map, take, tap } from 'rxjs/operators';
@Component({
selector: 'cx-order-return-request-list',
templateUrl: './order-return-request-list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OrderReturnRequestListComponent implements OnDestroy {
constructor(
private returnRequestService: OrderReturnRequestFacade,
private translation: TranslationService
) {}
private PAGE_SIZE = 5;
sortType: string;
returnRequests$: Observable<ReturnRequestList | undefined> =
this.returnRequestService.getOrderReturnRequestList(this.PAGE_SIZE).pipe(
tap((requestList: ReturnRequestList | undefined) => {
if (requestList?.pagination?.sort) {
this.sortType = requestList.pagination.sort;
}
})
);
/**
* When "Order Return" feature is enabled, this component becomes one tab in
* TabParagraphContainerComponent. This can be read from TabParagraphContainer.
*/
tabTitleParam$: Observable<number> = this.returnRequests$.pipe(
map((returnRequests) => returnRequests?.pagination?.totalResults),
filter(isNotUndefined),
take(1)
);
ngOnDestroy(): void {
this.returnRequestService.clearOrderReturnRequestList();
}
changeSortCode(sortCode: string): void {
const event: { sortCode: string; currentPage: number } = {
sortCode,
currentPage: 0,
};
this.sortType = sortCode;
this.fetchReturnRequests(event);
}
pageChange(page: number): void {
const event: { sortCode: string; currentPage: number } = {
sortCode: this.sortType,
currentPage: page,
};
this.fetchReturnRequests(event);
}
getSortLabels(): Observable<{ byDate: string; byRMA: string }> {
return combineLatest([
this.translation.translate('sorting.date'),
this.translation.translate('sorting.rma'),
]).pipe(
map(([textByDate, textByRma]) => {
return {
byDate: textByDate,
byRMA: textByRma,
};
})
);
}
private fetchReturnRequests(event: {
sortCode: string;
currentPage: number;
}): void {
this.returnRequestService.loadOrderReturnRequestList(
this.PAGE_SIZE,
event.currentPage,
event.sortCode
);
}
}
<ng-container *ngIf="returnRequests$ | async as returnRequests">
<div class="container">
<!-- BODY -->
<div class="cx-order-history-body">
<ng-container *ngIf="returnRequests.pagination.totalResults > 0">
<!-- Select Form and Pagination Top -->
<div class="cx-order-history-sort top row">
<label
class="
cx-order-history-form-group
form-group
col-sm-12 col-md-4 col-lg-4
"
><span>{{ 'returnRequestList.sortBy' | cxTranslate }}</span>
<cx-sorting
[sortOptions]="returnRequests.sorts"
[sortLabels]="getSortLabels() | async"
(sortListEvent)="changeSortCode($event)"
[selectedOption]="returnRequests.pagination.sort"
></cx-sorting>
</label>
<div class="cx-order-history-pagination">
<cx-pagination
[pagination]="returnRequests.pagination"
(viewPageEvent)="pageChange($event)"
></cx-pagination>
</div>
</div>
<!-- TABLE -->
<table class="table cx-order-history-table">
<thead class="cx-order-history-thead-mobile">
<th scope="col">
{{ 'returnRequestList.returnRequestId' | cxTranslate }}
</th>
<th scope="col">{{ 'returnRequestList.orderId' | cxTranslate }}</th>
<th scope="col">
{{ 'returnRequestList.date' | cxTranslate }}
</th>
<th scope="col">{{ 'returnRequestList.status' | cxTranslate }}</th>
</thead>
<tbody>
<tr *ngFor="let return of returnRequests.returnRequests">
<td class="cx-order-history-code">
<div class="d-md-none cx-order-history-label">
{{ 'returnRequestList.returnRequestId' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'returnRequestDetails',
params: return
} | cxUrl
"
class="cx-order-history-value"
>
{{ return?.rma }}</a
>
</td>
<td class="cx-order-history-code">
<div class="d-md-none cx-order-history-label">
{{ 'returnRequestList.orderId' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'orderDetails',
params: return?.order
} | cxUrl
"
class="cx-order-history-value"
>
{{ return?.order?.code }}</a
>
</td>
<td class="cx-order-history-placed">
<div class="d-md-none cx-order-history-label">
{{ 'returnRequestList.date' | cxTranslate }}
</div>
{{ return?.creationTime | cxDate: 'longDate' }}
</td>
<td class="cx-order-history-status">
<div class="d-md-none cx-order-history-label">
{{ 'returnRequestList.status' | cxTranslate }}
</div>
{{
'returnRequestList.statusDisplay_' + return?.status
| cxTranslate
}}
</td>
</tr>
</tbody>
</table>
<!-- Select Form and Pagination Bottom -->
<div class="cx-order-history-sort bottom row">
<label
class="
cx-order-history-form-group
form-group
col-sm-12 col-md-4 col-lg-4
"
><span>{{ 'returnRequestList.sortBy' | cxTranslate }}</span>
<cx-sorting
[sortOptions]="returnRequests.sorts"
[sortLabels]="getSortLabels() | async"
(sortListEvent)="changeSortCode($event)"
[selectedOption]="returnRequests.pagination.sort"
></cx-sorting>
</label>
<div class="cx-order-history-pagination">
<cx-pagination
[pagination]="returnRequests.pagination"
(viewPageEvent)="pageChange($event)"
></cx-pagination>
</div>
</div>
</ng-container>
</div>
</div>
</ng-container>
Legend
Html element with directive