started moving search tabs in components

src/components/TheMainSearch.vue

@@ -4,11 +4,18 @@
 			<h2>{{ $t('search.startSearching') }}</h2>
 			<p>{{ $t('search.description') }}</p>
 		</div>
+
 		<div v-show="results.query !== ''">
 			<ul class="section-tabs">
-				<li class="section-tabs__tab search_tablinks" id="search_all_tab">{{ $t('globals.listTabs.all') }}</li>
+				<li class="section-tabs__tab search_tablinks" id="search_all_tab">
-				<li class="section-tabs__tab search_tablinks" id="search_track_tab">{{ $tc('globals.listTabs.track', 2) }}</li>
+					{{ $t('globals.listTabs.all') }}
-				<li class="section-tabs__tab search_tablinks" id="search_album_tab">{{ $tc('globals.listTabs.album', 2) }}</li>
+				</li>
+				<li class="section-tabs__tab search_tablinks" id="search_track_tab">
+					{{ $tc('globals.listTabs.track', 2) }}
+				</li>
+				<li class="section-tabs__tab search_tablinks" id="search_album_tab">
+					{{ $tc('globals.listTabs.album', 2) }}
+				</li>
 				<li class="section-tabs__tab search_tablinks" id="search_artist_tab">
 					{{ $tc('globals.listTabs.artist', 2) }}
 				</li>
@@ -16,9 +23,26 @@
 					{{ $tc('globals.listTabs.playlist', 2) }}
 				</li>
 			</ul>
+
+			<ul class="section-tabs">
+				<li
+					class="section-tabs__tab"
+					v-for="tab in tabs"
+					:key="tab.name"
+					@click="currentTab = tab"
+					:class="{ active: currentTab.name === tab.name }"
+				>
+					{{ tab.name }}
+				</li>
+			</ul>
+
+			<template v-if="currentTab.name !== ''">
+				<component :is="currentTab.component" :results="results"></component>
+			</template>
+
 			<div id="search_tab_content" v-show="showSearchTab">
 				<!-- ### Main Search Tab ### -->
-				<div id="main_search" class="search_tabcontent">
+				<!-- <div id="main_search" class="search_tabcontent">
 					<template v-for="section in results.allTab.ORDER">
 						<section
 							v-if="
@@ -34,7 +58,6 @@
 							>
 								{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
 							</h2>
-							<!-- Top result -->
 							<div
 								v-if="section == 'TOP_RESULT'"
 								class="top_result clickable"
@@ -238,7 +261,7 @@
 					>
 						<h1>{{ $t('search.noResults') }}</h1>
 					</div>
-				</div>
+				</div> -->
 				<!-- ### Track Search Tab ### -->
 				<div id="track_search" class="search_tabcontent">
 					<base-loading-placeholder v-if="!results.trackTab.loaded"></base-loading-placeholder>
@@ -431,12 +454,17 @@
 </template>
 
 <script>
+import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+import ResultsAll from '@components/search/ResultsAll.vue'
+import ResultsAlbums from '@components/search/ResultsAlbums.vue'
+import ResultsArtists from '@components/search/ResultsArtists.vue'
+import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
+import ResultsTracks from '@components/search/ResultsTracks.vue'
+
 import { socket } from '@/utils/socket'
 import { showView } from '@js/tabs.js'
 import Downloads from '@/utils/downloads'
 import Utils from '@/utils/utils'
-import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
-
 import { changeTab } from '@js/tabs.js'
 import EventBus from '@/utils/EventBus.js'
 
@@ -445,7 +473,37 @@ export default {
 		BaseLoadingPlaceholder
 	},
 	data() {
+		const $t = this.$t.bind(this)
+		const $tc = this.$tc.bind(this)
+
 		return {
+			showSearchTab: false,
+			currentTab: {
+				name: '',
+				component: {}
+			},
+			tabs: [
+				{
+					name: $t('globals.listTabs.all'),
+					component: ResultsAll
+				},
+				{
+					name: $tc('globals.listTabs.track', 2),
+					component: ResultsTracks
+				},
+				{
+					name: $tc('globals.listTabs.album', 2),
+					component: ResultsAlbums
+				},
+				{
+					name: $tc('globals.listTabs.artist', 2),
+					component: ResultsArtists
+				},
+				{
+					name: $tc('globals.listTabs.playlist', 2),
+					component: ResultsPlaylists
+				}
+			],
 			results: {
 				query: '',
 				allTab: {
@@ -480,8 +538,7 @@ export default {
 					total: 0,
 					loaded: false
 				}
-			},
+			}
-			showSearchTab: false
 		}
 	},
 	props: {
@@ -496,6 +553,10 @@ export default {
 		this.$root.$on('mainSearch:showNewResults', this.showNewResults)
 		socket.on('mainSearch', this.handleMainSearch)
 		socket.on('search', this.handleSearch)
+
+		this.$on('artistView', this.artistView)
+		this.$on('albumView', this.albumView)
+		this.$on('playlistView', this.playlistView)
 	},
 	methods: {
 		artistView: showView.bind(null, 'artist'),
@@ -540,6 +601,8 @@ export default {
 
 			if (!selectedTab) return
 
+			console.log('asfsdf')
+
 			changeTab(target, 'search', selectedTab)
 		},
 		handleClickTopResult(event) {
@@ -571,7 +634,7 @@ export default {
 				this.$root.$emit('updateSearchLoadingState', true)
 			} else {
 				this.showSearchTab = true
-				document.getElementById('main_search_tablink').click()
+				// document.getElementById('main_search_tablink').click()
 			}
 		},
 		checkLoadMoreContent(searchSelected) {
@@ -603,7 +666,7 @@ export default {
 					break
 			}
 
-			document.getElementById(tabID).click()
+			// document.getElementById(tabID).click()
 		},
 		addToQueue(e) {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
@@ -643,7 +706,7 @@ export default {
 			this.results.playlistTab = { ...resetObj }
 
 			if (this.results.query == '') {
-				document.getElementById('search_all_tab').click()
+				// document.getElementById('search_all_tab').click()
 			}
 
 			this.results.query = result.QUERY

src/components/TheSearchBar.vue

@@ -12,8 +12,10 @@
 			:placeholder="$t('searchbar')"
 			autofocus
 			ref="searchbar"
-			@keyup="handleSearchBarKeyup($event)"
+			 @keyup="handleSearchBarKeyup($event)"
 		/>
+			<!-- @keyup.enter.exact="onEnter"
+			@keyup.ctrl.enter="onCTRLEnter" -->
 	</header>
 </template>
 
@@ -31,6 +33,9 @@ export default {
 		}
 	},
 	methods: {
+		test() {
+			console.log('test passato')
+		},
 		async handleSearchBarKeyup(keyEvent) {
 			let isEnterPressed = keyEvent.keyCode === 13
 

src/components/search/ResultsAlbums.vue

@@ -0,0 +1,3 @@
+<template>
+	<h2>Results Albums</h2>
+</template>

src/components/search/ResultsAll.vue

@@ -0,0 +1,258 @@
+<template>
+	<div id="main_search" class="search_tabcontent">
+		<template v-for="section in results.allTab.ORDER">
+			<section
+				v-if="
+					(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || results.allTab[section].length > 0
+				"
+				class="search_section"
+			>
+				<h2
+					@click="changeSearchTab(section)"
+					class="search_header"
+					:class="{ top_result_header: section === 'TOP_RESULT' }"
+				>
+					{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
+				</h2>
+				<!-- Top result -->
+				<div
+					v-if="section == 'TOP_RESULT'"
+					class="top_result clickable"
+					@click="handleClickTopResult"
+					:data-id="results.allTab.TOP_RESULT[0].id"
+				>
+					<div class="cover_container">
+						<img
+							aria-hidden="true"
+							:src="results.allTab.TOP_RESULT[0].picture"
+							:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"
+						/>
+						<div
+							role="button"
+							aria-label="download"
+							@click.stop="addToQueue"
+							:data-link="results.allTab.TOP_RESULT[0].link"
+							class="download_overlay"
+						>
+							<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
+						</div>
+					</div>
+					<div class="info_box">
+						<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
+						<p class="secondary-text">
+							{{
+								results.allTab.TOP_RESULT[0].type == 'artist'
+									? $t('search.fans', { n: $n(results.allTab.TOP_RESULT[0].nb_fan) })
+									: $t('globals.by', { artist: results.allTab.TOP_RESULT[0].artist }) +
+									  ' - ' +
+									  $tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
+							}}
+						</p>
+						<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1) }}</span>
+					</div>
+				</div>
+				<div v-else-if="section == 'TRACK'">
+					<table class="table table--tracks">
+						<tbody>
+							<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
+								<td class="table__icon" aria-hidden="true">
+									<img
+										class="rounded coverart"
+										:src="
+											'https://e-cdns-images.dzcdn.net/images/cover/' + track.ALB_PICTURE + '/32x32-000000-80-0-0.jpg'
+										"
+									/>
+								</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 == 1" class="material-icons explicit_icon"> explicit </i>
+										{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
+									</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>
+								</td>
+								<td
+									class="table__cell--medium table__cell--center breakline clickable"
+									@click="albumView"
+									:data-id="track.ALB_ID"
+								>
+									{{ track.ALB_TITLE }}
+								</td>
+								<td class="table__cell table__cell--center">
+									{{ convertDuration(track.DURATION) }}
+								</td>
+								<td
+									class="table__cell--download table__cell--center clickable"
+									@click.stop="addToQueue"
+									:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
+									role="button"
+									aria-label="download"
+								>
+									<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+				<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
+					<div
+						v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
+						class="release clickable"
+						@click="artistView"
+						:data-id="release.ART_ID"
+					>
+						<div class="cover_container">
+							<img
+								aria-hidden="true"
+								class="circle coverart"
+								:src="
+									'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'
+								"
+							/>
+							<div
+								role="button"
+								aria-label="download"
+								@click.stop="addToQueue"
+								:data-link="'https://deezer.com/artist/' + release.ART_ID"
+								class="download_overlay"
+							>
+								<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
+							</div>
+						</div>
+						<p class="primary-text">{{ release.ART_NAME }}</p>
+						<p class="secondary-text">{{ $t('search.fans', { n: $n(release.NB_FAN) }) }}</p>
+					</div>
+				</div>
+				<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
+					<div
+						v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
+						class="release clickable"
+						@click="albumView"
+						:data-id="release.ALB_ID"
+					>
+						<div class="cover_container">
+							<img
+								aria-hidden="true"
+								class="rounded coverart"
+								:src="
+									'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'
+								"
+							/>
+							<div
+								role="button"
+								aria-label="download"
+								@click.stop="addToQueue"
+								:data-link="'https://deezer.com/album/' + release.ALB_ID"
+								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="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1"
+								class="material-icons explicit_icon"
+								>explicit</i
+							>
+							{{ release.ALB_TITLE }}
+						</p>
+						<p class="secondary-text">
+							{{ release.ART_NAME + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}
+						</p>
+					</div>
+				</div>
+				<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
+					<div
+						v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
+						class="release clickable"
+						@click="playlistView"
+						:data-id="release.PLAYLIST_ID"
+					>
+						<div class="cover_container">
+							<img
+								aria-hidden="true"
+								class="rounded coverart"
+								:src="
+									'https://e-cdns-images.dzcdn.net/images/' +
+									release.PICTURE_TYPE +
+									'/' +
+									release.PLAYLIST_PICTURE +
+									'/156x156-000000-80-0-0.jpg'
+								"
+							/>
+							<div
+								role="button"
+								aria-label="download"
+								@click.stop="addToQueue"
+								:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
+								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">{{ $tc('globals.listTabs.trackN', release.NB_SONG) }}</p>
+					</div>
+				</div>
+			</section>
+		</template>
+		<div v-if="test">
+			<h1>{{ $t('search.noResults') }}</h1>
+		</div>
+	</div>
+</template>
+<script>
+import { convertDuration } from '@/utils/utils'
+
+export default {
+	props: ['results'],
+	computed: {
+		test() {
+			return this.results.allTab.ORDER.every(section =>
+				section == 'TOP_RESULT'
+					? this.results.allTab[section].length == 0
+					: this.results.allTab[section].data.length == 0
+			)
+		}
+	},
+	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
+			}
+		}
+	}
+}
+</script>

src/components/search/ResultsArtists.vue

@@ -0,0 +1,3 @@
+<template>
+	<h2>Results Artists</h2>
+</template>

src/components/search/ResultsPlaylists.vue

@@ -0,0 +1,3 @@
+<template>
+	<h2>Results Playlists</h2>
+</template>

src/components/search/ResultsTracks.vue

@@ -0,0 +1,3 @@
+<template>
+	<h2>Results Tracks</h2>
+</template>

src/js/tabs.js

@@ -1,4 +1,3 @@
-import { socket } from '@/utils/socket'
 import EventBus from '@/utils/EventBus'
 import router from '@/router'
 
@@ -12,6 +11,8 @@ export function changeTab(sidebarEl, section, tabName) {
 	window.windows_stack = []
 	window.currentStack = {}
 
+	console.log(Array.from(arguments))
+
 	// * Only in section search
 	updateTabLink(section)
 
@@ -81,8 +82,6 @@ export function showView(viewType, event) {
 
 /**
  * Goes back to the previous tab according to the global window stack.
- *
- * Needs EventBus and socket
  */
 export function backTab() {
 	// ! Need to implement the memory of the opened artist tab