(front) Service refactoring for sorting operations

- Create an ElsArtistService to use common query
- Move services in a subfolder

Use a function to add sort filter

dashboard/src/app/album/album.component.html

@@ -1,7 +1,7 @@
 <div class="container">
   <h1>{{albumName}}</h1>
 
-  <div *ngIf="toSort" class="alert alert-danger">
+  <div *ngIf="sortFilter" class="alert alert-danger">
     To sort filter applyed. Songs are filter on location. <br/>
     Album folder: {{album['Location']}}
   </div>

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 
-import { ElsService } from './../els.service';
+import { ElsService } from '../els-service/els.service';
 import { Song } from './../model/song';
 import { Album } from './../model/album';
 import { SongTableComponent } from '../song-table/song-table.component';
@@ -18,7 +18,7 @@ export class AlbumComponent implements OnInit {
   albumName = '';
   songs: Array<Song> = [];
   album: Album = new Album(); // If album not found, will be replaced by 'undefined'
-  toSort: boolean = false; // Show only song to sort
+  sortFilter: boolean = false; // Show only song to sort
 
   // Prevent useless data load + activate button in interface var
   moreDataAvailable = true;
@@ -31,7 +31,7 @@ export class AlbumComponent implements OnInit {
 
   ngOnInit(): void {
     this.route.params.subscribe((params: Params) => this.albumName = params['name']);
-    this.route.queryParams.subscribe(params => { this.toSort = params.tosort ?? false; });
+    this.route.queryParams.subscribe(params => { this.sortFilter = params.tosort ?? false; });
 
     this.loadSongs();
 
@@ -49,7 +49,7 @@ export class AlbumComponent implements OnInit {
     }
 
     this.lockLoadData = true;
-    this.elsService.getAlbumSongs(this.albumName, this.songs.length, this.toSort).subscribe(
+    this.elsService.getAlbumSongs(this.albumName, this.songs.length, this.sortFilter).subscribe(
       data => {
         this.moreDataAvailable = data.length === ElsService.DEFAULT_SIZE;
 

dashboard/src/app/albums/albums.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ElsAlbumService } from '../els-album.service';
+import { ElsAlbumService } from '../els-service/els-album.service';
 
 import { Album } from '../model/album';
 

dashboard/src/app/app.module.ts

@@ -11,8 +11,8 @@ import { GenreComponent } from './genre/genre.component';
 import { SongTableComponent } from './song-table/song-table.component';
 import { TopPlayedComponent } from './top-played/top-played.component';
 
-import { ElsService } from './els.service';
-import { ElsAlbumService } from './els-album.service';
+import { ElsService } from './els-service/els.service';
+import { ElsAlbumService } from './els-service/els-album.service';
 
 import { AppRoutingModule } from './app-routing.module';
 
@@ -25,6 +25,7 @@ import { AlbumsComponent } from './albums/albums.component';
 import { ToSortComponent } from './to-sort/to-sort.component';
 
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { ElsArtistService } from './els-service/els-artist.service';
 
 @NgModule({
   imports: [
@@ -52,7 +53,8 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
   ],
   providers: [
     ElsService,
-    ElsAlbumService
+    ElsAlbumService,
+    ElsArtistService
   ],
   bootstrap: [ AppComponent ]
 })

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

@@ -1,11 +1,11 @@
 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 './../model/song';
 import { Artist } from './../model/artist';
 import { SongTableComponent } from '../song-table/song-table.component';
+import { ElsArtistService } from '../els-service/els-artist.service';
+import { ElsService } from '../els-service/els.service';
 
 @Component({
   selector: 'app-artist',
@@ -25,19 +25,26 @@ export class ArtistComponent implements OnInit {
   artist: Artist = new Artist();
   lockLoadData = false;
   countSong: number;
+  toSortFilter: boolean = false; // Show only song to sort
 
   constructor(
-    private elsService: ElsService,
+    private elsService: ElsArtistService,
     private route: ActivatedRoute,
-    private location: Location
   ) { }
 
   ngOnInit(): void {
     this.route.params.subscribe((params: Params) => this.artistName = params['name']);
+    this.route.queryParams.subscribe(params => { this.toSortFilter = params.tosort ?? false; });
 
     this.elsService.getArtist(this.artistName).subscribe(data => this.artist = data);
 
-    this.elsService.getCountArtistSong(this.artistName).subscribe(data => this.countSong = data);
+    this.elsService.getCountArtistSong(this.artistName, this.toSortFilter).subscribe(data => {
+      this.countSong = data
+      this.artist['Track Count'] = this.countSong;
+      // TODO Async problem: some time, get updated data, some time no
+      // TODO Use only this value?
+      // TODO ==> Show each time if there are unsorted songs
+    });
 
     this.loadSongs();
   }
@@ -54,9 +61,11 @@ export class ArtistComponent implements OnInit {
     }
 
     this.lockLoadData = true;
-    this.elsService.getArtistSongs(this.artistName, this.songs.length).subscribe(
+    this.elsService.getArtistSongs(this.artistName, this.songs.length, this.toSortFilter).subscribe(
       data => {
         this.moreDataAvailable = data.length === ElsService.DEFAULT_SIZE;
+        console.log(data.length)
+        console.log(this.moreDataAvailable)
 
         // Erase song array with result for first load, then add elements one by one
         // instead use concat => concat will sort table at each load, very consuming! and not user friendly

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ElsService } from './../els.service';
+import { ElsService } from '../els-service/els.service';
 import { Song } from './../model/song';
 import { Bucket } from './../model/bucket';
 import { Suggested } from '../model/suggested';

dashboard/src/app/els-service/els-album.service.ts

@@ -1,12 +1,11 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http'
+import { HttpClient } from '@angular/common/http'
 
 import { Observable } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 
-import { Album } from './model/album';
+import { Album } from './../model/album';
 import { ElsService } from './els.service';
-import { ActivatedRoute } from '@angular/router';
 
 @Injectable()
 export class ElsAlbumService extends ElsService {
@@ -37,10 +36,8 @@ export class ElsAlbumService extends ElsService {
     'size': 500
   }
 
-  constructor(
-    protected http: HttpClient,
-    protected route: ActivatedRoute) {
-    super(http, route);
+  constructor(protected http: HttpClient) {
+    super(http);
   }
 
   getAlbums(query: any): Observable<Album[]> {

dashboard/src/app/els-service/els-artist.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ElsArtistService } from './els-artist.service';
+
+describe('ElsArtistService', () => {
+  let service: ElsArtistService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ElsArtistService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

dashboard/src/app/els-service/els-artist.service.ts

@@ -0,0 +1,121 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { catchError, map } from "rxjs/operators";
+import { Artist } from "../model/artist";
+import { Song } from "../model/song";
+import { ElsService } from "./els.service";
+
+@Injectable()
+export class ElsArtistService extends ElsService {
+  constructor(protected http: HttpClient) {
+    super(http);
+  }
+
+  private getQuerySongsWithArtistName(
+    artistName: string,
+    sortFilter: boolean = false,
+    size: number = 0,
+    from: number = 0
+  ) {
+    let query = {
+      query: {
+        bool: {
+          should: [
+            { match_phrase: { "Album Artist": artistName } },
+            { match_phrase: { Artist: artistName } },
+          ],
+          must_not: [],
+        },
+      },
+    };
+
+    if (sortFilter) {
+      console.log("ElsArtistService- TO SORT filter enabled");
+      query = this.addSortFilterToQuery(query);
+    }
+
+    if (size) {
+      query["size"] = size;
+    }
+
+    if (from) {
+      query["from"] = from;
+    }
+    return query;
+  }
+
+  public getArtist(artistName: string): Observable<Artist> {
+    return this.http
+      .post(
+        this.elsUrl + ElsService.ARTIST_INDEX_NAME + ElsService.ACTION_SEARCH,
+        JSON.stringify({
+          query: {
+            match_phrase: { Artist: artistName },
+          },
+          size: ElsService.DEFAULT_SIZE,
+        }),
+        { headers: this.headers }
+      )
+      .pipe(
+        map((res) => this.responseToOneTypedResult<Artist>(res, artistName)),
+        catchError((error) =>
+          this.handleError(error, "getArtist(" + artistName + ")")
+        )
+      );
+  }
+
+  public getArtistSongs(
+    artistName: string,
+    from: number = 0,
+    sortFilter = false
+  ): Observable<Song[]> {
+    console.info(
+      "getArtistSongs- Artist name: " + artistName + " - from: " + from
+    );
+
+    let query = this.getQuerySongsWithArtistName(
+      artistName,
+      sortFilter,
+      ElsService.DEFAULT_SIZE,
+      from
+    );
+
+    return this.http
+      .post(
+        this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+        JSON.stringify(query),
+        { headers: this.headers }
+      )
+      .pipe(
+        map((res) => this.responseToSongs(res)),
+        catchError((error) =>
+          this.handleError(
+            error,
+            "getArtistSongs(" + artistName + "," + from + ")"
+          )
+        )
+      );
+  }
+
+  public getCountArtistSong(
+    artistName: string,
+    sortFilter = false
+  ): Observable<number> {
+    console.log("artistname: " + artistName);
+    const query = this.getQuerySongsWithArtistName(artistName, sortFilter);
+
+    return this.http
+      .post<any>(
+        this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_COUNT,
+        JSON.stringify(query),
+        { headers: this.headers }
+      )
+      .pipe(
+        map((res) => res.count as number),
+        catchError((error) =>
+          this.handleError(error, "getCountArtistSong" + artistName + ")")
+        )
+      );
+  }
+}

dashboard/src/app/els-service/els-sort.service.ts

@@ -4,19 +4,15 @@ import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 import { ElsService } from './els.service';
-import { Album } from './model/album';
-import { Bucket } from './model/bucket';
-import { Song } from './model/song';
+import { Album } from './../model/album';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ElsSortService extends ElsService {
 
-  constructor(
-    protected http: HttpClient,
-    protected route: ActivatedRoute) {
-    super(http, route);
+  constructor(protected http: HttpClient) {
+    super(http);
   }
 
   getTime(): Promise<number> {

dashboard/src/app/els-service/els.service.ts

@@ -1,15 +1,14 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http'
 
 import { Observable } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 
-import { Song } from './model/song';
-import { Album } from './model/album';
-import { Artist } from './model/artist';
-import { Bucket } from './model/bucket';
-import { Suggested } from './model/suggested';
-import { ActivatedRoute } from '@angular/router';
+import { Song } from '../model/song';
+import { Album } from '../model/album';
+import { Artist } from '../model/artist';
+import { Bucket } from '../model/bucket';
+import { Suggested } from '../model/suggested';
 
 @Injectable()
 export class ElsService {
@@ -22,20 +21,11 @@ export class ElsService {
   protected static readonly ACTION_SEARCH = '/_search';
   protected static readonly ACTION_COUNT = '/_count';
 
-  protected elsUrl = 'http://localhost:9200';
+  protected elsUrl = 'http://192.168.1.20:9200';
   protected headers = new HttpHeaders({'Content-Type': 'application/json'});
-  protected defaultLocation = "/F:/Musique" // TODO Use conf
+  protected defaultLocation = "/F:/Musique"; // TODO Use conf
 
-  constructor(
-    protected http: HttpClient,
-    protected route: ActivatedRoute) { }
-
-  fetchToSortParam() {
-    const toSort = this.route.snapshot.queryParams['backend'] || 'defaultUrl';
-    console.log('fetchToSortParam return ' + toSort)
-    return toSort;
-    // ? Retrieve to sort on Service or on each component and add a parameter for each methods?
-  }
+  constructor(protected http: HttpClient) { }
 
   getTime(): Promise<number> {
     return this.http
@@ -208,11 +198,7 @@ export class ElsService {
 
     if (toSortFilter) {
       console.log("getAlbumSongs- TO SORT filter enabled");
-      query.query.bool.must_not.push({
-        term: {
-          "Location.tree": this.defaultLocation,
-        },
-      });
+      query = this.addSortFilterToQuery(query)
     }
 
     return this.http
@@ -246,31 +232,11 @@ export class ElsService {
             }), {headers: this.headers})
       .pipe(
         map(res => this.responseToSongs(res)),
-        catchError(error => this.handleError(error, 'getAlbumSongs(' + genreName + ',' + from + ')'))
+        catchError(error => this.handleError(error, 'getGenreSongs(' + genreName + ',' + from + ')'))
       );
   }
 
-  getArtistSongs(artistName: string, from: number = 0): Observable<Song[]> {
-    console.info('getArtistSongs- Artist name: ' + artistName + ' - from: ' + from);
-    return this.http
-      .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'query': {
-                  'bool': {
-                      'should': [
-                          {'match_phrase' : { 'Album Artist' : artistName }},
-                          {'match_phrase' : { 'Artist' : artistName }}
-                      ]
-                  }
-              },
-              'size': ElsService.DEFAULT_SIZE,
-              'from': from
-            }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToSongs(res)),
-        catchError(error => this.handleError(error, 'getArtistSongs(' + artistName + ',' + from + ')'))
-      );
-  }
+
 
   getAlbum(albumName: string): Observable<Album> {
     // TODO Why this is used on album pages?
@@ -289,21 +255,6 @@ export class ElsService {
       );
   }
 
-  getArtist(artistName: string): Observable<Artist> {
-    return this.http
-      .post(this.elsUrl + ElsService.ARTIST_INDEX_NAME + ElsService.ACTION_SEARCH,
-            JSON.stringify({
-              'query': {
-                'match_phrase': { 'Artist': artistName }
-              },
-              'size': ElsService.DEFAULT_SIZE
-            }), {headers: this.headers})
-      .pipe(
-        map(res => this.responseToOneTypedResult<Artist>(res, artistName)),
-        catchError(error => this.handleError(error, 'getArtist(' + artistName + ')'))
-      );
-  }
-
   getGenres(ordering: string = 'desc'): Observable<Bucket[]> {
     return this.http
       .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
@@ -326,25 +277,6 @@ export class ElsService {
       );
   }
 
-//   getGenreCount(): Observable<number> {
-//     return this.http
-//       .post<any>(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
-//             JSON.stringify({
-//               'aggs' : {
-//                 'genres' : {
-//                   'cardinality' : {
-//                     'field' : 'Genre.original',
-//                     'missing': 'N/A',
-//                   }
-//                 }
-//               },
-//               'size': 0
-//             }), {headers: this.headers})
-//       .pipe(
-//         map(res => res.aggregations.genres.value)
-//       );
-//   }
-
   getLastAddedAlbums(month: number): Observable<Bucket[]> {
     return this.http
       .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
@@ -406,26 +338,6 @@ export class ElsService {
       );
   }
 
-  getCountArtistSong(artistName: string): Observable<number> {
-    console.log('artistname: ' + artistName);
-    return this.http
-    .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_COUNT,
-          JSON.stringify({
-            'query': {
-                'bool': {
-                    'should': [
-                        {'match_phrase' : { 'Album Artist' : artistName }},
-                        {'match_phrase' : { 'Artist' : artistName }}
-                    ]
-                }
-            }
-          }), {headers: this.headers})
-    .pipe(
-      map(res => res.count as number),
-      catchError(error => this.handleError(error, 'getCountArtistSong' + artistName + ')'))
-    );
-  }
-
   getSuggest(text: string): Observable<Suggested[]> {
     console.log('search sugget: ' + text);
     return this.http
@@ -461,7 +373,7 @@ export class ElsService {
    * @param res Response to process
    * @param name The searched name - for console output
    */
-  private responseToOneTypedResult<T>(res: any, name: string): T {
+  protected responseToOneTypedResult<T>(res: any, name: string): T {
     const hits = res.hits.hits;
 
     if (hits.length < 1) {
@@ -556,4 +468,13 @@ export class ElsService {
     console.error(error); // for demo purposes only
     return Promise.reject(error.message || error);
   }
+
+  protected addSortFilterToQuery(query) {
+    query.query.bool.must_not.push({
+      term: {
+        "Location.tree": this.defaultLocation,
+      },
+    });
+    return query;
+  }
 }

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 
-import { ElsService } from '../els.service';
+import { ElsService } from '../els-service/els.service';
 import { SongTableComponent } from '../song-table/song-table.component';
 
 import { Song } from '../model/song';

dashboard/src/app/to-sort/to-sort.component.html

@@ -100,7 +100,7 @@
 
             <ng-template [ngIf]="album['Album Artist']" [ngIfElse]="artistSection">
               <td>
-                  <a [routerLink]="['/artist', album['Album Artist']]">{{album['Album Artist']}}</a>&nbsp;
+                  <a [routerLink]="['/artist', album['Album Artist']]"  [queryParams]="{tosort: true}">{{album['Album Artist']}}</a>&nbsp;
               </td>
             </ng-template>
 

dashboard/src/app/to-sort/to-sort.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ElsSortService } from '../els-sort.service';
+import { ElsSortService } from '../els-service/els-sort.service';
 import { Bucket } from '../model/bucket';
 
 import { Utils } from '../utils';

dashboard/src/app/top-played/top-played.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { ElsService } from '../els.service';
+import { ElsService } from '../els-service/els.service';
 import { Album } from '../model/album';
 import { Artist } from '../model/artist';