Prepare to fix more bugs.

Author: gnu4cn

electron/db.sqlite

@@ -31,7 +31,7 @@
                     <button mat-button *ngIf="book.downloaded" (click)="openReadmeDialog(book.desc)">
                         <ion-icon name="compass-outline"></ion-icon>README.md
                     </button>
-                    <button mat-button *ngIf="book.downloaded" (click)="book.open(book)">
+                    <button mat-button *ngIf="book.downloaded" (click)="openBook(book)">
                         <ion-icon name="book-outline"></ion-icon>阅读
                     </button>
                     <button id="{{ 'download-book-' + book.id }}" mat-button 

src/app/home/components/book-list.component.html

@@ -1,6 +1,8 @@
 import { 
     Component, 
     OnInit, 
+    OnChanges,
+    SimpleChanges,
     Input
 } from '@angular/core';
 
@@ -22,22 +24,30 @@ import { ReadmeDialog } from './readme-dialog.component';
 import { 
     sortBy,
     IFilter,
-} from '../../vendor';
-
-import { 
     IDeleteBookDialogResData,
+    IFilterAction,
+    IFilterItem,
     TBookSortBy,
     filterFn,
-} from '../vendor';
+} from '../../vendor';
 
 @Component({
     selector: 'app-book-list',
     templateUrl: './book-list.component.html',
     styleUrls: ['./book-list.component.scss'],
 })
-export class BookListComponent implements OnInit {
-    @Input() filter: IFilter;
-    @Input() sortBy: TBookSortBy;
+export class BookListComponent implements OnInit, OnChanges {
+    @Input() sortBy: string;
+    @Input() displayRecycled: boolean;
+    @Input() beenOpened: boolean;
+
+    filter: IFilter = {
+        displayRecycled: this.displayRecycled,
+        isOpened: this.beenOpened,
+        filterList: []
+    };
+
+    bookList: Array<Book>;
 
     constructor(
         private crud: CrudService,
@@ -46,14 +56,47 @@ export class BookListComponent implements OnInit {
         private opMessage: OpMessageService
     ) {}
 
-    ngOnInit() {}
-    
-    get bookList () {
-        return sortBy(this.book.list
-            .filter(b => filterFn(b, this.filter)), 
-            this.sortBy);
+    loadBookList = async () => {
+        const bookList = await this.book.getList(this.filter).slice();
+        return sortBy(bookList, this.sortBy);
+    };
+
+    ngOnInit() {
+        this.loadBookList().then(list => this.bookList = list.slice());
     }
 
+    ngOnChanges (changes: SimpleChanges) {
+        if ('sortBy' in changes) {
+            if(changes.displayRecycled) this.filter.displayRecycled = changes.displayRecycled.currentValue;
+            if(changes.beenOpened) this.filter.isOpened = changes.beenOpened.currentValue;
+
+            this.loadBookList().then(list => this.bookList = list.slice());
+        }
+    }
+
+    changeFilter = (filterAction: IFilterAction) => {
+        let index: number;
+        switch (filterAction.action){
+            case 'add':
+                index = this.filter.filterList.findIndex((filterItem: IFilterItem) => {
+                    const key = Object.keys(filterItem)[0];
+                    const _key = Object.keys(filterAction.filterItem)[0];
+                    return key === _key && filterItem[key].id === filterAction[key].id;
+                });
+
+                if(index < 0)this.filter.filterList.push(filterAction.filterItem);
+                break;
+            case 'remove':
+                index = this.filter.filterList.findIndex((filterItem: IFilterItem) => {
+                    const key = Object.keys(filterItem)[0];
+                    const _key = Object.keys(filterAction.filterItem)[0];
+                    return key === _key && filterItem[key].id === filterAction[key].id;
+                });
+
+                if(index >= 0)this.filter.filterList.splice(index, 1);
+                break;
+        }
+    }
     startDownload = (book: Book) => {
         this.crud.ipcRenderer.send('download-book', book);
         document
@@ -75,6 +118,10 @@ export class BookListComponent implements OnInit {
         });
     }
 
+    openBook = (book: Book) => {
+        this.book.open(book);
+    }
+
     openEditBookCateListDialog = (book: Book) => {
         const dialogRef = this.dialog.open(EditBookCateListDialog, {
             width: '480px',

src/app/home/components/book-list.component.ts

@@ -12,7 +12,7 @@ import {
 
 import { 
     IDeleteBookDialogResData,
-} from '../vendor';
+} from '../../vendor';
 
 import { Book } from '../../models';
 
@@ -43,6 +43,7 @@ export class DeleteBookDialog implements OnInit{
         remove: false,
         book: this.data
     }
+
     ngOnInit() {}
 
     onNoClick(): void {

src/app/home/components/delete-book-dialog.component.ts

@@ -16,18 +16,12 @@ import {
 import { MatAutocompleteSelectedEvent, MatAutocomplete} from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
 
-import { 
-    Category, 
-} from '../../models';
-
+import { Category } from '../../models';
 import { 
     IsQualifiedAndNotExistedGitRepoValidatorFn,
     REGEXP_ZH,
-} from '../../vendor';
-
-import { 
     IAddBookDialogResData, 
-} from '../vendor';
+} from '../../vendor';
 
 import { BookService } from '../services/book.service';
 import { CateService } from '../services/cate.service';

src/app/home/components/new-book-dialog.component.ts

@@ -17,10 +17,10 @@
                     <!-- 正在看的书, 打开次数大于 0 的书 -->
                     <ion-col>
                         <ion-badge color="success" style="position: absolute; right: 0px; top: 0px; overflow: visible!important;">
-                            {{bookListCurrentlyReading.length}}
+                            {{currentlyReadingNumber}}
                         </ion-badge>
                         <ion-fab-button 
-                            color="light" (click)="displayCurrentlyReadingBookList()" matTooltip="正在看的书">
+                            color="light" (click)="displayBookListCurrentlyReading()" matTooltip="正在看的书">
                             <ion-avatar id="avatar-currently-reading">
                                 <img src="assets/images/currently-reading-books.png" />
                             </ion-avatar>
@@ -30,7 +30,7 @@
                     <!-- 书架上的书, 打开 0 次的书 -->
                     <ion-col>
                         <ion-badge color="success" style="position: absolute; right: 0px; top: 0px; overflow: visible!important;">
-                            {{bookListOnShelf.length}}
+                            {{onShelfNumber}}
                         </ion-badge>
                         <ion-fab-button color="light" (click)="displayBookListOnShelf()" matTooltip="书架上的书">
                             <ion-avatar id="avatar-on-shelf">
@@ -42,10 +42,10 @@
                     <!-- 准备删除的书 -->
                     <ion-col>
                         <ion-badge color="warning" style="position: absolute; right: 0px; top: 0px; overflow: visible!important;">
-                            {{bookListRecycled.length}}
+                            {{recycledNumber}}
                         </ion-badge>
 
-                        <ion-fab-button color="light" (click)="displayRecycledBookList()" matTooltip="暂存在回收站的书">
+                        <ion-fab-button color="light" (click)="displayBookListRecycled()" matTooltip="暂存在回收站的书">
                             <ion-avatar id="avatar-recycled">
                                 <img src="assets/images/trash_full_512x512.png" />
                             </ion-avatar>
@@ -58,6 +58,6 @@
 </ion-header>
 <ion-content padding>
     <section class="book-list">
-        <app-book-list [bookListDisplay]="bookListDisplay" [cateList]="cateList"></app-book-list>
+        <app-book-list [sortBy]="sortBy" [beenOpened]="beenOpened" [displayRecycled]="displayRecycled"></app-book-list>
     </section>
 </ion-content>

src/app/home/home.page.html

@@ -1,5 +1,4 @@
 import { Component, 
-    ChangeDetectorRef,
     OnInit } from '@angular/core';
 
 import { 
@@ -21,16 +20,13 @@ import { SnackbarComponent } from './components/snackbar.component';
 import { NewBookDialog } from './components/new-book-dialog.component';
 
 import { 
-    IFilterItem,
-    IFilter,
     IProgressMessage,
-    IFilterAction,
+    IAddBookDialogResData,
+    IFilter,
+    TAvatarIds, 
+    TBookSortBy,
 } from '../vendor';
 
-import { IAddBookDialogResData } from './vendor';
-
-import { TAvatarIds } from './vendor';
-
 @Component({
     selector: 'app-home',
     templateUrl: './home.page.html',
@@ -42,23 +38,18 @@ export class HomePage implements OnInit {
 
     downloadingList: Array<number> = [];
 
-    private _filter: IFilter = {
-        displayRecycled: false,
-        isOpened: false,
-        filterList: []
-    };
-
-    get filter () {
-        return this._filter;
-    }
-
+    sortBy: TBookSortBy = 'openCount';
+    displayRecycled: boolean = false;
+    beenOpened: boolean = true;
+    
     constructor(
         private crud: CrudService,
         private snackbar: MatSnackBar,
         private dialog: MatDialog,
         private book: BookService,
     ) {}
 
+
     private changeFabButton = (button: TAvatarIds) => {
         const buttonList = ['currently-reading', 'on-shelf', 'recycled'];
         document.getElementById(`avatar-${button}`)
@@ -73,6 +64,29 @@ export class HomePage implements OnInit {
         });
     } 
 
+    get currentlyReadingNumber () {
+        const currentlyReadingFilter: IFilter = {
+            displayRecycled: false,
+            isOpened: true,
+        }
+        return this.book.getList(currentlyReadingFilter).length
+    }
+
+    get onShelfNumber () {
+        const onShelfFilter: IFilter = {
+            displayRecycled: false,
+            isOpened: true,
+        }
+        return this.book.getList(onShelfFilter).length
+    }
+
+    get recycledNumber () {
+        const recycledFilter: IFilter = {
+            displayRecycled: true,
+        }
+        return this.book.getList(recycledFilter).length;
+    }
+
     ngOnInit() {
         this.crud.ipcRenderer.on('error-occured', (ev, book: Book) => {
             this.book.bookUpdated(book);
@@ -109,29 +123,30 @@ export class HomePage implements OnInit {
         });
     }
 
-    changeFilter = (filterAction: IFilterAction) => {
-        let index: number;
-        switch (filterAction.action){
-            case 'add':
-                index = this.filter.filterList.findIndex((filterItem: IFilterItem) => {
-                    const key = Object.keys(filterItem)[0];
-                    const _key = Object.keys(filterAction.filterItem)[0];
-                    return key === _key && filterItem[key].id === filterAction[key].id;
-                });
+    displayBookListCurrentlyReading = () => {
+        this.displayRecycled = false;
+        this.beenOpened = true;
 
-                if(index < 0)this.filter.filterList.push(filterAction.filterItem);
-                break;
-            case 'remove':
-                index = this.filter.filterList.findIndex((filterItem: IFilterItem) => {
-                    const key = Object.keys(filterItem)[0];
-                    const _key = Object.keys(filterAction.filterItem)[0];
-                    return key === _key && filterItem[key].id === filterAction[key].id;
-                });
+        this.sortBy = 'openCount';
 
-                if(index >= 0)this.filter.filterList.splice(index, 1);
-                break;
-        }
+        this.changeFabButton('currently-reading');
+    }
+
+    displayBookListOnShelf = () => {
+        this.displayRecycled = false;
+        this.beenOpened = false;
+
+        this.sortBy = 'dateCreated';
+
+        this.changeFabButton('on-shelf');
+    }
+
+    displayBookListRecycled = () => {
+        this.displayRecycled = true;
+
+        this.sortBy = 'dateUpdated';
 
+        this.changeFabButton('recycled');
     }
 
     openAddBookDialog = () => {

src/app/home/home.page.ts

@@ -8,30 +8,28 @@ import { WebsiteService } from './website.service';
 import { CateService } from './cate.service';
 
 import { 
+    IFilter,
+    filterFn,
     IQuery,
+    IQueryResult,
     REGEXP_SITE, 
     REGEXP_LOC,
-    IQueryResult,
-    IFilterItem,
-    IFilter,
-    IProgressMessage,
-    IFilterAction,
-    IFind,
-    IMessage
-} from '../../vendor';
-
-import { IAddBookDialogResData } from '../vendor';
-
-import {
+    IAddBookDialogResData,
     IDeleteBookDialogResData,
-} from '../vendor';
+} from '../../vendor';
 
 @Injectable({
     providedIn: 'root'
 })
 export class BookService {
     private _list: Array<Book>;
 
+    private _filter: IFilter = {
+        displayRecycled: false,
+        isOpened: false,
+        filterList: []
+    };
+
     constructor(
         private crud: CrudService,
         private opMessage: OpMessageService,
@@ -57,6 +55,10 @@ export class BookService {
         this._list.push(book);
     }
 
+    getList = (filter: IFilter) => {
+        return this.list.filter(b => filterFn(b, filter));
+    }
+
     bookDeleted = (book: Book) => {
         const index = this._list.findIndex(b => b.id === book.id);
         this._list.splice(index, 1);