add show

src/app/modules/show/list/list-item/list-item.component.html

@@ -0,0 +1,4 @@
+<div class="list-item">
+  <div>{{show.showType|showType}}</div>
+  <div>{{show.date.toDate()|date:'dd.MM.yyyy HH.mm'}}</div>
+</div>

src/app/modules/show/list/list-item/list-item.component.less

@@ -0,0 +1,26 @@
+@import "../../../../../styles/styles";
+
+.list-item {
+  padding: 5px 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  min-height: 34px;
+
+  & > div {
+    display: flex;
+    align-items: center;
+  }
+
+  cursor: pointer;
+
+  &:hover {
+    background: @primary-color;
+    color: #fff;
+  }
+}
+
+.number {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: right;
+}

src/app/modules/show/list/list-item/list-item.component.spec.ts

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

src/app/modules/show/list/list-item/list-item.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Show} from '../../services/show';
+
+@Component({
+  selector: 'app-list-item',
+  templateUrl: './list-item.component.html',
+  styleUrls: ['./list-item.component.less']
+})
+export class ListItemComponent implements OnInit {
+  @Input() public show: Show;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,7 @@
+<div>
+  <app-list-header></app-list-header>
+
+  <app-card *ngIf="shows$ | async as shows" [@fade] [padding]="false">
+    <app-list-item *ngFor="let show of shows" [routerLink]="show.id" [show]="show"></app-list-item>
+  </app-card>
+</div>

src/app/modules/show/list/list.component.spec.ts

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

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

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {Observable} from 'rxjs';
+import {Show} from '../services/show';
+import {ShowDataService} from '../services/show-data.service';
+import {fade} from '../../../animations';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.less'],
+  animations: [fade]
+})
+export class ListComponent {
+  public shows$: Observable<Show[]>;
+
+  constructor(showDataService: ShowDataService) {
+    this.shows$ = showDataService.list$();
+  }
+
+}

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

@@ -0,0 +1,34 @@
+<div>
+  <app-card *ngIf="!publicChosen">
+    <h1>Neue Veranstaltung</h1>
+    <app-button-row>
+      <button (click)="onIsPublic(true)" mat-button>Ja</button>
+      <button (click)="onIsPublic(false)" mat-button>Nein</button>
+      <p class="inline"> Handelt es sich um eine öffentliche Veranstaltung? </p>
+    </app-button-row>
+  </app-card>
+
+  <app-card *ngIf="publicChosen">
+    <h1>Neue Veranstaltung</h1>
+
+    <div [formGroup]="form" class="split">
+      <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>
+      <mat-form-field appearance="outline">
+        <mat-label>Art der Veranstaltung</mat-label>
+        <mat-select formControlName="showType">
+          <mat-option *ngFor="let key of showType" [value]="key">{{key|showType}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <app-button-row>
+      <button (click)="onSave()" color="primary" mat-flat-button>Anlegen</button>
+      <button mat-button routerLink="/show">Abbrechen</button>
+    </app-button-row>
+  </app-card>
+</div>

src/app/modules/show/new/new.component.less

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

src/app/modules/show/new/new.component.spec.ts

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

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

@@ -0,0 +1,44 @@
+import {Component, OnInit} from '@angular/core';
+import {ShowDataService} from '../services/show-data.service';
+import {Observable} from 'rxjs';
+import {Show} from '../services/show';
+import {ShowService} from '../services/show.service';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-new',
+  templateUrl: './new.component.html',
+  styleUrls: ['./new.component.less']
+})
+export class NewComponent implements OnInit {
+  public shows$: Observable<Show[]>;
+  public showType = this.showService.SHOW_TYPE;
+  public form: FormGroup;
+  public publicChosen = false;
+
+  constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
+    this.shows$ = showDataService.list$();
+  }
+
+  public ngOnInit(): void {
+    this.form = new FormGroup({
+      public: new FormControl(null),
+      date: new FormControl(null, Validators.required),
+      showType: new FormControl(null, Validators.required),
+    })
+  }
+
+  public onIsPublic(isPublic: boolean): void {
+    this.form.patchValue({public: isPublic});
+    this.publicChosen = true;
+  }
+
+  public async onSave() {
+    this.form.markAllAsTouched();
+    if (!this.form.valid) return;
+
+    const id = await this.showService.new(this.form.value);
+    await this.router.navigateByUrl('/show/' + id);
+  }
+}

src/app/modules/show/services/show-data.service.spec.ts

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

src/app/modules/show/services/show-data.service.ts

@@ -0,0 +1,17 @@
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {DbService} from '../../../services/db.service';
+import {Show} from './show';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShowDataService {
+  constructor(private dbService: DbService) {
+  }
+
+  public list$ = (): Observable<Show[]> => this.dbService.col$('show');
+  public read$ = (showId: string): Observable<Show | undefined> => this.dbService.doc$('show/' + showId);
+  public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(showId).update(data);
+  public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col('show').add(data)).id
+}

src/app/modules/show/services/show.service.spec.ts

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

src/app/modules/show/services/show.service.ts

@@ -0,0 +1,18 @@
+import {Injectable} from '@angular/core';
+import {ShowDataService} from './show-data.service';
+import {Show} from './show';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShowService {
+
+  public SHOW_TYPE = ['praise', 'worship', 'homegroup', 'prayergroup'];
+
+  constructor(private showDataService: ShowDataService) {
+  }
+
+  public async new(data: Partial<Show>): Promise<string> {
+    return await this.showDataService.add(data);
+  }
+}

src/app/modules/show/services/show.ts

@@ -0,0 +1,12 @@
+import * as firebase from 'firebase';
+import Timestamp = firebase.firestore.Timestamp;
+
+
+export interface Show {
+  id: string;
+  showType: string;
+  date: Timestamp;
+  owner: string;
+  public: boolean;
+  reported: boolean;
+}

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

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {NewComponent} from './new/new.component';
+import {ListComponent} from './list/list.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: ListComponent
+  },
+  {
+    path: 'new',
+    component: NewComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ShowRoutingModule {
+}

src/app/modules/show/show.module.ts

@@ -0,0 +1,42 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {ShowRoutingModule} from './show-routing.module';
+import {NewComponent} from './new/new.component';
+import {CardModule} from '../../widget-modules/components/card/card.module';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatInputModule} from '@angular/material/input';
+import {ListComponent} from './list/list.component';
+import {ListItemComponent} from './list/list-item/list-item.component';
+import {ListHeaderModule} from '../../widget-modules/list-header/list-header.module';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
+import {MatButtonModule} from '@angular/material/button';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatSelectModule} from '@angular/material/select';
+import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
+import {MatNativeDateModule} from '@angular/material/core';
+
+
+@NgModule({
+  declarations: [NewComponent, ListComponent, ListItemComponent],
+  imports: [
+    CommonModule,
+    ShowRoutingModule,
+    CardModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    ListHeaderModule,
+    MatCheckboxModule,
+    ButtonRowModule,
+    MatButtonModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatSelectModule,
+    ShowTypeTranslaterModule
+  ]
+})
+export class ShowModule {
+}

src/app/modules/songs/services/file-data.service.ts

@@ -1,27 +1,27 @@
 import {Injectable} from '@angular/core';
-import {SongDataService} from './song-data.service';
 import {File} from './file';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {FileServer} from './fileServer';
+import {DbService} from '../../../services/db.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class FileDataService {
 
-  constructor(private songDataService: SongDataService) {
+  constructor(private db: DbService) {
   }
 
-  public async put(songId: string, file: FileServer): Promise<string> {
-    const songRef = this.songDataService.getSongRef(songId);
+  public async set(songId: string, file: FileServer): Promise<string> {
+    const songRef = this.db.doc('songs/' + songId);
     const fileCollection = songRef.collection('files');
     const id = await fileCollection.add(file);
     return id.id;
   }
 
-  public get$(songId: string): Observable<File[]> {
-    const songRef = this.songDataService.getSongRef(songId);
+  public read$(songId: string): Observable<File[]> {
+    const songRef = this.db.doc('songs/' + songId);
     return songRef.collection<File>('files').snapshotChanges().pipe(map(actions => {
       return actions.map(a => ({
         ...a.payload.doc.data(),

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

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

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

@@ -1,40 +1,17 @@
 import {Injectable} from '@angular/core';
-import {AngularFirestore, AngularFirestoreCollection} from '@angular/fire/firestore';
-import {Song} from '../models/song';
+import {Song} from './song';
 import {Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
-import {AngularFirestoreDocument} from '@angular/fire/firestore/document/document';
+import {DbService} from '../../../services/db.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class SongDataService {
-  private songCollection: AngularFirestoreCollection<Song>;
-  private readonly songs: Observable<Song[]>;
-
-  constructor(private afs: AngularFirestore) {
-    this.songCollection = afs.collection<Song>('songs');
-    this.songs = this.songCollection.snapshotChanges().pipe(map(actions => {
-      return actions.map(a => ({
-        ...a.payload.doc.data(),
-        id: a.payload.doc.id
-      }));
-    }));
+  constructor(private dbService: DbService) {
   }
 
-  public list = (): Observable<Song[]> => this.songs;
-
-  public getSongRef = (songId: string): AngularFirestoreDocument<Song> => this.afs.doc<Song>('songs/' + songId);
-
-  public read(songId: string): Observable<Song | undefined> {
-    return this.getSongRef(songId).valueChanges().pipe(map(song => ({
-      ...song,
-      id: songId
-    } as Song)));
-  }
-
-  public async update(songId: string, data: any): Promise<void> {
-    await this.getSongRef(songId).update(data);
-  }
+  public list$ = (): Observable<Song[]> => this.dbService.col$('songs');
+  public read$ = (songId: string): Observable<Song | undefined> => this.dbService.doc$('songs/' + songId);
+  public update = async (songId: string, data: any): Promise<void> => await this.dbService.doc(songId).update(data);
 }
 

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

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
-import {Song} from '../models/song';
+import {Song} from './song';
 import {SongDataService} from './song-data.service';
 import {tap} from 'rxjs/operators';
 
@@ -26,8 +26,8 @@ export class SongService {
     importCCLI = (songs: Song[]) => this.updateFromCLI(songs);
   }
 
-  public list$ = (): Observable<Song[]> => this.songDataService.list().pipe(tap(_ => this.list = _));
-  public read = (songId: string): Observable<Song | undefined> => this.songDataService.read(songId);
+  public list$ = (): Observable<Song[]> => this.songDataService.list$().pipe(tap(_ => this.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/modules/songs/services/upload.service.ts

@@ -55,6 +55,6 @@ export class UploadService extends FileBase {
       path: upload.path,
       createdAt: new Date()
     };
-    await this.fileDataService.put(songId, file);
+    await this.fileDataService.set(songId, file);
   }
 }

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

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {Song} from '../../models/song';
+import {Song} from '../../services/song';
 
 @Component({
   selector: 'app-list-item',

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

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {SongService} from '../services/song.service';
-import {Song} from '../models/song';
+import {Song} from '../services/song';
 import {debounceTime, map} from 'rxjs/operators';
 import {combineLatest, Observable} from 'rxjs';
 import {fade} from '../../../animations';

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

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {Song} from '../../../models/song';
+import {Song} from '../../../services/song';
 import {FormGroup} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {SongService} from '../../../services/song.service';

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

@@ -1,2 +1,4 @@
-<app-edit-song></app-edit-song>
-<app-edit-file></app-edit-file>
+<div>
+  <app-edit-song></app-edit-song>
+  <app-edit-file></app-edit-file>
+</div>

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

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {Song} from '../../models/song';
+import {Song} from '../../services/song';
 import {FormControl, FormGroup} from '@angular/forms';
 
 @Injectable({

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

@@ -1,29 +1,35 @@
-<app-card *ngIf="song$ | async as song" [heading]="song.number + ' - ' + song.title">
-  <div class="song">
-    <div>
-      <div class="detail">
-        <div>Typ: {{song.type | songType}}</div>
-        <div>Tonart: {{song.key}}</div>
-        <div>Tempo: {{song.tempo}}</div>
-        <div *ngIf="song.legalOwner">Rechteinhaber: {{song.legalOwner|legalOwner}}</div>
-        <div *ngIf="song.legalOwnerId">Rechteinhaber ID: {{song.legalOwnerId}}</div>
-        <div *ngIf="song.legalLicenseId">Lizenznummer: {{song.legalLicenseId}}</div>
-        <div *ngIf="song.artist">Künstler: {{song.artist}}</div>
-        <div *ngIf="song.label">Verlag: {{song.label}}</div>
-        <div *ngIf="song.origin">Quelle: {{song.origin}}</div>
+<div class="split">
+  <app-card *ngIf="song$ | async as song" [heading]="song.number + ' - ' + song.title">
+    <div class="song">
+      <div>
+        <div class="detail">
+          <div>Typ: {{song.type | songType}}</div>
+          <div>Tonart: {{song.key}}</div>
+          <div>Tempo: {{song.tempo}}</div>
+          <div *ngIf="song.legalOwner">Rechteinhaber: {{song.legalOwner|legalOwner}}</div>
+          <div *ngIf="song.legalOwnerId">Rechteinhaber ID: {{song.legalOwnerId}}</div>
+          <div *ngIf="song.legalLicenseId">Lizenznummer: {{song.legalLicenseId}}</div>
+          <div *ngIf="song.artist">Künstler: {{song.artist}}</div>
+          <div *ngIf="song.label">Verlag: {{song.label}}</div>
+          <div *ngIf="song.origin">Quelle: {{song.origin}}</div>
+        </div>
+      </div>
+
+      <div class="text">{{song.text}}</div>
+      <div class="text">{{song.comment}}</div>
+      <div>
+        <h3>Anhänge</h3>
+        <div *ngFor="let file of (files$|async)">{{file.name}}</div>
       </div>
     </div>
 
-    <div class="text">{{song.text}}</div>
-    <div class="text">{{song.comment}}</div>
-    <div>
-      <h3>Anhänge</h3>
-      <div *ngFor="let file of (files$|async)">{{file.name}}</div>
-    </div>
-  </div>
+    <app-button-row>
+      <button color="primary" mat-flat-button routerLink="edit">Bearbeiten</button>
+      <button mat-button routerLink="../">Schließen</button>
+    </app-button-row>
 
-  <app-button-row>
-    <button color="primary" mat-flat-button routerLink="edit">Bearbeiten</button>
-  </app-button-row>
+  </app-card>
+  <app-card>
 
-</app-card>
+  </app-card>
+</div>

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

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {SongService} from '../services/song.service';
 import {map, switchMap} from 'rxjs/operators';
-import {Song} from '../models/song';
+import {Song} from '../services/song';
 import {Observable} from 'rxjs';
 import {FileDataService} from '../services/file-data.service';
 import {File} from '../services/file';
@@ -31,7 +31,7 @@ export class SongComponent implements OnInit {
 
     this.files$ = this.activatedRoute.params.pipe(
       map(param => param.songId),
-      switchMap(songId => this.fileService.get$(songId))
+      switchMap(songId => this.fileService.read$(songId))
     );
 
   }