[DEV] add search in artist and album

front/src/app/component/element-player-audio/element-player-audio.less

@@ -82,6 +82,7 @@
 	}
 
 	.title {
+		width: 100%;
 		font-size: 24px;
 		font-weight: bold;
 	}

front/src/app/scene/album/album.html

@@ -19,9 +19,14 @@
 				</button>
 			</div>
 		</div>
-		<div class="cover-area">
+		<div class="cover-area" *ngIf="artistCovers">
-			<div class="cover" *ngIf="covers" >
+			<div class="cover">
-				<img src="{{covers[0]}}"/>
+				<img src="{{artistCovers[0]}}"/>
+			</div>
+		</div>
+		<div class="cover-area" *ngIf="albumCovers">
+			<div class="cover">
+				<img src="{{albumCovers[0]}}"/>
 			</div>
 		</div>
 	</div>

front/src/app/scene/album/album.ts

@@ -8,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
 import { Media } from 'app/model';
 
 import { ArtistService, DataService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service';
+import { arrayUnique } from 'common/utils/arrayTools';
 
 @Component({
 	selector: 'app-album',
@@ -15,11 +16,11 @@ import { ArtistService, DataService, ArianeService, AlbumService, TrackService,
 })
 
 export class AlbumScene implements OnInit {
-	public idArtist = -1;
+	public artistIds: number[] = [];
-	public idAlbum = -1;
+	public idAlbum: number = -1;
-	public name: string = '';
+	public name: string = '???';
 	public description: string = undefined;
-	public covers: Array<string> = undefined;
+	public artistCovers: Array<string> = undefined;
 	public albumName: string = '';
 	public albumDescription: string = undefined;
 	public albumCovers: string[] = undefined;
@@ -34,26 +35,12 @@ export class AlbumScene implements OnInit {
 		private arianeService: ArianeService,
 		private playerService: PlayerService,
 		private dataService: DataService) {
-
 	}
 
 	ngOnInit() {
-		// this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId'));
+		//this.artistIds = [this.arianeService.getArtistId()];
-		// this.idType = parseInt(this.route.snapshot.paramMap.get('typeId'));
-		this.idArtist = this.arianeService.getArtistId();
 		this.idAlbum = this.arianeService.getAlbumId();
 		let self = this;
-		this.artistService.get(this.idArtist)
-			.then((response) => {
-				self.name = response.name;
-				self.description = response.description;
-				self.covers = this.dataService.getCoverListUrl(response.covers);
-			}).catch((response) => {
-				self.description = undefined;
-				self.name = '???';
-				self.covers = undefined;
-				// no check just ==> an error occured on album
-			});
 		this.albumService.get(this.idAlbum)
 			.then((response) => {
 				self.albumName = response.name;
@@ -70,6 +57,28 @@ export class AlbumScene implements OnInit {
 		this.trackService.getWithAlbum(self.idAlbum)
 			.then((response2: Media[]) => {
 				self.tracks = response2;
+				self.artistIds = []
+				self.tracks.forEach(element => {
+					self.artistIds = [...self.artistIds, ...element.artists];
+				});
+				self.artistIds = arrayUnique(self.artistIds);
+				if (self.artistIds.length === 0) {
+					console.error("No artist found !!!");
+					return;
+				} else if (self.artistIds.length > 1) {
+					console.error("More than 1 artist ==> not managed");
+				}
+				// TODO: display more than 1 ...
+				self.artistService.get(self.artistIds[0])
+					.then((response) => {
+						self.name = response.name;
+						self.description = response.description;
+						self.artistCovers = self.dataService.getCoverListUrl(response.covers);
+					}).catch((response) => {
+						self.description = undefined;
+						self.name = '???';
+						self.artistCovers = undefined;
+					});
 				//console.log(`>>>>BBB  get tracks : ${JSON.stringify(response2, null, 2)}`);
 			}).catch((response) => {
 				//console.log(`>>>>BBB plop`);

front/src/app/scene/album/albums.html

@@ -24,15 +24,19 @@
 	</div>
 	<div class="fill-content colomn_single" *ngIf="albums">
 		<div class="clear"></div>
-		<div class="title" *ngIf="albums.length > 1">Albums:</div>
+		<div class="title">Album<span *ngIf="albums.length > 1">s</span>: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
-		<div class="title" *ngIf="albums.length == 1">Album:</div>
+		<div *ngFor="let data of albums"
-		<div *ngFor="let data of albums" class="item-list" (click)="onSelectAlbum($event, data.id)" (auxclick)="onSelectAlbum($event, data.id)">
+		     class="item-list"
+			 (click)="onSelectAlbum($event, data.id)"
+			 (auxclick)="onSelectAlbum($event, data.id)"
+			 >
 			<app-element-season
 			    [element]="data"
 				countSubType="Track"
 				[countSubTypeCallBack]="countTrack"
 				subValues="Artist"
 				[subValuesCallBack]="getArtistsString"
+				
 				></app-element-season>
 		</div>
 	</div>

front/src/app/scene/album/albums.ts

@@ -8,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
 
 import { ArtistService, DataService, ArianeService, AlbumService, PlayerService, TrackService } from 'app/service';
 import { NodeData } from 'common/model';
+import { filter } from 'rxjs';
 
 @Component({
 	selector: 'app-albums',
@@ -19,6 +20,7 @@ export class AlbumsScene implements OnInit {
 	public description: string = undefined;
 	public covers: string[] = undefined;
 	public albums: NodeData[] = undefined;
+	public albumsSave: NodeData[] = undefined;
 	public tracks: any[] = undefined;
 	public countSubElement: number = undefined;
 	countTrack: (id: number) => Promise<Number>;
@@ -54,6 +56,7 @@ export class AlbumsScene implements OnInit {
 			.then((response: NodeData[]) => {
 				//console.log(`>>>> get album : ${JSON.stringify(response)}`)
 				self.albums = response;
+				self.albumsSave = [...response];
 			}).catch((response) => {
 				self.albums = undefined;
 			});
@@ -69,7 +72,12 @@ export class AlbumsScene implements OnInit {
 		*/
 	}
 
-
+	onSearch(value: string) {
+		console.log(`Search value: ${value}`);
+		this.albums = this.albumsSave.filter(element => {
+			return element.name.toLowerCase().includes(value.toLowerCase());;
+		})
+	}
 
 	onSelectAlbum(event: any, idSelected: number): void {
 		if (event.ctrlKey) {

front/src/app/scene/artist/artist-album.html

@@ -19,9 +19,14 @@
 				</button>
 			</div>
 		</div>
-		<div class="cover-area" *ngIf="covers" >
+		<div class="cover-area" *ngIf="artistCovers" >
 			<div class="cover">
-				<img src="{{covers[0]}}"/>
+				<img src="{{artistCovers[0]}}"/>
+			</div>
+		</div>
+		<div class="cover-area" *ngIf="albumCovers" >
+			<div class="cover">
+				<img src="{{albumCovers[0]}}"/>
 			</div>
 		</div>
 	</div>

front/src/app/scene/artist/artist-album.ts

@@ -19,7 +19,7 @@ export class ArtistAlbumScene implements OnInit {
 	public idAlbum = -1;
 	public name: string = '';
 	public description: string = undefined;
-	public covers: Array<string> = undefined;
+	public artistCovers: Array<string> = undefined;
 	public albumName: string = '';
 	public albumDescription: string = undefined;
 	public albumCovers: string[] = undefined;
@@ -47,11 +47,11 @@ export class ArtistAlbumScene implements OnInit {
 			.then((response) => {
 				self.name = response.name;
 				self.description = response.description;
-				self.covers = this.dataService.getCoverListUrl(response.covers);
+				self.artistCovers = this.dataService.getCoverListUrl(response.covers);
 			}).catch((response) => {
 				self.description = undefined;
 				self.name = '???';
-				self.covers = undefined;
+				self.artistCovers = undefined;
 				// no check just ==> an error occured on album
 			});
 		this.albumService.get(this.idAlbum)

front/src/app/scene/artist/artists.html

@@ -24,8 +24,7 @@
 	</div>
 	<div class="fill-content colomn_single" *ngIf="artists">
 		<div class="clear"></div>
-		<div class="title" *ngIf="artists.length > 1">Artists:</div>
+		<div class="title">Artist<span *ngIf="artists.length > 1">s</span>: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
-		<div class="title" *ngIf="artists.length == 1">Artist:</div>
 		<div *ngFor="let data of artists" class="item-list" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
 			<app-element-season
 				[element]="data"

front/src/app/scene/artist/artists.ts

@@ -8,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
 
 import { ArtistService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service';
 import { NodeData } from 'common/model';
+import { isNullOrUndefined } from 'common/utils';
 
 @Component({
 	selector: 'app-artists',
@@ -20,6 +21,7 @@ export class ArtistsScene implements OnInit {
 	name: string = "Artists";
 	description: string = "All available artists";
 	artists: NodeData[];
+	artistsSave: NodeData[];
 	countTrack: (id: number) => Promise<Number>;
 	countAlbum: (id: number) => Promise<Number>;
 
@@ -41,11 +43,20 @@ export class ArtistsScene implements OnInit {
 		this.artistService.getOrder()
 			.then((response: NodeData[]) => {
 				self.artists = response;
+				self.artistsSave = [...response];
 				//console.log("get artists: " + JSON.stringify(self.artists));
 			}).catch((response) => {
 				self.artists = undefined;
 			});
 	}
+
+	onSearch(value: string) {
+		console.log(`Search value: ${value}`);
+		this.artists = this.artistsSave.filter(element => {
+			return element.name.toLowerCase().includes(value.toLowerCase());;
+		})
+	}
+
 	onSelectArtist(event: any, idSelected: number): void {
 		if (event.ctrlKey) {
 			this.arianeService.navigateArtistEdit({ id: idSelected, newWindows: event.which === 2 });