show filter initialisation

package.json

@@ -23,19 +23,19 @@
     "@angular/platform-browser-dynamic": "^14.1.2",
     "@angular/router": "^14.1.2",
     "@angular/service-worker": "^14.1.2",
-    "@fortawesome/angular-fontawesome": "^0.10.2",
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "docx": "^7.3.0",
+    "@fortawesome/angular-fontawesome": "^0.11.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "docx": "^7.4.1",
     "firebase": "^9.6.10",
     "lodash": "^4.17.21",
-    "ngx-mat-select-search": "^4.0.2",
+    "ngx-mat-select-search": "^4.2.1",
     "ngx-perfect-scrollbar": "^10.1.1",
     "rxfire": "^6.0.3",
-    "rxjs": "~7.5.5",
-    "tslib": "^2.3.1",
+    "rxjs": "~7.5.6",
+    "tslib": "^2.4.0",
     "uuid": "^8.3.2",
-    "zone.js": "~0.11.5"
+    "zone.js": "~0.11.8"
   },
   "devDependencies": {
     "@angular-devkit/architect": "0.1401.2",
@@ -48,27 +48,27 @@
     "@angular/cli": "^14.1.2",
     "@angular/compiler-cli": "^14.1.2",
     "@angular/language-service": "^14.1.2",
-    "@types/jasmine": "~4.0.2",
+    "@types/jasmine": "~4.0.3",
     "@types/jasminewd2": "~2.0.10",
-    "@types/lodash": "^4.14.181",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
-    "eslint": "^8.18.0",
+    "@types/lodash": "^4.14.182",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
+    "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "firebase-tools": "^10.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "firebase-tools": "^11.6.0",
     "fuzzy": "^0.1.3",
-    "inquirer": "^8.2.2",
+    "inquirer": "^9.1.0",
     "inquirer-autocomplete-prompt": "^2.0.0",
-    "jasmine-core": "~4.0.1",
+    "jasmine-core": "~4.3.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.17",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.1",
     "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.2",
-    "karma-jasmine-html-reporter": "^1.7.0",
-    "prettier": "^2.6.2",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
+    "prettier": "^2.7.1",
     "protractor": "~7.0.0",
-    "typescript": "~4.6.3"
+    "typescript": "~4.7.4"
   }
 }

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,