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
88
89
90
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ng-container *ngIf="productNotifications?.length > 0; else emptyList">
  <table
    cdk-table
    [dataSource]="productNotifications"
    class="table table-lg mobile-optimized"
    data-testing-id="notification-list"
  >
    <!-- Product -->
    <ng-container cdkColumnDef="productImage">
      <th 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 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 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"
      >
        <div *ngIf="productNotification.type === 'stock'" data-testing-id="product-notification-message">
          {{
            'account.notifications.stock.text'
              | translate
                : {
                    '0': productNotification.notificationMailAddress
                  }
          }}
        </div>
        <div *ngIf="productNotification.type === 'price'" 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 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 mr-3"
            [productNotification]="productNotification"
            displayType="icon"
          />
          <ish-product-notification-delete
            cssClass="btn-tool btn-link pt-1 mr-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>
</ng-container>
 
<ng-template #emptyList>
  <p data-testing-id="emptyList">{{ 'account.notifications.no_items_message' | translate }}</p>
</ng-template>