141 lines
3.6 KiB
Vue
141 lines
3.6 KiB
Vue
<template>
|
|
<section>
|
|
<div v-if="!thereAreResults">
|
|
<h1>{{ $t('search.noResults') }}</h1>
|
|
</div>
|
|
|
|
<template v-else>
|
|
<section
|
|
v-for="section in viewInfo.ORDER"
|
|
:key="section"
|
|
class="float-none py-5 border-grayscale-500 border-t first:border-t-0"
|
|
>
|
|
<h2
|
|
@click="$emit('change-search-tab', section)"
|
|
class="mb-6 capitalize"
|
|
:class="{
|
|
'text-4xl text-center': section === 'TOP_RESULT',
|
|
'inline-block cursor-pointer text-3xl hover:text-primary transition-colors duration-200 ease-in-out':
|
|
section !== 'TOP_RESULT'
|
|
}"
|
|
>
|
|
{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
|
|
</h2>
|
|
|
|
<TopResult
|
|
v-if="section === 'TOP_RESULT'"
|
|
:info="viewInfo.TOP_RESULT[0]"
|
|
@add-to-queue="$emit('add-to-queue', $event)"
|
|
/>
|
|
|
|
<ResultsTracks
|
|
v-else-if="section === 'TRACK'"
|
|
:viewInfo="reduceSearchResults(viewInfo.TRACK, formatSingleTrack)"
|
|
:itemsToShow="6"
|
|
@add-to-queue="$emit('add-to-queue', $event)"
|
|
/>
|
|
|
|
<ResultsAlbums
|
|
v-else-if="section == 'ALBUM'"
|
|
:viewInfo="reduceSearchResults(viewInfo.ALBUM, formatAlbums)"
|
|
:itemsToShow="6"
|
|
@add-to-queue="$emit('add-to-queue', $event)"
|
|
/>
|
|
|
|
<ResultsPlaylists
|
|
v-else-if="section == 'PLAYLIST'"
|
|
:viewInfo="reduceSearchResults(viewInfo.PLAYLIST, formatPlaylist)"
|
|
:itemsToShow="6"
|
|
@add-to-queue="$emit('add-to-queue', $event)"
|
|
/>
|
|
|
|
<ResultsArtists
|
|
v-else-if="section === 'ARTIST'"
|
|
:viewInfo="reduceSearchResults(viewInfo.ARTIST, formatArtist)"
|
|
:itemsToShow="6"
|
|
@add-to-queue="$emit('add-to-queue', $event)"
|
|
/>
|
|
</section>
|
|
</template>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tag {
|
|
background-color: var(--tag-background);
|
|
border-radius: 2px;
|
|
color: var(--tag-text);
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
padding: 3px 6px;
|
|
text-transform: capitalize;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { convertDuration } from '@/utils/utils'
|
|
import { upperCaseFirstLowerCaseRest } from '@/utils/texts'
|
|
import TopResult from '@/components/search/TopResult.vue'
|
|
import ResultsTracks from '@components/search/ResultsTracks.vue'
|
|
import ResultsAlbums from '@components/search/ResultsAlbums.vue'
|
|
import ResultsArtists from '@components/search/ResultsArtists.vue'
|
|
import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
|
|
|
|
import { reduceSearchResults, formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@/data/search'
|
|
|
|
export default {
|
|
components: {
|
|
TopResult,
|
|
ResultsTracks,
|
|
ResultsAlbums,
|
|
ResultsArtists,
|
|
ResultsPlaylists
|
|
},
|
|
props: {
|
|
viewInfo: {
|
|
type: Object,
|
|
required: false
|
|
}
|
|
},
|
|
computed: {
|
|
thereAreResults() {
|
|
let areInfosLoaded = !!this.viewInfo
|
|
|
|
if (!areInfosLoaded) {
|
|
return false
|
|
}
|
|
|
|
let noResultsPresent = this.viewInfo.ORDER.every(section =>
|
|
section === 'TOP_RESULT' ? this.viewInfo[section].length === 0 : this.viewInfo[section].data.length === 0
|
|
)
|
|
|
|
return !noResultsPresent
|
|
},
|
|
fansNumber() {
|
|
let number
|
|
|
|
try {
|
|
number = this.$n(this.viewInfo.TOP_RESULT[0].nb_fan)
|
|
} catch (error) {
|
|
number = this.$n(this.viewInfo.TOP_RESULT[0].nb_fan, { locale: 'en' })
|
|
}
|
|
|
|
return this.viewInfo.TOP_RESULT[0].type == 'artist'
|
|
? this.$t('search.fans', { n: number })
|
|
: this.$t('globals.by', { artist: this.viewInfo.TOP_RESULT[0].artist }) +
|
|
' - ' +
|
|
this.$tc('globals.listTabs.trackN', this.viewInfo.TOP_RESULT[0].nb_song)
|
|
}
|
|
},
|
|
methods: {
|
|
convertDuration,
|
|
upperCaseFirstLowerCaseRest,
|
|
reduceSearchResults,
|
|
formatSingleTrack,
|
|
formatAlbums,
|
|
formatArtist,
|
|
formatPlaylist
|
|
}
|
|
}
|
|
</script>
|