Added the ComicPage component for displaying a single page [#539]

 * Provides an event for when the page is clicked.

comixed-web/src/app/core/components/comic-page/comic-page.component.html

@@ -0,0 +1,5 @@
+<img [src]="imageUrl"
+     [alt]="imageUrl"
+     width="100%"
+     height="auto"
+     (click)="onClick()"/>

comixed-web/src/app/core/components/comic-page/comic-page.component.spec.ts

@@ -0,0 +1,89 @@
+/*
+ * 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 { CoverImageComponent } from './comic-page.component';
+import { LoggerModule } from '@angular-ru/logger';
+
+describe('CoverImageComponent', () => {
+  const SOURCE = {} as any;
+
+  let component: CoverImageComponent;
+  let fixture: ComponentFixture<CoverImageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [LoggerModule.forRoot()],
+      declarations: [CoverImageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CoverImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('selecting a page', () => {
+    beforeEach(() => {
+      component.selected = false;
+      component.source = SOURCE;
+    });
+
+    afterEach(() => {
+      component.onClick();
+    });
+
+    it('sends the source of the event', () => {
+      component.pageClicked.subscribe((response) =>
+        expect(response.source).toEqual(SOURCE)
+      );
+    });
+
+    it('sends a true selected value', () => {
+      component.pageClicked.subscribe((response) =>
+        expect(response.selected).toBeTruthy()
+      );
+    });
+  });
+
+  describe('deselecting a page', () => {
+    beforeEach(() => {
+      component.selected = true;
+      component.source = SOURCE;
+    });
+
+    afterEach(() => {
+      component.onClick();
+    });
+
+    it('sends the source of the event', () => {
+      component.pageClicked.subscribe((response) =>
+        expect(response.source).toEqual(SOURCE)
+      );
+    });
+
+    it('sends a false selected value', () => {
+      component.pageClicked.subscribe((response) =>
+        expect(response.selected).toBeFalsy()
+      );
+    });
+  });
+});

comixed-web/src/app/core/components/comic-page/comic-page.component.ts

@@ -0,0 +1,46 @@
+/*
+ * 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, EventEmitter, Input, Output } from '@angular/core';
+import { LoggerService } from '@angular-ru/logger';
+import { PageClickEvent } from '@app/core';
+
+/** Displays a page from a comic. Provides events for when the page is clicked. */
+@Component({
+  selector: 'cx-comic-page',
+  templateUrl: './comic-page.component.html',
+  styleUrls: ['./comic-page.component.scss'],
+})
+export class CoverImageComponent {
+  @Input() source: any;
+  @Input() imageUrl: string;
+  @Input() selected: boolean;
+
+  @Output() pageClicked = new EventEmitter<PageClickEvent>();
+
+  constructor(private logger: LoggerService) {}
+
+  /** Invoked when the cover is clicked. */
+  onClick(): void {
+    this.logger.trace('Cover clicked:', this.source, this.selected);
+    this.pageClicked.emit({
+      source: this.source,
+      selected: !this.selected,
+    } as PageClickEvent);
+  }
+}

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

@@ -23,6 +23,7 @@ import { ConfirmationComponent } from './components/confirmation/confirmation.co
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { CoverImageComponent } from './components/comic-page/comic-page.component';
 import { StoreModule } from '@ngrx/store';
 import {
   BUSY_FEATURE_KEY,
@@ -31,7 +32,7 @@ import {
 import { EffectsModule } from '@ngrx/effects';
 
 @NgModule({
-  declarations: [ConfirmationComponent],
+  declarations: [ConfirmationComponent, CoverImageComponent],
   imports: [
     CommonModule,
     StoreModule.forFeature(BUSY_FEATURE_KEY, busyReducer),
@@ -45,7 +46,8 @@ import { EffectsModule } from '@ngrx/effects';
     MatSnackBarModule,
     MatDialogModule,
     MatIconModule,
-    MatFormFieldModule
+    MatFormFieldModule,
+    CoverImageComponent
   ],
   providers: []
 })

comixed-web/src/app/core/models/event/page-click-event.ts

@@ -0,0 +1,27 @@
+/*
+ * 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>
+ */
+
+/**
+ * Event model fired when a comic page is clicked.
+ *
+ * The source is the container for the page (either a comic to be imported or a comic in the library).
+ */
+export interface PageClickEvent {
+  source: any;
+  selected: boolean;
+}