store flags for songs

src/app/modules/songs/services/song.ts

@@ -8,6 +8,7 @@ export interface Song {
   text: string;
   title: string;
   type: string;
+  flags: string;
 
   legalType: string;
   legalLink: string;

src/app/modules/songs/services/text-rendering.service.ts

@@ -41,6 +41,7 @@ export class TextRenderingService {
   }
 
   public parse(text: string): Section[] {
+    if (!text) return [];
     const arrayOfLines = text.split(/\r?\n/).filter(_ => _);
     const indices = {
       [SectionType.Bridge]: 0,

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

@@ -1,3 +1,7 @@
-<app-card *ngIf="songs$ | async as songs" [@fade] [padding]="false">
-  <app-list-item *ngFor="let song of songs" [routerLink]="song.id" [song]="song"></app-list-item>
-</app-card>
+<div>
+  <app-list-header></app-list-header>
+
+  <app-card *ngIf="songs$ | async as songs" [@fade] [padding]="false">
+    <app-list-item *ngFor="let song of songs" [routerLink]="song.id" [song]="song"></app-list-item>
+  </app-card>
+</div>

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

@@ -5,6 +5,7 @@ import {ListItemComponent} from './list-item/list-item.component';
 import {CardModule} from '../../../widget-modules/components/card/card.module';
 import {RouterModule} from '@angular/router';
 import {LegalTypeTranslatorModule} from '../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
+import {ListHeaderModule} from '../../../widget-modules/components/list-header/list-header.module';
 
 
 @NgModule({
@@ -15,7 +16,8 @@ import {LegalTypeTranslatorModule} from '../../../widget-modules/pipes/legal-typ
     RouterModule,
 
     CardModule,
-    LegalTypeTranslatorModule
+    LegalTypeTranslatorModule,
+    ListHeaderModule
   ]
 })
 export class SongListModule {

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),

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

@@ -19,6 +19,10 @@
       <app-song-text *ngIf="user$|async as user" [chordMode]="user.chordMode" [showSwitch]="true"
                      [text]="song.text"></app-song-text>
 
+      <mat-chip-list aria-label="Attribute">
+        <mat-chip *ngFor="let flag of getFlags(song.flags)">{{flag}}</mat-chip>
+      </mat-chip-list>
+
       <div class="text">{{song.comment}}</div>
       <div>
         <h3>Anhänge</h3>

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

@@ -41,4 +41,9 @@ export class SongComponent implements OnInit {
 
   }
 
+  public getFlags = (flags: string): string[] => {
+    if (!flags) return [];
+    return flags.split(';').filter(_ => !!_);
+  };
+
 }

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

@@ -8,6 +8,7 @@ import {ButtonRowModule} from '../../../widget-modules/components/button-row/but
 import {RouterModule} from '@angular/router';
 import {LegalOwnerTranslatorModule} from '../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
 import {SongTextModule} from '../../../widget-modules/components/song-text/song-text.module';
+import {MatChipsModule} from '@angular/material/chips';
 
 
 @NgModule({
@@ -23,6 +24,7 @@ import {SongTextModule} from '../../../widget-modules/components/song-text/song-
     ButtonRowModule,
     LegalOwnerTranslatorModule,
     SongTextModule,
+    MatChipsModule,
   ]
 })
 export class SongModule {