diff --git a/comixed-frontend/src/app/library/library-routing.module.ts b/comixed-frontend/src/app/library/library-routing.module.ts index 6e96182f5..baef5f20e 100644 --- a/comixed-frontend/src/app/library/library-routing.module.ts +++ b/comixed-frontend/src/app/library/library-routing.module.ts @@ -36,7 +36,7 @@ const routes: Routes = [ canActivate: [ReaderGuard] }, { - path: 'commics/:type/:name', + path: 'comics/:type/:name', component: LibraryPageComponent, canActivate: [ReaderGuard] }, diff --git a/comixed-frontend/src/app/library/models/collection-type.enum.ts b/comixed-frontend/src/app/library/models/collection-type.enum.ts index 9c5853a55..ae2e86401 100644 --- a/comixed-frontend/src/app/library/models/collection-type.enum.ts +++ b/comixed-frontend/src/app/library/models/collection-type.enum.ts @@ -17,6 +17,7 @@ */ export enum CollectionType { + ALL_COMICS = 'allcomics', PUBLISHERS = 'publishers', SERIES = 'series', CHARACTERS = 'characters', diff --git a/comixed-frontend/src/app/library/pages/library-page/library-page.component.html b/comixed-frontend/src/app/library/pages/library-page/library-page.component.html index 9cdc051fd..0b744032a 100644 --- a/comixed-frontend/src/app/library/pages/library-page/library-page.component.html +++ b/comixed-frontend/src/app/library/pages/library-page/library-page.component.html @@ -1,4 +1,9 @@ -

{{'library-page.title'|translate:{title: title, count: comics.length} }}

+

+ {{'library-page.title-for-collection'|translate:{type: collectionType, name: collectionName, count: comics.length} }} +

+

+ {{'library-page.title-no-collection'|translate:{count: comics.length} }} +

diff --git a/comixed-frontend/src/app/library/pages/library-page/library-page.component.ts b/comixed-frontend/src/app/library/pages/library-page/library-page.component.ts index df3081425..6361901b8 100644 --- a/comixed-frontend/src/app/library/pages/library-page/library-page.component.ts +++ b/comixed-frontend/src/app/library/pages/library-page/library-page.component.ts @@ -21,7 +21,7 @@ import { ActivatedRoute, Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { LibraryAdaptor, SelectionAdaptor } from 'app/library'; import { UserService } from 'app/services/user.service'; -import { ConfirmationService } from 'primeng/api'; +import { ConfirmationService, MessageService } from 'primeng/api'; import { TranslateService } from '@ngx-translate/core'; import { AuthenticationAdaptor, User } from 'app/user'; import { Title } from '@angular/platform-browser'; @@ -30,6 +30,7 @@ import { Comic } from 'app/comics'; import { filter } from 'rxjs/operators'; import { CollectionType } from 'app/library/models/collection-type.enum'; import { LoggerService } from '@angular-ru/logger'; +import { ComicCollectionEntry } from 'app/library/models/comic-collection-entry'; @Component({ selector: 'app-library-page', @@ -48,7 +49,9 @@ export class LibraryPageComponent implements OnInit, OnDestroy { processingCount = 0; importCountSubscription: Subscription; langChangeSubscription: Subscription; - queryParamsSubscription: Subscription; + paramsSubscription: Subscription; + collectionType: CollectionType; + collectionName: string; title: string; @@ -63,6 +66,7 @@ export class LibraryPageComponent implements OnInit, OnDestroy { private userService: UserService, private confirmationService: ConfirmationService, private translateService: TranslateService, + private messageService: MessageService, private breadcrumbAdaptor: BreadcrumbAdaptor ) { this.authSubscription = this.authenticationAdaptor.user$.subscribe( @@ -86,61 +90,82 @@ export class LibraryPageComponent implements OnInit, OnDestroy { () => this.loadTranslations() ); this.loadTranslations(); - this.queryParamsSubscription = this.activatedRoute.queryParams.subscribe( - params => { - if (!!this.comicsSubscription) { - this.comicsSubscription.unsubscribe(); - } - if (!!params['type'] && !!params['name']) { - this.logger.debug( - 'preparing to display collection entries:', - params['type'], - params['name'] - ); - let comicSource = null; + this.paramsSubscription = this.activatedRoute.params.subscribe(params => { + if (!!this.comicsSubscription) { + this.comicsSubscription.unsubscribe(); + } + this.collectionType = params['type']; + this.collectionName = params['name']; + if (!!this.collectionType && !!this.collectionName) { + this.logger.debug( + 'preparing to display collection entries:', + this.collectionType, + this.collectionName + ); + let comicSource = null; - switch (CollectionType[params['type']]) { - case CollectionType.PUBLISHERS: - comicSource = this.libraryAdaptor.publishers$; - break; - case CollectionType.STORIES: - comicSource = this.libraryAdaptor.series$; - break; - case CollectionType.CHARACTERS: - comicSource = this.libraryAdaptor.characters$; - break; - case CollectionType.TEAMS: - comicSource = this.libraryAdaptor.teams$; - break; - case CollectionType.LOCATIONS: - comicSource = this.libraryAdaptor.locations$; - break; - case CollectionType.STORIES: - comicSource = this.libraryAdaptor.stories$; - break; - default: - this.logger.error('no such collection type:', params['type']); - } + switch (this.collectionType) { + case CollectionType.PUBLISHERS: + comicSource = this.libraryAdaptor.publishers$; + break; + case CollectionType.SERIES: + comicSource = this.libraryAdaptor.series$; + break; + case CollectionType.CHARACTERS: + comicSource = this.libraryAdaptor.characters$; + break; + case CollectionType.TEAMS: + comicSource = this.libraryAdaptor.teams$; + break; + case CollectionType.LOCATIONS: + comicSource = this.libraryAdaptor.locations$; + break; + case CollectionType.STORIES: + comicSource = this.libraryAdaptor.stories$; + break; + default: + this.logger.error('no such collection type:', this.collectionType); + } - if (!!comicSource) { - this.comicsSubscription = comicSource.subscribe( - comics => (this.comics = comics) - ); - } + if (!!comicSource) { + this.comicsSubscription = comicSource + .pipe( + filter( + (collection: ComicCollectionEntry[]) => + !!collection && + collection.some(entry => entry.name === this.collectionName) + ) + ) + .subscribe(collection => { + console.log('found collection:', collection); + this.comics = collection.find( + entry => entry.name === this.collectionName + ).comics; + }); } else { - this.comicsSubscription = this.libraryAdaptor.comic$.subscribe( - comics => { - this.comics = comics; - this.titleService.setTitle( - this.translateService.instant('library-page.title', { - count: this.comics.length - }) - ); - } - ); + this.messageService.add({ + severity: 'error', + detail: this.translateService.instant( + 'library-page.error.no-such-type', + { type: params['type'] } + ) + }); } + } else { + this.collectionType = null; + this.collectionName = null; + this.comicsSubscription = this.libraryAdaptor.comic$.subscribe( + comics => { + this.comics = comics; + this.titleService.setTitle( + this.translateService.instant('library-page.title', { + count: this.comics.length + }) + ); + } + ); } - ); + }); } ngOnInit() {} diff --git a/comixed-frontend/src/assets/i18n/library-en.json b/comixed-frontend/src/assets/i18n/library-en.json index 73c290707..f5b1f32fe 100644 --- a/comixed-frontend/src/assets/i18n/library-en.json +++ b/comixed-frontend/src/assets/i18n/library-en.json @@ -118,7 +118,11 @@ } }, "library-page": { - "title": "ComiXed: {title} - {count, plural, =1{One Comic} other{# Comics}}" + "title-no-collection": "All Comics - {count, plural, =1{One Comic} other{# Comics}}", + "title-for-collection": "{name} [{type, select, publishers{Publisher} series{Series} characters{Character} teams{Team} locations{Location} stories{Story} other{Unknown}}] - {count, plural, =1{One Comic} other{# Comics}}", + "error": { + "no-such-type": "No such collection type: {type}" + } }, "reading-lists-page": { "title": "ComiXed: Reading Lists - {count, plural, =1{One List} other{# Lists}}"