All files / src/app/shared/components/order/order-list order-list.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="loading-container">
  @if (orders?.length > 0) {
  <table cdk-table [dataSource]="orders" class="table table-lg mobile-optimized">
    <!-- Order creation date -->
    <ng-container cdkColumnDef="creationDate">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-creation-date">
        {{ 'account.orderlist.table.date_of_order' | translate }}
      </th>
      <td cdk-cell *cdkCellDef="let order" [attr.data-label]="'account.orderlist.table.date_of_order' | translate">
        {{ order.creationDate | ishDate }}
        @if (order.recurringOrderID) {
        <i class="bi bi-arrow-repeat ms-1" [title]="'account.orderlist.table.recurring.icon.title' | translate"></i>
        }
      </td>
    </ng-container>
    <!-- Order number -->
    <ng-container cdkColumnDef="orderNo">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-number">
        <span aria-hidden="true">{{ 'account.orderlist.table.order_number' | translate }}</span>
        <span class="visually-hidden">{{ 'account.orderlist.table.order_number.title' | translate }}</span>
      </th>
      <td cdk-cell *cdkCellDef="let order" [attr.data-label]="'account.orderlist.table.order_number.title' | translate">
        {{ order.documentNo }}
      </td>
    </ng-container>
    <ng-container cdkColumnDef="orderNoWithLink">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-number">
        <span aria-hidden="true">{{ 'account.orderlist.table.order_number' | translate }}</span>
        <span class="visually-hidden">{{ 'account.orderlist.table.order_number.title' | translate }}</span>
      </th>
      <td cdk-cell *cdkCellDef="let order" [attr.data-label]="'account.orderlist.table.order_number.title' | translate">
        <a [routerLink]="'/account/orders/' + order.id">{{ order.documentNo }}</a>
      </td>
    </ng-container>
    <!-- Buyer -->
    <ng-container cdkColumnDef="buyer">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-buyer">
        {{ 'account.orderlist.table.buyer' | translate }}
      </th>
      <td cdk-cell *cdkCellDef="let order" [attr.data-label]="'account.orderlist.table.buyer' | translate">
        {{ order.user?.firstName }} {{ order.user?.lastName }}
      </td>
    </ng-container>
    <!-- Number of Items  -->
    <ng-container cdkColumnDef="lineItems">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-items">
        {{ 'account.orderlist.table.items' | translate }}
      </th>
      <td cdk-cell *cdkCellDef="let order" [attr.data-label]="'account.orderlist.table.items' | translate">
        {{ order.totalProductQuantity }}
      </td>
    </ng-container>
    <!-- Status  -->
    <ng-container cdkColumnDef="status">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-status">
        {{ 'account.orderlist.table.order_status' | translate }}
      </th>
      <td cdk-cell *cdkCellDef="let order" [attr.data-label]="'account.orderlist.table.order_status' | translate">
        <span class="badge text-bg-info">{{ order.status }}</span>
      </td>
    </ng-container>
    <!-- Destination  -->
    <ng-container cdkColumnDef="destination">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-destination">
        {{ 'account.orderlist.table.destination' | translate }}
      </th>
      <td cdk-cell *cdkCellDef="let order" [attr.data-label]="'account.orderlist.table.destination' | translate">
        <ish-address [address]="order.commonShipToAddress" />
      </td>
    </ng-container>
    <!-- Order total  -->
    <ng-container cdkColumnDef="orderTotal">
      <th scope="col" cdk-header-cell *cdkHeaderCellDef class="text-end" data-testing-id="th-order-total">
        {{ 'account.orderlist.table.order_total' | translate }}
      </th>
      <td
        cdk-cell
        *cdkCellDef="let order"
        [attr.data-label]="'account.orderlist.table.order_total' | translate"
        class="column-price"
      >
        {{ order.totals.total | ishPrice : 'gross' }}
      </td>
    </ng-container>
    <!-- Header and Row Declarations -->
    <tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
    <tr cdk-row *cdkRowDef="let row; columns: columnsToDisplay"></tr>
  </table>
  } @else {
  <p data-testing-id="emptyList">{{ noOrdersMessageKey | translate }}</p>
  } @if (loading) {
  <ish-loading />
  }
</div>