Commit 6628b6d0 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Merge branch '892-add-placeholder-widget' into 'develop'

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

Closes #892

See merge request funkwhale/funkwhale!850
parents d833fba7 c8467faf
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