Skip to content

Commit

Permalink
Update card detail feature
Browse files Browse the repository at this point in the history
  • Loading branch information
Popovkov57 committed Sep 28, 2022
1 parent 501f9c9 commit 5e7f758
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 5 deletions.
2 changes: 1 addition & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from './store/store.module';
import { AppComponent } from './app.component';
import { StoreModule } from './store/store.module';
import { StoreComponent } from './store/store.component';
import { CheckoutComponent } from './store/checkout.component';
import { CartDetailComponent } from './store/cartDetail.component';
Expand Down
7 changes: 6 additions & 1 deletion src/app/model/cart.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,13 @@ export class Cart {
}

removeLine(id: number) {
console.log("removeLine");
console.log("id: " + id);
let index = this.lines.findIndex(line => line.product.id == id);
this.lines.slice(index, 1);
console.log("index: " + index)
console.log(this.lines);
this.lines.splice(index, 1);
console.log(this.lines);
this.recalculate();
}

Expand Down
70 changes: 70 additions & 0 deletions src/app/store/cartDetail.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<div class="container-fluid">
<div class="row">
<div class="col bg-dark text-white">
<a class="navbar-brand">SPORTS STORE</a>
</div>
</div>
<div class="row">
<div class="col mt-2">
<h2 class="text-center">Your Cart</h2>
<table class="table table-bordered table-striped p-2">
<thead>
<tr>
<th>Quantity</th>
<th>Product</th>
<th class="text-right">Price</th>
<th class="text-right">Subtotal</th>
</tr>
</thead>
<tbody>
<tr *ngIf="cart.lines.length == 0">
<td colspan="4" class="text-center">
Your cart is empty
</td>
</tr>
<tr *ngFor="let line of cart.lines">
<td>
<input type="number"
class="form-control-sm"
style="width: 5em;"
[value]="line.quantity"
(change)="cart.updateQuantity(line.product, $event.target.value)"/>
</td>
<td>{{ line.product.name }}</td>
<td class="text-right">
{{ line.product.price | currency:"USD":true:"2.2-2" }}
</td>
<td class="text-right">
{{ line.lineTotal | currency:"USD":true:"2.2-2" }}
</td>
<td class="text-center">
<button class="btn btn-sm btn-danger" (click)="cart.removeLine(line.product.id)">
Remove
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right">Total:</td>
<td class="text-right">
{{ cart.cartPrice | currency:"USD":true:"2.2-2" }}
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row">
<div class="col">
<div class="text-center">
<button class="btn btn-primary m-1" routerLink="/store">
Continue Shopping
</button>
<button class="btn btn-secondary m-1" routerLink="/checkout" [disabled]="cart.lines.length == 0">
Checkout
</button>
</div>
</div>
</div>
</div>
9 changes: 7 additions & 2 deletions src/app/store/cartDetail.component.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { Component } from "@angular/core";
import { Cart } from "../model/cart.model";

@Component({
template:`<div><h3 class="bg-info p-1 text-white">Cart Detail Component</h3></div>`
templateUrl: "cartDetail.component.html"
})

export class CartDetailComponent {}
export class CartDetailComponent {

constructor(public cart: Cart) {}

}
2 changes: 1 addition & 1 deletion src/app/store/store.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { RouterModule } from "@angular/router";
@NgModule({
imports: [ModelModule, BrowserModule, FormsModule, RouterModule],
declarations: [StoreComponent, CartSummaryComponent, CartDetailComponent, CheckoutComponent],
exports: [StoreComponent, CartSummaryComponent, CartDetailComponent, CheckoutComponent]
exports: [StoreComponent, CartDetailComponent, CheckoutComponent]
})

export class StoreModule {}

0 comments on commit 5e7f758

Please sign in to comment.