Fix sortable problem

dashboard/src/app/album/album.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location } from '@angular/common';
 
 import { ElsService } from './../els.service';
 import { Song } from './../object/song';
 import { Album } from './../object/album';
+import { SongTableComponent } from '../song-table/song-table.component';
 
 @Component({
   selector: 'app-album',
@@ -13,9 +14,13 @@ import { Album } from './../object/album';
 })
 
 export class AlbumComponent implements OnInit {
+  @ViewChild(SongTableComponent) private songtable: SongTableComponent;
+
   albumName = '';
   songs: Array<Song> = [];
   album: Album = new Album(); // If album not found, will be replaced by 'undefined'
+
+  // Prevent useless data load + activate button in interface var
   moreDataAvailable = true;
 
   constructor(
@@ -47,6 +52,7 @@ export class AlbumComponent implements OnInit {
         if (this.songs.length === 0) {
           this.songs = data;
         } else {
+          this.songtable.setSortable(true);
           data.forEach(song => {
             this.songs.push(song);
           });

dashboard/src/app/artist/artist.component.html

@@ -85,7 +85,7 @@
       </div>
   </div>
 
-  <app-song-table [songs]=songs [sortable]=sortable (atBottom)=loadSongs()></app-song-table>
+  <app-song-table [songs]=songs (atBottom)=loadSongs()></app-song-table>
 
   <button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
       <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...

dashboard/src/app/artist/artist.component.ts

@@ -1,12 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location } from '@angular/common';
 
 import { ElsService } from './../els.service';
 import { Song } from './../object/song';
 import { Artist } from './../object/artist';
-
+import { SongTableComponent } from '../song-table/song-table.component';
-import { SortByPipe } from './../sort-by.pipe';
 
 @Component({
   selector: 'app-artist',
@@ -15,13 +14,15 @@ import { SortByPipe } from './../sort-by.pipe';
 })
 
 export class ArtistComponent implements OnInit {
+  // Interacte with table to set sortable
+  @ViewChild(SongTableComponent) songtable: SongTableComponent;
+
+  // Prevent useless data load + activate button in interface var
+  moreDataAvailable = true;
+
   artistName = '';
   songs: Array<Song> = [];
   artist: Artist = new Artist();
-  // To activate button in interface var
-  moreDataAvailable = true;
-  sortable = false;
-
   lockLoadData = false;
 
   constructor(
@@ -58,7 +59,7 @@ export class ArtistComponent implements OnInit {
         if (this.songs.length === 0) {
           this.songs = data;
         } else {
-          this.sortable = true;
+          this.songtable.setSortable(true);
           data.forEach(song => {
             this.songs.push(song);
           });

dashboard/src/app/song-table/song-table.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { Song } from './../object/song';
 import { SortByPipe } from './../sort-by.pipe';
@@ -8,22 +8,16 @@ import { SortByPipe } from './../sort-by.pipe';
   templateUrl: './song-table.component.html',
   styleUrls: ['./song-table.component.css']
 })
-export class SongTableComponent implements OnChanges {
+export class SongTableComponent {
   @Input() songs: Array<Song> = [];
-  @Input() sortable: boolean;
+  @Output() private atBottom = new EventEmitter();
-  @Output() atBottom = new EventEmitter();
 
   // To activate button in interface var
-  moreDataAvailable = false;
   bottomReached = false;
-  nbSong = 0;
+  private sortable: boolean;
 
   constructor() { }
 
-  ngOnChanges(changes: SimpleChanges) {
-   console.log(changes);
-  }
-
   /**
    * Handle scroll:
    * - load data if at bottom of screen (if needed)
@@ -31,7 +25,7 @@ export class SongTableComponent implements OnChanges {
    *
    * @param event scroll event
    */
-  onScroll(event: any) {
+  private onScroll(event: any) {
     if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       this.atBottom.emit();
     }
@@ -58,4 +52,8 @@ export class SongTableComponent implements OnChanges {
     this.songs = new SortByPipe().transform(this.songs, 'Year', 'Album', 'Track Number', 'Play Count');
     this.sortable = false;
   }
+
+  setSortable(sortable: boolean) {
+    this.sortable = sortable;
+  }
 }