refine list

WEB/src/app/components/songs/song/song.component.html

@@ -0,0 +1,19 @@
+<div class="song-detail-container">
+  <mat-card class="mat-elevation-z8" [@blend] *ngIf="selectedSongId !== 0">
+    <mat-card-header>
+      <div mat-card-avatar>
+        <button mat-icon-button (click)="onBack()">
+          <fa-icon [icon]="faArrow"></fa-icon>
+        </button>
+      </div>
+      <mat-card-title>{{ song.Name }}</mat-card-title>
+      <mat-card-subtitle>{{ song.Key }} - {{ song.Tempo }}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+      <p *ngFor="let line of text">{{ line }}</p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-button (click)="onClickDownload()">Herunterladen</button>
+    </mat-card-actions>
+  </mat-card>
+</div>

WEB/src/app/components/songs/song/song.component.less

@@ -0,0 +1,22 @@
+.mat-card {
+  width: 500px;
+  border-radius: 8px;
+  background: #fffe;
+  margin: 20px;
+  box-sizing: border-box;
+}
+
+.mat-card-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 420px;
+}
+
+.mat-card-content {
+  white-space: pre-wrap;
+}
+
+.song-detail-container {
+  margin-left: 30vw;
+}

WEB/src/app/components/songs/song/song.component.ts

@@ -0,0 +1,64 @@
+import { SongsService } from 'src/app/data/songs.service';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
+import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
+import { Song } from 'src/app/models/song.model';
+import { DownloadService } from 'src/app/data/download.service';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+@Component({
+  selector: 'app-song',
+  templateUrl: './song.component.html',
+  styleUrls: ['./song.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('blend', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('700ms', style({ opacity: 0 })),
+        animate('300ms', style({ opacity: 1 }))
+      ]),
+      transition(':leave', [
+        style({ opacity: 1 }),
+        animate('300ms', style({ opacity: 0 }))
+      ])
+    ])
+  ]
+})
+export class SongComponent {
+  public song: Song;
+  public faArrow = faLongArrowAltLeft;
+  public selectedSongId = 0;
+
+  constructor(
+    private songService: SongsService,
+    private downloadService: DownloadService,
+    change: ChangeDetectorRef
+  ) {
+    songService.selectedSong.subscribe(_ => {
+      if (_) {
+        this.selectedSongId = _.ID;
+        this.song = _;
+      } else {
+        this.selectedSongId = 0;
+        this.song = null;
+      }
+      change.markForCheck();
+    });
+  }
+  public onBack(): void {
+    this.songService.resetSelectedSong();
+  }
+
+  public onClickDownload(): void {
+    const id = this.song.ID;
+    this.downloadService.get(id, false);
+  }
+
+  public get text(): string[] {
+    return this.song.Text.split(/\r?\n/).filter(_ => _ !== ' ');
+  }
+}

WEB/src/app/components/songs/songs.component.html

@@ -1 +1,2 @@
-<app-table [songs]="songs"></app-table>
+<app-table></app-table>
+<app-song></app-song>

WEB/src/app/components/songs/songs.component.spec.ts

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

WEB/src/app/components/songs/songs.component.ts

@@ -1,22 +1,13 @@
-import { Song } from './../../models/song.model';
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component } from '@angular/core';
+import { SongsService } from 'src/app/data/songs.service';
 
 @Component({
   selector: 'app-songs',
   templateUrl: './songs.component.html',
   styleUrls: ['./songs.component.less']
 })
-export class SongsComponent implements OnInit {
-  public songs: Song[];
-
-  constructor(private route: ActivatedRoute) {}
-
-  ngOnInit() {
-    this.route.data.subscribe((data: { songs: Song[] }) => {
-      this.songs = data.songs;
-    });
+export class SongsComponent {
+  constructor(songService: SongsService) {
+    songService.loadSongList();
   }
-
-
 }

WEB/src/app/components/songs/table/table.component.html

@@ -1,9 +1,11 @@
-<div class="page-container mat-elevation-z8">
+<div
+  class="page-container mat-elevation-z8"
+  [class.pinned]="selectedSongId !== 0"
+>
   <div class="table-container">
     <table
-      *ngIf="songs"
       mat-table
-      [dataSource]="songs"
+      [dataSource]="songsService.songs | async"
       class="mat-elevation-z8"
     >
       <ng-container matColumnDef="Number">
@@ -18,25 +20,37 @@
 
       <ng-container matColumnDef="Key">
         <th mat-header-cell *matHeaderCellDef></th>
-        <td mat-cell *matCellDef="let element">{{ element.Key }}</td>
+        <td mat-cell *matCellDef="let element">
+          <mat-chip-list *ngIf="element.Key">
+            <mat-chip>{{ element.Key }}</mat-chip>
+          </mat-chip-list>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="SongType">
         <th mat-header-cell *matHeaderCellDef></th>
-        <td mat-cell *matCellDef="let element">{{ element.SongType }}</td>
+        <td mat-cell *matCellDef="let element">
+          <mat-chip-list *ngIf="element.SongType && element.SongType!=='None'">
+            <mat-chip [style.background-color]="renderSongType(element.SongType).color">{{ renderSongType(element.SongType).name }}</mat-chip>
+          </mat-chip-list>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Tempo">
         <th mat-header-cell *matHeaderCellDef></th>
-        <td mat-cell *matCellDef="let element">{{ element.Tempo }}</td>
+        <td mat-cell *matCellDef="let element">
+          <mat-chip-list *ngIf="element.Tempo">
+            <mat-chip>{{ element.Tempo }}</mat-chip>
+          </mat-chip-list>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
       <tr
+        [class.selected]="selectedSongId === row.ID"
         mat-row
         *matRowDef="let row; columns: columns"
-        [routerLink]="['/songs', row.ID]"
-        routerLinkActive="router-link-active"
+        (click)="onClick(row.ID)"
       ></tr>
     </table>
   </div>

WEB/src/app/components/songs/table/table.component.less

@@ -1,15 +1,13 @@
 table {
   width: 100%;
   border-radius: 8px;
+  //background: #fffe;
 
 }
-.page-container {
-  height: 400px;
-  overflow: hidden;
-  border-radius: 8px;
-}
+
 .table-container {
   height: 100%;
   overflow: auto;
 }
 
+

WEB/src/app/components/songs/table/table.component.spec.ts

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

WEB/src/app/components/songs/table/table.component.ts

@@ -1,26 +1,45 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Song } from 'src/app/models/song.model';
+import { SongsService } from './../../../data/songs.service';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
 
 @Component({
   selector: 'app-table',
   templateUrl: './table.component.html',
-  styleUrls: ['./table.component.less']
+  styleUrls: ['./table.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class TableComponent implements OnInit {
-  @Input() public songs: Song[];
-  public columns = [
-    'Number',
-    'Name',
-    'Key',
-    'SongType',
-    'Tempo',
-  ];
-
-  constructor() { }
-
-  ngOnInit() {
-    console.log(this.songs);
+export class TableComponent {
+  public selectedSongId = 0;
+  public columnsFull = ['Number', 'Name', 'Key', 'SongType', 'Tempo'];
+  public columnsPinned = ['Number', 'Name'];
+  public get columns(): string[] {
+    return this.selectedSongId === 0 ? this.columnsFull : this.columnsPinned;
   }
 
+  constructor(
+    public songsService: SongsService,
+    private change: ChangeDetectorRef
+  ) {
+    songsService.selectedSong.subscribe(_ => {
+        this.selectedSongId = _ ? _.ID : 0;
+        this.change.markForCheck();
+      }
+    );
+  }
 
+  public renderSongType(songType: string) {
+    switch (songType) {
+      case 'Praise': return {name: 'Lobpreis', color: '#99FFB8'};
+      case 'Worship': return {name: 'Anbetung', color: '#C999FF'};
+      default: return null;
+    }
+  }
+
+  public onClick(id: number): void {
+    this.songsService.selectSong(id);
+    this.change.detectChanges();
+  }
 }