File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-order-approval-list |
| templateUrl |
./order-approval-list.component.html |
Methods
|
changeSortCode
|
changeSortCode(sortCode: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| sortCode |
string
|
No
|
|
|
Protected
fetchApprovalListPage
|
fetchApprovalListPage(searchConfig: SearchConfig)
|
|
|
|
|
|
goToApprovalDetails
|
goToApprovalDetails(event, orderApproval: OrderApproval)
|
|
|
|
|
|
pageChange
|
pageChange(page: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| page |
number
|
No
|
|
|
orderApprovals$
|
Type : Observable<EntitiesModel<OrderApproval>>
|
|
|
|
Protected
PAGE_SIZE
|
Type : number
|
Default value : 5
|
|
|
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import {
EntitiesModel,
RoutingService,
SearchConfig,
TranslationService,
} from '@spartacus/core';
import { OrderApproval } from '../../core/model/order-approval.model';
import { OrderApprovalService } from '../../core/services/order-approval.service';
import { combineLatest, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'cx-order-approval-list',
templateUrl: './order-approval-list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OrderApprovalListComponent implements OnInit {
constructor(
protected routing: RoutingService,
protected orderApprovalService: OrderApprovalService,
protected translation: TranslationService
) {}
sortLabels$;
protected PAGE_SIZE = 5;
sortType: string;
orderApprovals$: Observable<EntitiesModel<OrderApproval>>;
ngOnInit(): void {
this.fetchApprovalListPage({});
this.sortLabels$ = combineLatest([
this.translation.translate('sorting.date'),
this.translation.translate('sorting.orderNumber'),
]).pipe(
map(([textByDate, textByOrderNumber]) => {
return {
byDate: textByDate,
byOrderNumber: textByOrderNumber,
};
})
);
}
changeSortCode(sortCode: string): void {
const fetchParams: SearchConfig = {
sort: sortCode,
currentPage: 0,
};
this.sortType = sortCode;
this.fetchApprovalListPage(fetchParams);
}
pageChange(page: number): void {
const fetchParams: SearchConfig = {
sort: this.sortType,
currentPage: page,
};
this.fetchApprovalListPage(fetchParams);
}
protected fetchApprovalListPage(searchConfig: SearchConfig): void {
searchConfig.pageSize = this.PAGE_SIZE;
this.orderApprovalService.loadOrderApprovals(searchConfig);
this.orderApprovals$ = this.orderApprovalService.getList(searchConfig);
}
goToApprovalDetails(event, orderApproval: OrderApproval): void {
if (event?.target?.nodeName.toLowerCase() !== 'a') {
this.routing.go({
cxRoute: 'orderApprovalDetails',
params: { approvalCode: orderApproval.code },
});
}
}
}
<ng-container *ngIf="orderApprovals$ | async as orderApprovals">
<ng-container
*ngIf="orderApprovals.pagination.totalResults > 0; else noOrder"
>
<!-- Select Form and Pagination Top -->
<div class="cx-order-approval-sort top row">
<div
class="
cx-order-approval-form-group
form-group
col-sm-12 col-md-4 col-lg-4
"
>
<cx-sorting
[sortOptions]="orderApprovals.sorts"
[sortLabels]="sortLabels$ | async"
(sortListEvent)="changeSortCode($event)"
[selectedOption]="orderApprovals.pagination.sort"
></cx-sorting>
</div>
<div class="cx-order-approval-pagination">
<cx-pagination
[pagination]="orderApprovals.pagination"
(viewPageEvent)="pageChange($event)"
></cx-pagination>
</div>
</div>
<!-- TABLE -->
<table class="table cx-order-approval-table">
<thead class="cx-order-approval-thead-mobile">
<th scope="col">
{{ 'orderApprovalList.orderCode' | cxTranslate }}
</th>
<th scope="col">{{ 'orderApprovalList.POCode' | cxTranslate }}</th>
<th scope="col">{{ 'orderApprovalList.placedBy' | cxTranslate }}</th>
<th scope="col">{{ 'orderApprovalList.date' | cxTranslate }}</th>
<th scope="col">
{{ 'orderApprovalList.status' | cxTranslate }}
</th>
<th scope="col">{{ 'orderApprovalList.total' | cxTranslate }}</th>
</thead>
<tbody>
<tr
*ngFor="let approval of orderApprovals.values"
(click)="goToApprovalDetails($event, approval)"
>
<td class="cx-order-approval-code">
<div class="d-md-none cx-order-approval-label">
{{ 'orderApprovalList.orderCode' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'orderApprovalDetails',
params: { approvalCode: approval?.code }
} | cxUrl
"
class="cx-order-approval-value"
>
{{ approval.order?.code }}</a
>
</td>
<td class="cx-order-approval-po-code">
<div class="d-md-none cx-order-approval-label">
{{ 'orderApprovalList.POCode' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'orderApprovalDetails',
params: { approvalCode: approval?.code }
} | cxUrl
"
class="cx-order-approval-value"
>{{
approval.order?.purchaseOrderNumber ||
('orderApprovalList.none' | cxTranslate)
}}</a
>
</td>
<td class="cx-order-approval-placed">
<div class="d-md-none cx-order-approval-label">
{{ 'orderApprovalList.placedBy' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'orderApprovalDetails',
params: { approvalCode: approval?.code }
} | cxUrl
"
class="cx-order-approval-value"
>{{ approval.order?.orgCustomer?.name }}</a
>
</td>
<td class="cx-order-approval-date">
<div class="d-md-none cx-order-approval-label">
{{ 'orderApprovalList.date' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'orderApprovalDetails',
params: { approvalCode: approval?.code }
} | cxUrl
"
class="cx-order-approval-value"
>{{ approval.order?.created | cxDate: 'longDate' }}</a
>
</td>
<td class="cx-order-approval-status">
<div class="d-md-none cx-order-approval-label">
{{ 'orderApprovalList.status' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'orderApprovalDetails',
params: { approvalCode: approval?.code }
} | cxUrl
"
class="cx-order-approval-value"
>
{{
'orderDetails.statusDisplay_' + approval.order?.statusDisplay
| cxTranslate
}}</a
>
</td>
<td class="cx-order-approval-total">
<div class="d-md-none cx-order-approval-label">
{{ 'orderApprovalList.total' | cxTranslate }}
</div>
<a
[routerLink]="
{
cxRoute: 'orderApprovalDetails',
params: { approvalCode: approval?.code }
} | cxUrl
"
class="cx-order-approval-value"
>
{{ approval.order?.totalPrice?.formattedValue }}</a
>
</td>
</tr>
</tbody>
</table>
<!-- Select Form and Pagination Bottom -->
<div class="cx-order-approval-sort bottom row">
<div
class="
cx-order-approval-form-group
form-group
col-sm-12 col-md-4 col-lg-4
"
>
<cx-sorting
[sortOptions]="orderApprovals.sorts"
[sortLabels]="sortLabels$ | async"
(sortListEvent)="changeSortCode($event)"
[selectedOption]="orderApprovals.pagination.sort"
></cx-sorting>
</div>
<div class="cx-order-approval-pagination">
<cx-pagination
[pagination]="orderApprovals.pagination"
(viewPageEvent)="pageChange($event)"
></cx-pagination>
</div>
</div>
</ng-container>
<!-- NO ORDER CONTAINER -->
<ng-template #noOrder>
<div class="cx-order-approval-no-order row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div>{{ 'orderApprovalList.emptyList' | cxTranslate }}</div>
</div>
</div>
</ng-template>
</ng-container>
Legend
Html element with directive