song list filter

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts

@@ -16,10 +16,7 @@ export class FilterComponent {
   }
 
   public async valueChange(text: string): Promise<void> {
-    const route = text
-      ? this.router.createUrlTree(['songs'], {queryParams: {q: text}})
-      : this.router.createUrlTree(['songs']);
-
+    const route = this.router.createUrlTree(['songs'], {queryParams: {q: text}, queryParamsHandling: 'merge'});
     await this.router.navigateByUrl(route);
   }
 }

src/app/widget-modules/components/list-header/list-header.component.html

@@ -1,8 +1,15 @@
 <div class="header">
-  <button mat-icon-button>
+
+  <button (click)="onFilterClick()" [class.filter-active]="anyFilterActive" mat-icon-button>
     <fa-icon [icon]="faFilter"></fa-icon>
   </button>
   <button mat-icon-button routerLink="new">
     <fa-icon [icon]="faNew"></fa-icon>
   </button>
 </div>
+
+<div *ngIf="filterVisible || anyFilterActive" @fade>
+  <app-card>
+    <ng-content></ng-content>
+  </app-card>
+</div>

src/app/widget-modules/components/list-header/list-header.component.less

@@ -13,3 +13,8 @@
   color: #A6C4F5;
 
 }
+
+.filter-active {
+  color: #a21;
+  cursor: not-allowed;
+}

src/app/widget-modules/components/list-header/list-header.component.ts

@@ -1,18 +1,21 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter';
-import {faBars} from '@fortawesome/free-solid-svg-icons/faBars';
 import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus';
+import {fade} from '../../../animations';
 
 @Component({
   selector: 'app-list-header',
   templateUrl: './list-header.component.html',
-  styleUrls: ['./list-header.component.less']
+  styleUrls: ['./list-header.component.less'],
+  animations: [fade]
 })
 export class ListHeaderComponent implements OnInit {
 
   public faNew = faPlus;
   public faFilter = faFilter;
-  public faMenu = faBars;
+  public filterVisible = false;
+  @Output() filterVisibleChanged = new EventEmitter<boolean>();
+  @Input() anyFilterActive = false;
 
   constructor() {
   }
@@ -20,4 +23,7 @@ export class ListHeaderComponent implements OnInit {
   ngOnInit() {
   }
 
+  public onFilterClick(): void {
+    this.filterVisible = !this.filterVisible || this.anyFilterActive;
+  }
 }

src/app/widget-modules/components/list-header/list-header.module.ts

@@ -4,6 +4,7 @@ import {ListHeaderComponent} from './list-header.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
+import {CardModule} from '../card/card.module';
 
 @NgModule({
   declarations: [ListHeaderComponent],
@@ -14,7 +15,8 @@ import {RouterModule} from '@angular/router';
     CommonModule,
     FontAwesomeModule,
     MatButtonModule,
-    RouterModule
+    RouterModule,
+    CardModule,
   ]
 })
 export class ListHeaderModule {