latest

bookstore-api/.idea/workspace.xml

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

store-front/package.json

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

store-front/src/app/app.module.ts

@@ -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]
 })

store-front/src/app/app.routing.ts

@@ -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
   }
 ];
 

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

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

store-front/src/app/components/book-list/book-list.component.spec.ts

@@ -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();
+  });
+});

store-front/src/app/components/book-list/book-list.component.ts

@@ -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() {
+
+  }
+
+}

store-front/src/app/components/book-list/data-filter.pipe.ts

@@ -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;
+    }
+}

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

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

store-front/src/app/services/book.service.spec.ts

@@ -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();
+  }));
+});

store-front/src/app/services/book.service.ts

@@ -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});
+  }
+
+}