From c8467faf8aa5585910796a6a09d62751b7d4c115 Mon Sep 17 00:00:00 2001
From: Rodrigo Leite <rodrigo@leite.dev>
Date: Thu, 3 Oct 2019 11:30:02 +0200
Subject: [PATCH] Resolve "Placeholder on the homepage when there are no
 playlist"

---
 changes/changelog.d/892.add.placeholder.widget |  1 +
 .../components/playlists/PlaceholderWidget.vue | 18 ++++++++++++++++++
 front/src/components/playlists/Widget.vue      | 16 ++++++++++++++--
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 changes/changelog.d/892.add.placeholder.widget
 create mode 100644 front/src/components/playlists/PlaceholderWidget.vue

diff --git a/changes/changelog.d/892.add.placeholder.widget b/changes/changelog.d/892.add.placeholder.widget
new file mode 100644
index 000000000..31cf6e5b0
--- /dev/null
+++ b/changes/changelog.d/892.add.placeholder.widget
@@ -0,0 +1 @@
+Display placeholder on homepage when there are no playlists (#892)
diff --git a/front/src/components/playlists/PlaceholderWidget.vue b/front/src/components/playlists/PlaceholderWidget.vue
new file mode 100644
index 000000000..d72ab95fb
--- /dev/null
+++ b/front/src/components/playlists/PlaceholderWidget.vue
@@ -0,0 +1,18 @@
+<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>
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index b018f9731..9cd1c1d16 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/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) {