allow editing playlist name and comment

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)