update song text in show

src/app/modules/shows/show/song/song.component.html

@@ -1,29 +1,37 @@
 <div *ngIf="iSong && iSong && show">
-  <div *ngIf="show.published" class="title published">{{ iSong.title }}</div>
+  <div @fade *ngIf="show.published" class="title published">{{ iSong.title }}</div>
 
-  <div *ngIf="!show.published" class="song">
+  <div @fade *ngIf="!show.published" class="song">
     <span class="title">{{ iSong.title }}</span>
-    <span class="keys">
-      <span *ngIf="iSong.keyOriginal !== iSong.key"
-      >{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span
-      >
-      <mat-form-field *ngIf="keys" appearance="standard">
+    <span @fade class="keys" *ngIf="!edit">
+      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
+      <mat-form-field *ngIf="keys" appearance="standard" class="keys">
         <mat-select [formControl]="keyFormControl">
-          <mat-option *ngFor="let key of keys" [value]="key">{{
-            key
-            }}</mat-option>
+          <mat-option *ngFor="let key of keys" [value]="key">{{ key }}</mat-option>
         </mat-select>
       </mat-form-field>
     </span>
-    <app-menu-button
-      (click)="onDelete()"
-      [icon]="faDelete"
-      class="btn-delete btn-icon"
-    ></app-menu-button>
+    <app-menu-button @fade *ngIf="!edit" (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon"></app-menu-button>
+    <app-menu-button @fade *ngIf="!edit" (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"></app-menu-button>
   </div>
+
+  <mat-form-field @fade appearance="outline" *ngIf="edit">
+    <mat-label>Songtext</mat-label>
+    <textarea
+      [cdkTextareaAutosize]="true"
+      [formControl]="editSongControl"
+      matInput
+    ></textarea>
+  </mat-form-field>
+  <div @fade *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
+  <app-button-row @fade *ngIf="edit">
+    <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
+    <app-button (click)="onDiscard()" [icon]="faSave">Verwerfen</app-button>
+  </app-button-row>
+
   <app-song-text
     (chordModeChanged)="onChordModeChanged($event)"
-    *ngIf="showText || show.published"
+    *ngIf="!edit && (showText || show.published)"
     [chordMode]="iSong.chordMode"
     [showSwitch]="!show.published"
     [text]="iSong.text"

src/app/modules/shows/show/song/song.component.less

@@ -2,11 +2,11 @@
 .song {
   min-height: 28px;
   display: grid;
-  grid-template-columns: auto 70px 25px;
+  grid-template-columns: auto 70px 25px 25px;
   @media screen and (max-width: 860px) {
-    grid-template-columns: auto 70px 45px;
+    grid-template-columns: auto 70px 45px 45px;
   }
-  grid-template-areas: "title keys delete";
+  grid-template-areas: "title keys edit delete";
 
   & > * {
     display: flex;
@@ -16,7 +16,7 @@
   overflow: hidden;
 }
 
-mat-form-field {
+.keys {
   width: 40px;
   margin: -24px 0 -20px 0;
 }
@@ -47,6 +47,10 @@ mat-form-field {
   grid-area: delete;
   justify-content: flex-end;
 }
+.btn-edit {
+  grid-area: edit;
+  justify-content: flex-end;
+}
 
 .menu {
   display: flex;
@@ -55,3 +59,7 @@ mat-form-field {
 button {
 
 }
+
+textarea {
+  font-family: 'Ubuntu Mono', monospace;
+}

src/app/modules/shows/show/song/song.component.ts

@@ -6,11 +6,16 @@ import {getScale} from '../../../songs/services/key.helper';
 import {FormControl} from '@angular/forms';
 import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
 import {Show} from '../../services/show';
+import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare';
+import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
+import {faEraser} from '@fortawesome/free-solid-svg-icons/faEraser';
+import {fade} from '../../../../animations';
 
 @Component({
   selector: 'app-song',
   templateUrl: './song.component.html',
   styleUrls: ['./song.component.less'],
+  animations: [fade],
 })
 export class SongComponent implements OnInit {
   @Input() public show: Show | null = null;
@@ -20,8 +25,13 @@ export class SongComponent implements OnInit {
 
   public keys: string[] = [];
   public faDelete = faTrash;
+  public faEdit = faPenToSquare;
+  public faSave = faSave;
+  public faEraser = faEraser;
   public keyFormControl: FormControl = new FormControl();
   public iSong: ShowSong | null = null;
+  public edit = false;
+  public editSongControl = new FormControl();
 
   public constructor(private showSongService: ShowSongService) {}
 
@@ -40,6 +50,22 @@ export class SongComponent implements OnInit {
     });
   }
 
+  public onEdit(): void {
+    if (this.iSong) this.editSongControl.setValue(this.iSong.text);
+    this.edit = true;
+  }
+
+  public onDiscard(): void {
+    this.editSongControl.setValue(null);
+    this.edit = false;
+  }
+
+  public onSave(): void {
+    if (this.showId && this.iSong) void this.showSongService.update$(this.showId, this.iSong.id, {text: this.editSongControl.value as string});
+    this.editSongControl.setValue(null);
+    this.edit = false;
+  }
+
   public async onDelete(): Promise<void> {
     if (!this.showId || !this.iSong || this.index === -1) return;
     await this.showSongService.delete$(this.showId, this.iSong.id, this.index);