show component

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

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

src/app/modules/shows/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 2fr;
+  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/shows/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/shows/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/shows/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/shows/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/shows/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/shows/new/new.component.html

@@ -0,0 +1,30 @@
+<div>
+  <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>
+    </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/shows/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/shows/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/shows/new/new.component.ts

@@ -0,0 +1,38 @@
+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 showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
+  public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
+  public form: FormGroup;
+
+  constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
+    this.shows$ = showDataService.list$();
+  }
+
+  public ngOnInit(): void {
+    this.form = new FormGroup({
+      date: new FormControl(null, Validators.required),
+      showType: new FormControl(null, Validators.required),
+    })
+  }
+
+  public async onSave() {
+    this.form.markAllAsTouched();
+    if (!this.form.valid) return;
+
+    const id = await this.showService.new$(this.form.value);
+    await this.router.navigateByUrl('/shows/' + id);
+  }
+}

src/app/modules/shows/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/shows/services/show-data.service.ts

@@ -0,0 +1,19 @@
+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 {
+  private collection = 'shows';
+
+  constructor(private dbService: DbService) {
+  }
+
+  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/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/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

@@ -0,0 +1,29 @@
+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 = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: ListComponent
+  },
+  {
+    path: 'new',
+    component: NewComponent
+  },
+  {
+    path: ':showId',
+    component: ShowComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ShowsRoutingModule {
+}

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

@@ -0,0 +1,43 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+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';
+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/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';
+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, ShowComponent],
+  imports: [
+    CommonModule,
+    ShowsRoutingModule,
+    CardModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    ListHeaderModule,
+    MatCheckboxModule,
+    ButtonRowModule,
+    MatButtonModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatSelectModule,
+    ShowTypeTranslaterModule
+  ]
+})
+export class ShowsModule {
+}