workflow: reorganized components' folder structure

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
-						tag="td"
-						class="inline-flex clickable"
-						:to="{ name: 'Tracklist', params: { type: 'album', id: release.id } }"
-					>
+					<router-link tag="td" class="inline-flex clickable" :to="{ name: 'Album', params: { 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 } }"
-					@keyup.enter.native="$router.push({ name: 'Tracklist', params: { type: 'playlist', id: release.id } })"
+					:to="{ name: 'Playlist', params: { 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 } }"
-					@keyup.enter.native="$router.push({ name: 'Tracklist', params: { type: 'album', id: release.id } })"
+					:to="{ name: 'Album', params: { 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)"
-				:data-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" />
@@ -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)"
-					:data-id="results.allTab.TOP_RESULT[0].id"
+					:to="{ name: upperCaseFirstLowerCaseRest(topResultType), params: { 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
-										class="clickable"
-										@click.stop="$emit('artist-view', $event)"
-										:data-id="artist.ART_ID"
+									<router-link
+										tag="span"
 										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)"
-									:data-id="track.ALB_ID"
+									:to="{ name: 'Album', params: { 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)"
-						:data-id="release.ART_ID"
+						:key="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)"
-						:data-id="release.ALB_ID"
+						:to="{ name: 'Album', params: { 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)"
-						:data-id="release.PLAYLIST_ID"
+						:key="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)"
-				:data-id="release.id"
+				:key="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)"
-				:data-id="release.id"
+				:key="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'