From 1231b69ff0cb00ed4b7e6cfe7715e03e1edc7132 Mon Sep 17 00:00:00 2001
From: smuddyx <smuddyx@gmail.com>
Date: Wed, 22 Apr 2020 14:40:42 +0200
Subject: [PATCH] store flags for songs

---
 src/app/animations.ts                         | 12 +++----
 .../presentation/remote/remote.component.html |  6 ++--
 .../presentation/remote/remote.component.ts   |  4 ++-
 src/app/modules/songs/services/song.ts        |  1 +
 .../songs/services/text-rendering.service.ts  |  1 +
 .../songs/song-list/song-list.component.html  | 10 ++++--
 .../songs/song-list/song-list.module.ts       |  4 ++-
 .../edit/edit-song/edit-song.component.html   | 14 ++++++++
 .../edit/edit-song/edit-song.component.ts     | 35 +++++++++++++++++++
 .../modules/songs/song/edit/edit.module.ts    |  4 +++
 .../modules/songs/song/edit/edit.service.ts   |  1 +
 .../modules/songs/song/song.component.html    |  4 +++
 src/app/modules/songs/song/song.component.ts  |  5 +++
 src/app/modules/songs/song/song.module.ts     |  2 ++
 src/styles/styles.less                        |  4 +++
 15 files changed, 91 insertions(+), 16 deletions(-)

diff --git a/src/app/animations.ts b/src/app/animations.ts
index d3613cf..618905d 100644
--- a/src/app/animations.ts
+++ b/src/app/animations.ts
@@ -5,17 +5,13 @@ export const fade = [
   trigger('fade', [
 
     // the "in" style determines the "resting" state of the element when it is visible.
-    state('in', style({opacity: 1, display: 'block', transform: 'translateY(0px)'})),
+    state('in', style({opacity: 1, transform: 'translateY(0px)'})),
 
     // fade in when created. this could also be written as transition('void => *')
     transition(':enter', [
-      style({opacity: 0, display: 'block', transform: 'translateY(-20px)'}),
-      animate(300)
+      style({opacity: 0, transform: 'translateY(-10px)'}),
+      animate(200)
     ]),
-
-    // fade out when destroyed. this could also be written as transition('void => *')
-    transition(':leave',
-      animate(300, style({opacity: 0, display: 'block', transform: 'translateY(-20px)'})))
   ])
 ];
 
@@ -29,7 +25,7 @@ export const fader =
           left: 0,
           width: '100%',
           opacity: 0,
-          transform: 'scale(0.96) translateY(-10px)',
+          transform: 'scale(1) translateY(-10px)',
         }),
       ], {optional: true}),
       // Animate the new page in
diff --git a/src/app/modules/presentation/remote/remote.component.html b/src/app/modules/presentation/remote/remote.component.html
index 1630994..8ed66d4 100644
--- a/src/app/modules/presentation/remote/remote.component.html
+++ b/src/app/modules/presentation/remote/remote.component.html
@@ -1,9 +1,9 @@
 <div *ngIf="shows$|async as shows">
   <app-card>
 
-    <p *ngIf="!shows.length">Es ist derzeit keine Veranstaltung vorhanden</p>
+    <p *ngIf="!shows.length" @fade>Es ist derzeit keine Veranstaltung vorhanden</p>
 
-    <mat-form-field *ngIf="shows.length>0" appearance="outline">
+    <mat-form-field *ngIf="shows.length>0" @fade appearance="outline">
       <mat-label>Veranstaltung</mat-label>
       <mat-select [formControl]="showControl">
         <mat-option *ngFor="let show of shows" [value]="show.id">
@@ -12,7 +12,7 @@
       </mat-select>
     </mat-form-field>
 
-    <div *ngFor="let song of presentationSongs" class="song">
+    <div *ngFor="let song of presentationSongs" @fade class="song">
       <div [class.active]="show.presentationSongId===song.id" class="title song-part">
         <div (click)="onSectionClick(song.id, -1)" class="head">{{song.title}}</div>
       </div>
diff --git a/src/app/modules/presentation/remote/remote.component.ts b/src/app/modules/presentation/remote/remote.component.ts
index 2e6a0b9..c24ea94 100644
--- a/src/app/modules/presentation/remote/remote.component.ts
+++ b/src/app/modules/presentation/remote/remote.component.ts
@@ -11,6 +11,7 @@ import {ShowSong} from '../../shows/services/show-song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {FormControl} from '@angular/forms';
 import {distinctUntilChanged, map} from 'rxjs/operators';
+import {fade} from '../../../animations';
 
 export interface PresentationSong {
   id: string;
@@ -21,7 +22,8 @@ export interface PresentationSong {
 @Component({
   selector: 'app-remote',
   templateUrl: './remote.component.html',
-  styleUrls: ['./remote.component.less']
+  styleUrls: ['./remote.component.less'],
+  animations: [fade]
 })
 export class RemoteComponent {
   public shows$: Observable<Show[]>;
diff --git a/src/app/modules/songs/services/song.ts b/src/app/modules/songs/services/song.ts
index eafe951..d4f1437 100644
--- a/src/app/modules/songs/services/song.ts
+++ b/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;
diff --git a/src/app/modules/songs/services/text-rendering.service.ts b/src/app/modules/songs/services/text-rendering.service.ts
index 7fc02e9..f298a89 100644
--- a/src/app/modules/songs/services/text-rendering.service.ts
+++ b/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,
diff --git a/src/app/modules/songs/song-list/song-list.component.html b/src/app/modules/songs/song-list/song-list.component.html
index 04c84aa..b402bae 100644
--- a/src/app/modules/songs/song-list/song-list.component.html
+++ b/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>
diff --git a/src/app/modules/songs/song-list/song-list.module.ts b/src/app/modules/songs/song-list/song-list.module.ts
index 38343d9..c8d59e2 100644
--- a/src/app/modules/songs/song-list/song-list.module.ts
+++ b/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 {
diff --git a/src/app/modules/songs/song/edit/edit-song/edit-song.component.html b/src/app/modules/songs/song/edit/edit-song/edit-song.component.html
index 1515a78..ff0d850 100644
--- a/src/app/modules/songs/song/edit/edit-song/edit-song.component.html
+++ b/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>
diff --git a/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts b/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts
index 28f0ede..25c19c0 100644
--- a/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts
+++ b/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(_ => !!_);
+  }
 }
diff --git a/src/app/modules/songs/song/edit/edit.module.ts b/src/app/modules/songs/song/edit/edit.module.ts
index 0a6c465..fabd832 100644
--- a/src/app/modules/songs/song/edit/edit.module.ts
+++ b/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,
 
   ]
 })
diff --git a/src/app/modules/songs/song/edit/edit.service.ts b/src/app/modules/songs/song/edit/edit.service.ts
index 07892c7..03693cf 100644
--- a/src/app/modules/songs/song/edit/edit.service.ts
+++ b/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),
diff --git a/src/app/modules/songs/song/song.component.html b/src/app/modules/songs/song/song.component.html
index 01412a3..ac84817 100644
--- a/src/app/modules/songs/song/song.component.html
+++ b/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>
diff --git a/src/app/modules/songs/song/song.component.ts b/src/app/modules/songs/song/song.component.ts
index 090cf57..be86d5e 100644
--- a/src/app/modules/songs/song/song.component.ts
+++ b/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(_ => !!_);
+  };
+
 }
diff --git a/src/app/modules/songs/song/song.module.ts b/src/app/modules/songs/song/song.module.ts
index 918484c..7e0f2dc 100644
--- a/src/app/modules/songs/song/song.module.ts
+++ b/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 {
diff --git a/src/styles/styles.less b/src/styles/styles.less
index 47a66dd..c4d2246 100644
--- a/src/styles/styles.less
+++ b/src/styles/styles.less
@@ -81,3 +81,7 @@ perfect-scrollbar.scroll > .ps .ps__rail-y:hover {
   background-color: #222;
   opacity: .3;
 }
+
+.mat-chip.mat-standard-chip {
+  background: #fffa;
+}