fnished moving search tabs in components

src/components/search/ResultsAlbums.vue

@@ -1,3 +1,51 @@
 <template>
-	<h2>Results Albums</h2>
-</template>
+	<div id="album_search" class="search_tabcontent">
+		<BaseLoadingPlaceholder v-if="!results.albumTab.loaded" />
+		<div v-else-if="results.albumTab.data.length == 0">
+			<h1>{{ $t('search.noResultsAlbum') }}</h1>
+		</div>
+		<div class="release_grid" v-if="results.albumTab.data.length > 0">
+			<div
+				v-for="release in results.albumTab.data"
+				class="release clickable"
+				@click.stop="$emit('album-view', $event)"
+				:data-id="release.id"
+			>
+				<div class="cover_container">
+					<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
+					<div
+						role="button"
+						aria-label="download"
+						@click.stop="$emit('add-to-queue', $event)"
+						:data-link="release.link"
+						class="download_overlay"
+					>
+						<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
+					</div>
+				</div>
+				<p class="primary-text inline-flex">
+					<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
+					{{ release.title }}
+				</p>
+				<p class="secondary-text">
+					{{
+						$t('globals.by', { artist: release.artist.name }) +
+						' - ' +
+						$tc('globals.listTabs.trackN', release.nb_tracks)
+					}}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+
+export default {
+	props: ['results'],
+	components: {
+		BaseLoadingPlaceholder
+	}
+}
+</script>

src/components/search/ResultsAll.vue

@@ -8,7 +8,7 @@
 				class="search_section"
 			>
 				<h2
-					@click="changeSearchTab(section)"
+					@click="$emit('change-search-tab', section)"
 					class="search_header"
 					:class="{ top_result_header: section === 'TOP_RESULT' }"
 				>
@@ -18,7 +18,7 @@
 				<div
 					v-if="section == 'TOP_RESULT'"
 					class="top_result clickable"
-					@click="handleClickTopResult"
+					@click.stop="$emit(`${topResultType}-view`, $event)"
 					:data-id="results.allTab.TOP_RESULT[0].id"
 				>
 					<div class="cover_container">
@@ -30,7 +30,7 @@
 						<div
 							role="button"
 							aria-label="download"
-							@click.stop="addToQueue"
+							@click.stop="$emit('add-to-queue', $event)"
 							:data-link="results.allTab.TOP_RESULT[0].link"
 							class="download_overlay"
 						>
@@ -70,13 +70,19 @@
 									</div>
 								</td>
 								<td class="table__cell table__cell--medium table__cell--center breakline">
-									<span class="clickable" @click="artistView" :data-id="artist.ART_ID" v-for="artist in track.ARTISTS"
-										>{{ artist.ART_NAME }}
+									<span
+										class="clickable"
+										@click.stop="$emit('artist-view', $event)"
+										:data-id="artist.ART_ID"
+										v-for="artist in track.ARTISTS"
+										:key="artist.ART_ID"
+									>
+										{{ artist.ART_NAME }}
 									</span>
 								</td>
 								<td
 									class="table__cell--medium table__cell--center breakline clickable"
-									@click="albumView"
+									@click.stop="$emit('album-view', $event)"
 									:data-id="track.ALB_ID"
 								>
 									{{ track.ALB_TITLE }}
@@ -86,7 +92,7 @@
 								</td>
 								<td
 									class="table__cell--download table__cell--center clickable"
-									@click.stop="addToQueue"
+									@click.stop="$emit('add-to-queue', $event)"
 									:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
 									role="button"
 									aria-label="download"
@@ -101,7 +107,7 @@
 					<div
 						v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
 						class="release clickable"
-						@click="artistView"
+						@click.stop="$emit('artist-view', $event)"
 						:data-id="release.ART_ID"
 					>
 						<div class="cover_container">
@@ -115,7 +121,7 @@
 							<div
 								role="button"
 								aria-label="download"
-								@click.stop="addToQueue"
+								@click.stop="$emit('add-to-queue', $event)"
 								:data-link="'https://deezer.com/artist/' + release.ART_ID"
 								class="download_overlay"
 							>
@@ -130,7 +136,7 @@
 					<div
 						v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
 						class="release clickable"
-						@click="albumView"
+						@click.stop="$emit('album-view', $event)"
 						:data-id="release.ALB_ID"
 					>
 						<div class="cover_container">
@@ -144,7 +150,7 @@
 							<div
 								role="button"
 								aria-label="download"
-								@click.stop="addToQueue"
+								@click.stop="$emit('add-to-queue', $event)"
 								:data-link="'https://deezer.com/album/' + release.ALB_ID"
 								class="download_overlay"
 							>
@@ -168,7 +174,7 @@
 					<div
 						v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
 						class="release clickable"
-						@click="playlistView"
+						@click.stop="$emit('playlist-view', $event)"
 						:data-id="release.PLAYLIST_ID"
 					>
 						<div class="cover_container">
@@ -186,7 +192,7 @@
 							<div
 								role="button"
 								aria-label="download"
-								@click.stop="addToQueue"
+								@click.stop="$emit('add-to-queue', $event)"
 								:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
 								class="download_overlay"
 							>
@@ -199,7 +205,7 @@
 				</div>
 			</section>
 		</template>
-		<div v-if="test">
+		<div v-if="noResults">
 			<h1>{{ $t('search.noResults') }}</h1>
 		</div>
 	</div>
@@ -210,7 +216,10 @@ import { convertDuration } from '@/utils/utils'
 export default {
 	props: ['results'],
 	computed: {
-		test() {
+		topResultType() {
+			return this.results.allTab.TOP_RESULT[0].type
+		},
+		noResults() {
 			return this.results.allTab.ORDER.every(section =>
 				section == 'TOP_RESULT'
 					? this.results.allTab[section].length == 0
@@ -218,41 +227,8 @@ export default {
 			)
 		}
 	},
-	mounted() {
-		console.log(this.results)
-	},
 	methods: {
-		convertDuration,
-		artistView(event) {
-			this.$emit('artistView', event)
-		},
-		albumView(event) {
-			this.$emit('albumView', event)
-		},
-		playlistView(event) {
-			this.$emit('playlistView', event)
-		},
-		handleClickTopResult(event) {
-			let topResultType = this.results.allTab.TOP_RESULT[0].type
-
-			switch (topResultType) {
-				case 'artist':
-					// this.artistView(event)
-					this.$emit('artistView', event)
-					break
-				case 'album':
-					// this.albumView(event)
-					this.$emit('albumView', event)
-					break
-				case 'playlist':
-					// this.playlistView(event)
-					this.$emit('playlistView', event)
-					break
-
-				default:
-					break
-			}
-		}
+		convertDuration
 	}
 }
 </script>

src/components/search/ResultsArtists.vue

@@ -1,3 +1,42 @@
 <template>
-	<h2>Results Artists</h2>
-</template>
+	<div id="artist_search" class="search_tabcontent">
+		<base-loading-placeholder v-if="!results.artistTab.loaded"></base-loading-placeholder>
+		<div v-else-if="results.artistTab.data.length == 0">
+			<h1>{{ $t('search.noResultsArtist') }}</h1>
+		</div>
+		<div class="release_grid" v-if="results.artistTab.data.length > 0">
+			<div
+				v-for="release in results.artistTab.data"
+				class="release clickable"
+				@click.stop="$emit('artist-view', $event)"
+				:data-id="release.id"
+			>
+				<div class="cover_container">
+					<img aria-hidden="true" class="circle coverart" :src="release.picture_medium" />
+					<div
+						role="button"
+						aria-label="download"
+						@click.stop="$emit('add-to-queue', $event)"
+						:data-link="release.link"
+						class="download_overlay"
+					>
+						<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
+					</div>
+				</div>
+				<p class="primary-text">{{ release.name }}</p>
+				<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.nb_album) }}</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+
+export default {
+	props: ['results'],
+	components: {
+		BaseLoadingPlaceholder
+	}
+}
+</script>

src/components/search/ResultsPlaylists.vue

@@ -1,3 +1,46 @@
 <template>
-	<h2>Results Playlists</h2>
-</template>
+	<div id="playlist_search" class="search_tabcontent">
+		<BaseLoadingPlaceholder v-if="!results.playlistTab.loaded" />
+		<div v-else-if="results.playlistTab.data.length == 0">
+			<h1>{{ $t('search.noResultsPlaylist') }}</h1>
+		</div>
+		<div class="release_grid" v-if="results.playlistTab.data.length > 0">
+			<div
+				v-for="release in results.playlistTab.data"
+				class="release clickable"
+				@click.stop="$emit('playlist-view', $event)"
+				:data-id="release.id"
+			>
+				<div class="cover_container">
+					<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
+					<div
+						role="button"
+						aria-label="download"
+						@click.stop="$emit('add-to-queue', $event)"
+						:data-link="release.link"
+						class="download_overlay"
+					>
+						<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
+					</div>
+				</div>
+				<p class="primary-text">{{ release.title }}</p>
+				<p class="secondary-text">
+					{{
+						`${$t('globals.by', { artist: release.user.name })} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
+					}}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+
+export default {
+	props: ['results'],
+	components: {
+		BaseLoadingPlaceholder
+	}
+}
+</script>

src/components/search/ResultsTracks.vue

@@ -1,3 +1,114 @@
 <template>
-	<h2>Results Tracks</h2>
-</template>
+	<div id="track_search" class="search_tabcontent">
+		<BaseLoadingPlaceholder v-if="!results.trackTab.loaded" />
+		<div v-else-if="results.trackTab.data.length == 0">
+			<h1>{{ $t('search.noResultsTrack') }}</h1>
+		</div>
+		<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
+			<thead>
+				<tr>
+					<th colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th>
+					<th>{{ $tc('globals.listTabs.artist', 1) }}</th>
+					<th>{{ $tc('globals.listTabs.album', 1) }}</th>
+					<th>
+						<i class="material-icons"> timer </i>
+					</th>
+					<th style="width: 56px"></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="track in results.trackTab.data">
+					<td class="table__icon table__icon--big">
+						<a
+							href="#"
+							@click="playPausePreview"
+							:class="'rounded' + (track.preview ? ' single-cover' : '')"
+							:data-preview="track.preview"
+						>
+							<i
+								@mouseenter="previewMouseEnter"
+								@mouseleave="previewMouseLeave"
+								v-if="track.preview"
+								class="material-icons preview_controls"
+								:title="$t('globals.play_hint')"
+							>
+								play_arrow
+							</i>
+							<img class="rounded coverart" :src="track.album.cover_small" />
+						</a>
+					</td>
+					<td class="table__cell table__cell--large breakline">
+						<div class="table__cell-content table__cell-content--vertical-center">
+							<i v-if="track.explicit_lyrics" class="material-icons explicit_icon"> explicit </i>
+							{{
+								track.title +
+								(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
+							}}
+						</div>
+					</td>
+					<td
+						class="table__cell table__cell--medium table__cell--center breakline clickable"
+						@click.stop="artistView"
+						:data-id="track.artist.id"
+					>
+						{{ track.artist.name }}
+					</td>
+					<td
+						class="table__cell table__cell--medium table__cell--center breakline clickable"
+						@click.stop="albumView"
+						:data-id="track.album.id"
+					>
+						{{ track.album.title }}
+					</td>
+					<td class="table__cell table__cell--small table__cell--center">
+						{{ convertDuration(track.duration) }}
+					</td>
+					<td
+						class="table__cell--download table__cell--center clickable"
+						@click.stop="$emit('add-to-queue', $event)"
+						:data-link="track.link"
+						role="button"
+						aria-label="download"
+					>
+						<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script>
+import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+
+import EventBus from '@/utils/EventBus.js'
+import { convertDuration } from '@/utils/utils'
+
+export default {
+	props: ['results'],
+	components: {
+		BaseLoadingPlaceholder
+	},
+	methods: {
+		convertDuration,
+		artistView(event) {
+			this.$emit('artist-view', event)
+		},
+		albumView(event) {
+			this.$emit('album-view', event)
+		},
+		playlistView(event) {
+			this.$emit('playlist-view', event)
+		},
+		playPausePreview(e) {
+			EventBus.$emit('trackPreview:playPausePreview', e)
+		},
+		previewMouseEnter(e) {
+			EventBus.$emit('trackPreview:previewMouseEnter', e)
+		},
+		previewMouseLeave(e) {
+			EventBus.$emit('trackPreview:previewMouseLeave', e)
+		}
+	}
+}
+</script>