Improve load more + scrollToTop

dashboard/src/app/album.component.html

@@ -37,6 +37,10 @@
 </tbody>
 </table>
 
-<button type="button" *ngIf="more" class="btn btn-default" aria-label="More" (click)="loadMore()">
+<button type="button" *ngIf="more" class="btn btn-default" aria-label="More" (click)="loadSongs()">
     <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
+</button>
+
+<button type="button" *ngIf="songs.length > 99" class="btn btn-default" aria-label="Top" (click)="scrollTop()">
+    <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> Top
 </button>

dashboard/src/app/album.component.ts

@@ -28,7 +28,7 @@ export class AlbumComponent implements OnInit {
     this.route.params
       .subscribe((params: Params) => this.albumName = params['name']);
 
-    this.loadMore()
+    this.loadSongs()
 
     this.elsService.getAlbum(this.albumName).subscribe(data => {
       this.album = data;
@@ -37,12 +37,24 @@ export class AlbumComponent implements OnInit {
 
   }
 
-  loadMore(): void {
+  loadSongs(): void {
     this.elsService.getAlbumSongs(this.albumName, this.songs.length).subscribe(
       data => {
         this.more = data.length == ElsService.DEFAULT_SIZE
-        this.songs = this.songs.concat(data); // TODO NOt contact, add!
+        // Init dashboard for first load, then add elements
+        // instead use concat => concat will sort table at each load, very consuming! and not user friendly
+        if (this.songs.length == 0) {
+          this.songs = data;
+        } else {
+          data.forEach(song => {
+            this.songs.push(song);
+          });
+        }
       }
     );
   }
+
+  scrollTop(): void {
+    window.scrollTo(0,0);
+  }
 }

dashboard/src/app/els.service.ts

@@ -13,7 +13,7 @@ export class ElsService {
   private elsUrl = 'http://localhost:9200/itunessongs/';
   private headers = new Headers({'Content-Type': 'application/json'});
 
-  public static readonly DEFAULT_SIZE:number = 5;
+  public static readonly DEFAULT_SIZE:number = 50;
 
   constructor(private http: Http) { }