show filter initialisation

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

@@ -51,7 +51,9 @@ export class RemoteComponent {
     private textRenderingService: TextRenderingService,
     private globalSettingsService: GlobalSettingsService
   ) {
-    this.shows$ = showService.list$(true).pipe(map(_ => _.sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0))));
+    this.shows$ = showService
+      .list$(true)
+      .pipe(map(_ => _.filter(_ => _.date.toDate() > new Date(new Date().setMonth(new Date().getMonth() - 1))).sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0))));
     songService.list$().subscribe(_ => (this.songs = _));
 
     globalSettingsService.get$

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

@@ -0,0 +1,3 @@
+export interface FilterValues {
+  time: number;
+}

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

@@ -0,0 +1,17 @@
+<div [formGroup]="filterFormGroup">
+
+
+  <div class="third">
+    <mat-form-field appearance="outline">
+      <mat-label>Zeitraum</mat-label>
+      <mat-select formControlName="time">
+        <mat-option *ngFor="let time of times" [value]="time.key">{{
+          time.value
+          }}</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+  </div>
+
+  <i>Anzahl der Suchergebnisse: {{ shows.length }}</i>
+</div>

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

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

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

@@ -0,0 +1,24 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {FilterComponent} from './filter.component';
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FilterComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,45 @@
+import {Component, Input} from '@angular/core';
+import {KeyValue} from '@angular/common';
+import {ActivatedRoute, Router} from '@angular/router';
+import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {FilterValues} from './filter-values';
+import {Show} from '../../services/show';
+
+@Component({
+  selector: 'app-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.less'],
+})
+export class FilterComponent {
+  @Input() public route = '/shows/';
+  @Input() public shows: Show[] = [];
+
+  public filterFormGroup: UntypedFormGroup;
+  public times: KeyValue<number, string>[] = [
+    {key: 1, value: 'letzter Monat'},
+    {key: 3, value: 'letztes Quartal'},
+    {key: 12, value: 'letztes Jahr'},
+    {key: 99999, value: 'alle'},
+  ];
+
+  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
+    this.filterFormGroup = fb.group({
+      time: 1,
+    });
+
+    activatedRoute.queryParams.subscribe(params => {
+      const filterValues = params as FilterValues;
+      if (filterValues.time) this.filterFormGroup.controls.time.setValue(filterValues.time);
+    });
+
+    this.filterFormGroup.controls.time.valueChanges.subscribe(_ => void this.filerValueChanged('time', _ as number));
+  }
+
+  private async filerValueChanged<T>(key: string, value: T): Promise<void> {
+    const route = this.router.createUrlTree([this.route], {
+      queryParams: {[key]: value},
+      queryParamsHandling: 'merge',
+    });
+    await this.router.navigateByUrl(route);
+  }
+}

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

@@ -1,5 +1,8 @@
 <div>
   <app-list-header *appRole="['leader']"></app-list-header>
+<!--  <app-list-header *appRole="['leader']">-->
+<!--    <app-filter *ngIf="shows$ | async as shows" [shows]="getPublicShows(shows)"></app-filter>-->
+<!--  </app-list-header>-->
 
   <ng-container *appRole="['leader']">
     <ng-container *ngIf="shows$ | async as shows">

src/app/modules/shows/shows.module.ts

@@ -32,9 +32,10 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
 import {RoleModule} from '../../services/user/role.module';
 import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {FilterComponent} from './list/filter/filter.component';
 
 @NgModule({
-  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent],
+  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent],
   imports: [
     CommonModule,
     ShowsRoutingModule,