diff --git a/src/app/modules/presentation/remote/remote.component.ts b/src/app/modules/presentation/remote/remote.component.ts index 8efa0c4..24ffafc 100644 --- a/src/app/modules/presentation/remote/remote.component.ts +++ b/src/app/modules/presentation/remote/remote.component.ts @@ -83,14 +83,13 @@ export class RemoteComponent implements OnDestroy { globalSettingsService: GlobalSettingsService, private cRef: ChangeDetectorRef ) { - const currentShowId$ = globalSettingsService.get$ - .pipe( - filter((settings): settings is NonNullable => !!settings), - map(_ => _.currentShow), - filter((showId): showId is string => !!showId), - distinctUntilChanged(), - takeUntil(this.destroy$) - ); + const currentShowId$ = globalSettingsService.get$.pipe( + filter((settings): settings is NonNullable => !!settings), + map(_ => _.currentShow), + filter((showId): showId is string => !!showId), + distinctUntilChanged(), + takeUntil(this.destroy$) + ); const show$ = currentShowId$.pipe( switchMap(showId => this.showService.read$(showId)), diff --git a/src/app/modules/shows/list/filter/filter.component.ts b/src/app/modules/shows/list/filter/filter.component.ts index ce735e9..42d041c 100644 --- a/src/app/modules/shows/list/filter/filter.component.ts +++ b/src/app/modules/shows/list/filter/filter.component.ts @@ -5,8 +5,8 @@ import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angula import {FilterValues} from './filter-values'; import {Show} from '../../services/show'; import {ShowService} from '../../services/show.service'; -import {distinctUntilChanged, map} from 'rxjs/operators'; -import {combineLatest, Observable} from 'rxjs'; +import {distinctUntilChanged, map, switchMap} from 'rxjs/operators'; +import {combineLatest, Observable, of} from 'rxjs'; import {dynamicSort, onlyUnique} from '../../../../services/filter.helper'; import {UserService} from '../../../../services/user/user.service'; import {isEqual} from 'lodash'; @@ -66,21 +66,31 @@ export class FilterComponent { } public owners$ = (): Observable<{key: string; value: string}[]> => { - return combineLatest([ - this.showService.list$().pipe( - map(shows => { - return shows.map(show => show.owner).filter(onlyUnique); - }) + return this.showService.list$().pipe( + map(shows => + shows + .map(show => show.owner) + .filter(onlyUnique) + .filter((ownerId): ownerId is string => !!ownerId) ), - this.userService.users$, - ]).pipe( - map(([owners, users]) => { - return owners - .map(ownerId => ({ - key: ownerId, - value: users.find(user => user.id === ownerId)?.name, - })) - .sort(dynamicSort('value')); + switchMap(ownerIds => { + if (ownerIds.length === 0) { + return of([] as {key: string; value: string}[]); + } + + return combineLatest( + ownerIds.map(ownerId => + this.userService.getUserbyId$(ownerId).pipe( + map(user => ({ + key: ownerId, + value: user?.name, + })) + ) + ) + ); + }), + map(owners => { + return owners.sort(dynamicSort('value')); }), distinctUntilChanged(isEqual), map(_ => _ as {key: string; value: string}[]) diff --git a/src/app/modules/songs/song/new/new.component.ts b/src/app/modules/songs/song/new/new.component.ts index 22ea5d8..12b48b2 100644 --- a/src/app/modules/songs/song/new/new.component.ts +++ b/src/app/modules/songs/song/new/new.component.ts @@ -35,10 +35,13 @@ export class NewComponent implements OnInit, OnDestroy { this.form.reset(); this.subs.push( - this.songService.list$().pipe(take(1)).subscribe(songs => { - const freeSongnumber = this.getFreeSongNumber(songs); - this.form.controls.number.setValue(freeSongnumber); - }) + this.songService + .list$() + .pipe(take(1)) + .subscribe(songs => { + const freeSongnumber = this.getFreeSongNumber(songs); + this.form.controls.number.setValue(freeSongnumber); + }) ); } diff --git a/src/app/widget-modules/components/card/card.component.less b/src/app/widget-modules/components/card/card.component.less index aa6da2c..b041ddb 100644 --- a/src/app/widget-modules/components/card/card.component.less +++ b/src/app/widget-modules/components/card/card.component.less @@ -10,6 +10,7 @@ width: 800px; position: relative; color: var(--text); + padding-bottom: 5px; @media screen and (max-width: 860px) { width: 100vw;