import { AfterContentInit , ChangeDetectionStrategy , ChangeDetectorRef , Component } from '@angular/core' ; import { ReferenceCard } from '@firestone-hs/reference-data' ; import { CardsFacadeService } from '@services/cards-facade.service' ; import { Observable } from 'rxjs' ; import { CardBack } from '../../models/card-back' ; import { CurrentView } from '../../models/mainwindow/collection/current-view.type' ; import { Set , SetCard } from '../../models/set' ; import { AppUiStoreFacadeService } from '../../services/ui-store/app-ui-store-facade.service' ; import { AbstractSubscriptionComponent } from '../abstract-subscription.component' ; @ Component ( { selector : 'collection' , styleUrls : [ `../../../css/component/app-section.component.scss` , `../../../css/component/collection/collection.component.scss` , ] , template : `
		<div
			class="app-section collection"
			*ngIf="{
				currentView: currentView$ | async,
				selectedSet: selectedSet$ | async,
				selectedCard: selectedCard$ | async,
				selectedCardBack: selectedCardBack$ | async,
				searchString: searchString$ | async
			} as value"
		>
			<section class="main" [ngClass]="{ 'divider': value.currentView === 'cards' }">
				<with-loading [isLoading]="loading$ | async">
					<div class="content main-content" *ngIf="menuDisplayType$ | async as menuDisplayType">
						<global-header *ngIf="menuDisplayType === 'breadcrumbs'"> </global-header>
						<collection-menu-selection
							class="menu-selection"
							*ngIf="menuDisplayType === 'menu'"
							[selectedTab]="value.currentView"
						>
						</collection-menu-selection>
						<sets *ngIf="value.currentView === 'sets'"> </sets>
						<cards
							[set]="value.selectedSet"
							[searchString]="value.searchString"
							*ngIf="value.currentView === 'cards'"
						>
						</cards>
						<full-card
							class="full-card"
							[selectedCard]="value.selectedCard"
							*ngIf="value.currentView === 'card-details'"
						>
						</full-card>
						<card-backs *ngIf="value.currentView === 'card-backs'"> </card-backs>
						<full-card-back
							class="full-card"
							[cardBack]="value.selectedCardBack"
							*ngIf="value.currentView === 'card-back-details'"
						>
						</full-card-back>
						<hero-portraits *ngIf="value.currentView === 'hero-portraits'"> </hero-portraits>
						<the-coins *ngIf="value.currentView === 'coins'"> </the-coins>
						<pack-stats *ngIf="value.currentView === 'packs'"></pack-stats>
					</div>
				</with-loading>
			</section>
			<section class="secondary">
				<card-search
					*ngIf="
						value.currentView !== 'packs' &&
						!isSetDetails(value.currentView, value.selectedSet, value.searchString)
					"
				></card-search>
				<card-history
					[selectedCard]="value.selectedCard"
					*ngIf="
						value.currentView !== 'packs' &&
						!isSetDetails(value.currentView, value.selectedSet, value.searchString)
					"
				>
				</card-history>
				<pack-history *ngIf="value.currentView === 'packs'"> </pack-history>
				<set-stats
					[set]="value.selectedSet"
					*ngIf="isSetDetails(value.currentView, value.selectedSet, value.searchString)"
				>
				</set-stats>
			</section>
		</div>
	` , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class CollectionComponent extends AbstractSubscriptionComponent implements AfterContentInit { loading$ : Observable < boolean > ; currentView$ : Observable < CurrentView > ; menuDisplayType$ : Observable < string > ; searchString$ : Observable < string > ; selectedSet$ : Observable < Set > ; selectedCard$ : Observable < SetCard | ReferenceCard > ; selectedCardBack$ : Observable < CardBack > ; isSetDetails ( currentView , selectedSet , searchString ) { return currentView === 'cards' && ! ! selectedSet && ! searchString ; } constructor ( private readonly allCards , protected readonly store , protected readonly cdr ) { super ( store , cdr ) ; } ngAfterContentInit ( ) { this . loading$ = this . store . listen$ ( ( [ main , nav , prefs ] ) => main . binder . isLoading ) . pipe ( this . mapData ( ( [ loading ] ) => loading ) ) ; this . currentView$ = this . store . listen$ ( ( [ main , nav , prefs ] ) => nav . navigationCollection . currentView ) . pipe ( this . mapData ( ( [ currentView ] ) => currentView ) ) ; this . menuDisplayType$ = this . store . listen$ ( ( [ main , nav , prefs ] ) => nav . navigationCollection . menuDisplayType ) . pipe ( this . mapData ( ( [ menuDisplayType ] ) => menuDisplayType ) ) ; this . searchString$ = this . store . listen$ ( ( [ main , nav , prefs ] ) => nav . navigationCollection . searchString ) . pipe ( this . mapData ( ( [ searchString ] ) => searchString ) ) ; this . selectedSet$ = this . store . listen$ ( ( [ main , nav , prefs ] ) => main . binder . allSets , ( [ main , nav , prefs ] ) => nav . navigationCollection . selectedSetId ) . pipe ( this . mapData ( ( [ allSets , selectedSetId ] ) => allSets . find ( ( set ) => set . id === selectedSetId ) ) ) ; this . selectedCard$ = this . store . listen$ ( ( [ main , nav , prefs ] ) => main . binder . allSets , ( [ main , nav , prefs ] ) => nav . navigationCollection . selectedCardId ) . pipe ( this . mapData ( ( [ allSets , selectedCardId ] ) => selectedCardId ? allSets . map ( ( set ) => set . allCards ) . reduce ( ( a , b ) => a . concat ( b ) , [ ] ) . find ( ( card ) => card . id === selectedCardId ) ?? this . allCards . getCard ( selectedCardId ) : null ) ) ; this . selectedCardBack$ = this . store . listen$ ( ( [ main , nav , prefs ] ) => main . binder . cardBacks , ( [ main , nav , prefs ] ) => nav . navigationCollection . selectedCardBackId ) . pipe ( this . mapData ( ( [ cardBacks , selectedCardBackId ] ) => cardBacks . find ( ( cardBack ) => cardBack . id === selectedCardBackId ) ) ) ; } }