From 6886e2668bbb184be5210a53dd5e7975cbde8aa2 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Fri, 31 Jul 2020 20:01:16 +0200
Subject: [PATCH] playlist: change to tile layout

---
 src/playlist/PlaylistList.vue | 38 +++++++++--------------------------
 src/shared/api.ts             |  1 +
 2 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/src/playlist/PlaylistList.vue b/src/playlist/PlaylistList.vue
index 47ba7ea..dff60a4 100644
--- a/src/playlist/PlaylistList.vue
+++ b/src/playlist/PlaylistList.vue
@@ -1,32 +1,14 @@
 <template>
-  <div>
-    <b-table-simple>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Created</th>
-        <th>Updated</th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(item, index) in playlists" :key="item.id">
-        <td>
-          <router-link :to="{name: 'playlist', params: { id: item.id } }">
-            {{ item.name }}
-          </router-link>
-        </td>
-        <td>{{ item.created | dateTime }}</td>
-        <td>{{ item.changed | dateTime }}</td>
-        <td class="text-right">
-          <OverflowMenu>
-            <b-dropdown-item-btn @click="deletePlaylist(item.id)">Delete</b-dropdown-item-btn>
-          </OverflowMenu>
-        </td>
-      </tr>
-    </tbody>
-    </b-table-simple>
-  </div>
+  <Tiles square>
+    <Tile v-for="item in playlists" :key="item.id"
+      :image="item.image"
+      :to="{name: 'playlist', params: { id: item.id } }"
+      :title="item.name">
+      <template v-slot:text>
+        <strong>{{ item.songCount }}</strong> songs
+      </template>
+    </Tile>
+  </Tiles>
 </template>
 <script lang="ts">
   import Vue from "vue";
diff --git a/src/shared/api.ts b/src/shared/api.ts
index c4bbc97..f674964 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -139,6 +139,7 @@ export class API {
     return response.playlists.playlist.map((playlist: any) => ({
       ...playlist,
       name: playlist.name || "(Unnamed)",
+      image: playlist.songCount > 0 ? this.getCoverArtUrl(playlist) : undefined,
     }));
   }