mohiit1502/bookstore-angular
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

latest

Browse Source
This commit is contained in:
Le Deng
2017-03-10 12:20:55 -05:00
parent 1fd91886ba
commit 6bf9da5b77
7 changed files with 50 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
store-front/src/app/components/shopping-cart/shopping-cart.component.html
View File

@@ -14,12 +14,16 @@
<div class="row">
<div class="col-xs-6 text-left">
<a md-raised-button class="mat-warn" routerLink="/bookList">Continue Shopping</a>
<!-- <a md-raised-button *ngIf="displayUpdateCart" class="mat-accent" (click)="onUpdateCart()">Update Cart</a> -->
</div>
<div class="col-xs-6 text-right">
<a md-raised-button class="mat-primary" routerLink="/checkout">Check Out</a>
</div>
</div>
<br/>
<div *ngIf="cartItemUpdated" class="alert alert-success">
Cart Item Updated Successfully!
</div>
<div *ngIf="notEnoughStock" class="alert alert-warning">
Oops, some of the products don't have enough stock. Please update product quantity.
</div>
@@ -36,32 +40,30 @@
</div>
<!--******* display products in cart ********-->
<div class="row" *ngFor="let cartItem of cartItemList">
<form (ngSubmit)="onSubmit()" method="post">
<hr/>
<div class="col-xs-2">
<a md-button (click)="onSelect(cartItem.book)"><img class="img-responsive shelf-book" src="{{serverPath}}/image/book/{{cartItem.book.id}}.png" style="width:70px;" /></a>
</div>
<div class="col-xs-6">
<a class="pointer" (click)="onSelect(cartItem.book)"><h4>
<hr/>
<div class="col-xs-2">
<a md-button (click)="onSelect(cartItem.book)"><img class="img-responsive shelf-book" src="{{serverPath}}/image/book/{{cartItem.book.id}}.png" style="width:70px;" /></a>
</div>
<div class="col-xs-6">
<a class="pointer" (click)="onSelect(cartItem.book)"><h4>
{{cartItem.book.title}}</h4></a>
<p *ngIf="cartItem.book.inStockNumber > 10" style="color: green;">In Stock</p>
<p *ngIf="cartItem.book.inStockNumber < 10 && cartItem.book.inStockNumber > 0" style="color: green;"> Only <span>{{cartItem.book.inStockNumber}}</span> In Stock
</p>
<p style="color: darkred;" *ngIf="cartItem.book.inStockNumber==0">Product Unavailable</p>
<a class="pointer" (click)="onRemoveCartItem(cartItem)">delete</a>
</div>
<div class="col-xs-2">
<h5 style="color: #db3208; font-size: large;">$<span [ngClass]="{'text-strike': cartItem.book.inStockNumber == 0 }"
<p *ngIf="cartItem.book.inStockNumber > 10" style="color: green;">In Stock</p>
<p *ngIf="cartItem.book.inStockNumber < 10 && cartItem.book.inStockNumber > 0" style="color: green;"> Only <span>{{cartItem.book.inStockNumber}}</span> In Stock
</p>
<p style="color: darkred;" *ngIf="cartItem.book.inStockNumber==0">Product Unavailable</p>
<a class="pointer" (click)="onRemoveCartItem(cartItem)">delete</a>
</div>
<div class="col-xs-2">
<h5 style="color: #db3208; font-size: large;">$<span [ngClass]="{'text-strike': cartItem.book.inStockNumber == 0 }"
>{{cartItem.book.ourPrice}}</span>
</h5>
</div>
<div class="col-xs-2">
<input hidden="hidden" name="id" [(ngModel)]="cartItem.id" />
<input id="cartItem.id" name="qty" [disabled]="cartItem.book.inStockNumber==0" class="form-control cartItemQty" [(ngModel)]="cartItem.qty" />
<button style="display:none;" id="'update-item-'cartItem.id" type="submit" class="btn btn-warning btn-xs">Update
</button>
</div>
</form>
</div>
<div class="col-xs-2">
<input hidden="hidden" name="id" [(ngModel)]="cartItem.id" />
<input id="cartItem.id" name="qty" [disabled]="cartItem.book.inStockNumber==0" class="form-control cartItemQty" [(ngModel)]="cartItem.qty" (ngModelChange)="cartItem.toUpdate=true" />
<a md-button *ngIf="cartItem.toUpdate" class="pointer mat-warn" (click)="onUpdateCartItem(cartItem)">Update</a>
</div>
</div>
<div class="row">
<hr/>

13
store-front/src/app/components/shopping-cart/shopping-cart.component.ts
View File

@@ -17,6 +17,7 @@ export class ShoppingCartComponent implements OnInit {
private cartItemList: CartItem[] = [];
private cartItemNumber: number;
private shoppingCart: ShoppingCart = new ShoppingCart();
private cartItemUpdated:boolean;
constructor(private router:Router, private cartService: CartService) { }
@@ -37,6 +38,18 @@ export class ShoppingCartComponent implements OnInit {
);
}
onUpdateCartItem(cartItem:CartItem) {
this.cartService.updateCartItem(cartItem.id, cartItem.qty).subscribe(
res=>{
console.log(res.text());
this.cartItemUpdated=true;
},
error=>{
console.log(error.text());
}
);
}
getCartItemList(){
this.cartService.getCartItemList().subscribe(
res=>{

2
store-front/src/app/models/cart-item.ts
View File

@@ -10,5 +10,5 @@ export class CartItem {
public book: Book;
public shoppingCart: ShoppingCart;
public order: Order;
public toUpdate:boolean;
}

4
store-front/src/app/services/cart.service.ts
View File

@@ -37,8 +37,8 @@ export class CartService {
return this.http.get(url, {headers : tokenHeader});
}
updateShoppingCart(cartItemId:number, qty:number) {
let url = AppConst.serverPath+"/cart/removeItem";
updateCartItem(cartItemId:number, qty:number) {
let url = AppConst.serverPath+"/cart/updateCartItem";
let cartItemInfo = {
"cartItemId" : cartItemId,
"qty" : qty