show user in show

restrict show actions

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

@@ -37,7 +37,6 @@ export class DocxService {
       ...this.renderTitle(title),
       ...this.renderSongs(songs),
     ];
-    console.log(paragraphs);
 
     const document = this.prepareNewDocument(type, user.name);
     document.addSection({

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

@@ -2,8 +2,12 @@
   <app-card
     closeLink="../"
     heading="{{show.showType|showType}}, {{show.date.toDate()|date:'dd.MM.yyyy'}} - {{getStatus(show)}}">
-    <i *ngIf="show.public">öffentliche Veranstaltung</i>
-    <i *ngIf="!show.public">geschlossene Veranstaltung</i>
+    <i *ngIf="show.public">öffentliche Veranstaltung von
+      <app-user-name [userId]="show.owner"></app-user-name>
+    </i>
+    <i *ngIf="!show.public">geschlossene Veranstaltung von
+      <app-user-name [userId]="show.owner"></app-user-name>
+    </i>
     <p *ngIf="!show.published">
       <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
     </p>
@@ -22,17 +26,21 @@
                   [songs]="songs"></app-add-song>
 
     <app-button-row>
-
       <ng-container *appOwner="show.owner">
-        <app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">Archivieren</app-button>
-        <app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">Wiederherstellen</app-button>
-        <app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">Veröffentlichen</app-button>
-        <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">Veröffentlichung zurückziehen
+        <app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">
+          Archivieren
+        </app-button>
+        <app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">
+          Wiederherstellen
+        </app-button>
+        <app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">
+          Veröffentlichen
+        </app-button>
+        <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">
+          Veröffentlichung zurückziehen
         </app-button>
       </ng-container>
-
       <app-button (click)="onDownload()" [icon]="faDownload">Herunterladen</app-button>
-
     </app-button-row>
   </app-card>
 </div>

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

@@ -26,6 +26,7 @@ import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
 import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
 import {ButtonModule} from '../../widget-modules/components/button/button.module';
 import {OwnerModule} from '../../services/user/owner.module';
+import {UserNameModule} from '../../services/user/user-name/user-name.module';
 
 
 @NgModule({
@@ -53,6 +54,7 @@ import {OwnerModule} from '../../services/user/owner.module';
     AddSongModule,
     ButtonModule,
     OwnerModule,
+    UserNameModule,
   ]
 })
 export class ShowsModule {

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

@@ -62,9 +62,8 @@ Cool bridge without any chords
   });
 
   it('should parse chord lines', () => {
-    const service: TextRenderingService = TestBed.get(TextRenderingService);
+    const service: TextRenderingService = TestBed.inject(TextRenderingService);
     const sections = service.parse(testText);
-    console.log(sections);
     expect(sections[0].lines[0].type).toBe(LineType.chord);
     expect(sections[0].lines[0].text).toBe('C D E F G A H');
     expect(sections[0].lines[2].type).toBe(LineType.chord);

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

@@ -25,7 +25,6 @@ export class NewComponent implements OnInit {
 
   public async onCreate(): Promise<void> {
     this.form.updateValueAndValidity();
-    console.log(this.form);
     if (this.form.valid) {
       try {
         await this.userService.createNewUser(this.form.value.email, this.form.value.name, this.form.value.password);

src/app/services/user/owner.directive.ts

@@ -1,14 +1,18 @@
 import {Directive, ElementRef, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
-import {User} from './user';
 import {UserService} from './user.service';
 
 @Directive({
   selector: '[appOwner]'
 })
 export class OwnerDirective implements OnInit {
-  @Input() appOwner: string;
-  private currentUser: User;
-  private loggedIn: boolean;
+  private currentUserId: string;
+
+  private _appOwner: string;
+
+  @Input() set appOwner(value: string) {
+    this._appOwner = value;
+    this.updateView();
+  }
 
   constructor(
     private element: ElementRef,
@@ -20,12 +24,8 @@ export class OwnerDirective implements OnInit {
   }
 
   public ngOnInit(): void {
-    this.userService.user$.subscribe(user => {
-      this.currentUser = user;
-      this.updateView();
-    });
-    this.userService.loggedIn$().subscribe(_ => {
-      this.loggedIn = !!_;
+    this.userService.userId$.subscribe(user => {
+      this.currentUserId = user;
       this.updateView();
     });
     this.updateView();
@@ -33,10 +33,9 @@ export class OwnerDirective implements OnInit {
 
   private updateView() {
     this.viewContainer.clear();
-    if (this.loggedIn && this.currentUser.id === this.appOwner) {
+    if (this.currentUserId === this._appOwner) {
       this.viewContainer.createEmbeddedView(this.templateRef);
     }
   }
 
-
 }

src/app/services/user/user-name/user-name.component.html

@@ -0,0 +1 @@
+{{name$|async}}

src/app/services/user/user-name/user-name.component.spec.ts

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

src/app/services/user/user-name/user-name.component.ts

@@ -0,0 +1,23 @@
+import {Component, Input} from '@angular/core';
+import {UserService} from '../user.service';
+import {map} from 'rxjs/operators';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'app-user-name',
+  templateUrl: './user-name.component.html',
+  styleUrls: ['./user-name.component.less']
+})
+export class UserNameComponent {
+  public name$: Observable<string>;
+
+  constructor(
+    private userService: UserService
+  ) {
+  }
+
+  @Input() set userId(id: string) {
+    this.name$ = this.userService.getUserbyId$(id).pipe(map(_ => _.name));
+  }
+
+}

src/app/services/user/user-name/user-name.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {UserNameComponent} from './user-name.component';
+
+@NgModule({
+  declarations: [UserNameComponent],
+  exports: [UserNameComponent],
+  imports: [CommonModule]
+})
+export class UserNameModule {
+}

src/app/services/user/user.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {AngularFireAuth} from '@angular/fire/auth';
 import {BehaviorSubject, Observable} from 'rxjs';
-import {filter, first, switchMap} from 'rxjs/operators';
+import {filter, first, switchMap, tap} from 'rxjs/operators';
 import {User} from './user';
 import {DbService} from '../db.service';
 import {environment} from '../../../environments/environment';
@@ -14,18 +14,15 @@ export class UserService {
   constructor(private afAuth: AngularFireAuth, private db: DbService, private router: Router) {
     this.afAuth.authState.pipe(
       filter(_ => !!_),
+      tap(auth => this._userId$.next(auth.uid)),
       switchMap(auth => this.readUser$(auth.uid)),
     ).subscribe(_ => this._user$.next(_));
   }
 
-  public getUserbyId(userId: string): Promise<User> {
-    return this.db.doc$<User>('users/' + userId).pipe(first()).toPromise();
-  }
+  private _userId$ = new BehaviorSubject<string>(null);
 
-  public async login(user: string, password: string): Promise<any> {
-    const aUser = await this.afAuth.auth.signInWithEmailAndPassword(user, password);
-    const dUser = await this.readUser(aUser.user.uid);
-    this._user$.next(dUser);
+  public get userId$(): Observable<string> {
+    return this._userId$.asObservable();
   }
 
   private _user$ = new BehaviorSubject<User>(null);
@@ -34,6 +31,21 @@ export class UserService {
     return this._user$.pipe(filter(_ => !!_));
   }
 
+  public getUserbyId(userId: string): Promise<User> {
+    return this.getUserbyId$('users/' + userId).pipe(first()).toPromise();
+  }
+
+  public getUserbyId$(userId: string): Observable<User> {
+    return this.db.doc$<User>('users/' + userId);
+  }
+
+  public async login(user: string, password: string): Promise<any> {
+    const aUser = await this.afAuth.auth.signInWithEmailAndPassword(user, password);
+    const dUser = await this.readUser(aUser.user.uid);
+    this._user$.next(dUser);
+    this._userId$.next(aUser.user.uid);
+  }
+
   public loggedIn$ = () => this.afAuth.authState;
 
   public list$ = (): Observable<User[]> => this.db.col$('users');
@@ -41,6 +53,7 @@ export class UserService {
   public async logout(): Promise<any> {
     await this.afAuth.auth.signOut();
     this._user$.next(null);
+    this._userId$.next(null);
   }
 
   public async update$(uid: string, data: Partial<User>): Promise<void> {