Added a tab to view only deleted comics [#284]

comixed-web/src/app/library/library.module.ts

@@ -90,6 +90,7 @@ import { SelectedComicsComponent } from './components/selected-comics/selected-c
 import { OverlayModule } from '@angular/cdk/overlay';
 import { ComicDetailsDialogComponent } from './components/comic-details-dialog/comic-details-dialog.component';
 import { MatMenuModule } from '@angular/material/menu';
+import { DeletedComicsPipe } from './pipes/deleted-comics.pipe';
 
 @NgModule({
   declarations: [
@@ -118,7 +119,8 @@ import { MatMenuModule } from '@angular/material/menu';
     LibraryToolbarComponent,
     ScrapingComponent,
     SelectedComicsComponent,
-    ComicDetailsDialogComponent
+    ComicDetailsDialogComponent,
+    DeletedComicsPipe
   ],
   providers: [ComicTitlePipe],
   imports: [

comixed-web/src/app/library/pages/library/library.component.html

@@ -3,4 +3,18 @@
   [selected]="selected"
   [isAdmin]="isAdmin"
 ></cx-library-toolbar>
-<cx-comic-covers [comics]="comics" [selected]="selected"></cx-comic-covers>
+<mat-tab-group
+  mat-align-tabs="start"
+  [selectedIndex]="currentTab"
+  (selectedIndexChange)="onCurrentTabChanged($event)"
+>
+  <mat-tab [label]="'library.tab.all-comics' | translate">
+    <cx-comic-covers [comics]="comics" [selected]="selected"></cx-comic-covers>
+  </mat-tab>
+  <mat-tab [label]="'library.tab.deleted-comics' | translate">
+    <cx-comic-covers
+      [comics]="comics | deletedComics"
+      [selected]="selected"
+    ></cx-comic-covers>
+  </mat-tab>
+</mat-tab-group>

comixed-web/src/app/library/pages/library/library.component.spec.ts

@@ -49,6 +49,15 @@ import {
   USER_FEATURE_KEY
 } from '@app/user/reducers/user.reducer';
 import { MatMenuModule } from '@angular/material/menu';
+import {
+  ActivatedRoute,
+  ActivatedRouteSnapshot,
+  Router
+} from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { QUERY_PARAM_TAB } from '@app/library/library.constants';
+import { MatTabsModule } from '@angular/material/tabs';
+import { DeletedComicsPipe } from '@app/library/pipes/deleted-comics.pipe';
 
 describe('LibraryComponent', () => {
   const initialState = {
@@ -62,14 +71,17 @@ describe('LibraryComponent', () => {
   let store: MockStore<any>;
   let translateService: TranslateService;
   let titleService: TitleService;
+  let activatedRoute: ActivatedRoute;
+  let router: Router;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
         LibraryComponent,
         LibraryToolbarComponent,
         NavigationPaneComponent,
-        ComicCoversComponent
+        ComicCoversComponent,
+        DeletedComicsPipe
       ],
       imports: [
         NoopAnimationsModule,
@@ -85,9 +97,21 @@ describe('LibraryComponent', () => {
         MatFormFieldModule,
         MatTooltipModule,
         MatDialogModule,
-        MatMenuModule
+        MatMenuModule,
+        MatTabsModule
       ],
-      providers: [provideMockStore({ initialState }), TitleService]
+      providers: [
+        provideMockStore({ initialState }),
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParams: new BehaviorSubject<{}>({}),
+            params: new BehaviorSubject<{}>({}),
+            snapshot: {} as ActivatedRouteSnapshot
+          }
+        },
+        TitleService
+      ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(LibraryComponent);
@@ -96,6 +120,9 @@ describe('LibraryComponent', () => {
     translateService = TestBed.inject(TranslateService);
     titleService = TestBed.inject(TitleService);
     spyOn(titleService, 'setTitle');
+    activatedRoute = TestBed.inject(ActivatedRoute);
+    router = TestBed.inject(Router);
+    spyOn(router, 'navigate');
     fixture.detectChanges();
   }));
 
@@ -112,4 +139,20 @@ describe('LibraryComponent', () => {
       expect(titleService.setTitle).toHaveBeenCalledWith(jasmine.any(String));
     });
   });
+
+  describe('changing the displayed tab', () => {
+    const TAB = 3;
+
+    it('loads the tab from the URL', () => {
+      (activatedRoute.queryParams as BehaviorSubject<{}>).next({
+        [QUERY_PARAM_TAB]: `${TAB}`
+      });
+      expect(component.currentTab).toEqual(TAB);
+    });
+
+    it('updates the URL when the tab changes', () => {
+      component.onCurrentTabChanged(TAB);
+      expect(router.navigate).toHaveBeenCalled();
+    });
+  });
 });

comixed-web/src/app/library/pages/library/library.component.ts

@@ -26,11 +26,12 @@ import {
   selectLibraryBusy,
   selectSelectedComics
 } from '@app/library/selectors/library.selectors';
-import { TitleService } from '@app/core';
+import { TitleService, updateQueryParam } from '@app/core';
 import { TranslateService } from '@ngx-translate/core';
 import { setBusyState } from '@app/core/actions/busy.actions';
 import { selectUser } from '@app/user/selectors/user.selectors';
 import { isAdmin } from '@app/user/user.functions';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'cx-all-comics',
@@ -45,13 +46,26 @@ export class LibraryComponent implements OnInit, OnDestroy {
   langChangeSubscription: Subscription;
   userSubscription: Subscription;
   isAdmin = false;
+  currentTab = 0;
+  paramSubscription: Subscription;
+  readonly TAB_PARAMETER = 'tab';
 
   constructor(
     private logger: LoggerService,
     private store: Store<any>,
     private titleService: TitleService,
-    private translateService: TranslateService
+    private translateService: TranslateService,
+    private activatedRoute: ActivatedRoute,
+    private router: Router
   ) {
+    this.paramSubscription = this.activatedRoute.queryParams.subscribe(
+      params => {
+        if (+params[this.TAB_PARAMETER]) {
+          this.logger.debug('Setting current tab:', params[this.TAB_PARAMETER]);
+          this.currentTab = +params[this.TAB_PARAMETER];
+        }
+      }
+    );
     this.libraryBusySubscription = this.store
       .select(selectLibraryBusy)
       .subscribe(busy => this.store.dispatch(setBusyState({ enabled: busy })));
@@ -93,6 +107,16 @@ export class LibraryComponent implements OnInit, OnDestroy {
     this.langChangeSubscription.unsubscribe();
   }
 
+  onCurrentTabChanged(tab: number): void {
+    this.logger.debug('Changing current tab:', tab);
+    updateQueryParam(
+      this.activatedRoute,
+      this.router,
+      this.TAB_PARAMETER,
+      `${tab}`
+    );
+  }
+
   private loadTranslations(): void {
     this.logger.trace('Setting page title');
     this.titleService.setTitle(

comixed-web/src/app/library/pipes/deleted-comics.pipe.spec.ts

@@ -0,0 +1,48 @@
+/*
+ * ComiXed - A digital comic book library management application.
+ * Copyright (C) 2020, The ComiXed Project
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses>
+ */
+
+import { DeletedComicsPipe } from './deleted-comics.pipe';
+import {
+  COMIC_1,
+  COMIC_2,
+  COMIC_3,
+  COMIC_4
+} from '@app/library/library.fixtures';
+import { Comic } from '@app/library';
+
+describe('DeletedComicsPipe', () => {
+  const DELETED_COMIC: Comic = {
+    ...COMIC_1,
+    deletedDate: new Date().getTime()
+  };
+  const COMICS = [DELETED_COMIC, COMIC_2, COMIC_3, COMIC_4];
+
+  let pipe: DeletedComicsPipe;
+
+  beforeEach(() => {
+    pipe = new DeletedComicsPipe();
+  });
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('returns only deleted comics', () => {
+    expect(pipe.transform(COMICS)).toEqual([DELETED_COMIC]);
+  });
+});

comixed-web/src/app/library/pipes/deleted-comics.pipe.ts

@@ -0,0 +1,29 @@
+/*
+ * ComiXed - A digital comic book library management application.
+ * Copyright (C) 2020, The ComiXed Project
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses>
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { Comic } from '@app/library';
+
+@Pipe({
+  name: 'deletedComics'
+})
+export class DeletedComicsPipe implements PipeTransform {
+  transform(comics: Comic[]): Comic[] {
+    return comics.filter(comic => !!comic.deletedDate);
+  }
+}

comixed-web/src/assets/i18n/en/library.json

@@ -130,6 +130,10 @@
       "locations": "Locations",
       "stories": "Stories"
     },
+    "tab": {
+      "all-comics": "All",
+      "deleted-comics": "Deleted"
+    },
     "tooltip": {
       "deselect-all": "Mark no comics as selected.",
       "navigation-tree": "Show the library tree view",

comixed-web/src/assets/i18n/es/library.json

@@ -130,6 +130,10 @@
       "locations": "Locations",
       "stories": "Stories"
     },
+    "tab": {
+      "all-comics": "All",
+      "deleted-comics": "Deleted"
+    },
     "tooltip": {
       "deselect-all": "Mark no comics as selected.",
       "navigation-tree": "Show the library tree view",

comixed-web/src/assets/i18n/fr/library.json

@@ -130,6 +130,10 @@
       "locations": "Locations",
       "stories": "Stories"
     },
+    "tab": {
+      "all-comics": "All",
+      "deleted-comics": "Deleted"
+    },
     "tooltip": {
       "deselect-all": "Mark no comics as selected.",
       "navigation-tree": "Show the library tree view",

comixed-web/src/assets/i18n/pt/library.json

@@ -130,6 +130,10 @@
       "locations": "Locations",
       "stories": "Stories"
     },
+    "tab": {
+      "all-comics": "All",
+      "deleted-comics": "Deleted"
+    },
     "tooltip": {
       "deselect-all": "Mark no comics as selected.",
       "navigation-tree": "Show the library tree view",