Added the FileEntryList component and tests [#33]

comixed-frontend/src/app/comics/comics.module.ts

@@ -64,6 +64,7 @@ import {
   InputTextModule,
   ProgressBarModule,
   ProgressSpinnerModule,
+  ScrollPanelModule,
   SplitButtonModule,
   TabViewModule,
   ToolbarModule,
@@ -76,6 +77,7 @@ import * as fromScraping from './reducers/scraping.reducer';
 import { PublisherThumbnailUrlPipe } from './pipes/publisher-thumbnail-url.pipe';
 import { PublisherPipe } from './pipes/publisher.pipe';
 import { SeriesCollectionNamePipe } from './pipes/series-collection-name.pipe';
+import { FileEntryListComponent } from './components/file-entry-list/file-entry-list.component';
 
 @NgModule({
   declarations: [
@@ -96,7 +98,8 @@ import { SeriesCollectionNamePipe } from './pipes/series-collection-name.pipe';
     ScrapingIssueCoverUrlPipe,
     PublisherThumbnailUrlPipe,
     PublisherPipe,
-    SeriesCollectionNamePipe
+    SeriesCollectionNamePipe,
+    FileEntryListComponent
   ],
   imports: [
     UserModule,
@@ -129,7 +132,9 @@ import { SeriesCollectionNamePipe } from './pipes/series-collection-name.pipe';
     InputTextModule,
     ToolbarModule,
     ContextMenuModule,
-    AutoCompleteModule
+    AutoCompleteModule,
+    DialogModule,
+    ScrollPanelModule
   ],
   exports: [
     CommonModule,

comixed-frontend/src/app/comics/components/file-entry-list/file-entry-list.component.html

@@ -0,0 +1,40 @@
+<div class='ui-g'>
+  <div class='ui-g-12 ui-fluid'>
+    <p-scrollPanel>
+      <p-table [value]='entries'>
+        <ng-template pTemplate='colgroup'>
+          <colgroup>
+            <col class='cx-table-column-smallest'>
+            <col class='cx-table-column-large'>
+            <col class='cx-table-column-medium'>
+            <col class='cx-table-column-medium'>
+          </colgroup>
+        </ng-template>
+        <ng-template pTemplate='header'>
+          <tr>
+            <th id='cx-file-entry-number-header'>{{'file-entry-list.table.header.file-number'|translate}}</th>
+            <th id='cx-file-entry-name-header'>{{'file-entry-list.table.header.file-name'|translate}}</th>
+            <th id='cx-file-entry-size-header'>{{'file-entry-list.table.header.file-size'|translate}}</th>
+            <th id='cx-file-entry-type-header'>{{'file-entry-list.table.header.file-type'|translate}}</th>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate='body'
+                     let-entry>
+          <tr>
+            <td class='cx-table-column-align-center'>{{entry.fileNumber}}</td>
+            <td>{{entry.fileName}}</td>
+            <td>{{"file-entry-list.table.column.file-size"|translate:{size: entry.fileSize|number} }}</td>
+            <td class='cx-table-column-align-center'>{{entry.fileType}}</td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </p-scrollPanel>
+  </div>
+  <div class='ui-g-12 ui-'>
+    <button pButton
+            type='button'
+            icon='fa fa-fw fa-window-close'
+            (click)='close.emit(true)'
+            [label]='"button.close"|translate'></button>
+  </div>
+</div>

comixed-frontend/src/app/comics/components/file-entry-list/file-entry-list.component.spec.ts

@@ -0,0 +1,51 @@
+/*
+ * ComiXed - A digital comic book library management application.
+ * Copyright (C) 2019, 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 { FileEntryListComponent } from './file-entry-list.component';
+import { TableModule } from 'primeng/table';
+import { ButtonModule, ScrollPanelModule } from 'primeng/primeng';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('FileEntryListComponent', () => {
+  let component: FileEntryListComponent;
+  let fixture: ComponentFixture<FileEntryListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+        TableModule,
+        ScrollPanelModule,
+        ButtonModule
+      ],
+      declarations: [FileEntryListComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileEntryListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

comixed-frontend/src/app/comics/components/file-entry-list/file-entry-list.component.ts

@@ -0,0 +1,34 @@
+/*
+ * ComiXed - A digital comic book library management application.
+ * Copyright (C) 2019, 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, OnInit, Output } from '@angular/core';
+import { ComicFileEntry } from 'app/comics/models/comic-file-entry';
+
+@Component({
+  selector: 'app-file-entry-list',
+  templateUrl: './file-entry-list.component.html',
+  styleUrls: ['./file-entry-list.component.scss']
+})
+export class FileEntryListComponent implements OnInit {
+  @Input() entries: ComicFileEntry[];
+  @Output() close = new EventEmitter<boolean>();
+
+  constructor() {}
+
+  ngOnInit() {}
+}

comixed-frontend/src/app/comics/models/comic.fixtures.ts

@@ -106,6 +106,7 @@ export const COMIC_2: Comic = {
   nextIssueId: null,
   previousIssueId: null,
   fileDetails: FILE_DETAILS_1,
+  fileEntries: [],
   readingLists: []
 };
 

comixed-frontend/src/assets/i18n/en/comics.json

@@ -280,5 +280,18 @@
     "option": {
       "skip-cache": "Skip cache"
     }
+  },
+  "file-entry-list": {
+    "table": {
+      "header": {
+        "file-number": "#",
+        "file-name": "Filename",
+        "file-size": "Size",
+        "file-type": "Type"
+      },
+      "column": {
+        "file-size": "{size, plural, =1{One byte} other{# bytes}}"
+      }
+    }
   }
 }

comixed-frontend/src/assets/i18n/es/comics.json

@@ -280,5 +280,18 @@
     "option": {
       "skip-cache": "Skip cache"
     }
+  },
+  "file-entry-list": {
+    "table": {
+      "header": {
+        "file-number": "#",
+        "file-name": "Filename",
+        "file-size": "Size",
+        "file-type": "Type"
+      },
+      "column": {
+        "file-size": "{size, plural, =1{One byte} other{# bytes}}"
+      }
+    }
   }
 }

comixed-frontend/src/assets/i18n/fr/comics.json

@@ -280,5 +280,18 @@
     "option": {
       "skip-cache": "Skip cache"
     }
+  },
+  "file-entry-list": {
+    "table": {
+      "header": {
+        "file-number": "#",
+        "file-name": "Filename",
+        "file-size": "Size",
+        "file-type": "Type"
+      },
+      "column": {
+        "file-size": "{size, plural, =1{One byte} other{# bytes}}"
+      }
+    }
   }
 }