new song sync

WEB/src/app/components/songs/song-new/song-new.component.html

@@ -14,8 +14,8 @@
         <app-song-form [form]="form"></app-song-form>
       </mat-card-content>
       <mat-card-actions>
-        <button mat-button (click)="onClickEdit()">
+        <button mat-button (click)="onClickAdd()">
-          <fa-icon [icon]="faSave"></fa-icon> Speichern
+          <fa-icon [icon]="faSave"></fa-icon> neu anlegen
         </button>
       </mat-card-actions>
     </mat-card>

WEB/src/app/components/songs/song-new/song-new.component.ts

@@ -31,4 +31,8 @@ export class SongNewComponent implements OnInit {
     this.songsService.state = State.list;
   }
 
+  public onClickAdd(): void {
+    this.songsService.saveNewSong$(this.form.value).subscribe();
+  }
+
 }

WEB/src/app/components/songs/song/song.component.html

@@ -7,7 +7,13 @@
         </button>
       </div>
       <mat-card-title>{{ song.Name }}</mat-card-title>
-      <mat-card-subtitle>{{ song.Key }} - {{ song.Tempo }}</mat-card-subtitle>
+      <mat-card-subtitle>
+        <mat-chip-list>
+          <mat-chip *ngIf="renderSongType(song.SongType)" [style.background]="renderSongType(song.SongType).color">{{ renderSongType(song.SongType).name }}</mat-chip>
+          <mat-chip *ngIf="song.Key">Tonart: {{ song.Key }}</mat-chip>
+          <mat-chip *ngIf="song.Tempo">Tempo: {{ song.Tempo }}</mat-chip>
+        </mat-chip-list></mat-card-subtitle
+      >
     </mat-card-header>
     <mat-card-content>
       <p *ngFor="let line of text">{{ line }}</p>
@@ -16,7 +22,7 @@
     </mat-card-content>
     <mat-card-actions>
       <button mat-button (click)="onClickEdit()">
-        <fa-icon [icon]="faEdit"></fa-icon> Bearbeiten
+        <fa-icon [icon]="faEdit"></fa-icon> bearbeiten
       </button>
     </mat-card-actions>
   </mat-card>

WEB/src/app/components/songs/song/song.component.ts

@@ -57,4 +57,12 @@ export class SongComponent {
   public get comments(): string[] {
     return this.song && this.song.Comments ? this.song.Comments.split(/\r?\n/) : [];
   }
+
+  public renderSongType(songType: string) {
+    switch (songType) {
+      case 'Praise': return {name: 'Lobpreis', color: '#99FFB8'};
+      case 'Worship': return {name: 'Anbetung', color: '#C999FF'};
+      default: return null;
+    }
+  }
 }

WEB/src/app/components/songs/songs.component.ts

@@ -12,6 +12,6 @@ import { State } from 'src/app/data/state';
 export class SongsComponent {
   public State = State;
   constructor(public songsService: SongsService) {
-    songsService.loadSongList();
+    songsService.loadSongList$().subscribe();
   }
 }

WEB/src/app/components/songs/table/table.component.html

@@ -3,7 +3,9 @@
   [class.pinned]="songsService.state !== State.list"
 >
   <div class="table-container">
-    <button mat-icon-button (click)="onClickNew()" class="button-new"><fa-icon [icon]="faNew"></fa-icon></button>
+    <button mat-icon-button (click)="onClickNew()" class="button-new">
+      <fa-icon [icon]="faNew"></fa-icon>
+    </button>
     <table
       mat-table
       [dataSource]="songsService.songs | async"
@@ -11,7 +13,11 @@
     >
       <ng-container matColumnDef="Number">
         <th mat-header-cell *matHeaderCellDef>#</th>
-        <td mat-cell *matCellDef="let element">{{ element.Number }}</td>
+        <td mat-cell *matCellDef="let element">
+          <mat-chip-list>
+            <mat-chip>{{ element.Number }}</mat-chip>
+          </mat-chip-list>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Name">
@@ -31,8 +37,13 @@
       <ng-container matColumnDef="SongType">
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element">
-          <mat-chip-list *ngIf="element.SongType && element.SongType!=='None'">
+          <mat-chip-list
-            <mat-chip [style.background-color]="renderSongType(element.SongType).color">{{ renderSongType(element.SongType).name }}</mat-chip>
+            *ngIf="element.SongType && element.SongType !== 'None'"
+          >
+            <mat-chip
+              [style.background-color]="renderSongType(element.SongType).color"
+              >{{ renderSongType(element.SongType).name }}</mat-chip
+            >
           </mat-chip-list>
         </td>
       </ng-container>

WEB/src/app/data/edit-song.service.ts

@@ -42,7 +42,7 @@ export class EditSongService {
     private attachSync(form: FormGroup, song: Song) {
         const controls = Object.keys(form.controls);
         controls.forEach(control => {
-            form.controls[control].valueChanges.pipe(switchMap(value => this.songsService.patch(song.ID, control, value))).subscribe();
+            form.controls[control].valueChanges.pipe(switchMap(value => this.songsService.patch$(song.ID, control, value))).subscribe();
         });
     }
 

WEB/src/app/data/odata.service.ts

@@ -1,15 +1,16 @@
-import { ODataService, ODataQuery } from "odata-v4-ng";
+import { Song } from 'src/app/models/song.model';
-import { Observable } from "rxjs";
+import { ODataService, ODataQuery } from 'odata-v4-ng';
-import { map, tap } from "rxjs/operators";
+import { Observable } from 'rxjs';
-import { base } from "./urls";
+import { map, tap } from 'rxjs/operators';
+import { base } from './urls';
 
 export class OdataService {
   private url: string;
   constructor(private odataService: ODataService, private entity: string) {
-    this.url = base + "/odata/";
+    this.url = base + '/odata/';
   }
 
-  public list<TResponse>(properties: string[]): Observable<TResponse[]> {
+  public list$<TResponse>(properties: string[]): Observable<TResponse[]> {
     const query = new ODataQuery(this.odataService, this.url)
       .entitySet(this.entity)
       .select(properties);
@@ -18,7 +19,7 @@ export class OdataService {
     return get;
   }
 
-  public get<TResponse>(
+  public get$<TResponse>(
     id: number,
     properties: string[]
   ): Observable<TResponse> {
@@ -31,15 +32,30 @@ export class OdataService {
     return get;
   }
 
-  public patch(id: number, control: string, value: any): Observable<boolean> {
+  public patch$(id: number, control: string, value: any): Observable<boolean> {
     const valueSet = { [control]: value };
     const query = new ODataQuery(this.odataService, this.url)
       .entitySet(this.entity)
       .entityKey(id);
-    const get = query.patch(valueSet).pipe(
+    const get = query.patch(valueSet).pipe(map(() => true));
-      map(() => true)
-    );
 
     return get;
   }
+
+  public post$<TResponse>(values: any): Observable<TResponse> {
+    const querry = new ODataQuery(this.odataService, this.url);
+    const post = querry
+      .entitySet(this.entity)
+      .post(values)
+      .pipe(
+        tap(_ => console.log(_)),
+        map(_ => {
+          const mapped = _.toEntity<TResponse>();
+          return mapped;
+        }),
+        tap(_ => console.log(_))
+      );
+
+    return post;
+  }
 }

WEB/src/app/data/songs.service.ts

@@ -3,7 +3,7 @@ import { ODataService } from 'odata-v4-ng';
 import { OdataService } from './odata.service';
 import { Song } from '../models/song.model';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
+import { tap, switchMap } from 'rxjs/operators';
 import { State } from './state';
 
 @Injectable({
@@ -19,9 +19,22 @@ export class SongsService extends OdataService {
     super(odataService, 'songs');
   }
 
-  public loadSongList(): void {
+  public loadSongList$(): Observable<Song[]> {
     const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
-    this.list<Song>(properties).subscribe(_ => this.songs.next(_));
+    const list = this.list$<Song>(properties).pipe(
+      tap(_ => this.songs.next(_))
+    );
+    return list;
+  }
+
+  public loadSongListAndGoTo$(id: number): Observable<Song[]> {
+    const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
+    const list = this.list$<Song>(properties).pipe(tap(_ => {
+      this.songs.next(_);
+      this.selectSong(id);
+    }));
+
+    return list;
   }
 
   public selectSong(id: number): void {
@@ -32,7 +45,7 @@ export class SongsService extends OdataService {
       return;
     }
 
-    this.get<Song>(id, ['Text', 'Comments']).subscribe(_ => {
+    this.get$<Song>(id, ['Text', 'Comments']).subscribe(_ => {
       song.Text = _.Text;
       song.Comments = _.Comments;
       this.selectedSong.next(song);
@@ -44,8 +57,8 @@ export class SongsService extends OdataService {
     this.selectedSong.next(null);
   }
 
-  public patch(id: number, control: string, value: any): Observable<boolean> {
+  public patch$(id: number, control: string, value: any): Observable<boolean> {
-    const patch = super.patch(id, control, value).pipe(
+    const patch = super.patch$(id, control, value).pipe(
       tap(() => {
         const songs = this.songs.value;
         const song = songs.filter(_ => _.ID === id)[0];
@@ -54,6 +67,15 @@ export class SongsService extends OdataService {
         this.selectedSong.next(song);
       })
     );
+
     return patch;
   }
+
+  public saveNewSong$(values: any): Observable<Song[]> {
+    const newSong = super
+      .post$<Song>(values)
+      .pipe(switchMap(_ => this.loadSongListAndGoTo$(_.ID)));
+
+      return newSong;
+  }
 }