Linked Series (#1230)

* Implemented the ability to link different series together through Edit Series. CSS pending.

* Fixed up the css for related cards to show the relation

* Working on making all tabs in edit seris modal save in one go. Taking a break.

* Some fixes for Robbie to help with styling on

* Linked series pill, center library

* Centering library detail and related pill spacing

- Library detail cards are now centered if total number of items is > 6 or if mobile.
- Added ability to determine if mobile (viewport width <= 480px
- Fixed related card spacing
- Fixed related card pill spacing

* Updating relation form spacing

* Fixed a bug in card detail layout when there is no pagination, we create one in a way that all items render at once.

* Only auto-close side nav on phones, not tablets

* Fixed a bug where we had flipped state on sideNavCollapsed$

* Cleaned up some misleading comments

* Implemented RBS back in and now  if you have a relationship besides prequel/sequel, the target series will show a link back to it's parent.

* Added Parentto pipe

* Missed a relationship type

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

UI/Web/src/app/series-detail/series-detail.component.html

@@ -69,6 +69,17 @@
     <ng-container>
         <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
         <ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs mb-2" [destroyOnHide]="false" (navChange)="onNavChange($event)">
+            <li [ngbNavItem]="TabID.Related" *ngIf="hasRelations">
+                <a ngbNavLink>Related</a>
+                <ng-template ngbNavContent>
+                  <div class="row g-0">
+                      <ng-container *ngFor="let item of relations; let idx = index; trackBy: trackByRelatedSeriesIdentiy">
+                        <app-series-card class="col-auto p-2" [data]="item.series" [libraryId]="item.series.libraryId" [relation]="item.relation"></app-series-card>
+                        <!--(reload)="reloadInProgress($event)" (dataChanged)="reloadInProgress($event)"-->
+                      </ng-container>
+                  </div>
+                </ng-template>
+              </li>
             <li [ngbNavItem]="TabID.Specials" *ngIf="hasSpecials">
               <a ngbNavLink>Specials</a>
               <ng-template ngbNavContent>

UI/Web/src/app/series-detail/series-detail.component.ts

@@ -33,9 +33,16 @@ import { ReaderService } from '../_services/reader.service';
 import { ReadingListService } from '../_services/reading-list.service';
 import { SeriesService } from '../_services/series.service';
 import { NavService } from '../_services/nav.service';
+import { RelationKind } from '../_models/series-detail/relation-kind';
+import { RelatedSeries } from '../_models/series-detail/related-series';
 
+interface RelatedSeris {
+  series: Series;
+  relation: RelationKind;
+}
 
 enum TabID {
+  Related = 0,
   Specials = 1,
   Storyline = 2,
   Volumes = 3,
@@ -106,6 +113,16 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
    * Track by function for Chapter to tell when to refresh card data
    */
   trackByChapterIdentity = (index: number, item: Chapter) => `${item.title}_${item.number}_${item.pagesRead}`;
+  trackByRelatedSeriesIdentiy = (index: number, item: RelatedSeris) => `${item.series.name}_${item.series.libraryId}_${item.series.pagesRead}_${item.relation}`;
+
+  /**
+   * Are there any related series
+   */
+  hasRelations: boolean = false;
+  /**
+   * Related Series. Sorted by backend
+   */
+  relations: Array<RelatedSeris> = [];
 
   bulkActionCallback = (action: Action, data: any) => {
     if (this.series === undefined) {
@@ -356,6 +373,27 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
       this.volumeActions = this.actionFactoryService.getVolumeActions(this.handleVolumeActionCallback.bind(this));
       this.chapterActions = this.actionFactoryService.getChapterActions(this.handleChapterActionCallback.bind(this));
 
+      // TODO: Move this to a forkJoin?
+      this.seriesService.getRelatedForSeries(this.seriesId).subscribe((relations: RelatedSeries) => {
+        this.relations = [
+          ...relations.prequels.map(item => this.createRelatedSeries(item, RelationKind.Prequel)),
+          ...relations.sequels.map(item => this.createRelatedSeries(item, RelationKind.Sequel)),
+          ...relations.sideStories.map(item => this.createRelatedSeries(item, RelationKind.SideStory)), 
+          ...relations.spinOffs.map(item => this.createRelatedSeries(item, RelationKind.SpinOff)),
+          ...relations.adaptations.map(item => this.createRelatedSeries(item, RelationKind.Adaptation)),
+          ...relations.contains.map(item => this.createRelatedSeries(item, RelationKind.Contains)),
+          ...relations.characters.map(item => this.createRelatedSeries(item, RelationKind.Character)), 
+          ...relations.others.map(item => this.createRelatedSeries(item, RelationKind.Other)),
+          ...relations.alternativeSettings.map(item => this.createRelatedSeries(item, RelationKind.AlternativeSetting)),
+          ...relations.alternativeVersions.map(item => this.createRelatedSeries(item, RelationKind.AlternativeVersion)),
+          ...relations.doujinshis.map(item => this.createRelatedSeries(item, RelationKind.Doujinshi)),
+          ...relations.parent.map(item => this.createRelatedSeries(item, RelationKind.Parent)),
+        ];
+        if (this.relations.length > 0) {
+          this.hasRelations = true;
+        }
+      });
+
       this.seriesService.getSeriesDetail(this.seriesId).subscribe(detail => {
         this.hasSpecials = detail.specials.length > 0;
         this.specials = detail.specials;
@@ -372,6 +410,10 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
     });
   }
 
+  createRelatedSeries(series: Series, relation: RelationKind) {
+    return {series, relation} as RelatedSeris;
+  }
+
   /**
    * This will update the selected tab
    *