BAEL-797 moving book list to its own component
This commit is contained in:
tschiman
parent
961ece8f76
commit
be326a42ad
|
|
@ -36,59 +36,8 @@
|
|||
<div class="row">
|
||||
<div class="col-md">
|
||||
<div class="row">
|
||||
<div class="col-md-12" *ngFor="let book of books; let i = index;" (click)="selectBook(book)">
|
||||
<div class="card">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div class="col-md-12">
|
||||
<app-book-list [principal]="principal" (onBookSelected)="selectBook($event)"></app-book-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,6 @@ export class AppComponent {
|
|||
password: ''
|
||||
};
|
||||
|
||||
books: Book[] = [];
|
||||
|
||||
selectedBook: Book = null;
|
||||
|
||||
private username: String = '';
|
||||
|
|
@ -29,16 +27,10 @@ export class AppComponent {
|
|||
|
||||
loginFailed: boolean = false;
|
||||
|
||||
booksToEdit: number[] = [];
|
||||
|
||||
newBooks: Book[] = [];
|
||||
isAddNewBook: boolean = false;
|
||||
newBook: Book = new Book(null, '', '');
|
||||
|
||||
constructor(private http: Http){}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadBooks();
|
||||
|
||||
}
|
||||
|
||||
onLogin(form: NgForm) {
|
||||
|
|
@ -86,70 +78,12 @@ export class AppComponent {
|
|||
});
|
||||
}
|
||||
|
||||
loadBooks() {
|
||||
let book: Book = new Book(1, 'Tom Sawyer', 'Huckleberry Finn');
|
||||
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)))
|
||||
closeBookDetail() {
|
||||
this.selectedBook = null;
|
||||
}
|
||||
|
||||
selectBook(book: Book) {
|
||||
this.selectedBook = book;
|
||||
}
|
||||
|
||||
closeBookDetail() {
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,15 @@ import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
|
|||
import {RatingComponent} from "./rating/rating.component";
|
||||
import {ClickStopPropagationDirective} from "./click-stop-propagation.directive";
|
||||
import {BookDetailComponent} from "./book/book-detail/book-detail.component";
|
||||
import {BookListComponent} from "./book/book-list/book-list.component";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
RatingComponent,
|
||||
ClickStopPropagationDirective,
|
||||
BookDetailComponent
|
||||
BookDetailComponent,
|
||||
BookListComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
<div class="col-md-12" *ngFor="let book of books; let i = index;" (click)="selectBook(book)">
|
||||
<div class="card">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import {Component, OnInit, Input, Output, EventEmitter} from "@angular/core";
|
||||
import {Principal} from "../../principal";
|
||||
import {Book} from "../../book";
|
||||
|
||||
@Component({
|
||||
selector: 'app-book-list',
|
||||
templateUrl: './book-list.component.html',
|
||||
styleUrls: ['./book-list.component.css']
|
||||
})
|
||||
export class BookListComponent implements OnInit {
|
||||
|
||||
@Input() principal: Principal = null;
|
||||
@Output() onBookSelected: EventEmitter<Book> = new EventEmitter<Book>();
|
||||
|
||||
books: Book[] = [];
|
||||
newBooks: Book[] = [];
|
||||
newBook: Book = new Book(null, '', '');
|
||||
booksToEdit: number[] = [];
|
||||
isAddNewBook: boolean = false;
|
||||
selectedBook: Book = null;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.loadBooks();
|
||||
}
|
||||
|
||||
loadBooks() {
|
||||
let book: Book = new Book(1, 'Tom Sawyer', 'Huckleberry Finn');
|
||||
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)))
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
editBook(bookIndex: number) {
|
||||
this.booksToEdit.push(bookIndex);
|
||||
}
|
||||
|
||||
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, '', '');
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
cancelAddBook() {
|
||||
this.isAddNewBook = false;
|
||||
}
|
||||
|
||||
|
||||
selectBook(book: Book) {
|
||||
this.selectedBook = book;
|
||||
this.onBookSelected.emit(book);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue