directly add song to show

src/app/modules/shows/list/filter/filter.component.html

@@ -1,6 +1,5 @@
 <div [formGroup]="filterFormGroup">
 
-
   <div class="third">
     <mat-form-field appearance="outline">
       <mat-label>Zeitraum</mat-label>

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

@@ -1,18 +1,18 @@
 <div>
 <!--  <app-list-header *appRole="['leader']"></app-list-header>-->
   <app-list-header *appRole="['leader']">
-    <app-filter *ngIf="shows$ | async as shows" [shows]="shows"></app-filter>
+    <app-filter *ngIf="shows$ | async as shows" [shows]="publicShows$ | async"></app-filter>
   </app-list-header>
 
   <ng-container *appRole="['leader']">
-    <ng-container *ngIf="shows$ | async as shows">
+    <ng-container *ngIf="privateShows$ | async as shows">
       <app-card
-        *ngIf="getPrivateSongs(shows).length > 0"
+        *ngIf="shows.length > 0"
         [padding]="false"
         heading="meine Veranstaltungen"
       >
         <app-list-item
-          *ngFor="let show of getPrivateSongs(shows) | sortBy: 'desc':'date'"
+          *ngFor="let show of shows | sortBy: 'desc':'date'"
           [routerLink]="show.id"
           [show]="show"
         ></app-list-item>

src/app/modules/shows/list/list.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {combineLatest, Observable} from 'rxjs';
+import {combineLatest} from 'rxjs';
 import {Show} from '../services/show';
 import {fade} from '../../../animations';
 import {ShowService} from '../services/show.service';
@@ -14,34 +14,27 @@ import {map} from 'rxjs/operators';
   animations: [fade],
 })
 export class ListComponent {
-  public shows$: Observable<Show[]>;
-  public publicShows$: Observable<Show[]>;
-  public lastMonths$: Observable<number>;
+  public shows$ = this.showService.list$();
+  public privateShows$ = this.showService.list$().pipe(map(show => show.filter(_ => !_.published)));
+  public lastMonths$ = this.activatedRoute.queryParams.pipe(
+    map(params => {
+      const filterValues = params as FilterValues;
+      if (!filterValues?.time) return 1;
+      return +filterValues.time;
+    })
+  );
 
-  public constructor(showService: ShowService, activatedRoute: ActivatedRoute) {
-    this.shows$ = showService.list$();
-    this.lastMonths$ = activatedRoute.queryParams.pipe(
-      map(params => {
-        const filterValues = params as FilterValues;
-        if (!filterValues?.time) return 3;
-        return +filterValues.time;
+  public publicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
+    map(_ =>
+      _[0].filter(f => {
+        const d = new Date();
+        d.setMonth(d.getMonth() - _[1]);
+        return f.published && f.date.toDate() >= d;
       })
-    );
+    )
+  );
 
-    this.publicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
-      map(_ =>
-        _[0].filter(f => {
-          const d = new Date();
-          d.setMonth(d.getMonth() - _[1]);
-          return f.published && f.date.toDate() >= d;
-        })
-      )
-    );
-  }
-
-  public getPrivateSongs(songs: Show[]): Show[] {
-    return songs.filter(_ => !_.published);
-  }
+  public constructor(private showService: ShowService, private activatedRoute: ActivatedRoute) {}
 
   public trackBy = (index: number, show: unknown) => (show as Show).id;
 }

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

@@ -64,6 +64,16 @@
       <app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit"
       >Bearbeiten
       </app-button>
+      <ng-container *appRole="['leader']">
+        <app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu">
+          Zu Veranstaltung hinzufügen
+        </app-button>
+        <mat-menu #menu="matMenu">
+          <app-button (click)="addSongToShow(show, song)" *ngFor="let show of privateShows$|async">
+            {{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }}
+          </app-button>
+        </mat-menu>
+      </ng-container>
     </app-button-row>
   </app-card>
   <ng-container *ngIf="files$ | async as files">

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

@@ -8,7 +8,10 @@ import {FileDataService} from '../services/file-data.service';
 import {File} from '../services/file';
 import {UserService} from '../../../services/user/user.service';
 import {User} from '../../../services/user/user';
-import {faEdit, faTrash} from '@fortawesome/free-solid-svg-icons';
+import {faEdit, faFileCirclePlus, faTrash} from '@fortawesome/free-solid-svg-icons';
+import {ShowService} from '../../shows/services/show.service';
+import {Show} from '../../shows/services/show';
+import {ShowSongService} from '../../shows/services/show-song.service';
 
 @Component({
   selector: 'app-song',
@@ -21,13 +24,17 @@ export class SongComponent implements OnInit {
   public user$: Observable<User | null> | null = null;
   public faEdit = faEdit;
   public faDelete = faTrash;
+  public faFileCirclePlus = faFileCirclePlus;
+  public privateShows$ = this.showService.list$().pipe(map(show => show.filter(_ => !_.published)));
 
   public constructor(
     private activatedRoute: ActivatedRoute,
     private songService: SongService,
     private fileService: FileDataService,
     private userService: UserService,
-    private router: Router
+    private router: Router,
+    private showService: ShowService,
+    private showSongService: ShowSongService
   ) {
     this.user$ = userService.user$;
   }
@@ -57,4 +64,11 @@ export class SongComponent implements OnInit {
     await this.songService.delete(songId);
     await this.router.navigateByUrl('/songs');
   }
+
+  public async addSongToShow(show: Show, song: Song) {
+    if (!show) return;
+    const newId = await this.showSongService.new$(show?.id, song.id, false);
+    await this.showService.update$(show?.id, {order: [...show.order, newId ?? '']});
+    await this.router.navigateByUrl('/shows/' + show.id);
+  }
 }

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

@@ -13,6 +13,8 @@ import {RoleModule} from '../../../services/user/role.module';
 import {StatusTranslaterModule} from '../../../widget-modules/pipes/status-translater/status-translater.module';
 import {ButtonModule} from '../../../widget-modules/components/button/button.module';
 import {FileComponent} from './file/file.component';
+import {MatMenuModule} from '@angular/material/menu';
+import {ShowTypeTranslaterModule} from '../../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 
 @NgModule({
   declarations: [SongComponent, FileComponent],
@@ -31,6 +33,8 @@ import {FileComponent} from './file/file.component';
     RoleModule,
     StatusTranslaterModule,
     ButtonModule,
+    MatMenuModule,
+    ShowTypeTranslaterModule,
   ],
 })
 export class SongModule {}

src/app/widget-modules/components/button/button.component.ts

@@ -1,6 +1,5 @@
 import {Component, Input} from '@angular/core';
 import {IconProp} from '@fortawesome/fontawesome-svg-core';
-import {faCross} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-button',
@@ -8,5 +7,5 @@ import {faCross} from '@fortawesome/free-solid-svg-icons';
   styleUrls: ['./button.component.less'],
 })
 export class ButtonComponent {
-  @Input() public icon: IconProp = faCross;
+  @Input() public icon: IconProp | null = null;
 }