better show filters

src/app/modules/shows/list/filter/filter-values.ts

@@ -1,3 +1,5 @@
 export interface FilterValues {
   time: number;
+  owner: string;
+  showType: string;
 }

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

@@ -10,6 +10,34 @@
       </mat-select>
     </mat-form-field>
 
+    <mat-form-field appearance="outline">
+      <mat-label>Ersteller</mat-label>
+      <mat-select formControlName="owner">
+        <mat-option *ngFor="let owner of owners" [value]="owner.key">{{
+            owner.value
+          }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Art der Veranstaltung</mat-label>
+      <mat-select formControlName="showType">
+        <mat-optgroup label="öffentlich">
+          <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
+              key | showType
+            }}
+          </mat-option>
+        </mat-optgroup>
+        <mat-optgroup label="privat">
+          <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
+              key | showType
+            }}
+          </mat-option>
+        </mat-optgroup>
+      </mat-select>
+    </mat-form-field>
+
   </div>
 
   <i>Anzahl der Suchergebnisse: {{ shows.length }}</i>

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

@@ -1,5 +1,5 @@
 .third {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   column-gap: 20px;
 }

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

@@ -4,6 +4,12 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 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 {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
+import {UserService} from '../../../../services/user/user.service';
+import {isEqual} from 'lodash';
 
 @Component({
   selector: 'app-filter',
@@ -14,6 +20,9 @@ export class FilterComponent {
   @Input() public route = '/shows/';
   @Input() public shows: Show[] = [];
 
+  public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
+  public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
+
   public filterFormGroup: UntypedFormGroup;
   public times: KeyValue<number, string>[] = [
     {key: 1, value: 'letzter Monat'},
@@ -22,9 +31,19 @@ export class FilterComponent {
     {key: 99999, value: 'alle'},
   ];
 
-  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
+  public owners: {key: string; value: string}[] = [];
+
+  public constructor(
+    private router: Router,
+    private showService: ShowService,
+    private userService: UserService,
+    activatedRoute: ActivatedRoute,
+    fb: UntypedFormBuilder
+  ) {
     this.filterFormGroup = fb.group({
       time: 1,
+      owner: null,
+      showType: null,
     });
 
     activatedRoute.queryParams.subscribe(params => {
@@ -33,8 +52,34 @@ export class FilterComponent {
     });
 
     this.filterFormGroup.controls.time.valueChanges.subscribe(_ => void this.filerValueChanged('time', _ as number));
+    this.filterFormGroup.controls.owner.valueChanges.subscribe(_ => void this.filerValueChanged('owner', _ as string));
+    this.filterFormGroup.controls.showType.valueChanges.subscribe(_ => void this.filerValueChanged('showType', _ as string));
+
+    this.owners$().subscribe(owners => (this.owners = owners));
   }
 
+  public owners$ = (): Observable<{key: string; value: string}[]> => {
+    return combineLatest([
+      this.showService.list$().pipe(
+        map(shows => {
+          return shows.map(show => show.owner).filter(onlyUnique);
+        })
+      ),
+      this.userService.users$,
+    ]).pipe(
+      map(([owners, users]) => {
+        return owners
+          .map(ownerId => ({
+            key: ownerId,
+            value: users.find(user => user.id === ownerId)?.name,
+          }))
+          .sort(dynamicSort('value'));
+      }),
+      distinctUntilChanged(isEqual),
+      map(_ => _ as {key: string; value: string}[])
+    );
+  };
+
   private async filerValueChanged<T>(key: string, value: T): Promise<void> {
     const route = this.router.createUrlTree([this.route], {
       queryParams: {[key]: value},

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

@@ -9,7 +9,7 @@
       <app-card
         *ngIf="shows.length > 0"
         [padding]="false"
-        heading="meine Veranstaltungen"
+        heading="Meine Veranstaltungen"
       >
         <app-list-item
           *ngFor="let show of shows | sortBy: 'desc':'date'"
@@ -24,7 +24,7 @@
     <app-card
       *ngIf="shows.length > 0"
       [padding]="false"
-      heading="veröffentlichte Veranstaltungen"
+      heading="Veröffentlichte Veranstaltungen"
     >
       <app-list-item
         *ngFor="let show of shows | sortBy: 'desc':'date'; trackBy: trackBy"

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

@@ -23,18 +23,29 @@ export class ListComponent {
       return +filterValues.time;
     })
   );
+  public owner$ = this.activatedRoute.queryParams.pipe(
+    map(params => {
+      const filterValues = params as FilterValues;
+      return filterValues?.owner;
+    })
+  );
 
-  public publicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
-    map(_ =>
-      _[0].filter(f => {
-        const d = new Date();
-        d.setMonth(d.getMonth() - _[1]);
-        return f.published && f.date.toDate() >= d;
-      })
+  public publicShows$ = combineLatest([this.shows$, this.lastMonths$, this.owner$]).pipe(
+    map(([shows, lastMonths, owner]) =>
+      shows
+        .filter(f => {
+          const d = new Date();
+          d.setMonth(d.getMonth() - lastMonths);
+          return f.published && f.date.toDate() >= d;
+        })
+        .filter(show => !owner || show.owner === owner)
     )
   );
 
-  public constructor(private showService: ShowService, private activatedRoute: ActivatedRoute) {}
+  public constructor(
+    private showService: ShowService,
+    private activatedRoute: ActivatedRoute
+  ) {}
 
   public trackBy = (index: number, show: unknown) => (show as Show).id;
 }

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

@@ -22,7 +22,11 @@ export class NewComponent implements OnInit {
   });
   public faSave = faSave;
 
-  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
+  public constructor(
+    private showService: ShowService,
+    showDataService: ShowDataService,
+    private router: Router
+  ) {
     this.shows$ = showDataService.list$;
   }