filter keys

src/app/modules/songs/song-list/filter/filter-values.ts

@@ -1,6 +1,7 @@
 export interface FilterValues {
   q: string;
   type: string;
+  key: string;
   legalType: string;
   flag: string;
 }

src/app/modules/songs/song-list/filter/filter.component.html

@@ -14,6 +14,14 @@
       </mat-select>
     </mat-form-field>
 
+
+    <mat-form-field appearance="outline">
+      <mat-label>Tonart</mat-label>
+      <mat-select formControlName="key">
+        <mat-option *ngFor="let key of keys" [value]="key">{{key|key}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+
     <mat-form-field appearance="outline">
       <mat-label>Rechtlicher Status</mat-label>
       <mat-select formControlName="legalType">

src/app/modules/songs/song-list/filter/filter.component.less

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

src/app/modules/songs/song-list/filter/filter.component.ts

@@ -4,6 +4,7 @@ import {FormBuilder, FormGroup} from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {FilterValues} from './filter-values';
 import {Song} from '../../services/song';
+import {KEYS} from '../../services/key.helper';
 
 @Component({
   selector: 'app-filter',
@@ -17,11 +18,13 @@ export class FilterComponent implements OnInit {
   @Input() songs: Song[];
   public types = SongService.TYPES;
   public legalType = SongService.LEGAL_TYPE;
+  public keys = KEYS;
 
   constructor(private router: Router, activatedRoute: ActivatedRoute, fb: FormBuilder) {
     this.filterFormGroup = fb.group({
       q: '',
       type: '',
+      key: '',
       legalType: '',
       flag: '',
     });
@@ -29,11 +32,13 @@ export class FilterComponent implements OnInit {
     activatedRoute.queryParams.subscribe((filterValues: FilterValues) => {
       if (filterValues.q) this.filterFormGroup.controls.q.setValue(filterValues.q);
       if (filterValues.type) this.filterFormGroup.controls.type.setValue(filterValues.type);
+      if (filterValues.key) this.filterFormGroup.controls.key.setValue(filterValues.key);
       if (filterValues.legalType) this.filterFormGroup.controls.legalType.setValue(filterValues.legalType);
       if (filterValues.flag) this.filterFormGroup.controls.flag.setValue(filterValues.flag);
     })
 
     this.filterFormGroup.controls.q.valueChanges.subscribe(_ => this.filerValueChanged('q', _));
+    this.filterFormGroup.controls.key.valueChanges.subscribe(_ => this.filerValueChanged('key', _));
     this.filterFormGroup.controls.type.valueChanges.subscribe(_ => this.filerValueChanged('type', _));
     this.filterFormGroup.controls.legalType.valueChanges.subscribe(_ => this.filerValueChanged('legalType', _));
     this.filterFormGroup.controls.flag.valueChanges.subscribe(_ => this.filerValueChanged('flag', _));

src/app/modules/songs/song-list/song-list.component.ts

@@ -46,6 +46,7 @@ export class SongListComponent implements OnInit {
   private filter(song: Song, filter: FilterValues): boolean {
     let baseFilter = filterSong(song, filter.q);
     baseFilter = baseFilter && (!filter.type || filter.type === song.type);
+    baseFilter = baseFilter && (!filter.key || filter.key === song.key);
     baseFilter = baseFilter && (!filter.legalType || filter.legalType === song.legalType);
     baseFilter = baseFilter && (!filter.flag || this.checkFlag(filter.flag, song.flags));
 
@@ -53,7 +54,7 @@ export class SongListComponent implements OnInit {
   }
 
   private checkIfFilterActive(filter: FilterValues): boolean {
-    return !!filter.q || !!filter.type || !!filter.legalType || !!filter.flag;
+    return !!filter.q || !!filter.type || !!filter.key || !!filter.legalType || !!filter.flag;
   }
 
   private checkFlag(flag: string, flags: string) {

src/app/modules/songs/song-list/song-list.module.ts

@@ -15,6 +15,7 @@ import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {RoleModule} from '../../../services/user/role.module';
+import {KeyTranslatorModule} from '../../../widget-modules/pipes/key-translator/key-translator.module';
 
 
 @NgModule({
@@ -34,7 +35,8 @@ import {RoleModule} from '../../../services/user/role.module';
     SongTypeTranslaterModule,
     FontAwesomeModule,
     MatTooltipModule,
-    RoleModule
+    RoleModule,
+    KeyTranslatorModule,
   ]
 })
 export class SongListModule {