Changing "Chapter" to "Issue" for comic libraries

This commit is contained in:
Robbie Davis 2021-10-04 14:56:33 -04:00
parent 3748356199
commit 9e71d5461d
4 changed files with 55 additions and 10 deletions

View file

@ -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>

View file

@ -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) {

View file

@ -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;
}

View file

@ -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>