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 09:39:46 -05:00
parent 4765a6c5ff
commit c2ffadb733
9 changed files with 145 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
bookstore-api/.idea/workspace.xml generated
View File

@@ -982,12 +982,12 @@
<workItem from="1486538831944" duration="450000" />
<workItem from="1488378219247" duration="650000" />
<workItem from="1488461561430" duration="18419000" />
<workItem from="1488731165185" duration="28617000" />
<workItem from="1488731165185" duration="28988000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="90629000" />
<option name="totallyTimeSpent" value="91000000" />
</component>
<component name="ToolWindowManager">
<frame x="82" y="23" width="1280" height="797" extended-state="0" />

4
store-front/src/app/app.module.ts
View File

@@ -23,6 +23,7 @@ import { MyAccountComponent } from './components/my-account/my-account.component
import { MyProfileComponent } from './components/my-profile/my-profile.component';
import { BookListComponent } from './components/book-list/book-list.component';
import { BookDetailComponent } from './components/book-detail/book-detail.component';
import { ShoppingCartComponent } from './components/shopping-cart/shopping-cart.component';
@NgModule({
declarations: [
@@ -33,7 +34,8 @@ import { BookDetailComponent } from './components/book-detail/book-detail.compon
MyAccountComponent,
MyProfileComponent,
BookListComponent,
BookDetailComponent
BookDetailComponent,
ShoppingCartComponent
],
imports: [
BrowserModule,

6
store-front/src/app/app.routing.ts
View File

@@ -9,6 +9,8 @@ import {MyAccountComponent} from './components/my-account/my-account.component';
import {MyProfileComponent} from './components/my-profile/my-profile.component';
import {BookListComponent} from './components/book-list/book-list.component';
import {BookDetailComponent} from './components/book-detail/book-detail.component';
import {ShoppingCartComponent} from './components/shopping-cart/shopping-cart.component';
const appRoutes: Routes = [
{
@@ -35,6 +37,10 @@ const appRoutes: Routes = [
{
path: 'bookDetail/:id',
component: BookDetailComponent
},
{
path: 'shoppingCart',
component: ShoppingCartComponent
}
];

2
store-front/src/app/components/book-list/book-list.component.html
View File

@@ -36,7 +36,7 @@
<a href="#"><span>{{book.format | uppercase}}</span></a>
<span>{{book.numberOfPages}}</span><span> pages</span>
<br/>
<a th:href="@{/bookDetail?id=}+${book.id}"><span
<a (click)="onSelect(book)"><span
style="font-size: x-large; color: #db3208">$<span>{{book.ourPrice | number : '1.2-2'}}</span></span></a>
<span style=" text-decoration: line-through;">$<span
>{{book.listPrice | number : '1.2-2'}}</span></span>

1
store-front/src/app/components/nav-bar/nav-bar.component.html
View File

@@ -21,6 +21,7 @@
</li>
<li *ngIf="!loggedIn" ><a md-button routerLink="/myAccount" routerLinkActive="active">MY ACCOUNT</a></li>
<li *ngIf="loggedIn"><a md-button routerLink="/shoppingCart" routerLinkActive="active">SHOPPING CART</a></li>
<li *ngIf="loggedIn"><a md-button routerLink="/myProfile" routerLinkActive="active">MY PROFILE</a></li>
<li *ngIf="loggedIn"><a md-button (click)="logout()">LOGOUT</a></li>
</ul>

3
store-front/src/app/components/shopping-cart/shopping-cart.component.css Normal file
View File

@@ -0,0 +1,3 @@
.text-strike {
text-decoration: line-through;
}

75
store-front/src/app/components/shopping-cart/shopping-cart.component.html Normal file
View File

@@ -0,0 +1,75 @@
<div class="container" style="margin-top: 20px;">
<div class="row">
<div class="col-xs-8">
<h2 class="section-headline"><span>Shopping Cart</span></h2>
</div>
<div class="col-xs-4">
<a href="#"><img src="{{serverPath}}/image/logo.png" class="img-responsive" /></a>
</div>
</div>
<hr style="position: absolute; width:100%; height:6px; background-color: #333; z-index: -1; margin-top: -80px;" />
<img class="img-responsive" src="{{serverPath}}/image/wood.png" style="margin-top: -75px;" />
<div class="row" style="margin-top: 120px;">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6 text-left">
<a md-raised-button class="mat-warn" routerLink="/bookList">Continue Shopping</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="notEnoughStock" class="alert alert-warning">
Oops, some of the products don't have enough stock. Please update product quantity.
</div>
<div *ngIf="emptyCart" class="alert alert-warning">
Oops, your cart is empty. See if you can find what you like in the bookshelf and add them to cart.
</div>
<div class="row">
<div class="col-xs-8">
<h4>Products</h4></div>
<div class="col-xs-2">
<h4>Price</h4></div>
<div class="col-xs-2">
<h4>Qty</h4></div>
</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 (click)="onSelect(cartItem.book)"><img class="img-responsive shelf-book" th:src="#{adminPath}+@{/image/book/}+${cartItem.book.id}+'.png'" style="width:70px;" /></a>
</div>
<div class="col-xs-6">
<a (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 (click)="onRemove(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" th: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="row">
<hr/>
<h4 class="col-xs-12 text-right"><Strong style="font-size: large">Total Price (<span
th:text="${#lists.size(cartItemList)}"></span> items): </Strong><span
style="color: #db3208; font-size: large;">$<span
th:text="${shoppingCart.grandTotal}"></span></span></h4>
</div>
</div>
</div>
</div>

28
store-front/src/app/components/shopping-cart/shopping-cart.component.spec.ts Normal file
View File

@@ -0,0 +1,28 @@
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { ShoppingCartComponent } from './shopping-cart.component';
describe('ShoppingCartComponent', () => {
let component: ShoppingCartComponent;
let fixture: ComponentFixture<ShoppingCartComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ShoppingCartComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ShoppingCartComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

26
store-front/src/app/components/shopping-cart/shopping-cart.component.ts Normal file
View File

@@ -0,0 +1,26 @@
import { Component, OnInit } from '@angular/core';
import {AppConst} from '../../constants/app-const';
import {Book} from '../../models/book';
import {Router} from "@angular/router";
@Component({
selector: 'app-shopping-cart',
templateUrl: './shopping-cart.component.html',
styleUrls: ['./shopping-cart.component.css']
})
export class ShoppingCartComponent implements OnInit {
private serverPath = AppConst.serverPath;
private selectedBook: Book;
constructor(private router:Router) { }
onSelect(book:Book) {
this.selectedBook = book;
this.router.navigate(['/bookDetail', this.selectedBook.id]);
}
ngOnInit() {
}
}