Commit c8467faf authored by Rodrigo Leite's avatar Rodrigo Leite Committed by Eliot Berriot
Browse files

Resolve "Placeholder on the homepage when there are no playlist"

parent d833fba7
Display placeholder on homepage when there are no playlists (#892)
<template>
<div class="ui placeholder segment">
<div class="ui icon header">
<i class="pdf file outline icon"></i>
<translate translate-context="Content/Home/Placeholder">
No playlists have been created yet
</translate>
</div>
<button
@click="$store.commit('playlists/chooseTrack', null)"
class="ui primary button"
>
<translate translate-context="Content/Home/CreatePlaylist">
Create Playlist
</translate>
</button>
</div>
</template>
......@@ -9,7 +9,12 @@
<div v-if="isLoading" class="ui inverted active dimmer">
<div class="ui loader"></div>
</div>
<playlist-card v-for="playlist in objects" :key="playlist.id" :playlist="playlist"></playlist-card>
<template v-if="playlistsExist">
<playlist-card v-for="playlist in objects" :key="playlist.id" :playlist="playlist"></playlist-card>
</template>
<template v-else>
<placeholder-widget></placeholder-widget>
</template>
</div>
</template>
......@@ -17,6 +22,7 @@
import _ from '@/lodash'
import axios from 'axios'
import PlaylistCard from '@/components/playlists/Card'
import PlaceholderWidget from '@/components/playlists/PlaceholderWidget'
export default {
props: {
......@@ -24,7 +30,8 @@ export default {
url: {type: String, required: true}
},
components: {
PlaylistCard
PlaylistCard,
PlaceholderWidget
},
data () {
return {
......@@ -39,6 +46,11 @@ export default {
created () {
this.fetchData(this.url)
},
computed: {
playlistsExist: function () {
return this.objects.length > 0
}
},
methods: {
fetchData (url) {
if (!url) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment