edit and update data

src/app/animations.ts

@@ -1,4 +1,4 @@
-import {animate, query, stagger, state, style, transition, trigger} from '@angular/animations';
+import {animate, state, style, transition, trigger} from '@angular/animations';
 
 export const fade = [
   // the fade-in/fade-out animation.

src/app/app.component.less

@@ -3,5 +3,7 @@ h1 {
 }
 
 .content {
-  margin-top: 80px;
+  margin-top: 60px;
+  display: flex;
+  justify-content: center;
 }

src/app/application-frame/navigation/filter/filter.component.html

@@ -1,2 +1,2 @@
-<input placeholder="Suche" (input)="onInputChange($event.target.value)">
+<input (input)="onInputChange($event.target.value)" placeholder="Suche">
 

src/app/songs/services/song-data.service.spec.ts

@@ -15,7 +15,7 @@ describe('SongDataService', () => {
   };
 
   const mockAngularFirestore = {
-    collection: path => angularFirestoreCollection
+    collection: () => angularFirestoreCollection
   };
 
   beforeEach(() => TestBed.configureTestingModule({
@@ -31,11 +31,11 @@ describe('SongDataService', () => {
 
   it('should list songs', async(() => {
     const service: SongDataService = TestBed.get(SongDataService);
-    service.list().subscribe(songs => {
-        expect(songs).toEqual(<any>[
+    service.list().subscribe(s => {
+      expect(s).toEqual([
           {title: 'title1'}
-        ]);
+      ] as any);
       }
-    )
+    );
   }));
 });

src/app/songs/services/song-data.service.ts

@@ -22,11 +22,16 @@ export class SongDataService {
   }
 
   public list = (): Observable<Song[]> => this.songs;
-  public read = (songId: string): Observable<Song | undefined> =>
-    this.afs.doc<Song>('songs/' + songId).valueChanges().pipe(map(song => ({
+
+  public read(songId: string): Observable<Song | undefined> {
+    return this.afs.doc<Song>('songs/' + songId).valueChanges().pipe(map(song => ({
       ...song,
       id: songId
-    } as Song)))
-
-
+    } as Song)));
   }
+
+  public async update(songId: string, data: any): Promise<void> {
+    await this.afs.doc<Song>('songs/' + songId).update(data);
+  }
+}
+

src/app/songs/services/song.service.spec.ts

@@ -27,10 +27,10 @@ describe('SongService', () => {
 
   it('should list songs', async(() => {
     const service: SongService = TestBed.get(SongService);
-    service.list$().subscribe(songs => {
-      expect(songs).toEqual(<any>[
+    service.list$().subscribe(s => {
+      expect(s).toEqual([
         {title: 'title1'}
-      ]);
+      ] as any);
     });
   }));
 });

src/app/songs/services/song.service.ts

@@ -8,10 +8,22 @@ import {SongDataService} from './song-data.service';
 })
 export class SongService {
 
+  public TYPES = ['Praise', 'Worship'];
+
+  public KEYS = [
+    'C', 'C#', 'Db', 'D', 'D#', 'Eb', 'E', 'F', 'F#', 'Gb', 'G', 'G#', 'Ab', 'A', 'A#', 'B', 'H',
+    'c', 'c#', 'db', 'd', 'd#', 'eb', 'e', 'f', 'f#', 'gb', 'g', 'g#', 'ab', 'a', 'a#', 'b', 'h'
+  ];
+
   constructor(private songDataService: SongDataService) {
   }
 
   public list$ = (): Observable<Song[]> => this.songDataService.list();
   public read = (songId: string): Observable<Song | undefined> => this.songDataService.read(songId);
 
+  public async update(songId: string, data: any): Promise<void> {
+    await this.songDataService.update(songId, data);
+  }
+
+
 }

src/app/songs/song-list/song-list.component.html

@@ -1,3 +1,3 @@
-<app-card [padding]="false" *ngIf="songs$ | async as songs" [@fade]>
-  <app-list-item *ngFor="let song of songs" [song]="song" [routerLink]="song.id"></app-list-item>
+<app-card *ngIf="songs$ | async as songs" [@fade] [padding]="false">
+  <app-list-item *ngFor="let song of songs" [routerLink]="song.id" [song]="song"></app-list-item>
 </app-card>

src/app/songs/song-list/song-list.component.spec.ts

@@ -40,8 +40,8 @@ describe('SongListComponent', () => {
 
   it('should read songs from SongService', fakeAsync(() => {
     tick();
-    expect(component.songs$).toEqual(<any>[
+    expect(component.songs$).toEqual([
       {title: 'title1'}
-    ]);
+    ] as any);
   }));
 });

src/app/songs/song-list/song-list.component.ts

@@ -13,10 +13,25 @@ import {ActivatedRoute} from '@angular/router';
   animations: [fade]
 })
 export class SongListComponent implements OnInit {
-  public songs$: Observable<Song[]>;
 
   constructor(private songService: SongService, private activatedRoute: ActivatedRoute) {
   }
+  public songs$: Observable<Song[]>;
+
+  private static filter(song: Song, filterValue: string): boolean {
+    if (!filterValue) {
+      return true;
+    }
+
+    const textMatch = song.text && SongListComponent.normalize(song.text).indexOf(SongListComponent.normalize(filterValue)) !== -1;
+    const titleMatch = song.title && SongListComponent.normalize(song.title).indexOf(SongListComponent.normalize(filterValue)) !== -1;
+
+    return textMatch || titleMatch;
+  }
+
+  private static normalize(input: string): string {
+    return input.toLowerCase().replace(/\s/g, '');
+  }
 
   ngOnInit() {
     const filter$ = this.activatedRoute.queryParams.pipe(
@@ -29,22 +44,7 @@ export class SongListComponent implements OnInit {
     );
 
     this.songs$ = combineLatest([filter$, songs$]).pipe(
-      map(_ => _[1].filter(song => this.filter(song, _[0])))
+      map(_ => _[1].filter(song => SongListComponent.filter(song, _[0])))
     );
   }
-
-  private filter(song: Song, filterValue: string): boolean {
-    if (!filterValue) {
-      return true;
-    }
-
-    const textMatch = song.text && this.normalize(song.text).indexOf(this.normalize(filterValue)) !== -1;
-    const titleMatch = song.title && this.normalize(song.title).indexOf(this.normalize(filterValue)) !== -1;
-
-    return textMatch || titleMatch;
-  }
-
-  private normalize( input: string): string {
-    return input.toLowerCase().replace(/\s/g, '');
-  }
 }

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

@@ -0,0 +1,40 @@
+<app-card *ngIf="song" [heading]="song.number + ' bearbeiten'">
+
+  <form [formGroup]="form" class="form">
+    <mat-form-field appearance="outline">
+      <mat-label>Titel</mat-label>
+      <input formControlName="title" matInput>
+    </mat-form-field>
+
+    <div class="third">
+      <mat-form-field appearance="outline">
+        <mat-label>Typ</mat-label>
+        <mat-select formControlName="type">
+          <mat-option *ngFor="let type of types" [value]="type">{{type | songType}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Tonart</mat-label>
+        <mat-select formControlName="key">
+          <mat-option *ngFor="let key of keys" [value]="key">{{key}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Tempo</mat-label>
+        <input formControlName="tempo" matInput>
+      </mat-form-field>
+    </div>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Songtext</mat-label>
+      <textarea [mat-autosize]="true" formControlName="text" matInput></textarea>
+    </mat-form-field>
+
+
+  </form>
+
+  <app-button-row>
+    <button (click)="onSave()" color="primary" mat-flat-button>Speichern</button>
+    <button mat-stroked-button routerLink="../">Abbrechen</button>
+  </app-button-row>
+</app-card>

src/app/songs/song/edit/edit.component.less

@@ -0,0 +1,14 @@
+.form {
+  margin-top: 20px;
+  width: 100%;
+
+  > * {
+    width: 100%;
+  }
+
+  .third {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    column-gap: 20px;
+  }
+}

src/app/songs/song/edit/edit.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {EditComponent} from './edit.component';
+
+describe('EditComponent', () => {
+  let component: EditComponent;
+  let fixture: ComponentFixture<EditComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EditComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,44 @@
+import {Component, OnInit} from '@angular/core';
+import {Song} from '../../models/song';
+import {ActivatedRoute, Router} from '@angular/router';
+import {SongService} from '../../services/song.service';
+import {first, map, switchMap} from 'rxjs/operators';
+import {FormGroup} from '@angular/forms';
+import {EditService} from './edit.service';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.less']
+})
+export class EditComponent implements OnInit {
+  public song: Song;
+  public form: FormGroup;
+  public keys = this.songService.KEYS;
+  public types = this.songService.TYPES;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private songService: SongService,
+    private editService: EditService,
+    private router: Router
+  ) {
+  }
+
+  public ngOnInit(): void {
+    this.activatedRoute.params.pipe(
+      map(param => param.songId),
+      switchMap(songId => this.songService.read(songId)),
+      first()
+    ).subscribe(song => {
+      this.song = song;
+      this.form = this.editService.createSongForm(song);
+    });
+  }
+
+  public async onSave(): Promise<void> {
+    const data = this.form.value;
+    await this.songService.update(this.song.id, data);
+    await this.router.navigateByUrl('songs/' + this.song.id);
+  }
+}

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

@@ -0,0 +1,34 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {EditComponent} from './edit.component';
+import {CardModule} from '../../../widget-modules/components/card/card.module';
+import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatInputModule} from '@angular/material/input';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatSelectModule} from '@angular/material/select';
+import {MatButtonModule} from '@angular/material/button';
+import {ButtonRowModule} from '../../../widget-modules/components/button-row/button-row.module';
+import {RouterModule} from '@angular/router';
+
+
+@NgModule({
+  declarations: [EditComponent],
+  exports: [EditComponent],
+  imports: [
+    CommonModule,
+    CardModule,
+    SongTypeTranslaterModule,
+    ReactiveFormsModule,
+    RouterModule,
+
+    MatInputModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    ButtonRowModule,
+
+  ]
+})
+export class EditModule {
+}

src/app/songs/song/edit/edit.service.spec.ts

@@ -0,0 +1,12 @@
+import {TestBed} from '@angular/core/testing';
+
+import {EditService} from './edit.service';
+
+describe('EditService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: EditService = TestBed.get(EditService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/songs/song/edit/edit.service.ts

@@ -0,0 +1,23 @@
+import {Injectable} from '@angular/core';
+import {Song} from '../../models/song';
+import {FormControl, FormGroup} from '@angular/forms';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditService {
+
+  constructor() {
+  }
+
+  public createSongForm(song: Song): FormGroup {
+    return new FormGroup({
+      text: new FormControl(song.text),
+      title: new FormControl(song.title),
+      comment: new FormControl(song.comment),
+      key: new FormControl(song.key),
+      tempo: new FormControl(song.tempo),
+      type: new FormControl(song.type)
+    });
+  }
+}

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

@@ -12,4 +12,7 @@
       </div>
     </div>
   </div>
+  <app-button-row>
+    <button color="primary" mat-flat-button routerLink="edit">Bearbeiten</button>
+  </app-button-row>
 </app-card>

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

@@ -3,7 +3,9 @@ import { CommonModule } from '@angular/common';
 import {SongComponent} from './song.component';
 import {CardModule} from '../../widget-modules/components/card/card.module';
 import {SongTypeTranslaterModule} from '../../widget-modules/pipes/song-type-translater/song-type-translater.module';
-
+import {MatButtonModule} from '@angular/material/button';
+import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
+import {RouterModule} from '@angular/router';
 
 
 @NgModule({
@@ -12,8 +14,12 @@ import {SongTypeTranslaterModule} from '../../widget-modules/pipes/song-type-tra
   imports: [
     CommonModule,
     CardModule,
+    RouterModule,
 
-    SongTypeTranslaterModule
+    SongTypeTranslaterModule,
+    MatButtonModule,
+    ButtonRowModule,
   ]
 })
-export class SongModule { }
+export class SongModule {
+}

src/app/songs/songs-routing.module.ts

@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {SongComponent} from './song/song.component';
 import {SongListComponent} from './song-list/song-list.component';
+import {EditComponent} from './song/edit/edit.component';
 
 
 const routes: Routes = [
@@ -10,6 +11,10 @@ const routes: Routes = [
     component: SongListComponent,
     pathMatch: 'full'
   },
+  {
+    path: ':songId/edit',
+    component: EditComponent
+  },
   {
     path: ':songId',
     component: SongComponent

src/app/songs/songs.module.ts

@@ -4,6 +4,7 @@ import {CommonModule} from '@angular/common';
 import {SongsRoutingModule} from './songs-routing.module';
 import {SongListModule} from './song-list/song-list.module';
 import {SongModule} from './song/song.module';
+import {EditModule} from './song/edit/edit.module';
 
 @NgModule({
   declarations: [],
@@ -11,7 +12,8 @@ import {SongModule} from './song/song.module';
     CommonModule,
     SongsRoutingModule,
     SongListModule,
-    SongModule
+    SongModule,
+    EditModule
   ]
 })
 export class SongsModule {

src/app/widget-modules/components/button-row/button-row.component.html

@@ -0,0 +1,3 @@
+<div class="row">
+  <ng-content></ng-content>
+</div>

src/app/widget-modules/components/button-row/button-row.component.less

@@ -0,0 +1,6 @@
+.row {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  width: 100%;
+}

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

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ButtonRowComponent} from './button-row.component';
+
+describe('ButtonRowComponent', () => {
+  let component: ButtonRowComponent;
+  let fixture: ComponentFixture<ButtonRowComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ButtonRowComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonRowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-button-row',
+  templateUrl: './button-row.component.html',
+  styleUrls: ['./button-row.component.less']
+})
+export class ButtonRowComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/widget-modules/components/button-row/button-row.module.ts

@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ButtonRowComponent} from './button-row.component';
+
+
+@NgModule({
+  declarations: [ButtonRowComponent],
+  exports: [ButtonRowComponent],
+  imports: [
+    CommonModule
+  ]
+})
+export class ButtonRowModule {
+}

src/app/widget-modules/components/card/card.component.html

@@ -1,4 +1,4 @@
 <div [class.padding]="padding" class="card">
-  <div class="heading" *ngIf="heading">{{heading}}</div>
+  <div *ngIf="heading" class="heading">{{heading}}</div>
   <ng-content></ng-content>
 </div>

src/app/widget-modules/pipes/song-type-translater/song-type.pipe.ts

@@ -12,7 +12,7 @@ export class SongTypePipe implements PipeTransform {
       case 'Praise':
         return 'Lobpreis';
       default:
-        return ''
+        return '';
     }
   }
 

src/environments/environment.prod.ts

@@ -2,5 +2,5 @@ import {firebase} from './firebase';
 
 export const environment = {
   production: true,
-  firebase: firebase
+  firebase
 };

src/environments/environment.ts

@@ -6,7 +6,7 @@ import {firebase} from './firebase';
 
 export const environment = {
   production: false,
-  firebase: firebase
+  firebase
 };
 
 /*