working on move playlist

src/renderer/index.js

@@ -37,10 +37,17 @@ var CiderContextMenu = {
 
         document.body.appendChild(menuBackground);
 
+        if(typeof menudata.items == "object") {
+            menudata.items = Object.values(menudata.items);
+        }
 
         // for each item in menudata create a menu item
         for (var i = 0; i < menudata.items.length; i++) {
             let item = document.createElement("button")
+
+            if(menudata.items[i]["disabled"]) {
+                break
+            }
             item.tabIndex = 0
             item.classList.add("context-menu-item")
             item.innerHTML = menudata.items[i].name
@@ -644,25 +651,6 @@ const app = new Vue({
             }
             CiderContextMenu.Create(event, menu)
         },
-        playlistContextMenu(event, playlist_id) {
-            let menu = {
-                items: [
-                    {
-                        name: "Delete from library",
-                        action: () => {
-                            this.deletePlaylist(playlist_id)
-                        }
-                    },
-                    {
-                        name: "Add to favorites",
-                        action: () => {
-                            this.addFavorite(playlist_id, "library-playlists")
-                        }
-                    }
-                ]
-            }
-            CiderContextMenu.Create(event, menu)
-        },
         async editPlaylist(id, name = "New Playlist") {
             let self = this
             await app.mk.api.library.editPlaylist(id, { name: name }).then(res => {

src/renderer/style.less

@@ -574,6 +574,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   color: white;
   transition: transform .1s;
   text-align: left;
+
+  &.app-sidebar-item-playlist {
+    -webkit-user-drag: element;
+  }
 }
 
 .app-sidebar-item:hover {

src/renderer/views/components/sidebar-playlist.ejs

@@ -1,17 +1,21 @@
 <script type="text/x-template" id="sidebar-playlist">
     <div class="sidebar-playlist">
-        <button class="app-sidebar-item" :key="item.id" v-if="item.type != 'library-playlist-folders'"
+        <button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-if="item.type != 'library-playlist-folders'"
                 :class="{'active': $root.page.includes(item.id)}"
-                @contextmenu="$root.playlistContextMenu($event, item.id)"
+                @contextmenu="playlistContextMenu($event, item.id)"
-                @dragover="()=>{}"
+                @dragstart="startDrag($event, item)"
+                @dragover="dragOver"
+                @drop="onDrop"
                 :href="item.href"
                 @click='$root.appRoute(`playlist_` + item.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
             {{ item.attributes.name }}
         </button>
-        <button class="app-sidebar-item" :key="item.id" v-else
+        <button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-else
                 :class="[{'folder-button-active': folderOpened}, isPlaylistSelected]"
-                @contextmenu="$root.playlistContextMenu($event, item.id)"
+                @contextmenu="playlistContextMenu($event, item.id)"
-                @dragover="()=>{}"
+                @dragstart="startDrag($event, item)"
+                @dragover="dragOver"
+                @drop="onDrop"
                 :href="item.href"
                 @click='getPlaylistChildren(item)'>
             <span v-if="!folderOpened">📁</span>
@@ -41,10 +45,89 @@
         data: function () {
             return {
                 folderOpened: false,
-                children: []
+                children: [],
+                playlistRoot: "p.playlistsroot"
             }
         },
         methods: {
+            move(item, sendTo) {
+                let self = this
+                console.log(item, sendTo)
+                let type = item.type.replace("library-", "")
+                let typeTo = sendTo.type
+                this.$root.mk.api.v3.music(`/v1/me/library/${type}/${item.id}/parent`, {}, {
+                    fetchOptions: {
+                        method: "PUT",
+                        body: JSON.stringify({
+                            data: [{
+                                id: sendTo.id,
+                                type: typeTo
+                            }]
+                        })
+                    }
+                })
+
+
+                setTimeout(()=>{
+                    this.$root.refreshPlaylists()
+                }, 3000)
+            },
+            playlistContextMenu(event, playlist_id) {
+                let menu = {
+                    items: {
+                        "moveToParent": {
+                            name: "Move to top",
+                            action: () => {
+                                this.move(this.item, {
+                                    id: this.playlistRoot,
+                                    type: "library-playlist-folders"
+                                })
+                            }
+                        },
+                        "deleteFromPlaylist": {
+                            name: "Delete from library",
+                            action: () => {
+                                this.$root.deletePlaylist(playlist_id)
+                            }
+                        },
+                        "addToFavorites": {
+                            name: "Add to favorites",
+                            disabled: true,
+                            action: () => {
+                                this.addFavorite(playlist_id, "library-playlists")
+                            }
+                        }
+                    }
+                }
+                if(this.item.type === "library-playlist-folders") {
+                    menu.items.addToFavorites.disabled = true
+                }
+                CiderContextMenu.Create(event, menu)
+            },
+            dragOver(evt) {
+                evt.preventDefault();
+                evt.dataTransfer.dropEffect = "move";
+            },
+            onDrop (evt) {
+                let data = JSON.parse(evt.dataTransfer.getData("text/plain"))
+                evt.preventDefault();
+                if(data.id == this.item.id) {
+                    return;
+                }
+                if(data) {
+                    if(this.item.type == "library-playlists" || this.item.type == "library-playlist-folders") {
+                        if(data.type == "library-playlists" && this.item.type == "library-playlists") {
+                            return
+                        }
+                        this.move(data, this.item)
+                    }
+                }
+            },
+            startDrag (evt) {
+                evt.dataTransfer.dropEffect = 'move'
+                evt.dataTransfer.effectAllowed = 'move'
+                evt.dataTransfer.setData('text/plain', JSON.stringify(this.item))
+            },
             getPlaylistChildren(item) {
                 let self = this
                 this.toggleFolder()