workflow: reorganized components' folder structure

src/App.vue

@@ -7,7 +7,7 @@
 				<TheSearchBar />
 				<TheContent />
 			</div>
-			<TheDownloadTab class="downlaods" />
+			<TheDownloadBar class="downlaods" />
 		</div>
 
 		<BaseLoadingPlaceholder id="start_app_placeholder" text="Connecting to the server..." />
@@ -37,12 +37,14 @@
 </style>
 
 <script>
+import TheDownloadBar from '@components/downloads/TheDownloadBar.vue'
+
+import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
+import TheContextMenu from '@components/globals/TheContextMenu.vue'
+import TheTrackPreview from '@components/globals/TheTrackPreview.vue'
+import TheQualityModal from '@components/globals/TheQualityModal.vue'
+
 import TheSidebar from '@components/TheSidebar.vue'
-import TheTrackPreview from '@components/TheTrackPreview.vue'
-import TheQualityModal from '@components/TheQualityModal.vue'
-import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
-import TheContextMenu from '@components/TheContextMenu.vue'
-import TheDownloadTab from '@components/TheDownloadTab.vue'
 import TheSearchBar from '@components/TheSearchBar.vue'
 import TheContent from '@components/TheContent.vue'
 
@@ -50,7 +52,7 @@ export default {
 	components: {
 		TheSidebar,
 		TheSearchBar,
-		TheDownloadTab,
+		TheDownloadBar,
 		TheTrackPreview,
 		TheQualityModal,
 		BaseLoadingPlaceholder,

src/components/TheContent.vue

@@ -63,7 +63,7 @@ main {
 
 <script>
 import { debounce } from '@/utils/utils'
-import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
 
 export default {
 	components: {

src/components/pages/Artist.vue

@@ -47,11 +47,7 @@
 			</thead>
 			<tbody>
 				<tr v-for="release in showTable" :key="release.id">
-					<router-link
+					<router-link tag="td" class="inline-flex clickable" :to="{ name: 'Album', params: { id: release.id } }">
-						tag="td"
-						class="inline-flex clickable"
-						:to="{ name: 'Tracklist', params: { type: 'album', id: release.id } }"
-					>
 						<img
 							class="rounded coverart"
 							:src="release.cover_small"

src/components/pages/Charts.vue

@@ -81,7 +81,7 @@
 						<router-link
 							tag="td"
 							class="table__cell--medium table__cell--center breakline clickable"
-							:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
+							:to="{ name: 'Album', params: { id: track.album.id } }"
 						>
 							{{ track.album.title }}
 						</router-link>

src/components/pages/Favorites.vue

@@ -34,7 +34,7 @@
 					v-for="release in playlists"
 					:key="release.id"
 					class="release clickable"
-					:to="{ name: 'Tracklist', params: { type: 'playlist', id: release.id } }"
+					:to="{ name: 'Playlist', params: { id: release.id } }"
 				>
 					<div class="cover_container">
 						<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
@@ -64,7 +64,7 @@
 					v-for="release in spotifyPlaylists"
 					:key="release.id"
 					class="release clickable"
-					:to="{ name: 'Tracklist', params: { type: 'spotifyplaylist', id: release.id } }"
+					:to="{ name: 'Spotify Playlist', params: { id: release.id } }"
 				>
 					<div class="cover_container">
 						<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
@@ -102,7 +102,7 @@
 					class="release clickable"
 					v-for="release in albums"
 					:key="release.id"
-					:to="{ name: 'Tracklist', params: { type: 'album', id: release.id } }"
+					:to="{ name: 'Album', params: { id: release.id } }"
 				>
 					<div class="cover_container">
 						<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
@@ -198,7 +198,7 @@
 					<router-link
 						tag="td"
 						class="table__cell--medium table__cell--center breakline clickable"
-						:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
+						:to="{ name: 'Album', params: { id: track.album.id } }"
 					>
 						{{ track.album.title }}
 					</router-link>

src/components/pages/Home.vue

@@ -17,8 +17,8 @@
 					v-for="release in playlists"
 					:key="release.id"
 					class="release clickable"
-					:to="{ name: 'Tracklist', params: { type: 'playlist', id: release.id } }"
+					:to="{ name: 'Playlist', params: { id: release.id } }"
-					@keyup.enter.native="$router.push({ name: 'Tracklist', params: { type: 'playlist', id: release.id } })"
+					@keyup.enter.native="$router.push({ name: 'Playlist', params: { id: release.id } })"
 					tabindex="0"
 				>
 					<div class="cover_container">
@@ -55,8 +55,8 @@
 					v-for="release in albums"
 					:key="release.id"
 					class="release clickable"
-					:to="{ name: 'Tracklist', params: { type: 'album', id: release.id } }"
+					:to="{ name: 'Album', params: { id: release.id } }"
-					@keyup.enter.native="$router.push({ name: 'Tracklist', params: { type: 'album', id: release.id } })"
+					@keyup.enter.native="$router.push({ name: 'Album', params: { id: release.id } })"
 					:data-id="release.id"
 					tabindex="0"
 				>

src/components/pages/LinkAnalyzer.vue

@@ -42,7 +42,7 @@
 								tag="span"
 								place="album"
 								class="clickable"
-								:to="{ name: 'Tracklist', params: { type: 'album', id: data.album.id } }"
+								:to="{ name: 'Album', params: { id: data.album.id } }"
 							>
 								{{ data.album.title }}
 							</router-link>
@@ -121,7 +121,7 @@
 			</table>
 
 			<div v-if="type == 'album'">
-				<router-link tag="button" :to="{ name: 'Tracklist', params: { type: 'album', id } }">
+				<router-link tag="button" :to="{ name: 'Album', params: { id } }">
 					{{ $t('linkAnalyzer.table.tracklist') }}
 				</router-link>
 			</div>

src/components/pages/Search.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
 import ResultsAll from '@components/search/ResultsAll.vue'
 import ResultsAlbums from '@components/search/ResultsAlbums.vue'
 import ResultsArtists from '@components/search/ResultsArtists.vue'

src/components/pages/Settings.vue

@@ -188,7 +188,7 @@
 
 			<div class="input_group">
 				<p class="input_group_text">{{ $t('settings.downloads.queueConcurrency') }}</p>
-				<input type="number" v-model.number="settings.queueConcurrency" />
+				<input type="number" min="1" v-model.number="settings.queueConcurrency" />
 			</div>
 
 			<div class="input_group">

src/components/pages/Tracklist.vue

@@ -75,7 +75,7 @@
 								tag="td"
 								v-if="type === 'playlist'"
 								class="table__cell--medium table__cell--center clickable"
-								:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
+								:to="{ name: 'Album', params: { id: track.album.id } }"
 							>
 								{{ track.album.title }}
 							</router-link>

src/components/search/ResultsAlbums.vue

@@ -5,11 +5,12 @@
 			<h1>{{ $t('search.noResultsAlbum') }}</h1>
 		</div>
 		<div class="release_grid" v-if="results.albumTab.data.length > 0">
-			<div
+			<router-link
+				tag="div"
 				v-for="release in results.albumTab.data"
+				:key="release.id"
 				class="release clickable"
-				@click.stop="$emit('album-view', $event)"
+				:to="{ name: 'Album', params: { id: release.id } }"
-				:data-id="release.id"
 			>
 				<div class="cover_container">
 					<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
@@ -35,13 +36,13 @@
 						$tc('globals.listTabs.trackN', release.nb_tracks)
 					}}
 				</p>
-			</div>
+			</router-link>
 		</div>
 	</div>
 </template>
 
 <script>
-import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
 
 export default {
 	props: ['results'],

src/components/search/ResultsAll.vue

@@ -15,11 +15,11 @@
 					{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
 				</h2>
 				<!-- Top result -->
-				<div
+				<router-link
+					tag="div"
 					v-if="section == 'TOP_RESULT'"
 					class="top_result clickable"
-					@click.stop="$emit(`${topResultType}-view`, $event)"
+					:to="{ name: upperCaseFirstLowerCaseRest(topResultType), params: { id: results.allTab.TOP_RESULT[0].id } }"
-					:data-id="results.allTab.TOP_RESULT[0].id"
 				>
 					<div class="cover_container">
 						<img
@@ -45,11 +45,11 @@
 						</p>
 						<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1) }}</span>
 					</div>
-				</div>
+				</router-link>
 				<div v-else-if="section == 'TRACK'">
 					<table class="table table--tracks">
 						<tbody>
-							<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
+							<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" :key="track.SNG_ID">
 								<td class="table__icon" aria-hidden="true">
 									<img
 										class="rounded coverart"
@@ -65,23 +65,26 @@
 									</div>
 								</td>
 								<td class="table__cell table__cell--medium table__cell--center breakline">
-									<span
+									<router-link
-										class="clickable"
+										tag="span"
-										@click.stop="$emit('artist-view', $event)"
-										:data-id="artist.ART_ID"
 										v-for="artist in track.ARTISTS"
 										:key="artist.ART_ID"
+										class="clickable"
+										:to="{
+											name: 'Artist',
+											params: { id: artist.ART_ID }
+										}"
 									>
 										{{ artist.ART_NAME }}
-									</span>
+									</router-link>
 								</td>
-								<td
+								<router-link
+									tag="td"
 									class="table__cell--medium table__cell--center breakline clickable"
-									@click.stop="$emit('album-view', $event)"
+									:to="{ name: 'Album', params: { id: track.ALB_ID } }"
-									:data-id="track.ALB_ID"
 								>
 									{{ track.ALB_TITLE }}
-								</td>
+								</router-link>
 								<td class="table__cell table__cell--center">
 									{{ convertDuration(track.DURATION) }}
 								</td>
@@ -99,11 +102,12 @@
 					</table>
 				</div>
 				<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
-					<div
+					<router-link
+						tag="div"
 						v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
 						class="release clickable"
-						@click.stop="$emit('artist-view', $event)"
+						:key="release.ART_ID"
-						:data-id="release.ART_ID"
+						:to="{ name: 'Artist', params: { id: release.ART_ID } }"
 					>
 						<div class="cover_container">
 							<img
@@ -126,14 +130,15 @@
 						</div>
 						<p class="primary-text">{{ release.ART_NAME }}</p>
 						<p class="secondary-text">{{ $t('search.fans', { n: $n(release.NB_FAN) }) }}</p>
-					</div>
+					</router-link>
 				</div>
 				<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
-					<div
+					<router-link
+						tag="div"
 						v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
+						:key="release.ALB_ID"
 						class="release clickable"
-						@click.stop="$emit('album-view', $event)"
+						:to="{ name: 'Album', params: { id: release.ALB_ID } }"
-						:data-id="release.ALB_ID"
 					>
 						<div class="cover_container">
 							<img
@@ -165,14 +170,15 @@
 						<p class="secondary-text">
 							{{ release.ART_NAME + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}
 						</p>
-					</div>
+					</router-link>
 				</div>
 				<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
-					<div
+					<router-link
+						tag="div"
 						v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
 						class="release clickable"
-						@click.stop="$emit('playlist-view', $event)"
+						:key="release.PLAYLIST_ID"
-						:data-id="release.PLAYLIST_ID"
+						:to="{ name: 'Playlist', params: { id: release.PLAYLIST_ID } }"
 					>
 						<div class="cover_container">
 							<img
@@ -199,7 +205,7 @@
 						</div>
 						<p class="primary-text">{{ release.TITLE }}</p>
 						<p class="secondary-text">{{ $tc('globals.listTabs.trackN', release.NB_SONG) }}</p>
-					</div>
+					</router-link>
 				</div>
 			</section>
 		</template>
@@ -210,6 +216,7 @@
 </template>
 <script>
 import { convertDuration } from '@/utils/utils'
+import { upperCaseFirstLowerCaseRest } from '@/utils/texts'
 
 export default {
 	props: ['results'],
@@ -241,7 +248,8 @@ export default {
 		}
 	},
 	methods: {
-		convertDuration
+		convertDuration,
+		upperCaseFirstLowerCaseRest
 	}
 }
 </script>

src/components/search/ResultsArtists.vue

@@ -1,15 +1,16 @@
 <template>
 	<div id="artist_search" class="search_tabcontent">
-		<base-loading-placeholder v-if="!results.artistTab.loaded"></base-loading-placeholder>
+		<BaseLoadingPlaceholder v-if="!results.artistTab.loaded"></BaseLoadingPlaceholder>
 		<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
+			<router-link
+				tag="div"
 				v-for="release in results.artistTab.data"
 				class="release clickable"
-				@click.stop="$emit('artist-view', $event)"
+				:key="release.id"
-				:data-id="release.id"
+				:to="{ name: 'Artist', params: { id: release.id } }"
 			>
 				<div class="cover_container">
 					<img aria-hidden="true" class="circle coverart" :src="release.picture_medium" />
@@ -26,13 +27,13 @@
 				</div>
 				<p class="primary-text">{{ release.name }}</p>
 				<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.nb_album) }}</p>
-			</div>
+			</router-link>
 		</div>
 	</div>
 </template>
 
 <script>
-import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
 
 export default {
 	props: ['results'],

src/components/search/ResultsPlaylists.vue

@@ -5,11 +5,12 @@
 			<h1>{{ $t('search.noResultsPlaylist') }}</h1>
 		</div>
 		<div class="release_grid" v-if="results.playlistTab.data.length > 0">
-			<div
+			<router-link
+				tag="div"
 				v-for="release in results.playlistTab.data"
 				class="release clickable"
-				@click.stop="$emit('playlist-view', $event)"
+				:key="release.id"
-				:data-id="release.id"
+				:to="{ name: 'Playlist', params: { id: release.id } }"
 			>
 				<div class="cover_container">
 					<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
@@ -30,13 +31,13 @@
 						`${$t('globals.by', { artist: release.user.name })} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
 					}}
 				</p>
-			</div>
+			</router-link>
 		</div>
 	</div>
 </template>
 
 <script>
-import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
 
 export default {
 	props: ['results'],

src/components/search/ResultsTracks.vue

@@ -56,7 +56,7 @@
 					<router-link
 						tag="td"
 						class="table__cell table__cell--medium table__cell--center breakline clickable"
-						:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
+						:to="{ name: 'Album', params: { id: track.album.id } }"
 					>
 						{{ track.album.title }}
 					</router-link>
@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
 
 import EventBus from '@/utils/EventBus'
 import { convertDuration } from '@/utils/utils'

src/router.js

@@ -3,17 +3,17 @@ import VueRouter from 'vue-router'
 import { socket } from '@/utils/socket'
 import EventBus from '@/utils/EventBus'
 
-import ArtistTab from '@components/ArtistTab.vue'
+// Pages
-import TracklistTab from '@components/TracklistTab.vue'
+import About from '@components/pages/About.vue'
-
+import Artist from '@components/pages/Artist.vue'
-import TheHomeTab from '@components/TheHomeTab.vue'
+import Charts from '@components/pages/Charts.vue'
-import TheChartsTab from '@components/TheChartsTab.vue'
+import Errors from '@components/pages/Errors.vue'
-import TheFavoritesTab from '@components/TheFavoritesTab.vue'
+import Favorites from '@components/pages/Favorites.vue'
-import TheErrorsTab from '@components/TheErrorsTab.vue'
+import Home from '@components/pages/Home.vue'
-import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
+import LinkAnalyzer from '@components/pages/LinkAnalyzer.vue'
-import TheAboutTab from '@components/TheAboutTab.vue'
+import Search from '@components/pages/Search.vue'
-import TheSettingsTab from '@components/TheSettingsTab.vue'
+import Settings from '@components/pages/Settings.vue'
-import TheMainSearch from '@components/TheMainSearch.vue'
+import Tracklist from '@components/pages/Tracklist.vue'
 
 Vue.use(VueRouter)
 
@@ -21,7 +21,7 @@ const routes = [
 	{
 		path: '/',
 		name: 'Home',
-		component: TheHomeTab,
+		component: Home,
 		meta: {
 			notKeepAlive: true
 		}
@@ -29,17 +29,32 @@ const routes = [
 	{
 		path: '/tracklist/:type/:id',
 		name: 'Tracklist',
-		component: TracklistTab
+		component: Tracklist
 	},
 	{
 		path: '/artist/:id',
 		name: 'Artist',
-		component: ArtistTab
+		component: Artist
+	},
+	{
+		path: '/album/:id',
+		name: 'Album',
+		component: Tracklist
+	},
+	{
+		path: '/tracklist/:id',
+		name: 'Playlist',
+		component: Tracklist
+	},
+	{
+		path: '/tracklist/:id',
+		name: 'Spotify Playlist',
+		component: Tracklist
 	},
 	{
 		path: '/charts',
 		name: 'Charts',
-		component: TheChartsTab,
+		component: Charts,
 		meta: {
 			notKeepAlive: true
 		}
@@ -47,7 +62,7 @@ const routes = [
 	{
 		path: '/favorites',
 		name: 'Favorites',
-		component: TheFavoritesTab,
+		component: Favorites,
 		meta: {
 			notKeepAlive: true
 		}
@@ -55,32 +70,32 @@ const routes = [
 	{
 		path: '/errors',
 		name: 'Errors',
-		component: TheErrorsTab
+		component: Errors
 	},
 	{
 		path: '/link-analyzer',
 		name: 'Link Analyzer',
-		component: TheLinkAnalyzerTab
+		component: LinkAnalyzer
 	},
 	{
 		path: '/about',
 		name: 'About',
-		component: TheAboutTab
+		component: About
 	},
 	{
 		path: '/settings',
 		name: 'Settings',
-		component: TheSettingsTab
+		component: Settings
 	},
 	{
 		path: '/search',
 		name: 'Search',
-		component: TheMainSearch
+		component: Search
 	},
 	// 404 client side
 	{
 		path: '*',
-		component: TheHomeTab
+		component: Home
 	}
 ]
 
@@ -109,6 +124,24 @@ router.beforeEach((to, from, next) => {
 				id: to.params.id
 			}
 			break
+		case 'Album':
+			getTracklistParams = {
+				type: 'album',
+				id: to.params.id
+			}
+			break
+		case 'Playlist':
+			getTracklistParams = {
+				type: 'playlist',
+				id: to.params.id
+			}
+			break
+		case 'Spotify Playlist':
+			getTracklistParams = {
+				type: 'spotifyplaylist',
+				id: to.params.id
+			}
+			break
 
 		default:
 			break

src/utils/texts.js

@@ -0,0 +1,4 @@
+/**
+ * @param {string}	text
+ */
+export const upperCaseFirstLowerCaseRest = text => text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()