Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 2x | @if (productNotifications?.length > 0) {
<table
cdk-table
class="table table-lg mobile-optimized"
data-testing-id="notification-list"
[dataSource]="productNotifications"
>
<!-- Product -->
<ng-container cdkColumnDef="productImage">
<th *cdkHeaderCellDef cdk-header-cell data-testing-id="th-product-image" scope="col">
{{ 'account.notifications.table.product' | translate }}
</th>
<td *cdkCellDef="let productNotification" cdk-cell>
<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 *cdkHeaderCellDef cdk-header-cell data-testing-id="th-product" scope="col"></th>
<td *cdkCellDef="let productNotification" cdk-cell>
<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 *cdkHeaderCellDef cdk-header-cell data-testing-id="th-notification" scope="col">
{{ 'account.notifications.table.notification' | translate }}
</th>
<td
*cdkCellDef="let productNotification"
cdk-cell
[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 *cdkHeaderCellDef cdk-header-cell data-testing-id="th-notification-edit" scope="col"><!-- empty th --></th>
<td *cdkCellDef="let productNotification" cdk-cell>
<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"
displayType="icon"
[productNotification]="productNotification"
/>
<ish-product-notification-delete
cssClass="btn-tool btn-link pt-1 me-0"
[productNotification]="productNotification"
/>
</div>
</td>
</ng-container>
<!-- Header and Row Declarations -->
<tr *cdkHeaderRowDef="columnsToDisplay" cdk-header-row></tr>
<tr *cdkRowDef="let row; columns: columnsToDisplay" cdk-row data-testing-id="product-notification-list-item"></tr>
</table>
} @else {
<p data-testing-id="emptyList">{{ 'account.notifications.no_items_message' | translate }}</p>
}
|