Refractoring
This commit is contained in:
parent
829e76ca68
commit
fc73a27524
@ -0,0 +1,54 @@
|
|||||||
|
<ng-container *ngIf="items.length > 0">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped table-hover table-light">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">
|
||||||
|
<div class="p-2 px-3 text-uppercase">Product</div>
|
||||||
|
</th>
|
||||||
|
<th class="text-center" scope="col">
|
||||||
|
<div class="p-2 px-3 text-uppercase">Price</div>
|
||||||
|
</th>
|
||||||
|
<th class="text-center" scope="col">
|
||||||
|
<div class="p-2 px-3 text-uppercase">quantity</div>
|
||||||
|
</th>
|
||||||
|
<th class="text-center" scope="col">
|
||||||
|
<div class="p-2 px-3 text-uppercase">Total</div>
|
||||||
|
</th>
|
||||||
|
<th *ngIf="isBasket" class="text-center" scope="col">
|
||||||
|
<div class="p-2 px-3 text-uppercase">Remove</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr *ngFor="let item of items">
|
||||||
|
<th scope="row">
|
||||||
|
<div class="p-2">
|
||||||
|
<img class="img-fluid" style="max-height: 50px" src="{{item.pictureUrl}}" alt="{{item.productName}}">
|
||||||
|
<div class="ms-3 d-inline-block align-middle">
|
||||||
|
<h5 class="mb-0">
|
||||||
|
<a class="text-dark" routerLink="/shop/{{item.id || item.productId }}">{{item.productName}}</a>
|
||||||
|
</h5>
|
||||||
|
<span *ngIf="item.type" class="text-muted font-weight-normal font-italic d-block">Type: {{item.type}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<td class="align-middle text-center">{{item.price | currency}}</td>
|
||||||
|
<td class="align-middle text-center">
|
||||||
|
<div class="d-flex-align-items-center">
|
||||||
|
<i *ngIf="isBasket" (click)="decrementItemQuantity(item)" class="fa fa-minus-circle text-warning me-2" style="cursor: pointer;"></i>
|
||||||
|
<span class="font-weight-bold">{{item.quantity}}</span>
|
||||||
|
<i *ngIf="isBasket" (click)="incrementItemQuantity(item)" class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer;"></i>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="align-middle text-center">{{item.price * item.quantity | currency}}</td>
|
||||||
|
<td *ngIf="isBasket" class="align-middle text-center">
|
||||||
|
<a class="text-danger" style="cursor: pointer">
|
||||||
|
<i (click)="removeBasketItem(item)" class="fa fa-trash" style="font-size: 2em"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
Loading…
Reference in New Issue
Block a user