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
96
97
98
99
100
101
102
103
104
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="loading-container">
  @if (orders?.length > 0) {
    <table cdk-table class="table table-lg mobile-optimized" [dataSource]="orders">
      <!-- Order creation date -->
      <ng-container cdkColumnDef="creationDate">
        <th *cdkHeaderCellDef cdk-header-cell data-testing-id="th-order-creation-date" scope="col">
          {{ 'account.orderlist.table.date_of_order' | translate }}
        </th>
        <td *cdkCellDef="let order" cdk-cell [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 *cdkHeaderCellDef cdk-header-cell data-testing-id="th-order-number" scope="col">
          <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
          *cdkCellDef="let order"
          cdk-cell
          [attr.data-label]="'account.orderlist.table.order_number.title' | translate"
        >
          {{ order.documentNo }}
        </td>
      </ng-container>
      <ng-container cdkColumnDef="orderNoWithLink">
        <th *cdkHeaderCellDef cdk-header-cell data-testing-id="th-order-number" scope="col">
          <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
          *cdkCellDef="let order"
          cdk-cell
          [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 *cdkHeaderCellDef cdk-header-cell data-testing-id="th-buyer" scope="col">
          {{ 'account.orderlist.table.buyer' | translate }}
        </th>
        <td *cdkCellDef="let order" cdk-cell [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 *cdkHeaderCellDef cdk-header-cell data-testing-id="th-order-items" scope="col">
          {{ 'account.orderlist.table.items' | translate }}
        </th>
        <td *cdkCellDef="let order" cdk-cell [attr.data-label]="'account.orderlist.table.items' | translate">
          {{ order.totalProductQuantity }}
        </td>
      </ng-container>
      <!-- Status  -->
      <ng-container cdkColumnDef="status">
        <th *cdkHeaderCellDef cdk-header-cell data-testing-id="th-order-status" scope="col">
          {{ 'account.orderlist.table.order_status' | translate }}
        </th>
        <td *cdkCellDef="let order" cdk-cell [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 *cdkHeaderCellDef cdk-header-cell data-testing-id="th-order-destination" scope="col">
          {{ 'account.orderlist.table.destination' | translate }}
        </th>
        <td *cdkCellDef="let order" cdk-cell [attr.data-label]="'account.orderlist.table.destination' | translate">
          <ish-address [address]="order.commonShipToAddress" />
        </td>
      </ng-container>
      <!-- Order total  -->
      <ng-container cdkColumnDef="orderTotal">
        <th *cdkHeaderCellDef cdk-header-cell class="text-end" data-testing-id="th-order-total" scope="col">
          {{ 'account.orderlist.table.order_total' | translate }}
        </th>
        <td
          *cdkCellDef="let order"
          cdk-cell
          class="column-price"
          [attr.data-label]="'account.orderlist.table.order_total' | translate"
        >
          {{ order.totals.total | ishPrice: 'gross' }}
        </td>
      </ng-container>
      <!-- Header and Row Declarations -->
      <tr *cdkHeaderRowDef="columnsToDisplay" cdk-header-row></tr>
      <tr *cdkRowDef="let row; columns: columnsToDisplay" cdk-row></tr>
    </table>
  } @else {
    <p data-testing-id="emptyList">{{ noOrdersMessageKey | translate }}</p>
  }
  @if (loading) {
    <ish-loading />
  }
</div>