Added a toolbar for selecting and deselecting all comics [#584]

 * Added the toolbar to the library page.
 * Added the toolbar to the comic group page.
 * Renamed AllComics => Library.
 * Renamed ComicGroup => LibraryGroup.

comixed-web/src/app/library/components/library-toolbar/library-toolbar.component.html

@@ -0,0 +1,27 @@
+<mat-toolbar>
+  <div class="cx-spacer"></div>
+  <button
+    id="select-all-button"
+    mat-flat-button
+    color="primary"
+    class="cx-action-button cx-margin-right-5"
+    [disabled]="!comics.length"
+    [matTooltip]="'library.tooltip.select-all' | translate"
+    (click)="onSelectAll()"
+  >
+    <mat-icon>check_box</mat-icon>
+    <mat-label>{{ "button.select-all" | translate }}</mat-label>
+  </button>
+  <button
+    id="deselect-all-button"
+    mat-flat-button
+    color="warn"
+    class="cx-action-button cx-margin-right-5"
+    [disabled]="!selected.length"
+    [matTooltip]="'library.tooltip.deselect-all' | translate"
+    (click)="onDeselectAll()"
+  >
+    <mat-icon>check_box</mat-icon>
+    <mat-label>{{ "button.deselect-all" | translate }}</mat-label>
+  </button>
+</mat-toolbar>

comixed-web/src/app/library/components/library-toolbar/library-toolbar.component.spec.ts

@@ -0,0 +1,92 @@
+/*
+ * ComiXed - A digital comic book library management application.
+ * Copyright (C) 2021, 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { LibraryToolbarComponent } from './library-toolbar.component';
+import { LoggerModule } from '@angular-ru/logger';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { COMIC_1, COMIC_2, COMIC_3 } from '@app/library/library.fixtures';
+import {
+  deselectComics,
+  selectComics
+} from '@app/library/actions/library.actions';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatToolbar, MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+describe('LibraryToolbarComponent', () => {
+  const COMICS = [COMIC_1, COMIC_2, COMIC_3];
+  const initialState = {};
+
+  let component: LibraryToolbarComponent;
+  let fixture: ComponentFixture<LibraryToolbarComponent>;
+  let store: MockStore<any>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LibraryToolbarComponent],
+      imports: [
+        LoggerModule.forRoot(),
+        TranslateModule.forRoot(),
+        MatToolbarModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatTooltipModule
+      ],
+      providers: [provideMockStore({ initialState })]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LibraryToolbarComponent);
+    component = fixture.componentInstance;
+    store = TestBed.inject(MockStore);
+    spyOn(store, 'dispatch');
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('selecting all comics', () => {
+    beforeEach(() => {
+      component.comics = COMICS;
+      component.onSelectAll();
+    });
+
+    it('fires an action', () => {
+      expect(store.dispatch).toHaveBeenCalledWith(
+        selectComics({ comics: COMICS })
+      );
+    });
+  });
+
+  describe('deselecting all comics', () => {
+    beforeEach(() => {
+      component.selected = COMICS;
+      component.onDeselectAll();
+    });
+
+    it('fires an action', () => {
+      expect(store.dispatch).toHaveBeenCalledWith(
+        deselectComics({ comics: COMICS })
+      );
+    });
+  });
+});

comixed-web/src/app/library/components/library-toolbar/library-toolbar.component.ts

@@ -0,0 +1,50 @@
+/*
+ * ComiXed - A digital comic book library management application.
+ * Copyright (C) 2021, 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 { Component, Input, OnInit } from '@angular/core';
+import { Comic } from '@app/library';
+import { LoggerService } from '@angular-ru/logger';
+import { Store } from '@ngrx/store';
+import {
+  deselectComics,
+  selectComics
+} from '@app/library/actions/library.actions';
+
+@Component({
+  selector: 'cx-library-toolbar',
+  templateUrl: './library-toolbar.component.html',
+  styleUrls: ['./library-toolbar.component.scss']
+})
+export class LibraryToolbarComponent implements OnInit {
+  @Input() comics: Comic[] = [];
+  @Input() selected: Comic[] = [];
+
+  constructor(private logger: LoggerService, private store: Store<any>) {}
+
+  ngOnInit(): void {}
+
+  onSelectAll(): void {
+    this.logger.debug('Selecting all comics');
+    this.store.dispatch(selectComics({ comics: this.comics }));
+  }
+
+  onDeselectAll(): void {
+    this.logger.debug('Deselecting all comics');
+    this.store.dispatch(deselectComics({ comics: this.selected }));
+  }
+}

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

@@ -59,7 +59,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { ComicTitlePipe } from './pipes/comic-title.pipe';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { ComicPageUrlPipe } from './pipes/comic-page-url.pipe';
-import { AllComicsComponent } from './pages/all-comics/all-comics.component';
+import { LibraryComponent } from './pages/library/library.component';
 import {
   DISPLAY_FEATURE_KEY,
   reducer as displayReducer
@@ -83,7 +83,8 @@ import { MatTreeModule } from '@angular/material/tree';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { ComicCoversComponent } from './components/comic-covers/comic-covers.component';
-import { ComicGroupComponent } from './pages/comic-group/comic-group.component';
+import { LibraryGroupComponent } from './pages/library-group/library-group.component';
+import { LibraryToolbarComponent } from './components/library-toolbar/library-toolbar.component';
 
 @NgModule({
   declarations: [
@@ -100,15 +101,16 @@ import { ComicGroupComponent } from './pages/comic-group/comic-group.component';
     ComicCoverUrlPipe,
     ComicTitlePipe,
     ComicPageUrlPipe,
-    AllComicsComponent,
+    LibraryComponent,
     ComicDisplayOptionsComponent,
     ComicScrapingComponent,
     ScrapingIssueDetailComponent,
     ScrapingIssueTitlePipe,
     MatchabilityPipe,
     NavigationPaneComponent,
     ComicCoversComponent,
-    ComicGroupComponent
+    LibraryGroupComponent,
+    LibraryToolbarComponent
   ],
   providers: [ComicTitlePipe],
   imports: [

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

@@ -21,8 +21,8 @@ import { NgModule } from '@angular/core';
 import { ImportComicsComponent } from './pages/import-comics/import-comics.component';
 import { ComicDetailsComponent } from '@app/library/pages/comic-details/comic-details.component';
 import { AdminGuard, ReaderGuard } from '@app/user';
-import { AllComicsComponent } from '@app/library/pages/all-comics/all-comics.component';
-import { ComicGroupComponent } from '@app/library/pages/comic-group/comic-group.component';
+import { LibraryComponent } from '@app/library/pages/library/library.component';
+import { LibraryGroupComponent } from '@app/library/pages/library-group/library-group.component';
 
 const routes: Routes = [
   {
@@ -37,12 +37,12 @@ const routes: Routes = [
   },
   {
     path: 'library/:type/:name',
-    component: ComicGroupComponent,
+    component: LibraryGroupComponent,
     canActivate: [ReaderGuard]
   },
   {
     path: 'library',
-    component: AllComicsComponent,
+    component: LibraryComponent,
     canActivate: [ReaderGuard]
   }
 ];

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

@@ -0,0 +1,5 @@
+<cx-library-toolbar
+  [comics]="comics"
+  [selected]="selected"
+></cx-library-toolbar>
+<cx-comic-covers [comics]="comics"></cx-comic-covers>

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

@@ -17,7 +17,7 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ComicGroupComponent } from './comic-group.component';
+import { LibraryGroupComponent } from './library-group.component';
 import { LoggerModule } from '@angular-ru/logger';
 import {
   initialState as initialLibraryState,
@@ -52,15 +52,18 @@ import {
   DISPLAY_FEATURE_KEY,
   initialState as initialDisplayState
 } from '@app/library/reducers/display.reducer';
+import { LibraryToolbarComponent } from '@app/library/components/library-toolbar/library-toolbar.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
-describe('ComicGroupComponent', () => {
+describe('LibraryGroupComponent', () => {
   const initialState = {
     [LIBRARY_FEATURE_KEY]: initialLibraryState,
     [DISPLAY_FEATURE_KEY]: initialDisplayState
   };
 
-  let component: ComicGroupComponent;
-  let fixture: ComponentFixture<ComicGroupComponent>;
+  let component: LibraryGroupComponent;
+  let fixture: ComponentFixture<LibraryGroupComponent>;
   let store: MockStore<any>;
   let activatedRoute: ActivatedRoute;
   let router: Router;
@@ -70,8 +73,9 @@ describe('ComicGroupComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
-        ComicGroupComponent,
+        LibraryGroupComponent,
         ComicCoversComponent,
+        LibraryToolbarComponent,
         NavigationPaneComponent
       ],
       imports: [
@@ -85,7 +89,9 @@ describe('ComicGroupComponent', () => {
         MatIconModule,
         MatTreeModule,
         MatBadgeModule,
-        MatPaginatorModule
+        MatPaginatorModule,
+        MatTooltipModule,
+        MatFormFieldModule
       ],
       providers: [
         provideMockStore({ initialState }),
@@ -105,7 +111,7 @@ describe('ComicGroupComponent', () => {
       ]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ComicGroupComponent);
+    fixture = TestBed.createComponent(LibraryGroupComponent);
     component = fixture.componentInstance;
     store = TestBed.inject(MockStore);
     activatedRoute = TestBed.inject(ActivatedRoute);

comixed-web/src/app/library/pages/comic-group/comic-group.component.ts → comixed-web/src/app/library/pages/library-group/library-group.component.ts

@@ -22,8 +22,10 @@ import { Store } from '@ngrx/store';
 import { LoggerService } from '@angular-ru/logger';
 import { Subscription } from 'rxjs';
 import { Comic } from '@app/library';
-import { selectAllComics } from '@app/library/selectors/library.selectors';
-import { filter } from 'rxjs/operators';
+import {
+  selectAllComics,
+  selectSelectedComics
+} from '@app/library/selectors/library.selectors';
 import { TranslateService } from '@ngx-translate/core';
 import { AlertService } from '@app/core';
 import {
@@ -37,14 +39,16 @@ import {
 
 @Component({
   selector: 'cx-comic-group',
-  templateUrl: './comic-group.component.html',
-  styleUrls: ['./comic-group.component.scss']
+  templateUrl: './library-group.component.html',
+  styleUrls: ['./library-group.component.scss']
 })
-export class ComicGroupComponent implements OnInit, OnDestroy {
+export class LibraryGroupComponent implements OnInit, OnDestroy {
   typeSubscription: Subscription;
   paramSubscription: Subscription;
   comicSubscription: Subscription;
   comics: Comic[] = [];
+  selectedSubscription: Subscription;
+  selected: Comic[] = [];
   groupType: string;
   groupName: string;
 
@@ -82,6 +86,9 @@ export class ComicGroupComponent implements OnInit, OnDestroy {
         this.subscribeToUpdates();
       }
     });
+    this.selectedSubscription = this.store
+      .select(selectSelectedComics)
+      .subscribe(selected => (this.selected = selected));
   }
 
   ngOnInit(): void {}

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

@@ -0,0 +1,5 @@
+<cx-library-toolbar
+  [comics]="comics"
+  [selected]="selected"
+></cx-library-toolbar>
+<cx-comic-covers [comics]="comics"></cx-comic-covers>