Update:Playlist edit modal

client/components/app/LazyBookshelf.vue

@@ -220,6 +220,8 @@ export default {
         this.$store.commit('showEditModal', entity)
       } else if (this.entityName === 'collections') {
         this.$store.commit('globals/setEditCollection', entity)
+      } else if (this.entityName === 'playlists') {
+        this.$store.commit('globals/setEditPlaylist', entity)
       }
     },
     clearSelectedEntities() {

client/components/modals/playlists/EditModal.vue

@@ -0,0 +1,128 @@
+<template>
+  <modals-modal v-model="show" name="edit-playlist" :width="700" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ $strings.HeaderPlaylist }}</p>
+      </div>
+    </template>
+    <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <form @submit.prevent="submitForm">
+        <div class="flex">
+          <div>
+            <covers-playlist-cover :items="items" :width="200" :height="100 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+          </div>
+          <div class="flex-grow px-4">
+            <ui-text-input-with-label v-model="newPlaylistName" :label="$strings.LabelName" class="mb-2" />
+
+            <ui-textarea-with-label v-model="newPlaylistDescription" :label="$strings.LabelDescription" />
+          </div>
+        </div>
+        <div class="absolute bottom-0 left-0 right-0 w-full py-2 px-4 flex">
+          <ui-btn v-if="userCanDelete" small color="error" type="button" @click.stop="removeClick">{{ $strings.ButtonRemove }}</ui-btn>
+          <div class="flex-grow" />
+          <ui-btn color="success" type="submit">{{ $strings.ButtonSave }}</ui-btn>
+        </div>
+      </form>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false,
+      newPlaylistName: null,
+      newPlaylistDescription: null,
+      showImageUploader: false
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showEditPlaylistModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowEditPlaylistModal', val)
+      }
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    playlist() {
+      return this.$store.state.globals.selectedPlaylist || {}
+    },
+    playlistName() {
+      return this.playlist.name
+    },
+    items() {
+      return this.playlist.items || []
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    }
+  },
+  methods: {
+    init() {
+      this.newPlaylistName = this.playlistName
+      this.newPlaylistDescription = this.playlist.description || ''
+    },
+    removeClick() {
+      if (confirm(this.$getString('MessageConfirmRemovePlaylist', [this.playlistName]))) {
+        this.processing = true
+        this.$axios
+          .$delete(`/api/playlists/${this.playlist.id}`)
+          .then(() => {
+            this.processing = false
+            this.show = false
+            this.$toast.success(this.$strings.ToastPlaylistRemoveSuccess)
+          })
+          .catch((error) => {
+            console.error('Failed to remove playlist', error)
+            this.processing = false
+            this.$toast.error(this.$strings.ToastPlaylistRemoveFailed)
+          })
+      }
+    },
+    submitForm() {
+      if (this.newPlaylistName === this.playlistName && this.newPlaylistDescription === this.playlist.description) {
+        return
+      }
+      if (!this.newPlaylistName) {
+        return this.$toast.error('Playlist must have a name')
+      }
+
+      this.processing = true
+
+      var playlistUpdate = {
+        name: this.newPlaylistName,
+        description: this.newPlaylistDescription || null
+      }
+      this.$axios
+        .$patch(`/api/playlists/${this.playlist.id}`, playlistUpdate)
+        .then((playlist) => {
+          console.log('Playlist Updated', playlist)
+          this.processing = false
+          this.show = false
+          this.$toast.success(this.$strings.ToastPlaylistUpdateSuccess)
+        })
+        .catch((error) => {
+          console.error('Failed to update playlist', error)
+          this.processing = false
+          this.$toast.error(this.$strings.ToastPlaylistUpdateFailed)
+        })
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

client/components/tables/PlaylistItemsTable.vue

@@ -45,7 +45,7 @@ export default {
     }
   },
   watch: {
-    books: {
+    items: {
       handler(newVal) {
         this.init()
       }

client/layouts/default.vue

@@ -11,8 +11,9 @@
 
     <modals-item-edit-modal />
     <modals-collections-add-create-modal />
+    <modals-collections-edit-modal />
     <modals-playlists-add-create-modal />
-    <modals-edit-collection-modal />
+    <modals-playlists-edit-modal />
     <modals-podcast-edit-episode />
     <modals-podcast-view-episode />
     <modals-authors-edit-modal />

client/store/globals.js

@@ -5,6 +5,7 @@ export const state = () => ({
   showCollectionsModal: false,
   showEditCollectionModal: false,
   showPlaylistsModal: false,
+  showEditPlaylistModal: false,
   showEditPodcastEpisode: false,
   showViewPodcastEpisodeModal: false,
   showConfirmPrompt: false,
@@ -12,10 +13,11 @@ export const state = () => ({
   showEditAuthorModal: false,
   selectedEpisode: null,
   selectedPlaylistItems: null,
+  selectedPlaylist: null,
   selectedCollection: null,
   selectedAuthor: null,
   isCasting: false, // Actively casting
-  isChromecastInitialized: false, // Script loaded
+  isChromecastInitialized: false, // Script loadeds
   showBatchQuickMatchModal: false,
   dateFormats: [
     {
@@ -84,6 +86,9 @@ export const mutations = {
   setShowPlaylistsModal(state, val) {
     state.showPlaylistsModal = val
   },
+  setShowEditPlaylistModal(state, val) {
+    state.showEditPlaylistModal = val
+  },
   setShowEditPodcastEpisodeModal(state, val) {
     state.showEditPodcastEpisode = val
   },
@@ -101,6 +106,10 @@ export const mutations = {
     state.selectedCollection = collection
     state.showEditCollectionModal = true
   },
+  setEditPlaylist(state, playlist) {
+    state.selectedPlaylist = playlist
+    state.showEditPlaylistModal = true
+  },
   setSelectedEpisode(state, episode) {
     state.selectedEpisode = episode
   },

client/strings/en-us.json

@@ -112,6 +112,7 @@
   "HeaderOtherFiles": "Other Files",
   "HeaderPermissions": "Permissions",
   "HeaderPlayerQueue": "Player Queue",
+  "HeaderPlaylist": "Playlist",
   "HeaderPlaylistItems": "Playlist Items",
   "HeaderPodcastsToAdd": "Podcasts to Add",
   "HeaderPreviewCover": "Preview Cover",
@@ -428,6 +429,7 @@
   "MessageConfirmRemoveCollection": "Are you sure you want to remove collection \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Are you sure you want to remove episode \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Are you sure you want to remove {0} episodes?",
+  "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageDownloadingEpisode": "Downloading episode",
   "MessageDragFilesIntoTrackOrder": "Drag files into correct track order",
   "MessageEmbedFinished": "Embed Finished!",
@@ -557,6 +559,10 @@
   "ToastLibraryScanStarted": "Library scan started",
   "ToastLibraryUpdateFailed": "Failed to update library",
   "ToastLibraryUpdateSuccess": "Library \"{0}\" updated",
+  "ToastPlaylistRemoveFailed": "Failed to remove playlist",
+  "ToastPlaylistRemoveSuccess": "Playlist removed",
+  "ToastPlaylistUpdateFailed": "Failed to update playlist",
+  "ToastPlaylistUpdateSuccess": "Playlist updated",
   "ToastPodcastCreateFailed": "Failed to create podcast",
   "ToastPodcastCreateSuccess": "Podcast created successfully",
   "ToastRemoveItemFromCollectionFailed": "Failed to remove item from collection",