-
{{ bookMetadata.title }}
+{{ bookMetadata.title }}
({{ bookMetadata.reviewCount || 0 }} Reviews)
diff --git a/booklore-ui/src/app/book/component/book-browser/book-browser.component.html b/booklore-ui/src/app/book/component/book-browser/book-browser.component.html index 99c84d570..0000e2006 100644 --- a/booklore-ui/src/app/book/component/book-browser/book-browser.component.html +++ b/booklore-ui/src/app/book/component/book-browser/book-browser.component.html @@ -7,15 +7,8 @@All Books
-
-
-
+
@@ -23,74 +16,69 @@
-
-
-
-
-
-
-
-
-
-
-
-
- - {{ entityType === EntityType.LIBRARY ? "Failed to load library's books!" : "Failed to load shelf's books!" }} -
-
-
- {{ entityType === EntityType.LIBRARY ? "This library has no books!" : "This shelf has no books!" }} -
+
+
+
-
-
-
- ): void {
+ this.selectedBooks = new Set(selectedBookIds);
+ this.isDrawerVisible = this.selectedBooks.size > 0;
+ }
+
deselectAllBooks(): void {
this.selectedBooks.clear();
this.isDrawerVisible = false;
+ this.bookTableComponent.clearSelectedBooks();
+ }
+
+ viewChanged(event : SelectButtonChangeEvent) {
+ this.selectedBooks.clear();
+ this.isDrawerVisible = false;
}
unshelfBooks() {
@@ -285,6 +303,4 @@ export class BookBrowserComponent implements OnInit {
this.selectedBooks.clear();
});
}
-
- protected readonly EntityType = EntityType;
}
diff --git a/booklore-ui/src/app/book/component/book-card/book-card.component.ts b/booklore-ui/src/app/book/component/book-card/book-card.component.ts
index 18f96084f..43a74544a 100644
--- a/booklore-ui/src/app/book/component/book-card/book-card.component.ts
+++ b/booklore-ui/src/app/book/component/book-card/book-card.component.ts
@@ -34,11 +34,7 @@ export class BookCardComponent implements OnInit {
items: MenuItem[] | undefined;
isHovered: boolean = false;
- constructor(
- private bookService: BookService,
- private router: Router,
- private dialogService: DialogService
- ) {
+ constructor(private bookService: BookService, private dialogService: DialogService) {
}
ngOnInit(): void {
diff --git a/booklore-ui/src/app/book/component/book-table/book-table.component.html b/booklore-ui/src/app/book/component/book-table/book-table.component.html
index 60ff4ff8b..c099edbbe 100644
--- a/booklore-ui/src/app/book/component/book-table/book-table.component.html
+++ b/booklore-ui/src/app/book/component/book-table/book-table.component.html
@@ -1,41 +1,36 @@
-
+
+
+ Cover
+ Title
+ Publisher
+ Subtitle
+ ISBN
+ Language
+ Rating
+
+
+
+
+
+
+ ![Book Cover]()
{{ book.metadata?.title }}
+ {{ book.metadata?.publisher }}
+ {{ book.metadata?.subtitle }}
+ {{ book.metadata?.isbn10 }}
+ {{ book.metadata?.language }}
+
+
+
+
+
+
+
+
+
diff --git a/booklore-ui/src/app/book/component/book-table/book-table.component.scss b/booklore-ui/src/app/book/component/book-table/book-table.component.scss
index e69de29bb..bb17ab4b1 100644
--- a/booklore-ui/src/app/book/component/book-table/book-table.component.scss
+++ b/booklore-ui/src/app/book/component/book-table/book-table.component.scss
@@ -0,0 +1,6 @@
+/*
+.p-datatable-flex-scrollable .p-datatable-wrapper {
+ flex-basis: auto !important;
+ height: 0 !important;
+}
+*/
diff --git a/booklore-ui/src/app/book/component/book-table/book-table.component.ts b/booklore-ui/src/app/book/component/book-table/book-table.component.ts
index df51ba8bc..985a777bf 100644
--- a/booklore-ui/src/app/book/component/book-table/book-table.component.ts
+++ b/booklore-ui/src/app/book/component/book-table/book-table.component.ts
@@ -1,14 +1,12 @@
-import { Component } from '@angular/core';
-import {Observable} from 'rxjs';
-import {BookState} from '../../model/state/book-state.model';
+import {ChangeDetectorRef, Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges} from '@angular/core';
import {TableModule} from 'primeng/table';
-import {AsyncPipe, NgIf} from '@angular/common';
-import {ProgressSpinner} from 'primeng/progressspinner';
+import {NgIf} from '@angular/common';
import {BookService} from '../../service/book.service';
import {Rating} from 'primeng/rating';
import {FormsModule} from '@angular/forms';
import {BookMetadataCenterComponent} from '../../../book-metadata-center/book-metadata-center.component';
import {DialogService} from 'primeng/dynamicdialog';
+import {Book} from '../../model/book.model';
@Component({
selector: 'app-book-table',
@@ -16,31 +14,58 @@ import {DialogService} from 'primeng/dynamicdialog';
templateUrl: './book-table.component.html',
imports: [
TableModule,
- AsyncPipe,
NgIf,
- ProgressSpinner,
Rating,
FormsModule
],
styleUrl: './book-table.component.scss'
})
export class BookTableComponent {
- bookState$: Observable;
+ selectedBooks: Book[] = [];
+ selectedBookIds: Set = new Set();
- constructor(private bookService: BookService, private dialogService: DialogService) {
- this.bookState$ = this.bookService.bookState$;
+ @Output() selectedBooksChange = new EventEmitter>();
+ @Input() books: Book[] = [];
+
+ constructor(private bookService: BookService, private dialogService: DialogService, private zone: NgZone) {
+ }
+
+ clearSelectedBooks(): void {
+ this.selectedBookIds.clear();
+ this.selectedBooks = [];
+ this.selectedBooksChange.emit(this.selectedBookIds);
+ }
+
+ onRowSelect(event: any): void {
+ this.selectedBookIds.add(event.data.id);
+ this.selectedBooksChange.emit(this.selectedBookIds);
+ }
+
+ onRowUnselect(event: any): void {
+ this.selectedBookIds.delete(event.data.id);
+ this.selectedBooksChange.emit(this.selectedBookIds);
+ }
+
+ onHeaderCheckboxToggle(event: any): void {
+ if (event.checked) {
+ this.selectedBooks = [...this.books];
+ this.selectedBookIds = new Set(this.books.map(book => book.id));
+ } else {
+ this.clearSelectedBooks();
+ }
+ this.selectedBooksChange.emit(this.selectedBookIds);
}
getBookCoverUrl(bookId: number): string {
return this.bookService.getBookCoverUrl(bookId);
}
- openMetadataCenter(id: number) {
+ openMetadataCenter(id: number): void {
this.openBookDetailsDialog(id);
}
openBookDetailsDialog(bookId: number): void {
- this.bookService.getBookByIdFromAPI(bookId, true).subscribe(({
+ this.bookService.getBookByIdFromAPI(bookId, true).subscribe({
next: (book) => {
this.dialogService.open(BookMetadataCenterComponent, {
header: 'Open book details',
@@ -59,6 +84,6 @@ export class BookTableComponent {
error: (error) => {
console.error('Error fetching book:', error);
}
- }))
+ });
}
}
-
-
+
-
diff --git a/booklore-ui/src/app/book/component/book-browser/book-browser.component.scss b/booklore-ui/src/app/book/component/book-browser/book-browser.component.scss
index c816a893a..3383a7da3 100644
--- a/booklore-ui/src/app/book/component/book-browser/book-browser.component.scss
+++ b/booklore-ui/src/app/book/component/book-browser/book-browser.component.scss
@@ -23,12 +23,6 @@
align-items: center;
}
-.zoom-controls {
- display: flex;
- gap: 1rem;
- align-items: center;
-}
-
.virtual-scroller-container {
position: relative;
diff --git a/booklore-ui/src/app/book/component/book-browser/book-browser.component.ts b/booklore-ui/src/app/book/component/book-browser/book-browser.component.ts
index 635760ab4..565873ff6 100644
--- a/booklore-ui/src/app/book/component/book-browser/book-browser.component.ts
+++ b/booklore-ui/src/app/book/component/book-browser/book-browser.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {MenuItem, MessageService} from 'primeng/api';
import {LibraryService} from '../../service/library.service';
@@ -16,6 +16,8 @@ import {SortOption} from '../../model/sort.model';
import {BookState} from '../../model/state/book-state.model';
import {Book} from '../../model/book.model';
import {LibraryShelfMenuService} from '../../service/library-shelf-menu.service';
+import {SelectButtonChangeEvent} from 'primeng/selectbutton';
+import {BookTableComponent} from '../book-table/book-table.component';
export enum EntityType {
LIBRARY = 'Library',
@@ -44,6 +46,12 @@ export class BookBrowserComponent implements OnInit {
sortOptions: SortOption[] = [];
isDrawerVisible: boolean = false;
dynamicDialogRef: DynamicDialogRef | undefined;
+ EntityType = EntityType;
+
+ stateOptions: any[] = [{ label: 'Grid', value: 'grid' },{ label: 'Table', value: 'table' }];
+ value: string = 'table';
+
+ @ViewChild(BookTableComponent) bookTableComponent!: BookTableComponent;
constructor(
private activatedRoute: ActivatedRoute,
@@ -91,7 +99,6 @@ export class BookBrowserComponent implements OnInit {
this.bookTitle$.next('');
this.bookTitle = '';
});
-
}
private getEntityInfoFromRoute(): Observable<{ entityId: number; entityType: EntityType }> {
@@ -214,9 +221,20 @@ export class BookBrowserComponent implements OnInit {
this.isDrawerVisible = this.selectedBooks.size > 0;
}
+ onSelectedBooksChange(selectedBookIds: Set
+
+
+
+
+ + {{ entityType === EntityType.LIBRARY ? "Failed to load library's books!" : "Failed to load shelf's books!" }} +
+
+
+
+ + {{ entityType === EntityType.LIBRARY ? "This library has no books!" : "This shelf has no books!" }} +
+
+
+
-
-
+
-
+
+
+
-
-
-
-
-
-
- Cover
- Title
- Publisher
- Subtitle
- ISBN
- Language
- Rating
-
-
-
-
-
-
- ![Book Cover]()
{{ book.metadata?.title }}
- {{ book.metadata?.publisher }}
- {{ book.metadata?.subtitle }}
- {{ book.metadata?.isbn10 }}
- {{ book.metadata?.language }}
-
-
-
-
-
-
-
-
-
-
+