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
105
106
107
108
109
110
111
112
113
114
115
116
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="loading-container">
  <ng-container *ngIf="orders?.length > 0; else emptyList">
    <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 }}
          <fa-icon
            *ngIf="order.recurringOrderID"
            [icon]="['fas', 'repeat']"
            [title]="'account.orderlist.table.recurring.icon.title' | translate"
            class="ms-1"
          />
        </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>
  </ng-container>
 
  <ng-template #emptyList>
    <p data-testing-id="emptyList">{{ noOrdersMessageKey | translate }}</p>
  </ng-template>
 
  <ish-loading *ngIf="loading" />
</div>