BAEL-797 Adding admin actions for books
This commit is contained in:
tschiman
parent
62f8bba29c
commit
19a1e837ea
@ -0,0 +1,3 @@
|
||||
.custom-close {
|
||||
float:right;
|
||||
}
|
||||
@ -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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</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">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
</ul>
|
||||
@ -36,12 +36,56 @@
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<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-block">
|
||||
<h4 class="card-title">Title: {{book.title}}</h4>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Author: {{book.author}}</h6>
|
||||
<p class="card-text">A quick summary of the book</p>
|
||||
<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>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Author: {{book.author}}</h6>
|
||||
</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>
|
||||
|
||||
|
||||
@ -24,10 +24,17 @@ export class AppComponent {
|
||||
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;
|
||||
|
||||
booksToEdit: number[] = [];
|
||||
|
||||
newBooks: Book[] = [];
|
||||
isAddNewBook: boolean = false;
|
||||
newBook: Book = new Book(null, '', '');
|
||||
|
||||
constructor(private http: Http){}
|
||||
|
||||
ngOnInit(): void {
|
||||
@ -84,6 +91,7 @@ export class AppComponent {
|
||||
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');
|
||||
this.books.push(book, book1, book2);
|
||||
this.books.forEach(book => this.newBooks.push(new Book(book.id, book.author, book.title)))
|
||||
}
|
||||
|
||||
selectBook(book: Book) {
|
||||
@ -94,4 +102,54 @@ export class AppComponent {
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -5,11 +5,13 @@ import {HttpModule} from "@angular/http";
|
||||
import {AppComponent} from "./app.component";
|
||||
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
|
||||
import {RatingComponent} from "./rating/rating.component";
|
||||
import {ClickStopPropagationDirective} from "./click-stop-propagation.directive";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
RatingComponent
|
||||
RatingComponent,
|
||||
ClickStopPropagationDirective
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user