filter show list
This commit is contained in:
@@ -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));
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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[] {
|
||||||
|
|||||||
Reference in New Issue
Block a user