bugfixing

src/app/modules/shows/services/show-song.service.ts

@@ -5,12 +5,18 @@ import {ShowSong} from './show-song';
 import {SongDataService} from '../../songs/services/song-data.service';
 import {first, take} from 'rxjs/operators';
 import {UserService} from '../../../services/user/user.service';
+import {ShowService} from './show.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ShowSongService {
-  public constructor(private showSongDataService: ShowSongDataService, private songDataService: SongDataService, private userService: UserService) {}
+  public constructor(
+    private showSongDataService: ShowSongDataService,
+    private songDataService: SongDataService,
+    private userService: UserService,
+    private showService: ShowService
+  ) {}
 
   public async new$(showId: string, songId: string, addedLive = false): Promise<string | null> {
     const song = await this.songDataService.read$(songId).pipe(take(1)).toPromise();
@@ -32,6 +38,15 @@ export class ShowSongService {
 
   public list$ = (showId: string): Observable<ShowSong[]> => this.showSongDataService.list$(showId);
   public list = (showId: string): Promise<ShowSong[]> => this.list$(showId).pipe(first()).toPromise();
-  public delete$ = (showId: string, songId: string): Promise<void> => this.showSongDataService.delete(showId, songId);
+
+  public async delete$(showId: string, songId: string, index: number): Promise<void> {
+    await this.showSongDataService.delete(showId, songId);
+    const show = await this.showService.read$(showId).pipe(first()).toPromise();
+    if (!show) return;
+    const order = show.order;
+    order.splice(index, 1);
+    await this.showService.update$(showId, {order});
+  }
+
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);
 }

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

@@ -12,12 +12,13 @@
       <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
     </p>
     <div *ngIf="showSongs" class="song-list" cdkDropList (cdkDropListDropped)="drop($event, show)">
-      <div *ngFor="let song of orderedShowSongs(show)" class="song-row" cdkDrag>
+      <div *ngFor="let song of orderedShowSongs(show); let i = index" class="song-row" cdkDrag>
         <app-song
           [showSong]="song"
           [showId]="showId"
           [showText]="showText"
           [show]="show"
+          [index]="i"
         ></app-song>
       </div>
     </div>

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

@@ -1,7 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {faTrash} from '@fortawesome/free-solid-svg-icons/faTrash';
-import {faCaretUp} from '@fortawesome/free-solid-svg-icons/faCaretUp';
-import {faCaretDown} from '@fortawesome/free-solid-svg-icons/faCaretDown';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
@@ -18,11 +16,10 @@ export class SongComponent implements OnInit {
   @Input() public show: Show | null = null;
   @Input() public showId: string | null = null;
   @Input() public showText: boolean | null = null;
+  @Input() public index = -1;
 
   public keys: string[] = [];
   public faDelete = faTrash;
-  public faUp = faCaretUp;
-  public faDown = faCaretDown;
   public keyFormControl: FormControl = new FormControl();
   public iSong: ShowSong | null = null;
 
@@ -44,54 +41,10 @@ export class SongComponent implements OnInit {
   }
 
   public async onDelete(): Promise<void> {
-    if (!this.showId || !this.iSong) return;
+    if (!this.showId || !this.iSong || this.index === -1) return;
-    await this.showSongService.delete$(this.showId, this.iSong.id);
+    await this.showSongService.delete$(this.showId, this.iSong.id, this.index);
   }
 
-  // public async reorder(up: boolean): Promise<void> {
-  //   if (up) {
-  //     await this.reorderUp();
-  //   } else {
-  //     await this.reorderDown();
-  //   }
-  // }
-  //
-  // public async reorderUp(): Promise<void> {
-  //   if (!this.showSongs || !this.showId) return;
-  //   const index = this.showSongs.findIndex(_ => _.songId === this.iSong?.id);
-  //   if (index === 0) {
-  //     return;
-  //   }
-  //
-  //   const song = this.showSongs[index];
-  //   const toggleSong = this.showSongs[index - 1];
-  //
-  //   await this.showSongService.update$(this.showId, song.id, {
-  //     order: toggleSong.order,
-  //   });
-  //   await this.showSongService.update$(this.showId, toggleSong.id, {
-  //     order: song.order,
-  //   });
-  // }
-  //
-  // public async reorderDown(): Promise<void> {
-  //   if (!this.showSongs || !this.showId) return;
-  //   const index = this.showSongs.findIndex(_ => _.songId === this.iSong?.id);
-  //   if (index === this.showSongs.length - 1) {
-  //     return;
-  //   }
-  //
-  //   const song = this.showSongs[index];
-  //   const toggleSong = this.showSongs[index + 1];
-  //
-  //   await this.showSongService.update$(this.showId, song.id, {
-  //     order: toggleSong.order,
-  //   });
-  //   await this.showSongService.update$(this.showId, toggleSong.id, {
-  //     order: song.order,
-  //   });
-  // }
-
   public async onChordModeChanged(value: ChordMode): Promise<void> {
     if (!this.showId || !this.iSong) return;
     await this.showSongService.update$(this.showId, this.iSong.id, {

src/app/widget-modules/components/add-song/add-song.component.ts

@@ -44,7 +44,6 @@ export class AddSongComponent {
   }
 
   public async onAddSongSelectionChanged(event: MatSelectChange): Promise<void> {
-    if (!this.showSongs) return;
     if (!this.show) return;
     const newId = await this.showSongService.new$(this.show?.id, event.value, this.addedLive);
     await this.showService.update$(this.show?.id, {order: [...this.show.order, newId ?? '']});

src/app/widget-modules/components/song-text/song-text.component.html

@@ -25,9 +25,7 @@
         [class.chord]="line.type === 0"
         [class.disabled]="checkDisabled(i)"
         class="line"
-      >
+      >{{ line.text }}</div>
-        {{ line.text }}
-      </div>
     </div>
   </div>
 
@@ -62,9 +60,7 @@
         [class.chord]="line.type === 0"
         [class.disabled]="checkDisabled(i)"
         class="line"
-      >
+      >{{ line.text.trim() }}</div>
-        {{ line.text }}
-      </div>
     </div>
   </div>