From bf320d283beb19a4001c161b824ff989dc27be24 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Fri, 31 Jul 2020 19:59:53 +0200
Subject: [PATCH] playlist: add delete button to details page

---
 src/playlist/Playlist.vue | 17 +++++++++++++++--
 src/style/theme.scss      |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/playlist/Playlist.vue b/src/playlist/Playlist.vue
index 8f97e3f..8baf46d 100644
--- a/src/playlist/Playlist.vue
+++ b/src/playlist/Playlist.vue
@@ -1,6 +1,13 @@
 <template>
   <Spinner :data="playlist" v-slot="{ data }">
-    <h1>{{ data.name }}</h1>
+    <div class="d-flex justify-content-between">
+      <h1>{{ data.name }}</h1>
+      <OverflowMenu>
+        <b-dropdown-item-btn @click="deletePlaylist()" variant="danger">
+          Delete playlist
+        </b-dropdown-item-btn>
+      </OverflowMenu>
+    </div>
     <TrackList :tracks="data.tracks" show-album @remove="remove(index)">
       <template v-slot:context-menu="{index}">
         <b-dropdown-item-button @click="remove(index)">
@@ -13,6 +20,7 @@
 <script lang="ts">
 import Vue from "vue";
 import TrackList from "@/library/TrackList.vue";
+import { mapActions } from 'vuex';
 
 export default Vue.extend({
   components: {
@@ -42,7 +50,12 @@ export default Vue.extend({
       console.log("remove: " + index)
       this.$api.removeFromPlaylist(this.id, index.toString());
       this.playlist.tracks.splice(index, 1);
-    }
+    },
+    deletePlaylist() {
+      this.$store.dispatch("deletePlaylist", this.id).then(() => {
+        this.$router.replace({name: "playlists"})
+      })
+    },
   }
 });
 </script>
diff --git a/src/style/theme.scss b/src/style/theme.scss
index 4e74f07..ebfe171 100644
--- a/src/style/theme.scss
+++ b/src/style/theme.scss
@@ -3,7 +3,7 @@ $theme-elevated: rgb(25, 25, 25);
 $theme-text: #ccc;
 
 $primary: #09f;
-$danger: #e54b4b;
+$danger: #ff4141;
 
 $body-bg: $theme-base;
 $body-color: $theme-text;