Changed the comic overview tab to show a comic's file entries [comixe…

…d#33]
mcpierce · Jun 14, 2020 · e6dc3a7 · e6dc3a7
1 parent 318fa7e
commit e6dc3a7
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 2 deletions.
diff --git a/comixed-frontend/src/app/comics/comics.module.ts b/comixed-frontend/src/app/comics/comics.module.ts
@@ -61,6 +61,7 @@ import { PanelModule } from 'primeng/panel';
 import {
   AutoCompleteModule,
   ContextMenuModule,
+  DialogModule,
   InputTextModule,
   ProgressBarModule,
   ProgressSpinnerModule,

diff --git a/comixed-frontend/src/app/comics/components/comic-overview/comic-overview.component.html b/comixed-frontend/src/app/comics/components/comic-overview/comic-overview.component.html
@@ -1,3 +1,13 @@
+<p-dialog [visible]='showFileEntriesDialog'
+          [modal]='true'
+          [header]='"comic-overview.show-file-entries.title"|translate'
+          [resizable]='false'
+          [draggable]='false'
+          [maximizable]='true'
+          [closable]='false'>
+  <app-file-entry-list [entries]='comic.fileEntries'
+                       (close)='toggleFileEntriesDialog(false)'></app-file-entry-list>
+</p-dialog>
 <p-toolbar>
   <div *ngIf='is_admin'
        class='ui-toolbar-group-left'>
@@ -176,6 +186,14 @@
         <strong>{{"comic-overview.label.page-count"|translate}}</strong>
       </div>
       <div class='ui-g-12'>{{comic.pageCount}}</div>
+      <div class='ui-g-12'>
+        <strong>{{"comic-overview.label.file-entry-count"|translate}}</strong>
+      </div>
+      <div class='ui-g-12'>{{comic.fileEntries.length}}
+        <span *ngIf='!!comic.fileEntries && comic.fileEntries.length > 0'
+              (click)='toggleFileEntriesDialog(true)'
+              class='fa fa-fw fa-eye'></span>
+      </div>
       <div class='ui-g-12'>
         <strong>{{"comic-overview.label.comicvine-details-link"|translate}}</strong>
       </div>

diff --git a/comixed-frontend/src/app/comics/components/comic-overview/comic-overview.component.scss b/comixed-frontend/src/app/comics/components/comic-overview/comic-overview.component.scss
@@ -6,3 +6,8 @@
   background-color: $cx-information-panel-background-color;
   color: $cx-information-panel-text-primary-color;
 }
+
+:host ::ng-deep .ui-scrollpanel {
+  width: 50vw;
+  height: 50vh;
+}
diff --git a/comixed-frontend/src/app/comics/components/comic-overview/comic-overview.component.spec.ts b/comixed-frontend/src/app/comics/components/comic-overview/comic-overview.component.spec.ts
@@ -34,6 +34,8 @@ import { DropdownModule } from 'primeng/dropdown';
 import { InplaceModule } from 'primeng/inplace';
 import {
   AutoCompleteModule,
+  DialogModule,
+  ScrollPanelModule,
   ToolbarModule,
   TooltipModule
 } from 'primeng/primeng';
@@ -44,6 +46,8 @@ import { PublisherThumbnailUrlPipe } from 'app/comics/pipes/publisher-thumbnail-
 import { PublisherPipe } from 'app/comics/pipes/publisher.pipe';
 import { CollectionType } from 'app/library/models/collection-type.enum';
 import { SeriesCollectionNamePipe } from 'app/comics/pipes/series-collection-name.pipe';
+import { FileEntryListComponent } from 'app/comics/components/file-entry-list/file-entry-list.component';
+import { TableModule } from 'primeng/table';
 
 describe('ComicOverviewComponent', () => {
   const COMIC = Object.assign({}, COMIC_1);
@@ -73,10 +77,14 @@ describe('ComicOverviewComponent', () => {
         DropdownModule,
         TooltipModule,
         AutoCompleteModule,
-        ToolbarModule
+        ToolbarModule,
+        DialogModule,
+        TableModule,
+        ScrollPanelModule
       ],
       declarations: [
         ComicOverviewComponent,
+        FileEntryListComponent,
         PublisherThumbnailUrlPipe,
         PublisherPipe,
         SeriesCollectionNamePipe

diff --git a/comixed-frontend/src/app/comics/components/comic-overview/comic-overview.component.ts b/comixed-frontend/src/app/comics/components/comic-overview/comic-overview.component.ts
@@ -48,6 +48,7 @@ export class ComicOverviewComponent implements OnInit, OnDestroy {
   seriesSubscription: Subscription;
   seriesNames: string[] = [];
   seriesNameOptions: string[] = [];
+  showFileEntriesDialog = false;
 
   constructor(
     private logger: LoggerService,
@@ -191,4 +192,9 @@ export class ComicOverviewComponent implements OnInit, OnDestroy {
       name.toLowerCase().startsWith(nameEntered.toLowerCase())
     );
   }
+
+  toggleFileEntriesDialog(show: boolean) {
+    this.logger.debug(`${show ? 'showing' : 'hiding'} file entries dialog`);
+    this.showFileEntriesDialog = show;
+  }
 }
diff --git a/...xed-frontend/src/app/comics/pages/comic-details-page/comic-details-page.component.spec.ts b/...xed-frontend/src/app/comics/pages/comic-details-page/comic-details-page.component.spec.ts
@@ -55,7 +55,9 @@ import { DropdownModule } from 'primeng/dropdown';
 import { InplaceModule } from 'primeng/inplace';
 import {
   AutoCompleteModule,
+  DialogModule,
   ProgressBarModule,
+  ScrollPanelModule,
   SplitButtonModule,
   ToolbarModule
 } from 'primeng/primeng';
@@ -70,6 +72,7 @@ import {
 import { PublisherThumbnailUrlPipe } from 'app/comics/pipes/publisher-thumbnail-url.pipe';
 import { PublisherPipe } from 'app/comics/pipes/publisher.pipe';
 import { SeriesCollectionNamePipe } from 'app/comics/pipes/series-collection-name.pipe';
+import { FileEntryListComponent } from 'app/comics/components/file-entry-list/file-entry-list.component';
 
 describe('ComicDetailsPageComponent', () => {
   const COMIC = COMIC_2;
@@ -105,7 +108,9 @@ describe('ComicDetailsPageComponent', () => {
         ProgressBarModule,
         SplitButtonModule,
         ToolbarModule,
-        AutoCompleteModule
+        AutoCompleteModule,
+        DialogModule,
+        ScrollPanelModule
       ],
       declarations: [
         ComicDetailsPageComponent,
@@ -116,6 +121,7 @@ describe('ComicDetailsPageComponent', () => {
         ComicDetailsEditorComponent,
         ComicGroupingCardComponent,
         VolumeListComponent,
+        FileEntryListComponent,
         ComicTitlePipe,
         ComicCoverUrlPipe,
         ComicDownloadLinkPipe,

diff --git a/comixed-frontend/src/assets/i18n/en/comics.json b/comixed-frontend/src/assets/i18n/en/comics.json
@@ -82,6 +82,9 @@
       "header": "Save Changes",
       "message": "Are you sure you want to save the changes made to this comic?"
     },
+    "show-file-entries": {
+      "title": "Archive File List"
+    },
     "label": {
       "filename": "The filename is <strong>{filename}</strong> on the host machine.",
       "publisher": "Publisher",
@@ -94,6 +97,7 @@
       "added-date": "Added to library on",
       "last-read-date": "Last read on",
       "page-count": "# Of Pages",
+      "file-entry-count": "# Of Files",
       "comicvine-details-link": "ComicVine Details Page",
       "format": "Format",
       "scan-type": "Scan Type",

diff --git a/comixed-frontend/src/assets/i18n/es/comics.json b/comixed-frontend/src/assets/i18n/es/comics.json
@@ -82,6 +82,9 @@
       "header": "Save Changes",
       "message": "Are you sure you want to save the changes made to this comic?"
     },
+    "show-file-entries": {
+      "title": "Archive File List"
+    },
     "label": {
       "filename": "The filename is <strong>{filename}</strong> on the host machine.",
       "publisher": "Publisher",
@@ -94,6 +97,7 @@
       "added-date": "Added to library on",
       "last-read-date": "Last read on",
       "page-count": "# Of Pages",
+      "file-entry-count": "# Of Files",
       "comicvine-details-link": "ComicVine Details Page",
       "format": "Format",
       "scan-type": "Scan Type",

diff --git a/comixed-frontend/src/assets/i18n/fr/comics.json b/comixed-frontend/src/assets/i18n/fr/comics.json
@@ -82,6 +82,9 @@
       "header": "Save Changes",
       "message": "Are you sure you want to save the changes made to this comic?"
     },
+    "show-file-entries": {
+      "title": "Archive File List"
+    },
     "label": {
       "filename": "The filename is <strong>{filename}</strong> on the host machine.",
       "publisher": "Publisher",
@@ -94,6 +97,7 @@
       "added-date": "Added to library on",
       "last-read-date": "Last read on",
       "page-count": "# Of Pages",
+      "file-entry-count": "# Of Files",
       "comicvine-details-link": "ComicVine Details Page",
       "format": "Format",
       "scan-type": "Scan Type",