Changing "Chapter" to "Issue" for comic libraries

UI/Web/src/app/cards/_modals/card-details-modal/card-details-modal.component.html

@@ -1,7 +1,9 @@
 <div *ngIf="data !== undefined">
     <div class="modal-header">
-        <h4 class="modal-title" id="modal-basic-title">
+        <h4 *ngIf="libraryType != 1; else comicHeader" class="modal-title" id="modal-basic-title">
             {{parentName}} - {{data.number != 0 ? (isChapter ? 'Chapter ' : 'Volume ') + data.number : 'Special'}} Details</h4>
+        <ng-template #comicHeader><h4 class="modal-title" id="modal-basic-title">
+            {{parentName}} - {{data.number != 0 ? (isChapter ? 'Issue #' : 'Volume ') + data.number : 'Special'}} Details</h4></ng-template>
         <button type="button" class="close" aria-label="Close" (click)="close()">
         <span aria-hidden="true">&times;</span>
         </button>
@@ -27,18 +29,34 @@
             </div>
         </ng-container>
 
-        <h4 *ngIf="!utilityService.isChapter(data)">Chapters</h4>
+        <h4 *ngIf="!utilityService.isChapter(data)">
+            <span *ngIf="libraryType != 1; else comicName">Chapters</span>
+            <ng-template #comicName><span>Issues</span>
+            </ng-template>
+        </h4>
         <ul class="list-unstyled">
             <li class="media my-4" *ngFor="let chapter of chapters">
-                <a (click)="readChapter(chapter)" href="javascript:void(0);" title="Read Chapter {{chapter.number}}">
+                <a (click)="readChapter(chapter)" href="javascript:void(0);" *ngIf="libraryType != 1; else comicLink" title="Read Chapter {{chapter.number}}">
                     <img class="mr-3" style="width: 74px" [src]="chapter.coverImage">
                 </a>
+                <ng-template #comicLink>
+                    <a (click)="readChapter(chapter)" href="javascript:void(0);" title="Read Issue #{{chapter.number}}">
+                        <img class="mr-3" style="width: 74px" [src]="chapter.coverImage">
+                    </a>
+                </ng-template>
                 <div class="media-body">
                     <h5 class="mt-0 mb-1">
                         <span *ngIf="chapter.number !== '0'; else specialHeader">
-                            <span class="">
+                            <span *ngIf="libraryType != 1; else comicAction" class="">
                                 <app-card-actionables (actionHandler)="performAction($event, chapter)" [actions]="chapterActions" [labelBy]="'Chapter' + formatChapterNumber(chapter)"></app-card-actionables>&nbsp;
-                            </span>Chapter {{formatChapterNumber(chapter)}}
+                                Chapter {{formatChapterNumber(chapter)}}
+                            </span>
+                            <ng-template #comicAction>
+                                <span class="">
+                                    <app-card-actionables (actionHandler)="performAction($event, chapter)" [actions]="chapterActions" [labelBy]="'Chapter' + formatChapterNumber(chapter)"></app-card-actionables>&nbsp;
+                                    Issue #{{formatChapterNumber(chapter)}}
+                                </span>
+                            </ng-template>
                             <span class="badge badge-primary badge-pill">
                                 <span *ngIf="chapter.pagesRead > 0 && chapter.pagesRead < chapter.pages">{{chapter.pagesRead}} / {{chapter.pages}}</span>
                                 <span *ngIf="chapter.pagesRead === 0">UNREAD</span>

UI/Web/src/app/cards/_modals/card-details-modal/card-details-modal.component.ts

@@ -13,6 +13,8 @@ import { ActionService } from 'src/app/_services/action.service';
 import { ImageService } from 'src/app/_services/image.service';
 import { UploadService } from 'src/app/_services/upload.service';
 import { ChangeCoverImageModalComponent } from '../change-cover-image/change-cover-image-modal.component';
+import { LibraryType } from '../../../_models/library';
+import { LibraryService } from '../../../_services/library.service';
 
 
 
@@ -39,12 +41,16 @@ export class CardDetailsModalComponent implements OnInit {
   isAdmin: boolean = false;
   actions: ActionItem<any>[] = [];
   chapterActions: ActionItem<Chapter>[] = [];
+  libraryType: LibraryType = LibraryType.Manga; 
 
+  get LibraryType(): typeof LibraryType {
+    return LibraryType;
+  }
 
   constructor(private modalService: NgbModal, public modal: NgbActiveModal, public utilityService: UtilityService, 
     public imageService: ImageService, private uploadService: UploadService, private toastr: ToastrService, 
     private accountService: AccountService, private actionFactoryService: ActionFactoryService, 
-    private actionService: ActionService, private router: Router) { }
+    private actionService: ActionService, private router: Router, private libraryService: LibraryService) { }
 
   ngOnInit(): void {
     this.isChapter = this.utilityService.isChapter(this.data);
@@ -55,6 +61,10 @@ export class CardDetailsModalComponent implements OnInit {
       }
     });
 
+    this.libraryService.getLibraryType(this.libraryId).subscribe(type => {
+      this.libraryType = type;
+    });
+
     this.chapterActions = this.actionFactoryService.getChapterActions(this.handleChapterActionCallback.bind(this)).filter(item => item.action !== Action.Edit);
 
     if (this.isChapter) {

UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.ts

@@ -4,6 +4,7 @@ import { ToastrService } from 'ngx-toastr';
 import { take } from 'rxjs/operators';
 import { ConfirmService } from 'src/app/shared/confirm.service';
 import { UtilityService } from 'src/app/shared/_services/utility.service';
+import { LibraryType } from 'src/app/_models/library';
 import { MangaFormat } from 'src/app/_models/manga-format';
 import { ReadingList, ReadingListItem } from 'src/app/_models/reading-list';
 import { AccountService } from 'src/app/_services/account.service';
@@ -12,6 +13,7 @@ import { ActionService } from 'src/app/_services/action.service';
 import { ImageService } from 'src/app/_services/image.service';
 import { ReadingListService } from 'src/app/_services/reading-list.service';
 import { IndexUpdateEvent, ItemRemoveEvent } from '../dragable-ordered-list/dragable-ordered-list.component';
+import { LibraryService } from '../../_services/library.service';
 
 @Component({
   selector: 'app-reading-list-detail',
@@ -19,7 +21,6 @@ import { IndexUpdateEvent, ItemRemoveEvent } from '../dragable-ordered-list/drag
   styleUrls: ['./reading-list-detail.component.scss']
 })
 export class ReadingListDetailComponent implements OnInit {
-
   items: Array<ReadingListItem> = [];
   listId!: number;
   readingList!: ReadingList;
@@ -32,6 +33,11 @@ export class ReadingListDetailComponent implements OnInit {
   hasDownloadingRole: boolean = false;
   downloadInProgress: boolean = false;
 
+  libraryType: LibraryType = LibraryType.Manga; 
+
+  get LibraryType(): typeof LibraryType {
+    return LibraryType;
+  }
 
   get MangaFormat(): typeof MangaFormat {
     return MangaFormat;
@@ -39,7 +45,7 @@ export class ReadingListDetailComponent implements OnInit {
 
   constructor(private route: ActivatedRoute, private router: Router, private readingListService: ReadingListService,
     private actionService: ActionService, private actionFactoryService: ActionFactoryService, public utilityService: UtilityService,
-    public imageService: ImageService, private accountService: AccountService, private toastr: ToastrService, private confirmService: ConfirmService) {}
+    public imageService: ImageService, private accountService: AccountService, private toastr: ToastrService, private confirmService: ConfirmService, private libraryService: LibraryService) {}
 
   ngOnInit(): void {
     const listId = this.route.snapshot.paramMap.get('id');
@@ -119,6 +125,10 @@ export class ReadingListDetailComponent implements OnInit {
       return 'Volume ' + this.utilityService.cleanSpecialTitle(item.chapterNumber);
     }
 
+    if (item.libraryId === 1) {
+      return 'Issue #' + item.chapterNumber;
+    }
+
     return 'Chapter ' + item.chapterNumber;
   }
 

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

@@ -112,7 +112,8 @@
               </ng-template>
             </li>
             <li [ngbNavItem]="2" *ngIf="hasNonSpecialVolumeChapters">
-              <a ngbNavLink>Volumes/Chapters</a>
+              <a *ngIf="libraryType != 1; else comicBlock" ngbNavLink>Volumes/Chapters</a>
+              <ng-template #comicBlock><a ngbNavLink>Volumes/Issues</a></ng-template>
               <ng-template ngbNavContent>
                   <div class="row no-gutters">
                         <div *ngFor="let volume of volumes; let idx = index; trackBy: trackByVolumeIdentity">
@@ -121,9 +122,15 @@
                                 [read]="volume.pagesRead" [total]="volume.pages" [actions]="volumeActions" (selection)="bulkSelectionService.handleCardSelection('volume', idx, volumes.length, $event)" [selected]="bulkSelectionService.isCardSelected('volume', idx)" [allowSelection]="true"></app-card-item>
                         </div>
                         <div *ngFor="let chapter of chapters; let idx = index; trackBy: trackByChapterIdentity">
-                            <app-card-item class="col-auto" *ngIf="!chapter.isSpecial" [entity]="chapter" [title]="'Chapter ' + chapter.range" (click)="openChapter(chapter)"
+                            <app-card-item class="col-auto" *ngIf="!chapter.isSpecial && libraryType != 1; else comicBlock" [entity]="chapter" [title]="'Chapter ' + chapter.range" (click)="openChapter(chapter)"
                             [imageUrl]="imageService.getChapterCoverImage(chapter.id) + '&offset=' + coverImageOffset"
                             [read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions" (selection)="bulkSelectionService.handleCardSelection('chapter', idx, chapters.length, $event)" [selected]="bulkSelectionService.isCardSelected('chapter', idx)" [allowSelection]="true"></app-card-item>
+
+                            <ng-template #comicBlock>
+                                <app-card-item class="col-auto" [entity]="chapter" [title]="'Issue #' + chapter.range" (click)="openChapter(chapter)"
+                                [imageUrl]="imageService.getChapterCoverImage(chapter.id) + '&offset=' + coverImageOffset"
+                                [read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions" (selection)="bulkSelectionService.handleCardSelection('chapter', idx, chapters.length, $event)" [selected]="bulkSelectionService.isCardSelected('chapter', idx)" [allowSelection]="true"></app-card-item>
+                            </ng-template>
                         </div>
                   </div>
               </ng-template>