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 ?? ''}`);
+  }
+}