list shows for public and own filter

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

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

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

@@ -1,7 +1,16 @@
 <div>
   <app-list-header></app-list-header>
 
-  <app-card *ngIf="shows$ | async as shows" [@fade] [padding]="false">
+  <ng-container *ngIf="shows$ | async as shows">
-    <app-list-item *ngFor="let show of shows" [routerLink]="show.id" [show]="show"></app-list-item>
+    <app-card *ngIf="getPrivateSongs(shows).length>0" [@fade] [padding]="false" heading="meine Veranstaltungen">
-  </app-card>
+      <app-list-item *ngFor="let show of getPrivateSongs(shows)" [routerLink]="show.id" [show]="show"></app-list-item>
+    </app-card>
+  </ng-container>
+
+  <ng-container *ngIf="shows$ | async as shows">
+    <app-card *ngIf="getPublicShows(shows).length>0" [@fade] [padding]="false"
+              heading="veröffentlichte Veranstaltungen">
+      <app-list-item *ngFor="let show of getPublicShows(shows)" [routerLink]="show.id" [show]="show"></app-list-item>
+    </app-card>
+  </ng-container>
 </div>

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

@@ -17,4 +17,12 @@ export class ListComponent {
     this.shows$ = showService.list$();
   }
 
+  public getPublicShows(songs: Show[]): Show[] {
+    return songs.filter(_ => _.published)
+  }
+
+  public getPrivateSongs(songs: Show[]): Show[] {
+    return songs.filter(_ => !_.published)
+  }
+
 }

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

@@ -22,11 +22,14 @@
                   [songs]="songs"></app-add-song>
 
     <app-button-row>
-      <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>
+      <ng-container *appOwner="show.owner">
-      <app-button (click)="onPublish(true)" *ngIf="!show.published" [icon]="faPublish">Veröffentlichen</app-button>
+        <app-button (click)="onArchive(true)" *ngIf="!show.archived" [icon]="faBox">Archivieren</app-button>
-      <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">Veröffentlichung zurückziehen
+        <app-button (click)="onArchive(false)" *ngIf="show.archived" [icon]="faBoxOpen">Wiederherstellen</app-button>
-      </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>
 

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

@@ -25,6 +25,7 @@ import {SongTextModule} from '../../widget-modules/components/song-text/song-tex
 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';
 
 
 @NgModule({
@@ -51,6 +52,7 @@ import {ButtonModule} from '../../widget-modules/components/button/button.module
     NgxMatSelectSearchModule,
     AddSongModule,
     ButtonModule,
+    OwnerModule,
   ]
 })
 export class ShowsModule {

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

@@ -0,0 +1,42 @@
+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;
+
+  constructor(
+    private element: ElementRef,
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    private userService: UserService
+  ) {
+
+  }
+
+  public ngOnInit(): void {
+    this.userService.user$.subscribe(user => {
+      this.currentUser = user;
+      this.updateView();
+    });
+    this.userService.loggedIn$().subscribe(_ => {
+      this.loggedIn = !!_;
+      this.updateView();
+    });
+    this.updateView();
+  }
+
+  private updateView() {
+    this.viewContainer.clear();
+    if (this.loggedIn && this.currentUser.id === this.appOwner) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    }
+  }
+
+
+}

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

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {OwnerDirective} from './owner.directive';
+import {CommonModule} from '@angular/common';
+
+@NgModule({
+  declarations: [OwnerDirective],
+  exports: [OwnerDirective],
+  imports: [
+    CommonModule
+  ]
+})
+export class OwnerModule {
+}

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

@@ -29,6 +29,12 @@
   margin-bottom: 20px;
   margin-right: 20px;
   opacity: 0.7;
+  padding-left: 20px;
+  padding-top: 20px;
+}
+
+.padding .heading {
+  padding: 0;
 }
 
 .btn-close {