user preferences - chord type

src/app/modules/user/info/info.component.html

@@ -1,6 +1,18 @@
 <app-card *ngIf="user$|async as user">
   <h2>Hallo {{user.name}}</h2>
   <p>{{user.role|role}}</p>
+
+  <mat-form-field appearance="outline">
+    <mat-label>bevorzugte Anzeige der Akkorde</mat-label>
+    <mat-select (ngModelChange)="onChordModeChanged(user.id, $event)" [ngModel]="user.chordMode">
+      <mat-option [value]="null"></mat-option>
+      <mat-option value="hide">nur den Liedtext anzeigen</mat-option>
+      <mat-option value="onlyFirst">in Strophen die Akkorde nur für die erste anzeigen</mat-option>
+      <mat-option value="show">alle azeigen</mat-option>
+    </mat-select>
+    <mat-hint>Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert werden.</mat-hint>
+  </mat-form-field>
+
   <app-button-row>
     <button mat-button routerLink="../logout">Abmelden</button>
   </app-button-row>

src/app/modules/user/info/info.component.less

@@ -0,0 +1,3 @@
+.mat-form-field {
+  width: 100%;
+}

src/app/modules/user/info/info.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {UserService} from '../../../services/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user';
+import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
 
 @Component({
   selector: 'app-info',
@@ -18,4 +19,8 @@ export class InfoComponent implements OnInit {
     this.user$ = this.userService.user$;
   }
 
+  public async onChordModeChanged(uid: string, value: ChordMode): Promise<void> {
+    await this.userService.update$(uid, {chordMode: value});
+  }
+
 }

src/app/modules/user/user.module.ts

@@ -4,7 +4,7 @@ import {LoginComponent} from './login/login.component';
 import {UserRoutingModule} from './user-routing.module';
 import {CardModule} from '../../widget-modules/components/card/card.module';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {ReactiveFormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
 import {MatButtonModule} from '@angular/material/button';
@@ -12,6 +12,7 @@ import {AuthMessagePipe} from './login/auth-message.pipe';
 import {InfoComponent} from './info/info.component';
 import {LogoutComponent} from './logout/logout.component';
 import {RolePipe} from './info/role.pipe';
+import {MatSelectModule} from '@angular/material/select';
 
 
 @NgModule({
@@ -25,6 +26,8 @@ import {RolePipe} from './info/role.pipe';
     MatInputModule,
     ButtonRowModule,
     MatButtonModule,
+    MatSelectModule,
+    FormsModule,
 
 
   ]