store flags for songs

src/app/modules/songs/song/edit/edit-song/edit-song.component.html

@@ -35,6 +35,20 @@
       <textarea [mat-autosize]="true" formControlName="comment" matInput></textarea>
     </mat-form-field>
 
+    <mat-form-field appearance="outline">
+      <mat-chip-list #chipList aria-label="Fruit selection">
+        <mat-chip (removed)="removeFlag(flag)" *ngFor="let flag of flags"
+                  [removable]="true" [selectable]="false">
+          {{flag}}&nbsp;
+          <fa-icon (click)="removeFlag(flag)" [icon]="faRemove"></fa-icon>
+        </mat-chip>
+        <input (matChipInputTokenEnd)="addFlag($event)"
+               [matChipInputAddOnBlur]="true"
+               [matChipInputFor]="chipList"
+               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+               placeholder="Attribute">
+      </mat-chip-list>
+    </mat-form-field>
 
     <mat-form-field appearance="outline">
       <mat-label>Rechtlicher Status</mat-label>

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

@@ -6,6 +6,9 @@ import {SongService} from '../../../services/song.service';
 import {EditService} from '../edit.service';
 import {first, map, switchMap} from 'rxjs/operators';
 import {KEYS} from '../../../services/key.helper';
+import {COMMA, ENTER} from '@angular/cdk/keycodes';
+import {MatChipInputEvent} from '@angular/material/chips';
+import {faTimesCircle} from '@fortawesome/free-solid-svg-icons/faTimesCircle';
 
 @Component({
   selector: 'app-edit-song',
@@ -19,6 +22,9 @@ export class EditSongComponent implements OnInit {
   public types = SongService.TYPES;
   public legalOwner = SongService.LEGAL_OWNER;
   public legalType = SongService.LEGAL_TYPE;
+  public flags: string[] = [];
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+  public faRemove = faTimesCircle;
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -36,6 +42,8 @@ export class EditSongComponent implements OnInit {
     ).subscribe(song => {
       this.song = song;
       this.form = this.editService.createSongForm(song);
+      this.form.controls.flags.valueChanges.subscribe(_ => this.onFlagsChanged(_))
+      this.onFlagsChanged(this.form.controls.flags.value);
     });
   }
 
@@ -45,4 +53,31 @@ export class EditSongComponent implements OnInit {
     await this.router.navigateByUrl('songs/' + this.song.id);
   }
 
+  public removeFlag(flag: string): void {
+    const flags = this.flags.filter(_ => _ !== flag);
+    this.form.controls.flags.setValue(flags.reduce((a, b) => `${a};${b}`, ''));
+  }
+
+  public addFlag(event: MatChipInputEvent): void {
+    const input = event.input;
+    const value = event.value;
+
+    // Add our fruit
+    if ((value || '').trim()) {
+      const flags = [...this.flags, value.trim()];
+      this.form.controls.flags.setValue(flags.reduce((a, b) => `${a};${b}`, ''));
+    }
+
+    if (input) input.value = '';
+  }
+
+  private onFlagsChanged(flagArray: string): void {
+    console.log(flagArray);
+    if (!flagArray) {
+      this.flags = [];
+      return;
+    }
+
+    this.flags = flagArray.split(';').filter(_ => !!_);
+  }
 }

src/app/modules/songs/song/edit/edit.module.ts

@@ -17,6 +17,8 @@ import {FileComponent} from './edit-file/file/file.component';
 import {LegalOwnerTranslatorModule} from '../../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
 import {LegalTypeTranslatorModule} from '../../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
 import {KeyTranslatorModule} from '../../../../widget-modules/pipes/key-translator/key-translator.module';
+import {MatChipsModule} from '@angular/material/chips';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 
 
 @NgModule({
@@ -39,6 +41,8 @@ import {KeyTranslatorModule} from '../../../../widget-modules/pipes/key-translat
     LegalOwnerTranslatorModule,
     LegalTypeTranslatorModule,
     KeyTranslatorModule,
+    MatChipsModule,
+    FontAwesomeModule,
 
   ]
 })

src/app/modules/songs/song/edit/edit.service.ts

@@ -15,6 +15,7 @@ export class EditService {
       text: new FormControl(song.text),
       title: new FormControl(song.title),
       comment: new FormControl(song.comment),
+      flags: new FormControl(song.flags),
       key: new FormControl(song.key),
       tempo: new FormControl(song.tempo),
       type: new FormControl(song.type),