latest

admin-portal/src/app/app.module.ts

@@ -21,6 +21,9 @@ import {GetBookListService} from "./services/get-book-list.service";
 import {GetBookService} from "./services/get-book.service";
 // import { EditBookComponent } from './components/edit-book/edit-book.component';
 import {EditBookService} from "./services/edit-book.service";
+import { BookListComponent } from './components/book-list/book-list.component';
+import { EditBookComponent } from './components/edit-book/edit-book.component';
+import { ViewBookComponent } from './components/view-book/view-book.component';
 
 @NgModule({
   declarations: [
@@ -28,6 +31,9 @@ import {EditBookService} from "./services/edit-book.service";
     NavBarComponent,
     LoginComponent,
     AddNewBookComponent,
+    BookListComponent,
+    EditBookComponent,
+    ViewBookComponent,
     // BookListComponent,
     // BookListComponent,
     // ViewBookComponent,

admin-portal/src/app/app.routing.ts

@@ -5,9 +5,9 @@ import {ModuleWithProviders}  from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
 import {LoginComponent} from "./components/login/login.component";
 import {AddNewBookComponent} from "./components/add-new-book/add-new-book.component";
-// import {BookListComponent} from "./components/book-list/book-list.component";
-// import {ViewBookComponent} from "./components/view-book/view-book.component";
-// import {EditBookComponent} from "./components/edit-book/edit-book.component";
+import {BookListComponent} from "./components/book-list/book-list.component";
+import {ViewBookComponent} from "./components/view-book/view-book.component";
+import {EditBookComponent} from "./components/edit-book/edit-book.component";
 
 const appRoutes: Routes = [
   {
@@ -22,19 +22,19 @@ const appRoutes: Routes = [
   {
     path: 'addNewBook',
     component: AddNewBookComponent
+  },
+  {
+    path: 'editBook/:id',
+    component: EditBookComponent
+  },
+  {
+    path: 'bookList',
+    component: BookListComponent
+  },
+  {
+    path: 'viewBook/:id',
+    component: ViewBookComponent
   }
-  // {
-  //   path: 'editBook/:id',
-  //   component: EditBookComponent
-  // },
-  // {
-  //   path: 'bookList',
-  //   component: BookListComponent
-  // },
-  // {
-  //   path: 'viewBook/:id',
-  //   component: ViewBookComponent
-  // }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

admin-portal/src/app/components/book-list/book-list.component.css

@@ -0,0 +1,51 @@
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  color: #4a4a4d;
+  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+th,
+td {
+  padding: 10px 15px;
+  vertical-align: middle;
+}
+thead {
+  background: #395870;
+  color: #fff;
+}
+th {
+  font-weight: bold;
+}
+th:first-child {
+  text-align: left;
+}
+tbody tr:nth-child(even) {
+  background: #f0f0f2;
+}
+td {
+  border-bottom: 1px solid #cecfd5;
+  border-right: 1px solid #cecfd5;
+}
+td:first-child {
+  border-left: 1px solid #cecfd5;
+}
+.book-title {
+  color: #395870;
+  display: block;
+}
+.item-stock,
+.item-qty {
+  text-align: center;
+}
+.item-price {
+  text-align: right;
+}
+.item-multiple {
+  display: block;
+}
+tfoot {
+  text-align: right;
+}
+tfoot tr:last-child {
+  background: #f0f0f2;
+}

admin-portal/src/app/components/book-list/book-list.component.html

@@ -0,0 +1,39 @@
+<div class="container">
+  <div class="table-responsive" style="margin-top: 30px;">
+    <table id="bookListTable" class="table bordered highlight">
+      <thead>
+      <tr>
+        <th><input type="checkbox"/></th>
+        <th>Title</th>
+        <th>Author</th>
+        <th>Category</th>
+        <th>List Price</th>
+        <th>Our Price</th>
+        <th>Active?</th>
+        <th>Operation</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let book of bookList">
+        <td>
+          <input hidden="hidden" name="id"  />
+          <input class="checkboxBook" type="checkbox"/>
+        </td>
+        <td><a (click)="onSelect(book)" style="cursor: pointer">{{book.title}}</a></td>
+        <td>{{book.author}}</td>
+        <td>{{book.category}}</td>
+        <td>{{book.listPrice}}</td>
+        <td>{{book.ourPrice}}</td>
+        <td>{{book.active}}</td>
+        <td>
+          <input hidden="hidden" name="id" />
+          <button md-button class='mat-warn' type="submit" value="delete"><span
+            class="fa fa-times"></span> delete
+          </button>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <button md-raised-button class="mat-warn" id="deleteSelected">Delete Selected</button>
+</div>

admin-portal/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();
+  });
+});

admin-portal/src/app/components/book-list/book-list.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import {LoginService} from "../../services/login.service";
+import {Book} from "../../models/book";
+import {GetBookListService} from "../../services/get-book-list.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-book-list',
+  templateUrl: './book-list.component.html',
+  styleUrls: ['./book-list.component.css']
+})
+export class BookListComponent implements OnInit {
+
+  private selectedBook : Book;
+  private bookList: Book[];
+
+  constructor(private getBookListService: GetBookListService, private router: Router) {
+    this.getBookListService.getBookList().subscribe(
+      res => {
+        console.log(res.json());
+        this.bookList=res.json();
+      },
+      err => {
+        console.log(err);
+      }
+    );
+  }
+
+  onSelect(book:Book) {
+    this.selectedBook = book;
+    this.router.navigate(['/viewBook', this.selectedBook.id]);
+  }
+
+  ngOnInit() {
+
+  }
+
+}

admin-portal/src/app/components/edit-book/edit-book.component.html

@@ -0,0 +1,120 @@
+<div class="container">
+    <div [hidden]="bookAdded">
+        <h3 style="margin-top: 30px;">Update Book Information <span style="font-size: small"> * is a required field</span>
+      </h3>
+        <form (ngSubmit)="onSubmit()">
+            <md-grid-list cols="4" rowHeight="60px">
+                <md-grid-tile [colspan]="4" [rowspan]="1">
+                    <md-input-container>
+                        <input mdInput id="title" type="text" required [(ngModel)]="book.title" name="title" placeholder="Title">
+                    </md-input-container>
+                </md-grid-tile>
+            </md-grid-list>
+            <md-grid-list cols="4" rowHeight="60px">
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    <md-input-container>
+                        <input mdInput id="author" type="text" required [(ngModel)]="book.author" name="author" placeholder="Author">
+                    </md-input-container>
+                </md-grid-tile>
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    <md-input-container>
+                        <input mdInput id="title" type="text" required [(ngModel)]="book.publisher" name="publisher" placeholder="Publisher">
+                    </md-input-container>
+                </md-grid-tile>
+            </md-grid-list>
+            <md-grid-list cols="4" rowHeight="60px">
+                <md-grid-tile [colspan]="4" [rowspan]="1">
+                    <md-input-container>
+                        <input mdInput id="publicationDate" type="date" class="datepicker" [(ngModel)]="book.publicationDate" name="publicationDate" placeholder="Publication Date">
+                    </md-input-container>
+                </md-grid-tile>
+            </md-grid-list>
+            <md-grid-list cols="4" rowHeight="60px">
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    <md-select placeholder="Category" id="category" name="category" [(ngModel)]="book.category">
+                        <md-option value="Management">Management</md-option>
+                        <md-option value="Fiction">Fiction</md-option>
+                        <md-option value="Engineering">Engineering</md-option>
+                        <md-option value="Programming">Programming</md-option>
+                        <md-option value="Arts &amp; Literature">Arts &amp; Literature</md-option>
+                    </md-select>
+                </md-grid-tile>
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    <md-select placeholder="Format" iid="format" name="format" [(ngModel)]="book.format">
+                        <md-option value="paperback">Paperback</md-option>
+                        <md-option value="hardcover">Hardcover</md-option>
+                    </md-select>
+                </md-grid-tile>
+            </md-grid-list>
+            <md-grid-list cols="4" rowHeight="60px">
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    <md-input-container>
+                        <input mdInput id="pageNumber" type="number" name="numberOfPages" class="validate" step="1" [(ngModel)]="book.numberOfPages" placeholder="Number of Pages">
+                    </md-input-container>
+                </md-grid-tile>
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    <md-input-container>
+                        <input mdInput id="isbn" type="text" class="validate" [(ngModel)]="book.isbn" name="isbn" placeholder="ISBN">
+                    </md-input-container>
+                </md-grid-tile>
+            </md-grid-list>
+            <md-grid-list cols="4" rowHeight="60px">
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    $&nbsp;
+                    <md-input-container>
+                        <input mdInput id="listPrice" type="number" name="listPrice" class="validate" step="0.01" [(ngModel)]="book.listPrice" placeholder="List Price">
+                    </md-input-container>
+                </md-grid-tile>
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    $&nbsp;
+                    <md-input-container>
+                        <input mdInput id="ourPrice" type="number" name="ourPrice" class="validate" step="0.01" [(ngModel)]="book.ourPrice" placeholder="Our Price">
+                    </md-input-container>
+                </md-grid-tile>
+            </md-grid-list>
+            <md-grid-list cols="4" rowHeight="60px">
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    <md-input-container>
+                        <input mdInput id="shippingWeight" type="number" name="shippingWeight" class="validate" step="0.01" [(ngModel)]="book.shippingWeight" placeholder="Shipping Weight">
+                    </md-input-container>&nbsp;ounces&nbsp;
+                </md-grid-tile>
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    <md-select placeholder="Language" iid="format" name="format" [(ngModel)]="book.format">
+                        <md-option value="english">English</md-option>
+                        <md-option value="spanish">Spanish</md-option>
+                    </md-select>
+                </md-grid-tile>
+            </md-grid-list>
+            <md-grid-list cols="4" rowHeight="60px">
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    <md-input-container>
+                        <input mdInput id="inStockNumber" type="number" name="inStockNumber" class="validate" step="0.01" [(ngModel)]="book.inStockNumber" placeholder="Numbers In Stock">
+                    </md-input-container>
+                </md-grid-tile>
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    &nbsp;
+                    <md-slide-toggle [color]="color" [checked]="checked" [disabled]="disabled" [(ngModel)]="book.active" name="active">
+                        Active
+                    </md-slide-toggle>
+                </md-grid-tile>
+            </md-grid-list>
+            <md-input-container>
+                <textarea mdInput id="title" [(ngModel)]="book.description" name="description" placeholder="Description"></textarea>
+            </md-input-container>
+            Image &nbsp;
+            <input id="title" type="file" id="bookImage" name="bookImage" (change)="uploadImageService.fileChangeEvent($event)">
+            <br><br>
+            <md-grid-list cols="20" rowHeight="60px">
+                <md-grid-tile [colspan]="3" [rowspan]="1">
+                    <button class="mat-primary" md-raised-button type="submit">Update Book</button>
+                </md-grid-tile>
+                <md-grid-tile [colspan]="2" [rowspan]="1">
+                    <a class="mat-warn" md-raised-button routerLink="/bookList">Cancel</a>
+                </md-grid-tile>
+            </md-grid-list>
+        </form>
+    </div>
+    <div class="row" [hidden]="!bookAdded">
+            <h3>Book updated successfully!</h3>
+    </div>
+</div>

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

admin-portal/src/app/components/edit-book/edit-book.component.ts

@@ -0,0 +1,52 @@
+import {Component, OnInit} from '@angular/core';
+import {EditBookService} from "../../services/edit-book.service";
+import {UploadImageService} from "../../services/upload-image.service";
+import {Book} from "../../models/book";
+import {Params, ActivatedRoute, Router} from "@angular/router";
+import {GetBookService} from "../../services/get-book.service";
+
+@Component({
+  selector: 'app-edit-book',
+  templateUrl: './edit-book.component.html',
+  styleUrls: ['./edit-book.component.css']
+})
+export class EditBookComponent implements OnInit {
+
+  private bookId: number;
+  private book: Book = new Book();
+  private bookUpdated: boolean;
+
+  constructor(private uploadImageService: UploadImageService,
+              private editBookService: EditBookService,
+              private getBookService: GetBookService,
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.params.forEach((params: Params) => {
+      this.bookId = Number.parseInt(params['id']);
+    });
+
+    this.getBookService.getBook(this.bookId).subscribe(
+      res => {
+        this.book = res.json();
+      },
+      error => console.log(error)
+    );
+  }
+
+  onSubmit() {
+    this.editBookService.sendBook(this.book)
+      .subscribe(
+        data => {
+          this.uploadImageService.modify(JSON.parse(JSON.parse(JSON.stringify(data))._body).id);
+          this.bookUpdated = true;
+        },
+        error => console.log(error)
+      );
+  }
+
+
+
+  ngOnInit() {
+  }
+
+}

admin-portal/src/app/components/nav-bar/nav-bar.component.html

@@ -1,6 +1,7 @@
 <md-toolbar class="mat-primary">
     <h3 [style.color]="'white'">ADMIN PORTAL</h3>
     <span class="example-spacer"></span>
+    <span [hidden]="!loggedIn"><a md-button routerLink="/bookList" routerLinkActive="active">View Book List</a></span>
     <span [hidden]="!loggedIn"><a md-button routerLink="/addNewBook" routerLinkActive="active">Add a Book</a></span>
     <span [hidden]="!loggedIn"><a md-button routerLink="." (click)="logout()">Logout</a></span>
 </md-toolbar>

admin-portal/src/app/components/view-book/view-book.component.html

@@ -0,0 +1,95 @@
+<div class="container">
+    <div class="row" style="margin-top: 20px;">
+        <div class="col s12">
+            <a routerLink="/bookList" routerLinkActive="active"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Go back</a>
+            <span> / </span>
+            <a (click)="onSelect(book)" style="cursor: pointer">Edit</a>
+        </div>
+    </div>
+    <md-grid-list cols="9" rowHeight="100px">
+        <md-grid-tile [colspan]="3" [rowspan]="5">
+            <div class="panel panel-default">
+                <div class="panel-body">
+                    <img [src]="'http://localhost:8181/image/book/'+book.id+'.png'" class="responsive-img" />
+                </div>
+            </div>
+        </md-grid-tile>
+        <md-grid-tile [colspan]="6">
+            <h3>{{book.title}}</h3>
+        </md-grid-tile>
+        <md-grid-tile [colspan]="3" [rowspan]="3">
+            <md-list>
+                <md-list-item>
+                    <p><strong>Author: </strong>{{book.author}}</p>
+                </md-list-item>
+                <md-list-item>
+                    <p><strong>Publisher: </strong>{{book.publisher}}</p>
+                </md-list-item>
+                <md-list-item>
+                    <p><strong>Publication Date: </strong>{{book.publicationDate}}</p>
+                </md-list-item>
+                <md-list-item>
+                    <p><strong>Language: </strong>{{book.language}}</p>
+                </md-list-item>
+                <md-list-item>
+                    <p><strong>Category: </strong>{{book.category}}</p>
+                </md-list-item>
+                <md-list-item>
+                    <p><strong>Pages: </strong>{{book.numberOfPages}}</p>
+                </md-list-item>
+            </md-list>
+        </md-grid-tile>
+        <md-grid-tile [colspan]="3" [rowspan]="3">
+            <md-list>
+                <md-list-item>
+                    <p><strong>Format: </strong>{{book.format}}</p>
+                </md-list-item>
+                <md-list-item>
+                    <p><strong>ISBN: </strong>{{book.isbn}}</p>
+                </md-list-item>
+                <md-list-item>
+                    <p><strong>Shipping Weight: </strong>{{book.shippingWeight}}</p>
+                </md-list-item>
+                <md-list-item>
+                    <p><strong>List Price: </strong>{{book.listPrice}}</p>
+                </md-list-item>
+                <md-list-item>
+                    <p><strong>Our Price: </strong>{{book.ourPrice}}</p>
+                </md-list-item>
+                <md-list-item>
+                    <p><strong>Number in Stock: </strong>{{book.inStockNumber}}</p>
+                </md-list-item>
+            </md-list>
+        </md-grid-tile>
+        <md-grid-tile [colspan]="6">
+            <p><strong>Description: </strong>{{book.description}}</p>
+        </md-grid-tile>
+    </md-grid-list>
+    <!-- <div class="row">
+    <div class="col s3">
+    </div>
+    <div class="col s8 offset-s1">
+        <h3>{{book.title}}</h3>
+        <div class="row">
+            <div class="col s6">
+                <p><strong>Author: </strong>{{book.author}}</p>
+                <p><strong>Publisher: </strong>{{book.publisher}}</p>
+                <p><strong>Publication Date: </strong>{{book.publicationDate}}</p>
+                <p><strong>Language: </strong>{{book.language}}</p>
+                <p><strong>Category: </strong>{{book.category}}</p>
+                <p><strong>Pages: </strong>{{book.numberOfPages}}</p>
+            </div>
+            <div class="col s6">
+                <p><strong>Format: </strong>{{book.format}}</p>
+                <p><strong>ISBN: </strong>{{book.isbn}}</p>
+                <p><strong>Shipping Weight: </strong>{{book.shippingWeight}}</p>
+                <p><strong>List Price: </strong>{{book.listPrice}}</p>
+                <p><strong>Our Price: </strong>{{book.ourPrice}}</p>
+                <p><strong>Number in Stock: </strong>{{book.inStockNumber}}</p>
+            </div>
+        </div>
+        <p><strong>Description: </strong>{{book.description}}</p>
+    </div>
+</div>
+ -->
+</div>

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

admin-portal/src/app/components/view-book/view-book.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import {Params, ActivatedRoute, Router} from "@angular/router";
+import {GetBookService} from "../../services/get-book.service";
+import {Book} from "../../models/book";
+
+@Component({
+  selector: 'app-view-book',
+  templateUrl: './view-book.component.html',
+  styleUrls: ['./view-book.component.css']
+})
+export class ViewBookComponent implements OnInit {
+
+  private book: Book = new Book();
+  private bookId: number;
+
+  constructor ( private getBookService: GetBookService, private route: ActivatedRoute, private router:Router){
+    this.route.params.forEach((params: Params) => {
+      this.bookId = Number.parseInt(params['id']);
+    });
+
+
+    this.getBookService.getBook(this.bookId).subscribe(
+      res => {
+        this.book=res.json();
+      },
+      error => console.log(error)
+    );
+  }
+
+  onSelect(book: Book) {
+    this.router.navigate(['/editBook', this.book.id]).then(s =>location.reload());
+  }
+
+  ngOnInit(){}
+
+}