BAEL-797 Adding admin actions for books

This commit is contained in:
tschiman 2017-04-19 00:00:08 -06:00
parent 62f8bba29c
commit 19a1e837ea
5 changed files with 127 additions and 7 deletions

View File

@ -0,0 +1,3 @@
.custom-close {
float:right;
}

View File

@ -2,7 +2,7 @@
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#">Book Rater</a> <a class="navbar-brand" href="#">Book Rater <span *ngIf="principal.isAdmin()">Admin</span></a>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
</ul> </ul>
@ -36,12 +36,56 @@
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md">
<div class="row"> <div class="row">
<div class="col-md-12" *ngFor="let book of books" (click)="selectBook(book)"> <div class="col-md-12" *ngFor="let book of books; let i = index;" (click)="selectBook(book)">
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div *ngIf="booksToEdit.indexOf(i) === -1 ; then bookView else bookEdit"></div>
<ng-template #bookView>
<button appClickStopPropagation *ngIf="principal.isAdmin()" type="button" class="btn btn-danger custom-close" (click)="delete(i)">Delete</button>
<button appClickStopPropagation *ngIf="principal.isAdmin()" type="button" class="btn btn-warning custom-close" (click)="editBook(i)">Edit</button>
<h4 class="card-title">Title: {{book.title}}</h4> <h4 class="card-title">Title: {{book.title}}</h4>
<h6 class="card-subtitle mb-2 text-muted">Author: {{book.author}}</h6> <h6 class="card-subtitle mb-2 text-muted">Author: {{book.author}}</h6>
<p class="card-text">A quick summary of the book</p> </ng-template>
<ng-template #bookEdit>
<button appClickStopPropagation type="button" class="btn btn-secondary custom-close" (click)="cancelEditBook(i)">Cancel</button>
<form appClickStopPropagation (ngSubmit)="saveBook(i, newBooks[i])" class="mt-2 mt-md-0" #f1="ngForm">
<div class="form-group">
<label for="title">Title:</label>
<input id="title" name="title" [(ngModel)]="newBooks[i].title" required class="form-control mr-sm-2" type="text">
</div>
<div class="form-group">
<label for="author">Author:</label>
<input id="author" name="author" [(ngModel)]="newBooks[i].author" required class="form-control mr-sm-2" type="text">
</div>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" [disabled]="!f1.valid">Save</button>
</form>
</ng-template>
</div>
</div>
</div>
<div *ngIf="principal.isAdmin()" class="col-md-12">
<div class="card">
<div class="card-block">
<div *ngIf="!isAddNewBook; then bookPlaceHolder else bookAdd"></div>
<ng-template #bookPlaceHolder>
<h4 (click)="activateAddNewBook()" class="card-title center-block">Add New Book</h4>
</ng-template>
<ng-template #bookAdd>
<button appClickStopPropagation type="button" class="btn btn-secondary custom-close" (click)="cancelAddBook()">Cancel</button>
<form appClickStopPropagation (ngSubmit)="addNewBook(newBook, titleNewBook)" class="mt-2 mt-md-0" #f2="ngForm">
<div class="form-group">
<label for="titleNewBook">Title:</label>
<input id="titleNewBook" name="title" [(ngModel)]="newBook.title" required class="form-control mr-sm-2" type="text" #titleNewBook>
</div>
<div class="form-group">
<label for="authorNewBook">Author:</label>
<input id="authorNewBook" name="author" [(ngModel)]="newBook.author" required class="form-control mr-sm-2" type="text">
</div>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" [disabled]="!f2.valid">Save</button>
</form>
</ng-template>
</div> </div>
</div> </div>

View File

@ -24,10 +24,17 @@ export class AppComponent {
private password: String = ''; private password: String = '';
principal: Principal = new Principal(true, []); principal: Principal = new Principal(false, []);
// principal: Principal = new Principal(true, [new Authority("ROLE_ADMIN")]);
loginFailed: boolean = false; loginFailed: boolean = false;
booksToEdit: number[] = [];
newBooks: Book[] = [];
isAddNewBook: boolean = false;
newBook: Book = new Book(null, '', '');
constructor(private http: Http){} constructor(private http: Http){}
ngOnInit(): void { ngOnInit(): void {
@ -84,6 +91,7 @@ export class AppComponent {
let book1: Book = new Book(2, 'Michael Crichton', 'Jurassic Park'); let book1: Book = new Book(2, 'Michael Crichton', 'Jurassic Park');
let book2: Book = new Book(3, 'McLaughlin, Pollice, and West', 'Object Oriented Analysis And Design'); let book2: Book = new Book(3, 'McLaughlin, Pollice, and West', 'Object Oriented Analysis And Design');
this.books.push(book, book1, book2); this.books.push(book, book1, book2);
this.books.forEach(book => this.newBooks.push(new Book(book.id, book.author, book.title)))
} }
selectBook(book: Book) { selectBook(book: Book) {
@ -94,4 +102,54 @@ export class AppComponent {
this.selectedBook = null; this.selectedBook = null;
} }
editBook(bookIndex: number) {
this.booksToEdit.push(bookIndex);
}
cancelEditBook(bookIndex: number) {
if (this.booksToEdit.indexOf(bookIndex) !== -1) {
this.booksToEdit.splice(this.booksToEdit.indexOf(bookIndex), 1); //remove the index of the book to edit
//get the original book
let bookCopy: Book = new Book(this.books[bookIndex].id, this.books[bookIndex].author, this.books[bookIndex].title);
this.newBooks.splice(bookIndex,1,bookCopy); //replace the edited book with the old book
}
}
saveBook(bookIndex: number, newBook: Book) {
console.log(newBook);
//save the book to the database
//update the current array of books
let book: Book = this.books.find(b => b.id === newBook.id);
book.title = newBook.title;
book.author = newBook.author;
this.booksToEdit.splice(this.booksToEdit.indexOf(bookIndex), 1); //remove the index of the book to edit
}
delete(bookIndex: number) {
if (this.selectedBook !== null && this.books[bookIndex].id === this.selectedBook.id) {this.selectedBook = null;}
this.books.splice(bookIndex, 1); //remove the book at this index;
this.newBooks.splice(bookIndex, 1); //remove the editing book at this index
}
activateAddNewBook() {
this.isAddNewBook = true;
this.newBook = new Book(null, '', '');
}
cancelAddBook() {
this.isAddNewBook = false;
}
addNewBook(newBook: Book, element: any) {
//write new book to db
//on success:
this.books.push(newBook);
this.newBooks.push(newBook);
this.newBook = new Book(null, '', '');
element.focus();
}
} }

View File

@ -5,11 +5,13 @@ import {HttpModule} from "@angular/http";
import {AppComponent} from "./app.component"; import {AppComponent} from "./app.component";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap"; import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
import {RatingComponent} from "./rating/rating.component"; import {RatingComponent} from "./rating/rating.component";
import {ClickStopPropagationDirective} from "./click-stop-propagation.directive";
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
RatingComponent RatingComponent,
ClickStopPropagationDirective
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

View File

@ -0,0 +1,13 @@
import {Directive, HostListener} from "@angular/core";
@Directive({
selector: '[appClickStopPropagation]'
})
export class ClickStopPropagationDirective
{
@HostListener("click", ["$event"])
public onClick(event: any): void
{
event.stopPropagation();
}
}