allow editing playlist name and comment

src/shared/api.ts

@@ -203,6 +203,15 @@ export class API {
     return this.getPlaylists()
   }
 
+  async editPlaylist(playlistId: string, name: string, comment: string) {
+    const params = {
+      playlistId,
+      name,
+      comment,
+    }
+    await this.get('rest/updatePlaylist', params)
+  }
+
   async deletePlaylist(id: string) {
     await this.get('rest/deletePlaylist', { id })
   }

src/shared/components/EditModal.vue

@@ -0,0 +1,44 @@
+<template>
+  <b-modal ok-title="Save" :visible="visible" @ok="confirm" @change="change">
+    <template #modal-title>
+      <slot name="title" :item="copy">
+        {{ title }}
+      </slot>
+    </template>
+    <template v-if="visible">
+      <slot :item="copy" />
+    </template>
+  </b-modal>
+</template>
+<script lang="ts">
+  import Vue from 'vue'
+
+  export default Vue.extend({
+    props: {
+      item: { type: Object, default: null },
+      visible: { type: Boolean, required: true },
+      title: { type: String, default: '' },
+    },
+    data() {
+      return {
+        copy: null,
+      }
+    },
+    watch: {
+      item: {
+        immediate: true,
+        handler(value: any) {
+          this.copy = { ...value }
+        }
+      }
+    },
+    methods: {
+      confirm() {
+        this.$emit('confirm', this.copy)
+      },
+      change() {
+        this.$emit('update:visible', false)
+      },
+    }
+  })
+</script>

src/shared/components/index.ts

@@ -13,6 +13,7 @@ import {
   BFormCheckbox,
   BFormGroup,
   BFormInput,
+  BFormTextarea,
   BModal,
   BOverlay,
   BProgress,
@@ -27,6 +28,7 @@ Vue.component('BSidebar', BSidebar)
 Vue.component('BFormGroup', BFormGroup)
 Vue.component('BFormInput', BFormInput)
 Vue.component('BFormCheckbox', BFormCheckbox)
+Vue.component('BFormTextarea', BFormTextarea)
 Vue.component('BButton', BButton)
 Vue.component('BProgress', BProgress)
 Vue.component('BOverlay', BOverlay)

src/shared/store.ts

@@ -41,6 +41,10 @@ const setupRootModule = (authService: AuthService, api: API): Module<State, any>
       state.playlists = playlists
         .sort((a: any, b: any) => b.changed.localeCompare(a.changed))
     },
+    setPlaylist(state, playlist: any) {
+      const idx = state.playlists.findIndex(x => x.id === playlist.id)
+      state.playlists.splice(idx, 1, playlist)
+    },
     removePlaylist(state, id: string) {
       state.playlists = state.playlists.filter(p => p.id !== id)
     },
@@ -62,6 +66,16 @@ const setupRootModule = (authService: AuthService, api: API): Module<State, any>
         commit('setPlaylists', result)
       })
     },
+    updatePlaylist({ commit, state }, { id, name, comment }) {
+      api.editPlaylist(id, name, comment).then(() => {
+        const playlist = {
+          ...state.playlists.find(x => x.id === id),
+          name,
+          comment,
+        }
+        commit('setPlaylist', playlist)
+      })
+    },
     addTrackToPlaylist({ }, { playlistId, trackId }) {
       api.addToPlaylist(playlistId, trackId)
     },