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-09 17:33:39 -05:00
parent 444fbf0ba1
commit fbd32b347a
12 changed files with 199 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
store-front/package.json
View File

@@ -21,10 +21,12 @@
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"angular2-datatable": "^0.5.3",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"lodash": "^4.17.4",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"

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

@@ -11,33 +11,42 @@ import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { NavBarComponent } from './components/nav-bar/nav-bar.component';
import {DataTableModule} from "angular2-datatable";
import { DataFilterPipe } from './components/book-list/data-filter.pipe';
import { LoginService } from './services/login.service';
import { UserService } from './services/user.service';
import { PaymentService } from './services/payment.service';
import { ShippingService } from './services/shipping.service';
import { BookService } from './services/book.service';
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';
@NgModule({
declarations: [
AppComponent,
DataFilterPipe,
HomeComponent,
NavBarComponent,
MyAccountComponent,
MyProfileComponent
MyProfileComponent,
BookListComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
MaterialModule
MaterialModule,
DataTableModule
],
providers: [
LoginService,
UserService,
PaymentService,
ShippingService
ShippingService,
BookService
],
bootstrap: [AppComponent]
})

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

@@ -7,6 +7,7 @@ import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from './components/home/home.component';
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';
const appRoutes: Routes = [
@@ -26,6 +27,10 @@ const appRoutes: Routes = [
{
path: 'myProfile',
component: MyProfileComponent
},
{
path: 'bookList',
component: BookListComponent
}
];

0
store-front/src/app/components/book-list/book-list.component.css Normal file
View File

58
store-front/src/app/components/book-list/book-list.component.html Normal file
View File

@@ -0,0 +1,58 @@
<div class="container" style="margin-top: 20px;">
<div class="row">
<div class="col-xs-8">
<h2 class="section-headline"><span>All Books</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">
<div class="col-md-3"></div>
<div class="col-md-9">
<table class="table" [mfData]="data | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
<tr>
<th colspan="5">
Filter by name:
<input class="form-control" [(ngModel)]="filterQuery" />
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let book of bookList">
<div class="row">
<div class="col-md-3">
<a href="#">
<img class="img-responsive" src="{{serverPath}}/image/book/{{book.id}}.png" />
</a>
</div>
<div class="col-md-9">
<h4 (click)="onSelect(book)" style="margin-top: 20px;cursor: pointer;">{{book.title}}</h4>
<span>{{book.publicationDate}}</span>
<p>{{book.author}}</p>
<a href="#"><span>{{book.format | uppercase}}</span></a>
<span>{{book.numberOfPages}}</span><span> pages</span>
<br/>
<a th:href="@{/bookDetail?id=}+${book.id}"><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>
<p>{{book.description | slice:0:500}}</p>
</div>
</div>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>

28
store-front/src/app/components/book-list/book-list.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 { BookListComponent } from './book-list.component';
describe('BookListComponent', () => {
let component: BookListComponent;
let fixture: ComponentFixture<BookListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BookListComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BookListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

43
store-front/src/app/components/book-list/book-list.component.ts Normal file
View File

@@ -0,0 +1,43 @@
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import {Book} from "../../models/book";
import {BookService} from "../../services/book.service";
import {Router} from "@angular/router";
import {Http} from "@angular/http";
import {AppConst} from '../../constants/app-const';
@Component({
selector: 'app-book-list',
templateUrl: './book-list.component.html',
styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {
public filterQuery = "";
public rowsOnPage = 10;
private selectedBook : Book;
private bookList: Book[];
private serverPath = AppConst.serverPath;
constructor(private bookService:BookService, private router: Router, private http: Http) {
this.bookService.getBookList().subscribe(
res => {
console.log(res.json());
this.bookList=res.json();
},
err => {
console.log(err);
}
);
}
onSelect(book:Book) {
this.selectedBook = book;
this.router.navigate(['/bookDetail', this.selectedBook.id]);
}
ngOnInit() {
}
}

15
store-front/src/app/components/book-list/data-filter.pipe.ts Normal file
View File

@@ -0,0 +1,15 @@
import * as _ from "lodash";
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name: "dataFilter"
})
export class DataFilterPipe implements PipeTransform {
transform(array: any[], query: string): any {
if (query) {
return _.filter(array, row=>row.name.indexOf(query) > -1);
}
return array;
}
}

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

@@ -8,7 +8,7 @@
<!-- Note that the .navbar-collapse and .collapse classes have been removed from the #navbar -->
<div id="navbar">
<ul class="nav navbar-nav navbar-left">
<li ><a md-button>BOOK</a></li>
<li ><a md-button routerLink="/bookList" routerLinkActive="active">BOOK</a></li>
<form class="navbar-form" method="post">
<div class="form-group">
<input type="text" name="keyword" class="form-control" placeholder="Book title" />

16
store-front/src/app/services/book.service.spec.ts Normal file
View File

@@ -0,0 +1,16 @@
/* tslint:disable:no-unused-variable */
import { TestBed, async, inject } from '@angular/core/testing';
import { BookService } from './book.service';
describe('BookService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [BookService]
});
});
it('should ...', inject([BookService], (service: BookService) => {
expect(service).toBeTruthy();
}));
});

17
store-front/src/app/services/book.service.ts Normal file
View File

@@ -0,0 +1,17 @@
import { Injectable } from '@angular/core';
import {Headers, Http} from "@angular/http";
@Injectable()
export class BookService {
constructor(private http: Http) { }
getBookList() {
let url = "http://localhost:8181/book/bookList";
let tokenHeader = new Headers ({
'x-auth-token' : localStorage.getItem("xAuthToken")
});
return this.http.get(url, {headers : tokenHeader});
}
}