edit song

WEB/src/app/components/songs/song-edit/song-edit.component.html

@@ -7,7 +7,7 @@
         </button>
       </div>
       <mat-card-title>Titel bearbeiten</mat-card-title>
-      <!-- <mat-card-subtitle>{{ song.Key }} - {{ song.Tempo }}</mat-card-subtitle> -->
+      <mat-card-subtitle>Daten werden nach der Eingabe automatisch gespeichert</mat-card-subtitle>
     </mat-card-header>
     <mat-card-content>
       <form>
@@ -47,6 +47,14 @@
             [matTextareaAutosize]="true"
           ></textarea>
         </mat-form-field>
+        <mat-form-field>
+            <textarea
+              matInput
+              placeholder="Kommentare"
+              [formControl]="form.controls.Comments"
+              [matTextareaAutosize]="true"
+            ></textarea>
+          </mat-form-field>
       </form>
     </mat-card-content>
     <!-- <mat-card-actions>

WEB/src/app/components/songs/song/song.component.html

@@ -11,6 +11,8 @@
     </mat-card-header>
     <mat-card-content>
       <p *ngFor="let line of text">{{ line }}</p>
+      <br />
+      <p *ngFor="let line of comments">{{ line }}</p>
     </mat-card-content>
     <mat-card-actions>
       <button mat-button (click)="onClickDownload()">Herunterladen</button>

WEB/src/app/components/songs/song/song.component.less

@@ -1,22 +1,4 @@
-.mat-card {
-  width: 500px;
-  border-radius: 8px;
-  background: #fffe;
-  margin: 20px;
-  box-sizing: border-box;
-}
-
-.mat-card-title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 420px;
-}
-
-.mat-card-content {
-  white-space: pre-wrap;
-}
-
-.song-detail-container {
-  margin-left: 30vw;
-}
+p {
+  margin: 0;
+  min-height: 10px;
+}

WEB/src/app/components/songs/song/song.component.ts

@@ -52,6 +52,10 @@ export class SongComponent {
   }
 
   public get text(): string[] {
-    return this.song.Text.split(/\r?\n/).filter(_ => _ !== ' ');
+    return this.song.Text ? this.song.Text.split(/\r?\n/) : [];
+  }
+
+  public get comments(): string[] {
+    return this.song.Comments ? this.song.Comments.split(/\r?\n/) : [];
   }
 }