All Around Polish (#1328)

* Added --card-list-item-bg-color for the card list items

* Updated the card list item progress to match how cards render

* Implemented the ability to configure how many backups are retained.

* Fixed a bug where odd jump keys could cause a bad index error for jump bar

* Commented out more code for the pagination route if we go with that.

* Reverted a move of DisableConcurrentExecution to interface, as it seems to not work there.

* Updated manga format utility code to pipes

* Fixed bulk selection on series detail page

* Fixed bulk selection on all other pages

* Changed card item to OnPush

* Updated image component to OnPush

* Updated Series Card to OnPush

* Updated Series Detail to OnPush

* Lots of changes here. Integrated parentscroll support on card detail layout. Added jump bar (custom js implementation) on collection, reading list and all series pages. Updated UserParams to default to no pagination. Lots of cleanup all around

* Updated some notes on a module use

* Some code cleanup

* Fixed up a broken test due to the mapper not being configured in the test.

* Applied TabID pattern to edit collection tags

* Applied css from series detail to collection detail page to remove double scrollbar

* Implemented the ability to sort by Time To Read.

* Throw an error to the UI when we extract an archive and it contains invalid characters in the filename for the Server OS.

* Tweaked how the page scrolls for jumpbar on collection detail. We will have to polish another release

* Cleaned up the styling on directory picker

* Put some code in but it doesn't work for scroll to top on virtual scrolling. I'll do it later.

* Fixed a container bug

UI/Web/src/app/collections/all-collections/all-collections.component.html

@@ -8,6 +8,7 @@
     [isLoading]="isLoading"
     [items]="collections"
     [filterOpen]="filterOpen"
+    [jumpBarKeys]="jumpbarKeys"
     >
         <ng-template #cardItem let-item let-position="idx">
             <app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions" [imageUrl]="item.coverImage" (clicked)="loadCollection(item)"></app-card-item>

UI/Web/src/app/collections/all-collections/all-collections.component.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { EditCollectionTagsComponent } from 'src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component';
 import { CollectionTag } from 'src/app/_models/collection-tag';
+import { JumpKey } from 'src/app/_models/jumpbar/jump-key';
 import { ActionItem, ActionFactoryService, Action } from 'src/app/_services/action-factory.service';
 import { CollectionTagService } from 'src/app/_services/collection-tag.service';
 import { ImageService } from 'src/app/_services/image.service';
@@ -19,6 +20,7 @@ export class AllCollectionsComponent implements OnInit {
   isLoading: boolean = true;
   collections: CollectionTag[] = [];
   collectionTagActions: ActionItem<CollectionTag>[] = [];
+  jumpbarKeys: Array<JumpKey> = [];
 
   filterOpen: EventEmitter<boolean> = new EventEmitter();
 
@@ -44,7 +46,31 @@ export class AllCollectionsComponent implements OnInit {
     this.collectionService.allTags().subscribe(tags => {
       this.collections = tags;
       this.isLoading = false;
+
+      const keys: {[key: string]: number} = {};
+      tags.forEach(s => {
+        let ch = s.title.charAt(0);
+        if (/\d|\#|!|%|@|\(|\)|\^|\*/g.test(ch)) {
+          ch = '#';
+        }
+        if (!keys.hasOwnProperty(ch)) {
+          keys[ch] = 0;
+        }
+        keys[ch] += 1;
+      });
+      this.jumpbarKeys = Object.keys(keys).map(k => {
+        return {
+          key: k,
+          size: keys[k],
+          title: k.toUpperCase()
+        }
+      }).sort((a, b) => {
+        if (a.key < b.key) return -1;
+        if (a.key > b.key) return 1;
+        return 0;
+      });
     });
+    
   }
 
   handleCollectionActionCallback(action: Action, collectionTag: CollectionTag) {

UI/Web/src/app/collections/collection-detail/collection-detail.component.html

@@ -1,12 +1,15 @@
-<app-side-nav-companion-bar *ngIf="series !== undefined" [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
-    <ng-container title>
-        <h2 style="margin-bottom: 0px" *ngIf="collectionTag !== undefined">
-            <app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="collectionTagActions" [labelBy]="collectionTag.title" iconClass="fa-ellipsis-v"></app-card-actionables>
-            {{collectionTag.title}}<span *ngIf="collectionTag.promoted">&nbsp;(<i aria-hidden="true" class="fa fa-angle-double-up"></i>)</span>
-        </h2>
-    </ng-container>
-</app-side-nav-companion-bar>
-<div class="container-fluid pt-2" *ngIf="collectionTag !== undefined">
+<div #companionBar>
+    <app-side-nav-companion-bar *ngIf="series !== undefined" [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
+        <ng-container title>
+            <h2 style="margin-bottom: 0px" *ngIf="collectionTag !== undefined">
+                <app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="collectionTagActions" [labelBy]="collectionTag.title" iconClass="fa-ellipsis-v"></app-card-actionables>
+                {{collectionTag.title}}<span class="ms-1" *ngIf="collectionTag.promoted">(<i aria-hidden="true" class="fa fa-angle-double-up"></i>)</span>
+            </h2>
+        </ng-container>
+    </app-side-nav-companion-bar>
+</div>
+
+<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="collectionTag !== undefined" #scrollingBlock>
     <div class="row mb-3">
         <div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">            
             <app-image maxWidth="481px" [imageUrl]="tagImage"></app-image>
@@ -19,15 +22,15 @@
     <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
 
     <app-card-detail-layout
-    header="Series"
-    [isLoading]="isLoading"
-    [items]="series"
-    [pagination]="seriesPagination"
-    [filterSettings]="filterSettings"
-    [filterOpen]="filterOpen"
-    (pageChange)="onPageChange($event)"
-    (applyFilter)="updateFilter($event)"
-    >
+        header="Series"
+        [isLoading]="isLoading"
+        [items]="series"
+        [pagination]="seriesPagination"
+        [filterSettings]="filterSettings"
+        [filterOpen]="filterOpen"
+
+        [jumpBarKeys]="jumpbarKeys"
+        (applyFilter)="updateFilter($event)">
         <ng-template #cardItem let-item let-position="idx">
             <app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="loadPage()"
             (selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)" [selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"

UI/Web/src/app/collections/collection-detail/collection-detail.component.scss

@@ -13,4 +13,26 @@
   .read-btn--text {
     display: none;
   }
+}
+
+.card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 158px);
+  grid-gap: 0.5rem;
+  justify-content: space-around;
+}
+
+
+.virtual-scroller, virtual-scroller {
+  width: 100%;
+  height: calc(100vh - 85px);
+  max-height: calc(var(--vh)*100 - 170px);
+}
+
+// This is responsible for ensuring we scroll down and only tabs and companion bar is visible
+.main-container {
+  // Height set dynamically by  get ScrollingBlockHeight()
+  overflow-y: auto;
+  position: relative;
+  overscroll-behavior-y: none;
 }

UI/Web/src/app/collections/collection-detail/collection-detail.component.ts

@@ -1,4 +1,5 @@
-import { Component, EventEmitter, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Component, ElementRef, EventEmitter, HostListener, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router, ActivatedRoute } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -12,6 +13,7 @@ import { FilterUtilitiesService } from 'src/app/shared/_services/filter-utilitie
 import { KEY_CODES, UtilityService } from 'src/app/shared/_services/utility.service';
 import { CollectionTag } from 'src/app/_models/collection-tag';
 import { SeriesAddedToCollectionEvent } from 'src/app/_models/events/series-added-to-collection-event';
+import { JumpKey } from 'src/app/_models/jumpbar/jump-key';
 import { Pagination } from 'src/app/_models/pagination';
 import { Series } from 'src/app/_models/series';
 import { FilterEvent, SeriesFilter } from 'src/app/_models/series-filter';
@@ -29,6 +31,9 @@ import { SeriesService } from 'src/app/_services/series.service';
 })
 export class CollectionDetailComponent implements OnInit, OnDestroy {
 
+  @ViewChild('scrollingBlock') scrollingBlock: ElementRef<HTMLDivElement> | undefined;
+  @ViewChild('companionBar') companionBar: ElementRef<HTMLDivElement> | undefined;
+
   collectionTag!: CollectionTag;
   tagImage: string = '';
   isLoading: boolean = true;
@@ -43,8 +48,10 @@ export class CollectionDetailComponent implements OnInit, OnDestroy {
   filterActiveCheck!: SeriesFilter;
   filterActive: boolean = false;
 
+  jumpbarKeys: Array<JumpKey> = [];
+
   filterOpen: EventEmitter<boolean> = new EventEmitter();
-  
+ 
 
   private onDestory: Subject<void> = new Subject<void>();
 
@@ -84,11 +91,22 @@ export class CollectionDetailComponent implements OnInit, OnDestroy {
     }
   }
 
+  get ScrollingBlockHeight() {
+    if (this.scrollingBlock === undefined) return 'calc(var(--vh)*100)';
+    const navbar = this.document.querySelector('.navbar') as HTMLElement;
+    if (navbar === null) return 'calc(var(--vh)*100)';
+
+    const companionHeight = this.companionBar!.nativeElement.offsetHeight;
+    const navbarHeight = navbar.offsetHeight;
+    const totalHeight = companionHeight + navbarHeight + 21; //21px to account for padding
+    return 'calc(var(--vh)*100 - ' + totalHeight + 'px)';
+  }
+
   constructor(public imageService: ImageService, private collectionService: CollectionTagService, private router: Router, private route: ActivatedRoute, 
     private seriesService: SeriesService, private toastr: ToastrService, private actionFactoryService: ActionFactoryService, 
     private modalService: NgbModal, private titleService: Title, 
     public bulkSelectionService: BulkSelectionService, private actionService: ActionService, private messageHub: MessageHubService, 
-    private filterUtilityService: FilterUtilitiesService, private utilityService: UtilityService) {
+    private filterUtilityService: FilterUtilitiesService, private utilityService: UtilityService, @Inject(DOCUMENT) private document: Document) {
       this.router.routeReuseStrategy.shouldReuseRoute = () => false;
 
       const routeId = this.route.snapshot.paramMap.get('id');
@@ -157,16 +175,40 @@ export class CollectionDetailComponent implements OnInit, OnDestroy {
     });
   }
 
-  onPageChange(pagination: Pagination) {
-    this.filterUtilityService.updateUrlFromFilter(this.seriesPagination, undefined);
-    this.loadPage();
-  }
+  // onPageChange(pagination: Pagination) {
+  //   this.filterUtilityService.updateUrlFromFilter(this.seriesPagination, undefined);
+  //   this.loadPage();
+  // }
 
   loadPage() {
     this.filterActive = !this.utilityService.deepEqual(this.filter, this.filterActiveCheck);
-    this.seriesService.getAllSeries(this.seriesPagination?.currentPage, this.seriesPagination?.itemsPerPage, this.filter).pipe(take(1)).subscribe(series => {
+    this.seriesService.getAllSeries(undefined, undefined, this.filter).pipe(take(1)).subscribe(series => {
       this.series = series.result;
       this.seriesPagination = series.pagination;
+
+      const keys: {[key: string]: number} = {};
+      series.result.forEach(s => {
+        let ch = s.name.charAt(0);
+        if (/\d|\#|!|%|@|\(|\)|\^|\*/g.test(ch)) {
+          ch = '#';
+        }
+        if (!keys.hasOwnProperty(ch)) {
+          keys[ch] = 0;
+        }
+        keys[ch] += 1;
+      });
+      this.jumpbarKeys = Object.keys(keys).map(k => {
+        return {
+          key: k,
+          size: keys[k],
+          title: k.toUpperCase()
+        }
+      }).sort((a, b) => {
+        if (a.key < b.key) return -1;
+        if (a.key > b.key) return 1;
+        return 0;
+      });
+
       this.isLoading = false;
       window.scrollTo(0, 0);
     });