Added a reusable view for displaying lists of comics [#573]

comixed-web/src/app/library/components/comic-covers/comic-covers.component.html

@@ -0,0 +1,25 @@
+<mat-sidenav-container class="cx-all-comics-container" autosize>
+  <mat-sidenav #navigationPane mode="over" position="start">
+    <cx-navigation-pane></cx-navigation-pane>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <div class="cx-flexible-content cx-flex-2">
+      <mat-toolbar>
+        <div class="cx-spacer"></div>
+        <button mat-icon-button (click)="navigationPane.toggle(true)">
+          <mat-icon>account_tree</mat-icon>
+        </button>
+      </mat-toolbar>
+      <div id="cx-all-comics" class="cx-comic-detail-card-container">
+        <cx-comic-detail-card
+          *ngFor="let comic of comics"
+          [title]="comic | comicTitle"
+          [imageUrl]="comic | comicCoverUrl"
+          [detailLink]="['comics', comic.id]"
+          [blurred]="!comic.fileDetails"
+          [busy]="!comic.fileDetails"
+        ></cx-comic-detail-card>
+      </div>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>

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

@@ -0,0 +1,49 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComicCoversComponent } from './comic-covers.component';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('ComicCoversComponent', () => {
+  let component: ComicCoversComponent;
+  let fixture: ComponentFixture<ComicCoversComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ComicCoversComponent],
+      imports: [
+        NoopAnimationsModule,
+        MatSidenavModule,
+        MatToolbarModule,
+        MatIconModule
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ComicCoversComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

comixed-web/src/app/library/components/comic-covers/comic-covers.component.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { Component, Input, OnInit } from '@angular/core';
+import { Comic } from '@app/library';
+
+@Component({
+  selector: 'cx-comic-covers',
+  templateUrl: './comic-covers.component.html',
+  styleUrls: ['./comic-covers.component.scss']
+})
+export class ComicCoversComponent implements OnInit {
+  @Input() comics: Comic[];
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -82,6 +82,7 @@ import { NavigationPaneComponent } from './components/navigation-pane/navigation
 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';
 
 @NgModule({
   declarations: [
@@ -104,7 +105,8 @@ import { MatSidenavModule } from '@angular/material/sidenav';
     ScrapingIssueDetailComponent,
     ScrapingIssueTitlePipe,
     MatchabilityPipe,
-    NavigationPaneComponent
+    NavigationPaneComponent,
+    ComicCoversComponent
   ],
   providers: [ComicTitlePipe],
   imports: [

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

@@ -1,25 +1 @@
-<mat-sidenav-container class="cx-all-comics-container" autosize>
-  <mat-sidenav #navigationPane mode="over" position="start">
-    <cx-navigation-pane></cx-navigation-pane>
-  </mat-sidenav>
-  <mat-sidenav-content>
-    <div class="cx-flexible-content cx-flex-2">
-      <mat-toolbar>
-        <div class="cx-spacer"></div>
-        <button mat-icon-button (click)="navigationPane.toggle(true)">
-          <mat-icon>account_tree</mat-icon>
-        </button>
-      </mat-toolbar>
-      <div id="cx-all-comics" class="cx-comic-detail-card-container">
-        <cx-comic-detail-card
-          *ngFor="let comic of comics"
-          [title]="comic | comicTitle"
-          [imageUrl]="comic | comicCoverUrl"
-          [detailLink]="[comic.id]"
-          [blurred]="!comic.fileDetails"
-          [busy]="!comic.fileDetails"
-        ></cx-comic-detail-card>
-      </div>
-    </div>
-  </mat-sidenav-content>
-</mat-sidenav-container>
+<cx-comic-covers [comics]="comics"></cx-comic-covers>

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

@@ -33,6 +33,7 @@ import { MatTreeModule } from '@angular/material/tree';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MatBadgeModule } from '@angular/material/badge';
 import { TitleService } from '@app/core';
+import { ComicCoversComponent } from '@app/library/components/comic-covers/comic-covers.component';
 
 describe('AllComicsComponent', () => {
   const initialState = { [LIBRARY_FEATURE_KEY]: initialLibraryState };
@@ -45,7 +46,11 @@ describe('AllComicsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AllComicsComponent, NavigationPaneComponent],
+      declarations: [
+        AllComicsComponent,
+        NavigationPaneComponent,
+        ComicCoversComponent
+      ],
       imports: [
         NoopAnimationsModule,
         LoggerModule.forRoot(),