Changed the scraping page layout [#958]

comixed · Mar 19, 2022 · 8e012ec · 8e012ec
1 parent 6f84d43
commit 8e012ec
Show file tree

Hide file tree

Showing 20 changed files with 132 additions and 77 deletions.
diff --git a/comixed-webui/src/app/comic-books/comic-books.module.ts b/comixed-webui/src/app/comic-books/comic-books.module.ts
@@ -26,9 +26,9 @@ import { ComicEditComponent } from './components/comic-edit/comic-edit.component
 import { ComicOverviewComponent } from './components/comic-overview/comic-overview.component';
 import { ComicPagesComponent } from './components/comic-pages/comic-pages.component';
 import { ComicPageComponent } from './components/comic-page/comic-page.component';
-import { ComicScrapingComponent } from './components/comic-scraping/comic-scraping.component';
+import { ComicMetadataComponent } from './components/comic-metadata/comic-metadata.component';
 import { ComicStoryComponent } from './components/comic-story/comic-story.component';
-import { ScrapingIssueDetailComponent } from './components/scraping-issue-detail/scraping-issue-detail.component';
+import { IssueMetadataDetailComponent } from './components/issue-metadata-detail/issue-metadata-detail.component';
 import { MatCardModule } from '@angular/material/card';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatIconModule } from '@angular/material/icon';
@@ -93,9 +93,9 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
     ComicOverviewComponent,
     ComicPagesComponent,
     ComicPageComponent,
-    ComicScrapingComponent,
+    ComicMetadataComponent,
     ComicStoryComponent,
-    ScrapingIssueDetailComponent,
+    IssueMetadataDetailComponent,
     ComicDetailCardComponent,
     ComicCoverUrlPipe,
     ComicPageUrlPipe,
@@ -151,7 +151,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
     CommonModule,
     ComicPageComponent,
     ComicEditComponent,
-    ComicScrapingComponent,
+    ComicMetadataComponent,
     ComicDetailCardComponent,
     ComicTitlePipe,
     ComicCoverUrlPipe,

diff --git a/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.html b/comixed-webui/src/app/comic-books/components/comic-edit/comic-edit.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar class="cx-primary-light-background">
+<mat-toolbar class="cx-accent-light-background">
   <button
     id="scrape-filename"
     class="cx-toolbar-button cx-margin-left-5"

diff --git a/...ic-scraping/comic-scraping.component.html → ...ic-metadata/comic-metadata.component.html b/...ic-scraping/comic-scraping.component.html → ...ic-metadata/comic-metadata.component.html
@@ -1,12 +1,12 @@
-<mat-toolbar class="cx-primary-light-background">
+<mat-toolbar class="cx-accent-light-background">
   <mat-paginator
-    class="cx-primary-light-background cx-height-100"
+    class="cx-accent-light-background cx-height-100"
     *ngIf="!!comic"
-    [pageSizeOptions]="[5, 10, 20]"
+    [pageSizeOptions]="pageSizeOptions"
     showFirstLastButtons
   ></mat-paginator>
   <div class="cx-spacer"></div>
-  <mat-form-field appearance="fill" class="cx-width-100">
+  <mat-form-field appearance="standard" class="cx-width-50">
     <input
       #filterInput
       id="filter-input"
@@ -32,13 +32,14 @@
   <div fxFlex.gt-sm="75%" fxFlex.sm="100%">
     <mat-table
       aria-label="Comic files available for import"
+      class="cx-width-100"
       [dataSource]="dataSource"
       matSort
       matSortActive="sortOrder"
       matSortDirection="desc"
       matSortDisableClear="false"
     >
-      <ng-container matColumnDef="sortOrder">
+      <ng-container matColumnDef="matchability">
         <mat-header-cell *matHeaderCellDef mat-sort-header>
           {{ "scraping.label.matchability" | translate }}
         </mat-header-cell>
@@ -60,7 +61,9 @@
           {{ "scraping.label.publisher" | translate }}
         </mat-header-cell>
         <mat-cell *matCellDef="let element">
-          {{ element.item.publisher }}
+          <div class="cx-width-100 cx-text-nowrap">
+            {{ element.item.publisher }}
+          </div>
         </mat-cell>
       </ng-container>
 
@@ -69,25 +72,29 @@
           {{ "scraping.label.series-name" | translate }}
         </mat-header-cell>
         <mat-cell *matCellDef="let element">
-          {{ element.item.name }}
+          <div class="cx-width-100 cx-text-nowrap">{{ element.item.name }}</div>
         </mat-cell>
       </ng-container>
 
-      <ng-container matColumnDef="startYear">
+      <ng-container matColumnDef="start-year">
         <mat-header-cell *matHeaderCellDef mat-sort-header>
           {{ "scraping.label.start-year" | translate }}
         </mat-header-cell>
         <mat-cell *matCellDef="let element">
-          {{ element.item.startYear }}
+          <div class="cx-width-100 cx-text-nowrap">
+            {{ element.item.startYear }}
+          </div>
         </mat-cell>
       </ng-container>
 
-      <ng-container matColumnDef="issueCount">
+      <ng-container matColumnDef="issue-count">
         <mat-header-cell *matHeaderCellDef mat-sort-header>
           {{ "scraping.label.issue-count" | translate }}
         </mat-header-cell>
         <mat-cell *matCellDef="let element">
-          {{ element.item.issueCount }}
+          <div class="cx-width-100 cx-text-nowrap">
+            {{ element.item.issueCount }}
+          </div>
         </mat-cell>
       </ng-container>
 
@@ -120,8 +127,8 @@
     </mat-table>
   </div>
   <div fxFlex.gt-xs="25%" fxFlex.sm="100%">
-    <div *ngIf="!!issue" id="cx-scraping-issue-detail-content">
-      <cx-scraping-issue-detail [issue]="issue"></cx-scraping-issue-detail>
+    <div *ngIf="!!issue" id="cx-issue-metadata-detail-content">
+      <cx-issue-metadata-detail [issue]="issue"></cx-issue-metadata-detail>
     </div>
   </div>
 </div>
diff --git a/...ic-scraping/comic-scraping.component.scss → ...ic-metadata/comic-metadata.component.scss b/...ic-scraping/comic-scraping.component.scss → ...ic-metadata/comic-metadata.component.scss
@@ -1,25 +1,39 @@
 @import 'styles';
 
-#cx-scraping-issue-detail-content {
+#cx-issue-metadata-detail-content {
 }
 
 .mat-column-matchability {
-  width: $cx-column-medium;
-  max-width: $cx-column-medium;
+  width: $cx-column-small;
+  max-width: $cx-column-small;
   resize: none;
 }
 
 .mat-column-publisher {
   width: $cx-column-large;
   max-width: $cx-column-large;
   resize: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .mat-column-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
+}
+
+.mat-column-start-year {
+  width: $cx-column-medium;
+  max-width: $cx-column-medium;
+  resize: none;
+}
+
+.mat-column-issue-count {
+  width: $cx-column-medium;
+  max-width: $cx-column-medium;
+  resize: none;
+}
+
+.mat-column-issue-action {
+  width: $cx-column-small;
+  max-width: $cx-column-small;
+  resize: none;
 }
 
 .mat-column-startYear {

diff --git a/...scraping/comic-scraping.component.spec.ts → ...metadata/comic-metadata.component.spec.ts b/...scraping/comic-scraping.component.spec.ts → ...metadata/comic-metadata.component.spec.ts
@@ -18,12 +18,12 @@
 
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import {
-  ComicScrapingComponent,
+  ComicMetadataComponent,
   EXACT_MATCH,
   MATCHABILITY,
   NEAR_MATCH,
   NO_MATCH
-} from './comic-scraping.component';
+} from './comic-metadata.component';
 import { LoggerModule } from '@angular-ru/cdk/logger';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
@@ -49,7 +49,7 @@ import {
 import { deselectComics } from '@app/library/actions/library.actions';
 import { SortableListItem } from '@app/core/models/ui/sortable-list-item';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ScrapingIssueDetailComponent } from '@app/comic-books/components/scraping-issue-detail/scraping-issue-detail.component';
+import { IssueMetadataDetailComponent } from '@app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component';
 import { MatInputModule } from '@angular/material/input';
 import {
   Confirmation,
@@ -75,15 +75,15 @@ describe('ComicScrapingComponent', () => {
   const METADATA_SOURCE = METADATA_SOURCE_1;
   const initialState = { [METADATA_FEATURE_KEY]: { ...initialScrapingState } };
 
-  let component: ComicScrapingComponent;
-  let fixture: ComponentFixture<ComicScrapingComponent>;
+  let component: ComicMetadataComponent;
+  let fixture: ComponentFixture<ComicMetadataComponent>;
   let store: MockStore<any>;
   let confirmationService: ConfirmationService;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [ComicScrapingComponent, ScrapingIssueDetailComponent],
+        declarations: [ComicMetadataComponent, IssueMetadataDetailComponent],
         imports: [
           NoopAnimationsModule,
           LoggerModule.forRoot(),
@@ -101,7 +101,7 @@ describe('ComicScrapingComponent', () => {
         providers: [provideMockStore({ initialState }), ConfirmationService]
       }).compileComponents();
 
-      fixture = TestBed.createComponent(ComicScrapingComponent);
+      fixture = TestBed.createComponent(ComicMetadataComponent);
       component = fixture.componentInstance;
       component.comicSeriesName = SCRAPING_VOLUME.name;
       component.comicVolume = SCRAPING_VOLUME.startYear;
@@ -226,13 +226,13 @@ describe('ComicScrapingComponent', () => {
 
     it('uses the start year', () => {
       expect(
-        component.dataSource.sortingDataAccessor(ELEMENT, 'startYear')
+        component.dataSource.sortingDataAccessor(ELEMENT, 'start-year')
       ).toEqual(SCRAPING_VOLUME.startYear);
     });
 
     it('uses the issue count', () => {
       expect(
-        component.dataSource.sortingDataAccessor(ELEMENT, 'issueCount')
+        component.dataSource.sortingDataAccessor(ELEMENT, 'issue-count')
       ).toEqual(SCRAPING_VOLUME.issueCount);
     });
   });

diff --git a/...omic-scraping/comic-scraping.component.ts → ...omic-metadata/comic-metadata.component.ts b/...omic-scraping/comic-scraping.component.ts → ...omic-metadata/comic-metadata.component.ts
@@ -49,8 +49,9 @@ import { SortableListItem } from '@app/core/models/ui/sortable-list-item';
 import { setBusyState } from '@app/core/actions/busy.actions';
 import { ConfirmationService } from '@tragically-slick/confirmation';
 import { MetadataSource } from '@app/comic-metadata/models/metadata-source';
+import { PAGE_SIZE_OPTIONS } from '@app/library/library.constants';
 
-export const MATCHABILITY = 'sortOrder';
+export const MATCHABILITY = 'matchability';
 export const EXACT_MATCH = 2;
 export const EXACT_MATCH_TEXT = 'scraping.text.exact-match';
 export const NEAR_MATCH = 1;
@@ -59,14 +60,16 @@ export const NO_MATCH = 0;
 export const NO_MATCH_TEXT = 'scraping.text.no-match';
 
 @Component({
-  selector: 'cx-comic-scraping',
-  templateUrl: './comic-scraping.component.html',
-  styleUrls: ['./comic-scraping.component.scss']
+  selector: 'cx-comic-metadata',
+  templateUrl: './comic-metadata.component.html',
+  styleUrls: ['./comic-metadata.component.scss']
 })
-export class ComicScrapingComponent implements OnDestroy, AfterViewInit {
+export class ComicMetadataComponent implements OnDestroy, AfterViewInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
+  readonly pageSizeOptions = PAGE_SIZE_OPTIONS;
+
   @Input() comic: Comic;
   @Input() metadataSource: MetadataSource;
   @Input() comicSeriesName: string;
@@ -88,8 +91,8 @@ export class ComicScrapingComponent implements OnDestroy, AfterViewInit {
     MATCHABILITY,
     'publisher',
     'name',
-    'startYear',
-    'issueCount',
+    'start-year',
+    'issue-count',
     'action'
   ];
 
@@ -148,6 +151,10 @@ export class ComicScrapingComponent implements OnDestroy, AfterViewInit {
       switch (property) {
         case MATCHABILITY:
           return element.sortOrder;
+        case 'start-year':
+          return element.item.startYear;
+        case 'issue-count':
+          return element.item.issueCount;
         default:
           return element.item[property];
       }

diff --git a/comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.html b/comixed-webui/src/app/comic-books/components/comic-page/comic-page.component.html
@@ -1,5 +1,5 @@
 <mat-card class="cx-width-100">
-  <mat-card-title>{{ page?.filename }}</mat-card-title>
+  <mat-card-title *ngIf="!!page">{{ page?.filename }}</mat-card-title>
   <mat-card-content>
     <div class="cx-detail-card cx-padding-2 cx-margin-2">
       <img

diff --git a/...src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.html b/...src/app/comic-books/components/issue-metadata-detail/issue-metadata-detail.component.html
@@ -0,0 +1,20 @@
+<mat-card>
+  <mat-card-title [matTooltip]="issue | issueMetadataTitle">
+    <div class="cx-text-nowrap">
+      {{ issue | issueMetadataTitle }}
+    </div>
+  </mat-card-title>
+  <mat-card-subtitle>
+    <div class="cx-text-nowrap cx-width-100">
+      {{ issue.coverDate | date: "MMMM y" }}
+    </div>
+  </mat-card-subtitle>
+  <mat-card-content class="cx-padding-none cx-margin-none">
+    <img
+      [src]="issue.coverUrl"
+      [alt]="issue.coverUrl"
+      [style.width]="'100%'"
+      [style.height]="'auto'"
+    />
+  </mat-card-content>
+</mat-card>
diff --git a/...tail/scraping-issue-detail.component.scss → ...tail/issue-metadata-detail.component.scss b/...tail/scraping-issue-detail.component.scss → ...tail/issue-metadata-detail.component.scss
diff --git a/...l/scraping-issue-detail.component.spec.ts → ...l/issue-metadata-detail.component.spec.ts b/...l/scraping-issue-detail.component.spec.ts → ...l/issue-metadata-detail.component.spec.ts
@@ -17,7 +17,7 @@
  */
 
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ScrapingIssueDetailComponent } from './scraping-issue-detail.component';
+import { IssueMetadataDetailComponent } from './issue-metadata-detail.component';
 import { LoggerModule } from '@angular-ru/cdk/logger';
 import { IssueMetadataTitlePipe } from '@app/comic-metadata/pipes/issue-metadata-title.pipe';
 import { TranslateModule } from '@ngx-translate/core';
@@ -34,21 +34,21 @@ import { USER_READER } from '@app/user/user.fixtures';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SCRAPING_ISSUE_1 } from '@app/comic-metadata/comic-metadata.fixtures';
 
-describe('ScrapingIssueDetailComponent', () => {
+describe('IssueMetadataDetailComponent', () => {
   const SCRAPING_ISSUE = SCRAPING_ISSUE_1;
   const USER = USER_READER;
   const initialState = {
     [USER_FEATURE_KEY]: { ...initialUserState, user: USER }
   };
 
-  let component: ScrapingIssueDetailComponent;
-  let fixture: ComponentFixture<ScrapingIssueDetailComponent>;
+  let component: IssueMetadataDetailComponent;
+  let fixture: ComponentFixture<IssueMetadataDetailComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [
-          ScrapingIssueDetailComponent,
+          IssueMetadataDetailComponent,
           ComicPageComponent,
           IssueMetadataTitlePipe
         ],
@@ -63,7 +63,7 @@ describe('ScrapingIssueDetailComponent', () => {
         providers: [provideMockStore({ initialState })]
       }).compileComponents();
 
-      fixture = TestBed.createComponent(ScrapingIssueDetailComponent);
+      fixture = TestBed.createComponent(IssueMetadataDetailComponent);
       component = fixture.componentInstance;
       component.issue = SCRAPING_ISSUE;
       fixture.detectChanges();

diff --git a/...detail/scraping-issue-detail.component.ts → ...detail/issue-metadata-detail.component.ts b/...detail/scraping-issue-detail.component.ts → ...detail/issue-metadata-detail.component.ts
@@ -18,12 +18,13 @@
 
 import { Component, Input } from '@angular/core';
 import { IssueMetadata } from '@app/comic-metadata/models/issue-metadata';
+import { PAGE_SIZE_OPTIONS } from '@app/library/library.constants';
 
 @Component({
-  selector: 'cx-scraping-issue-detail',
-  templateUrl: './scraping-issue-detail.component.html',
-  styleUrls: ['./scraping-issue-detail.component.scss']
+  selector: 'cx-issue-metadata-detail',
+  templateUrl: './issue-metadata-detail.component.html',
+  styleUrls: ['./issue-metadata-detail.component.scss']
 })
-export class ScrapingIssueDetailComponent {
+export class IssueMetadataDetailComponent {
   @Input() issue: IssueMetadata;
 }