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-06 08:58:29 -05:00
parent c1c0a7496d
commit d06b719984
15 changed files with 537 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
admin-portal/src/app/app.module.ts
View File

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

30
admin-portal/src/app/app.routing.ts
View File

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

51
admin-portal/src/app/components/book-list/book-list.component.css Normal file
View File

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

39
admin-portal/src/app/components/book-list/book-list.component.html Normal file
View File

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

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

38
admin-portal/src/app/components/book-list/book-list.component.ts Normal file
View File

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

0
admin-portal/src/app/components/edit-book/edit-book.component.css Normal file
View File

120
admin-portal/src/app/components/edit-book/edit-book.component.html Normal file
View File

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

28
admin-portal/src/app/components/edit-book/edit-book.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 { 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();
});
});

52
admin-portal/src/app/components/edit-book/edit-book.component.ts Normal file
View File

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

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

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

0
admin-portal/src/app/components/view-book/view-book.component.css Normal file
View File

95
admin-portal/src/app/components/view-book/view-book.component.html Normal file
View File

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

28
admin-portal/src/app/components/view-book/view-book.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 { 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();
});
});

36
admin-portal/src/app/components/view-book/view-book.component.ts Normal file
View File

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