All files / src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-list account-product-notifications-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
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (productNotifications?.length > 0) {
<table
  cdk-table
  [dataSource]="productNotifications"
  class="table table-lg mobile-optimized"
  data-testing-id="notification-list"
>
  <!-- Product -->
  <ng-container cdkColumnDef="productImage">
    <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-product-image">
      {{ 'account.notifications.table.product' | translate }}
    </th>
    <td cdk-cell *cdkCellDef="let productNotification">
      <div class="list-item" ishProductContext [sku]="productNotification.sku">
        <ish-product-image imageType="S" [link]="true" />
      </div>
    </td>
  </ng-container>
  <!-- Product Info -->
  <ng-container cdkColumnDef="product">
    <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-product"></th>
    <td cdk-cell *cdkCellDef="let productNotification">
      <div class="list-item" ishProductContext [sku]="productNotification.sku">
        <ish-product-name />
        <ish-product-price [showInformationalPrice]="true" />
      </div>
    </td>
  </ng-container>
  <!-- Notification -->
  <ng-container cdkColumnDef="notification">
    <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-notification">
      {{ 'account.notifications.table.notification' | translate }}
    </th>
    <td
      cdk-cell
      *cdkCellDef="let productNotification"
      [attr.data-label]="'account.notifications.table.notification' | translate"
    >
      @if (productNotification.type === 'stock') {
      <div data-testing-id="product-notification-message">
        {{
          'account.notifications.stock.text'
            | translate
              : {
                  '0': productNotification.notificationMailAddress
                }
        }}
      </div>
      } @if (productNotification.type === 'price') {
      <div data-testing-id="product-notification-message">
        {{
          'account.notifications.price.text'
            | translate
              : {
                  '0': productNotification.notificationMailAddress,
                  '1': productNotification.price | ishPrice
                }
        }}
      </div>
      }
    </td>
  </ng-container>
  <!-- Notification Edit -->
  <ng-container cdkColumnDef="notificationEditDelete">
    <th scope="col" cdk-header-cell *cdkHeaderCellDef data-testing-id="th-notification-edit"><!-- empty th --></th>
    <td cdk-cell *cdkCellDef="let productNotification">
      <div class="d-flex flex-nowrap justify-content-center" ishProductContext [sku]="productNotification.sku">
        <ish-product-notification-edit
          cssClass="btn-tool btn-link pt-1 me-3"
          [productNotification]="productNotification"
          displayType="icon"
        />
        <ish-product-notification-delete
          cssClass="btn-tool btn-link pt-1 me-0"
          [productNotification]="productNotification"
        />
      </div>
    </td>
  </ng-container>
  <!-- Header and Row Declarations -->
  <tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
  <tr cdk-row *cdkRowDef="let row; columns: columnsToDisplay" data-testing-id="product-notification-list-item"></tr>
</table>
} @else {
<p data-testing-id="emptyList">{{ 'account.notifications.no_items_message' | translate }}</p>
}