user can change show type and date

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

@@ -0,0 +1,31 @@
+<div>
+  <app-card [closeLink]="'/shows/'+form.value.id" heading="Veranstaltung ändern">
+    <div [formGroup]="form" class="split">
+      <mat-form-field appearance="outline">
+        <mat-label>Art der Veranstaltung</mat-label>
+        <mat-select formControlName="showType">
+          <mat-optgroup label="öffentlich">
+            <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
+              key | showType
+              }}</mat-option>
+          </mat-optgroup>
+          <mat-optgroup label="privat">
+            <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
+              key | showType
+              }}</mat-option>
+          </mat-optgroup>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Datum</mat-label>
+        <input [matDatepicker]="picker" formControlName="date" matInput/>
+        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+        <mat-datepicker #picker touchUi></mat-datepicker>
+      </mat-form-field>
+    </div>
+
+    <app-button-row>
+      <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
+    </app-button-row>
+  </app-card>
+</div>

src/app/modules/shows/edit/edit.component.less

@@ -0,0 +1,9 @@
+.split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 20px;
+}
+
+.inline {
+  width: 100%;
+}

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

@@ -0,0 +1,65 @@
+import {Component, OnInit} from '@angular/core';
+import {ShowDataService} from '../services/show-data.service';
+import {Observable, take} from 'rxjs';
+import {Show} from '../services/show';
+import {ShowService} from '../services/show.service';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {ActivatedRoute, Router} from '@angular/router';
+import {faSave} from '@fortawesome/free-solid-svg-icons';
+import {map, switchMap} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.less'],
+})
+export class EditComponent implements OnInit {
+  public shows$: Observable<Show[]>;
+  public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
+  public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
+  public form = new FormGroup({
+    id: new FormControl<string | null>(null),
+    date: new FormControl<Date | null>(null, Validators.required),
+    showType: new FormControl<string | null>(null, Validators.required),
+  });
+  public faSave = faSave;
+
+  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router, private activatedRoute: ActivatedRoute) {
+    this.shows$ = showDataService.list$;
+  }
+
+  public ngOnInit(): void {
+    this.form.reset();
+
+    this.activatedRoute.params
+      .pipe(
+        map(param => param as {showId: string}),
+        map(param => param.showId),
+        switchMap((showId: string) => this.showService.read$(showId)),
+        take(1)
+      )
+      .subscribe(show => {
+        this.form.setValue({
+          id: show?.id || null,
+          date: show?.date.toDate() || null,
+          showType: show?.showType || null,
+        });
+      });
+  }
+
+  public async onSave(): Promise<void> {
+    this.form.markAllAsTouched();
+    if (!this.form.valid) {
+      return;
+    }
+
+    await this.showService.update$(
+      this.form.value.id as string,
+      {
+        date: this.form.value.date,
+        showType: this.form.value.showType,
+      } as Partial<Show>
+    );
+    await this.router.navigateByUrl(`/shows/${this.form.value.id ?? ''}`);
+  }
+}

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

@@ -5,14 +5,16 @@
       show.date.toDate() | date: 'dd.MM.yyyy'
     }} - {{ getStatus(show) }}"
   >
-    <i>{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
+    <p>{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
       <app-user-name [userId]="show.owner"></app-user-name>
-    </i>
+    </p>
     <div class="head">
       <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
       <div>
-        <app-menu-button @fade  (click)="onZoomOut()" [icon]="faZoomOut" class="btn-delete btn-icon" matTooltip="Vergrößern"></app-menu-button>
-        <app-menu-button @fade  (click)="onZoomIn()" [icon]="faZoomIn" class="btn-delete btn-icon" matTooltip="Verkleinern"></app-menu-button>
+        <app-menu-button @fade (click)="onZoomOut()" [icon]="faZoomOut" class="btn-delete btn-icon"
+                         matTooltip="Vergrößern"></app-menu-button>
+        <app-menu-button @fade (click)="onZoomIn()" [icon]="faZoomIn" class="btn-delete btn-icon"
+                         matTooltip="Verkleinern"></app-menu-button>
       </div>
     </div>
     <div *ngIf="showSongs" class="song-list" cdkDropList [cdkDropListDisabled]="show.published || showText"
@@ -40,46 +42,33 @@
     <app-button-row>
       <ng-container *appRole="['leader']">
         <ng-container *appOwner="show.owner">
-          <app-button
-            (click)="onArchive(true)"
-            *ngIf="!show.archived"
-            [icon]="faBox"
-          >
+          <app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">
             Archivieren
           </app-button>
-          <app-button
-            (click)="onArchive(false)"
-            *ngIf="show.archived"
-            [icon]="faBoxOpen"
-          >
+          <app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">
             Wiederherstellen
           </app-button>
-          <app-button
-            (click)="onPublish(true)"
-            *ngIf="!show.published"
-            [icon]="faPublish"
-          >
+          <app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">
             Veröffentlichen
           </app-button>
-          <app-button
-            (click)="onPublish(false)"
-            *ngIf="show.published"
-            [icon]="faUnpublish"
-          >
+          <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">
             Veröffentlichung zurückziehen
           </app-button>
+          <app-button (click)="onChange(show.id)" [icon]="faSliders" *ngIf="!show.published">
+            Ändern
+          </app-button>
         </ng-container>
       </ng-container>
 
-      <app-button [icon]="faDownload" [matMenuTriggerFor]="menu"
-      >Herunterladen
+      <app-button [icon]="faDownload" [matMenuTriggerFor]="menu">
+        Herunterladen
       </app-button>
       <mat-menu #menu="matMenu">
-        <app-button (click)="onDownload()" [icon]="faUser"
-        >Ablauf für Lobpreisgruppe
+        <app-button (click)="onDownload()" [icon]="faUser">
+          Ablauf für Lobpreisgruppe
         </app-button>
-        <app-button (click)="onDownloadHandout()" [icon]="faUsers"
-        >Handout mit Copyright Infos
+        <app-button (click)="onDownloadHandout()" [icon]="faUsers">
+          Handout mit Copyright Infos
         </app-button>
       </mat-menu>
     </app-button-row>

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

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {filter, map, switchMap, tap} from 'rxjs/operators';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {ShowService} from '../services/show.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
@@ -9,7 +9,18 @@ import {Song} from '../../songs/services/song';
 import {ShowSongService} from '../services/show-song.service';
 import {ShowSong} from '../services/show-song';
 import {DocxService} from '../services/docx.service';
-import {faBox, faBoxOpen, faExternalLinkAlt, faFileDownload, faLock, faMagnifyingGlassMinus, faMagnifyingGlassPlus, faUser, faUsers} from '@fortawesome/free-solid-svg-icons';
+import {
+  faBox,
+  faBoxOpen,
+  faExternalLinkAlt,
+  faFileDownload,
+  faLock,
+  faMagnifyingGlassMinus,
+  faMagnifyingGlassPlus,
+  faSliders,
+  faUser,
+  faUsers,
+} from '@fortawesome/free-solid-svg-icons';
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import {fade} from '../../../animations';
 
@@ -31,6 +42,7 @@ export class ShowComponent implements OnInit {
   public faPublish = faExternalLinkAlt;
   public faUnpublish = faLock;
   public faDownload = faFileDownload;
+  public faSliders = faSliders;
   public faUser = faUser;
   public faUsers = faUsers;
   public faZoomIn = faMagnifyingGlassPlus;
@@ -41,7 +53,8 @@ export class ShowComponent implements OnInit {
     private showService: ShowService,
     private songService: SongService,
     private showSongService: ShowSongService,
-    private docxService: DocxService
+    private docxService: DocxService,
+    private router: Router
   ) {}
 
   public ngOnInit(): void {
@@ -67,9 +80,11 @@ export class ShowComponent implements OnInit {
   }
 
   public textSize = 1;
+
   public onZoomIn() {
     this.textSize += 0.1;
   }
+
   public onZoomOut() {
     this.textSize -= 0.1;
   }
@@ -123,4 +138,8 @@ export class ShowComponent implements OnInit {
   }
 
   public trackBy = (index: number, show: ShowSong) => show.id;
+
+  public async onChange(showId: string) {
+    await this.router.navigateByUrl('/shows/' + showId + '/edit');
+  }
 }

src/app/modules/shows/shows-routing.module.ts

@@ -3,6 +3,7 @@ import {RouterModule, Routes} from '@angular/router';
 import {NewComponent} from './new/new.component';
 import {ListComponent} from './list/list.component';
 import {ShowComponent} from './show/show.component';
+import {EditComponent} from './edit/edit.component';
 
 const routes: Routes = [
   {
@@ -14,6 +15,10 @@ const routes: Routes = [
     path: 'new',
     component: NewComponent,
   },
+  {
+    path: ':showId/edit',
+    component: EditComponent,
+  },
   {
     path: ':showId',
     component: ShowComponent,

src/app/modules/shows/shows.module.ts

@@ -33,9 +33,10 @@ import {RoleModule} from '../../services/user/role.module';
 import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {FilterComponent} from './list/filter/filter.component';
+import {EditComponent} from './edit/edit.component';
 
 @NgModule({
-  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent],
+  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent],
   imports: [
     CommonModule,
     ShowsRoutingModule,