filter show list

This commit is contained in:
2022-09-27 21:40:23 +02:00
parent c92f62c4e9
commit 77a180bea6
4 changed files with 32 additions and 14 deletions

View File

@@ -29,7 +29,7 @@ export class FilterComponent {
activatedRoute.queryParams.subscribe(params => { activatedRoute.queryParams.subscribe(params => {
const filterValues = params as FilterValues; const filterValues = params as FilterValues;
if (filterValues.time) this.filterFormGroup.controls.time.setValue(filterValues.time); if (filterValues.time) this.filterFormGroup.controls.time.setValue(+filterValues.time);
}); });
this.filterFormGroup.controls.time.valueChanges.subscribe(_ => void this.filerValueChanged('time', _ as number)); this.filterFormGroup.controls.time.valueChanges.subscribe(_ => void this.filerValueChanged('time', _ as number));

View File

@@ -4,7 +4,7 @@
padding: 5px 20px; padding: 5px 20px;
display: grid; display: grid;
grid-template-columns: 100px 200px auto; grid-template-columns: 100px 200px auto;
min-height: 34px; min-height: 21px;
& > div { & > div {
display: flex; display: flex;

View File

@@ -1,8 +1,8 @@
<div> <div>
<app-list-header *appRole="['leader']"></app-list-header> <!-- <app-list-header *appRole="['leader']"></app-list-header>-->
<!-- <app-list-header *appRole="['leader']">--> <app-list-header *appRole="['leader']">
<!-- <app-filter *ngIf="shows$ | async as shows" [shows]="getPublicShows(shows)"></app-filter>--> <app-filter *ngIf="shows$ | async as shows" [shows]="shows"></app-filter>
<!-- </app-list-header>--> </app-list-header>
<ng-container *appRole="['leader']"> <ng-container *appRole="['leader']">
<ng-container *ngIf="shows$ | async as shows"> <ng-container *ngIf="shows$ | async as shows">
@@ -21,15 +21,15 @@
</ng-container> </ng-container>
</ng-container> </ng-container>
<ng-container *ngIf="shows$ | async as shows"> <ng-container *ngIf="publicShows$ | async as shows">
<app-card <app-card
*ngIf="getPublicShows(shows).length > 0" *ngIf="shows.length > 0"
@fade @fade
[padding]="false" [padding]="false"
heading="veröffentlichte Veranstaltungen" heading="veröffentlichte Veranstaltungen"
> >
<app-list-item <app-list-item
*ngFor="let show of getPublicShows(shows) | sortBy: 'desc':'date'; trackBy: trackBy" *ngFor="let show of shows | sortBy: 'desc':'date'; trackBy: trackBy"
[routerLink]="show.id" [routerLink]="show.id"
[show]="show" [show]="show"
></app-list-item> ></app-list-item>

View File

@@ -1,8 +1,11 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {Observable} from 'rxjs'; import {combineLatest, Observable} from 'rxjs';
import {Show} from '../services/show'; import {Show} from '../services/show';
import {fade} from '../../../animations'; import {fade} from '../../../animations';
import {ShowService} from '../services/show.service'; import {ShowService} from '../services/show.service';
import {FilterValues} from './filter/filter-values';
import {ActivatedRoute} from '@angular/router';
import {map} from 'rxjs/operators';
@Component({ @Component({
selector: 'app-list', selector: 'app-list',
@@ -12,13 +15,28 @@ import {ShowService} from '../services/show.service';
}) })
export class ListComponent { export class ListComponent {
public shows$: Observable<Show[]>; public shows$: Observable<Show[]>;
public publicShows$: Observable<Show[]>;
public lastMonths$: Observable<number>;
public constructor(showService: ShowService) { public constructor(showService: ShowService, activatedRoute: ActivatedRoute) {
this.shows$ = showService.list$(); this.shows$ = showService.list$();
} this.lastMonths$ = activatedRoute.queryParams.pipe(
map(params => {
const filterValues = params as FilterValues;
if (!filterValues?.time) return 3;
return +filterValues.time;
})
);
public getPublicShows(songs: Show[]): Show[] { this.publicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
return songs.filter(_ => _.published); map(_ =>
_[0].filter(f => {
const d = new Date();
d.setMonth(d.getMonth() - _[1]);
return f.published && f.date.toDate() >= d;
})
)
);
} }
public getPrivateSongs(songs: Show[]): Show[] { public getPrivateSongs(songs: Show[]): Show[] {