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

changes/changelog.d/892.add.placeholder.widget

+Display placeholder on homepage when there are no playlists (#892)

front/src/components/playlists/PlaceholderWidget.vue

+<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>

front/src/components/playlists/Widget.vue

@@ -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) {