optimize remote #3

src/app/modules/presentation/remote/remote.component.ts

@@ -83,8 +83,7 @@ export class RemoteComponent implements OnDestroy {
     globalSettingsService: GlobalSettingsService,
     private cRef: ChangeDetectorRef
   ) {
-    const currentShowId$ = globalSettingsService.get$
-      .pipe(
+    const currentShowId$ = globalSettingsService.get$.pipe(
       filter((settings): settings is NonNullable<typeof settings> => !!settings),
       map(_ => _.currentShow),
       filter((showId): showId is string => !!showId),

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 => ({
+      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: users.find(user => user.id === ownerId)?.name,
+                value: user?.name,
               }))
-          .sort(dynamicSort('value'));
+            )
+          )
+        );
+      }),
+      map(owners => {
+        return owners.sort(dynamicSort('value'));
       }),
       distinctUntilChanged(isEqual),
       map(_ => _ as {key: string; value: string}[])

src/app/modules/songs/song/new/new.component.ts

@@ -35,7 +35,10 @@ export class NewComponent implements OnInit, OnDestroy {
     this.form.reset();
 
     this.subs.push(
-      this.songService.list$().pipe(take(1)).subscribe(songs => {
+      this.songService
+        .list$()
+        .pipe(take(1))
+        .subscribe(songs => {
           const freeSongnumber = this.getFreeSongNumber(songs);
           this.form.controls.number.setValue(freeSongnumber);
         })

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;