TOSQASH Extract Table

dashboard/src/app/genre/genre.component.html

@@ -1,28 +1,5 @@
 <div class="container">
   <h1>{{genreName}}</h1>
 
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th></th>
-        <th>Name</th>
-        <th>Artist</th>
-        <th>Album</th>
-        <th>Album Artist</th>
-        <th>Play Count</th>
-        <th>Genre</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let song of songs | sortBy : 'Track Number'">
-        <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
-        <td>{{song.Name}}</td>
-        <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
-        <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
-        <td>{{song['Album Artist']}}</td>
-        <td>{{song['Play Count']}}</td>
-        <td>{{song.Genre}}</td>
-      </tr>
-    </tbody>
-  </table>
+  <app-song-table [songs]=songs (atBottom)=loadSongs()></app-song-table>
 </div>

dashboard/src/app/genre/genre.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 
 import { ElsService } from '../els.service';
+import { SongTableComponent } from '../song-table/song-table.component';
 
 import { Song } from '../object/song';
 
@@ -11,6 +12,7 @@ import { Song } from '../object/song';
   styleUrls: ['./genre.component.css']
 })
 export class GenreComponent implements OnInit {
+  @ViewChild(SongTableComponent) songtable: SongTableComponent;
   genreName = '';
   songs: Array<Song> = [];
 
@@ -37,6 +39,7 @@ export class GenreComponent implements OnInit {
           this.songs = data;
         } else {
           data.forEach(song => {
+            this.songtable.setSortable(true);
             this.songs.push(song);
           });
         }