File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-order-detail-permission-results |
| templateUrl |
./order-detail-permission-results.component.html |
|
order$
|
Type : Observable<Order>
|
Default value : this.orderDetailsService.getOrderDetails()
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Order } from '@spartacus/core';
import { OrderDetailsService } from '@spartacus/storefront';
import { Observable } from 'rxjs';
@Component({
selector: 'cx-order-detail-permission-results',
templateUrl: './order-detail-permission-results.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OrderDetailPermissionResultsComponent {
order$: Observable<Order> = this.orderDetailsService.getOrderDetails();
constructor(protected orderDetailsService: OrderDetailsService) {}
}
<ng-container *ngIf="order$ | async as order">
<ng-container *ngIf="order.permissionResults?.length">
<div class="cx-approval-header row">
<div class="cx-approval-label col-sm-12">
{{ 'orderApprovalDetails.permissionResults.header' | cxTranslate }}
</div>
</div>
<div class="row">
<table class="table table-striped cx-approval-table">
<thead class="cx-approval-thead-mobile">
<th scope="col">
{{
'orderApprovalDetails.permissionResults.permission' | cxTranslate
}}
</th>
<th scope="col">
{{
'orderApprovalDetails.permissionResults.approver' | cxTranslate
}}
</th>
<th scope="col">
{{ 'orderApprovalDetails.permissionResults.status' | cxTranslate }}
</th>
<th scope="col">
{{
'orderApprovalDetails.permissionResults.approverComments'
| cxTranslate
}}
</th>
</thead>
<tbody>
<tr *ngFor="let permissionResult of order.permissionResults">
<td class="cx-approval-permissionCode">
<div class="d-md-none cx-approval-table-label">
{{
'orderApprovalDetails.permissionResults.permission'
| cxTranslate
}}
</div>
{{
'orderApprovalDetails.permissionResults.permissionType_' +
permissionResult?.permissionType?.code | cxTranslate
}}
</td>
<td class="cx-approval-approverName">
<div class="d-md-none cx-approval-table-label">
{{
'orderApprovalDetails.permissionResults.approver'
| cxTranslate
}}
</div>
{{ permissionResult.approverName }}
</td>
<td class="cx-approval-statusDisplay">
<div class="d-md-none cx-approval-table-label">
{{
'orderApprovalDetails.permissionResults.status' | cxTranslate
}}
</div>
{{ permissionResult.statusDisplay }}
</td>
<td class="cx-approval-approvalNotes">
<div class="d-md-none cx-approval-table-label">
{{
'orderApprovalDetails.permissionResults.approverComments'
| cxTranslate
}}
</div>
{{
permissionResult.approverNotes
? permissionResult.approverNotes
: ('orderApprovalDetails.permissionResults.noApprovalComments'
| cxTranslate)
}}
</td>
</tr>
</tbody>
</table>
</div>
</ng-container>
</ng-container>
Legend
Html element with directive