show component

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

@@ -1,12 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/shows/list/list-item/list-item.component.html

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

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

@@ -3,7 +3,7 @@
 .list-item {
   padding: 5px 20px;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 2fr;
   min-height: 34px;
 
   & > div {

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

@@ -1,29 +1,25 @@
 <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">
+  <app-card>
     <h1>Neue Veranstaltung</h1>
 
     <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>
-      <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>

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

@@ -13,9 +13,9 @@ import {Router} from '@angular/router';
 })
 export class NewComponent implements OnInit {
   public shows$: Observable<Show[]>;
-  public showType = this.showService.SHOW_TYPE;
+  public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
+  public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
   public form: FormGroup;
-  public publicChosen = false;
 
   constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
     this.shows$ = showDataService.list$();
@@ -23,22 +23,16 @@ export class NewComponent implements OnInit {
 
   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);
+    const id = await this.showService.new$(this.form.value);
+    await this.router.navigateByUrl('/shows/' + id);
   }
 }

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

@@ -7,11 +7,13 @@ import {Show} from './show';
   providedIn: 'root'
 })
 export class ShowDataService {
+  private collection = 'shows';
+
   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
+  public list$ = (): Observable<Show[]> => this.dbService.col$(this.collection);
+  public read$ = (showId: string): Observable<Show | undefined> => this.dbService.doc$(`${this.collection}/${showId}`);
+  public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}`).update(data);
+  public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id
 }

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

@@ -0,0 +1,37 @@
+import {TestBed} from '@angular/core/testing';
+
+import {ShowService} from './show.service';
+import {ShowDataService} from './show-data.service';
+
+describe('ShowService', () => {
+  const mockShowDataService = {add: Promise.resolve(null)};
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [
+      {provide: ShowDataService, useValue: mockShowDataService}
+    ]
+  }));
+
+  ShowService.SHOW_TYPE_PUBLIC.forEach(type => {
+    it('should calc public flag for ' + type, async () => {
+      const service: ShowService = TestBed.get(ShowService);
+      const addSpy = spyOn(TestBed.inject(ShowDataService), 'add').and.returnValue(Promise.resolve('id'));
+
+      const id = await service.new$({showType: type});
+
+      expect(id).toBe('id');
+      expect(addSpy).toHaveBeenCalledWith({showType: type, public: true});
+    });
+  });
+
+  ShowService.SHOW_TYPE_PRIVATE.forEach(type => {
+    it('should calc private flag for ' + type, async () => {
+      const service: ShowService = TestBed.get(ShowService);
+      const addSpy = spyOn(TestBed.inject(ShowDataService), 'add').and.returnValue(Promise.resolve('id'));
+
+      const id = await service.new$({showType: type});
+
+      expect(id).toBe('id');
+      expect(addSpy).toHaveBeenCalledWith({showType: type, public: false});
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+import {Injectable} from '@angular/core';
+import {ShowDataService} from './show-data.service';
+import {Show} from './show';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShowService {
+
+  public static SHOW_TYPE = ['service-worship', 'service-praise', 'home-group-big', 'home-group', 'prayer-group', 'teens-group', 'kids-group', 'misc-public', 'misc-private'];
+  public static SHOW_TYPE_PUBLIC = ['service-worship', 'service-praise', 'home-group-big', 'teens-group', 'kids-group', 'misc-public'];
+  public static SHOW_TYPE_PRIVATE = ['home-group', 'prayer-group', 'misc-private',];
+
+  constructor(private showDataService: ShowDataService) {
+  }
+
+  public read$ = (showId: string): Observable<Show> => this.showDataService.read$(showId);
+
+  public async new$(data: Partial<Show>): Promise<string> {
+    const calculatedData: Partial<Show> = {
+      ...data,
+      public: ShowService.SHOW_TYPE_PUBLIC.indexOf(data.showType) !== -1,
+    };
+    return await this.showDataService.add(calculatedData);
+  }
+}

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

@@ -0,0 +1,7 @@
+<div *ngIf="(show$|async) as show">
+  <app-card
+    heading="{{show.showType|showType}}, {{show.date.toDate()|date:'dd.MM.yyyy'}}">
+
+
+  </app-card>
+</div>

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

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

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

@@ -0,0 +1,29 @@
+import {Component, OnInit} from '@angular/core';
+import {map, switchMap} from 'rxjs/operators';
+import {ActivatedRoute} from '@angular/router';
+import {ShowService} from '../services/show.service';
+import {Observable} from 'rxjs';
+import {Show} from '../services/show';
+
+@Component({
+  selector: 'app-show',
+  templateUrl: './show.component.html',
+  styleUrls: ['./show.component.less']
+})
+export class ShowComponent implements OnInit {
+  public show$: Observable<Show>;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private showService: ShowService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.show$ = this.activatedRoute.params.pipe(
+      map(param => param.showId),
+      switchMap(showId => this.showService.read$(showId))
+    );
+  }
+
+}

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

@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {NewComponent} from './new/new.component';
 import {ListComponent} from './list/list.component';
+import {ShowComponent} from './show/show.component';
 
 
 const routes: Routes = [
@@ -13,6 +14,10 @@ const routes: Routes = [
   {
     path: 'new',
     component: NewComponent
+  },
+  {
+    path: ':showId',
+    component: ShowComponent
   }
 ];
 
@@ -20,5 +25,5 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class ShowRoutingModule {
+export class ShowsRoutingModule {
 }

src/app/modules/shows/shows.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
-import {ShowRoutingModule} from './show-routing.module';
+import {ShowsRoutingModule} from './shows-routing.module';
 import {NewComponent} from './new/new.component';
 import {CardModule} from '../../widget-modules/components/card/card.module';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -9,7 +9,7 @@ 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 {ListHeaderModule} from '../../widget-modules/components/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';
@@ -17,13 +17,14 @@ 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';
+import {ShowComponent} from './show/show.component';
 
 
 @NgModule({
-  declarations: [NewComponent, ListComponent, ListItemComponent],
+  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent],
   imports: [
     CommonModule,
-    ShowRoutingModule,
+    ShowsRoutingModule,
     CardModule,
     MatFormFieldModule,
     ReactiveFormsModule,
@@ -38,5 +39,5 @@ import {MatNativeDateModule} from '@angular/material/core';
     ShowTypeTranslaterModule
   ]
 })
-export class ShowModule {
+export class ShowsModule {
 }

src/app/modules/songs/services/text-rendering.service.ts

@@ -32,14 +32,5 @@ export class TextRenderingService {
   constructor() {
   }
 
-  public render(text: string): Section[] {
-    const lines = text.match(/[^\r\n]+/g);
-
-
-  }
-
-  private findSection(line: string) {
-
-  }
 
 }

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

@@ -1,4 +1,4 @@
-import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {SongComponent} from './song.component';
 import {of} from 'rxjs';
@@ -32,8 +32,4 @@ describe('SongComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should provide songId', fakeAsync(() => {
-    tick();
-    expect(component.songId).toBe('4711');
-  }));
 });