Refractoring

This commit is contained in:
Charles Showalter 2022-05-27 14:21:02 -07:00
parent 829e76ca68
commit fc73a27524

View File

@ -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>