optimize show filter

src/app/modules/shows/list/filter/filter.component.html

@@ -14,6 +14,7 @@
     <mat-form-field appearance="outline">
       <mat-label>Ersteller</mat-label>
       <mat-select formControlName="owner">
+        <mat-option [value]="null">Alle</mat-option>
         <mat-option *ngFor="let owner of owners" [value]="owner.key">{{
             owner.value
           }}
@@ -24,6 +25,7 @@
     <mat-form-field appearance="outline">
       <mat-label>Art der Veranstaltung</mat-label>
       <mat-select formControlName="showType">
+        <mat-option [value]="null">Alle</mat-option>
         <mat-optgroup label="öffentlich">
           <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
               key | showType
@@ -41,5 +43,5 @@
 
   </div>
 
-  <i>Anzahl der Suchergebnisse: {{ shows.length }}</i>
+  <i>Anzahl der Suchergebnisse: {{ shows?.length ?? 0 }}</i>
 </div>

src/app/modules/shows/list/filter/filter.component.ts

@@ -54,6 +54,8 @@ export class FilterComponent {
     activatedRoute.queryParams.subscribe(params => {
       const filterValues = params as FilterValues;
       if (filterValues.time) this.filterFormGroup.controls.time.setValue(+filterValues.time);
+      this.filterFormGroup.controls.owner.setValue(filterValues.owner ?? null, {emitEvent: false});
+      this.filterFormGroup.controls.showType.setValue(filterValues.showType ?? null, {emitEvent: false});
     });
 
     this.filterFormGroup.controls.time.valueChanges.subscribe(_ => void this.filerValueChanged('time', _ as number));
@@ -87,7 +89,7 @@ export class FilterComponent {
 
   private async filerValueChanged<T>(key: string, value: T): Promise<void> {
     const route = this.router.createUrlTree([this.route], {
-      queryParams: {[key]: value},
+      queryParams: {[key]: value || null},
       queryParamsHandling: 'merge',
     });
     await this.router.navigateByUrl(route);

src/app/modules/shows/list/list.component.ts

@@ -5,7 +5,7 @@ import {fade} from '../../../animations';
 import {ShowService} from '../services/show.service';
 import {FilterValues} from './filter/filter-values';
 import {ActivatedRoute, RouterLink} from '@angular/router';
-import {map} from 'rxjs/operators';
+import {map, switchMap} from 'rxjs/operators';
 import {RoleDirective} from '../../../services/user/role.directive';
 import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
 import {AsyncPipe, NgFor, NgIf} from '@angular/common';
@@ -43,18 +43,26 @@ export class ListComponent {
       return filterValues?.showType;
     })
   );
+  public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths)));
 
-  public publicShows$ = combineLatest([this.shows$, this.lastMonths$, this.owner$, this.showType$]).pipe(
-    map(([shows, lastMonths, owner, showType]) =>
-      shows
-        .filter(f => {
-          const d = new Date();
-          d.setMonth(d.getMonth() - lastMonths);
-          return f.published && f.date.toDate() >= d;
-        })
+  public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
+    map(([shows, lastMonths]) => {
+      const startDate = new Date();
+      startDate.setHours(0, 0, 0, 0);
+      startDate.setDate(startDate.getDate() - lastMonths * 30);
+
+      return shows.filter(show => show.published && !show.archived && show.date.toDate() >= startDate);
+    })
+  );
+
+  public publicShows$ = combineLatest([this.queriedPublicShows$, this.fallbackPublicShows$, this.owner$, this.showType$]).pipe(
+    map(([queriedShows, fallbackShows, owner, showType]) => {
+      const shows = queriedShows.length > 0 || fallbackShows.length === 0 ? queriedShows : fallbackShows;
+
+      return shows
         .filter(show => !owner || show.owner === owner)
-        .filter(show => !showType || show.showType === showType)
-    )
+        .filter(show => !showType || show.showType === showType);
+    })
   );
 
   public constructor(