Added the ComicFileDetails component [#539]

 * Shows the cover for the comic file.
 * Shows details for the file.
 * Allows selecting and deselecting the comic.

comixed-web/src/app/comic-import/components/comic-file-details/comic-file-details.component.html

@@ -0,0 +1,28 @@
+<mat-card *ngIf="file">
+  <mat-card-title class="cx-text-nowrap"
+                  [matTooltip]="file.baseFilename">{{file.baseFilename}}</mat-card-title>
+  <mat-card-content>
+    <cx-comic-page [imageUrl]="file|comicFileCoverUrl"></cx-comic-page>
+  </mat-card-content>
+  <mat-card-footer>
+    <p>{{file.filename}}</p>
+    <p>{{"import-comic-files.text.file-size"|translate:{size: file.size} }}</p>
+    <p *ngIf="selected">{{"import-comic-files.text.selected-for-import"|translate}}</p>
+  </mat-card-footer>
+  <mat-card-actions>
+    <button *ngIf="selected"
+            mat-icon-button
+            color="warn"
+            (click)="onSelectFile(false)">
+      <mat-icon>remove</mat-icon>
+      <span>{{"button.deselect"|translate}}</span>
+    </button>
+    <button *ngIf="!selected"
+            mat-icon-button
+            color="primary"
+            (click)="onSelectFile(true)">
+      <mat-icon>add_box</mat-icon>
+      <span>{{"button.select"|translate}}</span>
+    </button>
+  </mat-card-actions>
+</mat-card>

comixed-web/src/app/comic-import/components/comic-file-details/comic-file-details.component.spec.ts

@@ -0,0 +1,82 @@
+/*
+ * 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 { ComicFileDetailsComponent } from './comic-file-details.component';
+import { LoggerModule } from '@angular-ru/logger';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { COMIC_FILE_2 } from '@app/comic-import/comic-import.fixtures';
+import { setComicFilesSelectedState } from '@app/comic-import/actions/comic-import.actions';
+
+describe('ComicFileDetailsComponent', () => {
+  const FILE = COMIC_FILE_2;
+
+  let component: ComicFileDetailsComponent;
+  let fixture: ComponentFixture<ComicFileDetailsComponent>;
+  let store: MockStore<any>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [LoggerModule.forRoot()],
+      declarations: [ComicFileDetailsComponent],
+      providers: [provideMockStore({})],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComicFileDetailsComponent);
+    component = fixture.componentInstance;
+    store = TestBed.inject(MockStore);
+    spyOn(store, 'dispatch');
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('toggling selection', () => {
+    beforeEach(() => {
+      component.file = FILE;
+    });
+
+    describe('selecting the comic', () => {
+      beforeEach(() => {
+        component.onSelectFile(true);
+      });
+
+      it('fires an action', () => {
+        expect(store.dispatch).toHaveBeenCalledWith(
+          setComicFilesSelectedState({ files: [FILE], selected: true })
+        );
+      });
+    });
+
+    describe('deselecting the comic', () => {
+      beforeEach(() => {
+        component.onSelectFile(false);
+      });
+
+      it('fires an action', () => {
+        expect(store.dispatch).toHaveBeenCalledWith(
+          setComicFilesSelectedState({ files: [FILE], selected: false })
+        );
+      });
+    });
+  });
+});

comixed-web/src/app/comic-import/components/comic-file-details/comic-file-details.component.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { ComicFile } from '@app/comic-import/models/comic-file';
+import { LoggerService } from '@angular-ru/logger';
+import { Store } from '@ngrx/store';
+import { setComicFilesSelectedState } from '@app/comic-import/actions/comic-import.actions';
+
+@Component({
+  selector: 'cx-comic-file-details',
+  templateUrl: './comic-file-details.component.html',
+  styleUrls: ['./comic-file-details.component.scss']
+})
+export class ComicFileDetailsComponent implements OnInit {
+  @Input() file: ComicFile;
+  @Input() selected: boolean;
+
+  constructor(private logger: LoggerService, private store: Store<any>) {}
+
+  ngOnInit(): void {}
+
+  onSelectFile(selected: boolean): void {
+    this.logger.debug(
+      `${selected ? 'Selecting' : 'Deselecting'} current file:`,
+      this.file
+    );
+    this.store.dispatch(
+      setComicFilesSelectedState({ files: [this.file], selected })
+    );
+  }
+}

comixed-web/src/app/comic-import/pipes/comic-file-cover-url.pipe.spec.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 { ComicFileCoverUrlPipe } from './comic-file-cover-url.pipe';
+import { COMIC_FILE_1 } from '@app/comic-import/comic-import.fixtures';
+import { API_ROOT_URL } from '@app/core';
+
+describe('ComicFileCoverUrlPipe', () => {
+  let pipe = new ComicFileCoverUrlPipe();
+
+  it('returns the url for given page', () => {
+    expect(pipe.transform(COMIC_FILE_1)).toEqual(
+      `${API_ROOT_URL}/files/import/cover?filename=${encodeURIComponent(
+        COMIC_FILE_1.filename
+      )}`
+    );
+  });
+});

comixed-web/src/app/comic-import/pipes/comic-file-cover-url.pipe.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { ComicFile } from '@app/comic-import/models/comic-file';
+import { API_ROOT_URL } from '@app/core';
+
+@Pipe({
+  name: 'comicFileCoverUrl',
+})
+export class ComicFileCoverUrlPipe implements PipeTransform {
+  transform(comic_file: ComicFile): string {
+    return `${API_ROOT_URL}/files/import/cover?filename=${encodeURIComponent(
+      comic_file.filename
+    )}`;
+  }
+}

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

@@ -4,9 +4,11 @@
     "general-effect-failure-detail": "A general error has occurred."
   },
   "button": {
+    "deselect": "Deselect",
     "login": "Login",
     "logout": "Logout",
     "no": "No",
+    "select": "Select",
     "submit": "Submit",
     "yes": "Yes"
   }

comixed-web/src/assets/i18n/en/comic-import.json

@@ -17,6 +17,10 @@
       "filename": "Filename",
       "size": "File Size (kb)"
     },
+    "text": {
+      "selected-for-import": "This file will be imported.",
+      "file-size": "{size} bytes"
+    },
   },
   "send-comic-files": {
     "effect-success-detail": "Submitted {count, plural, =1{one comic file} other{# comic files}} for import.",

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

@@ -4,9 +4,11 @@
     "general-effect-failure-detail": "A general error has occurred."
   },
   "button": {
+    "deselect": "Deselect",
     "login": "Login",
     "logout": "Logout",
     "no": "No",
+    "select": "Select",
     "submit": "Submit",
     "yes": "Yes"
   }

comixed-web/src/assets/i18n/es/comic-import.json

@@ -17,6 +17,10 @@
       "filename": "Filename",
       "size": "File Size (kb)"
     },
+    "text": {
+      "selected-for-import": "This file will be imported.",
+      "file-size": "{size} bytes"
+    },
   },
   "send-comic-files": {
     "effect-success-detail": "Submitted {count, plural, =1{one comic file} other{# comic files}} for import.",

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

@@ -4,9 +4,11 @@
     "general-effect-failure-detail": "A general error has occurred."
   },
   "button": {
+    "deselect": "Deselect",
     "login": "Login",
     "logout": "Logout",
     "no": "No",
+    "select": "Select",
     "submit": "Submit",
     "yes": "Yes"
   }

comixed-web/src/assets/i18n/fr/comic-import.json

@@ -17,6 +17,10 @@
       "filename": "Filename",
       "size": "File Size (kb)"
     },
+    "text": {
+      "selected-for-import": "This file will be imported.",
+      "file-size": "{size} bytes"
+    },
   },
   "send-comic-files": {
     "effect-success-detail": "Submitted {count, plural, =1{one comic file} other{# comic files}} for import.",

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

@@ -4,9 +4,11 @@
     "general-effect-failure-detail": "A general error has occurred."
   },
   "button": {
+    "deselect": "Deselect",
     "login": "Login",
     "logout": "Logout",
     "no": "No",
+    "select": "Select",
     "submit": "Submit",
     "yes": "Yes"
   }

comixed-web/src/assets/i18n/pt/comic-import.json

@@ -17,6 +17,10 @@
       "filename": "Filename",
       "size": "File Size (kb)"
     },
+    "text": {
+      "selected-for-import": "This file will be imported.",
+      "file-size": "{size} bytes"
+    },
   },
   "send-comic-files": {
     "effect-success-detail": "Submitted {count, plural, =1{one comic file} other{# comic files}} for import.",