BAEL-797 moving book detail to it's own component

This commit is contained in:
tschiman 2017-04-19 00:13:04 -06:00
parent 19a1e837ea
commit 961ece8f76
5 changed files with 41 additions and 12 deletions

View File

@ -93,17 +93,7 @@
</div>
</div>
<div *ngIf="selectedBook != null" class="col-md-3">
<div class="card">
<div class="card-block">
<button type="button" class="close" aria-label="Close" (click)="closeBookDetail()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="card-title">Title: {{selectedBook.title}}</h4>
<h6 class="card-subtitle mb-2 text-muted">Author: {{selectedBook.author}}</h6>
<p class="card-text">A quick summary of the book</p>
<app-rating *ngIf="principal.authenticated" [bookId]="selectedBook.id"></app-rating>
</div>
</div>
<app-book-detail [selectedBook]="selectedBook" [principal]="principal" (closeBook)="closeBookDetail()"></app-book-detail>
</div>
</div>
</div>

View File

@ -6,12 +6,14 @@ 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";
import {BookDetailComponent} from "./book/book-detail/book-detail.component";
@NgModule({
declarations: [
AppComponent,
RatingComponent,
ClickStopPropagationDirective
ClickStopPropagationDirective,
BookDetailComponent
],
imports: [
BrowserModule,

View File

@ -0,0 +1,11 @@
<div class="card">
<div class="card-block">
<button type="button" class="close" aria-label="Close" (click)="closeBookDetail()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="card-title">Title: {{selectedBook.title}}</h4>
<h6 class="card-subtitle mb-2 text-muted">Author: {{selectedBook.author}}</h6>
<p class="card-text">A quick summary of the book</p>
<app-rating *ngIf="principal.authenticated" [bookId]="selectedBook.id"></app-rating>
</div>
</div>

View File

@ -0,0 +1,26 @@
import {Component, OnInit, Input, Output, EventEmitter} from "@angular/core";
import {Book} from "../../book";
import {Principal} from "../../principal";
@Component({
selector: 'app-book-detail',
templateUrl: './book-detail.component.html',
styleUrls: ['./book-detail.component.css']
})
export class BookDetailComponent implements OnInit {
@Input() selectedBook: Book = null;
@Input() principal: Principal = null;
@Output() closeBook: EventEmitter<any> = new EventEmitter<any>();
constructor() { }
ngOnInit() {
}
closeBookDetail() {
this.closeBook.emit(null);
}
}