add to playlist now has folders

src/renderer/views/components/add-to-playlist.ejs

@@ -1,18 +1,15 @@
 <script type="text/x-template" id="add-to-playlist">
     <template>
-        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
+        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
+             @contextmenu.self="app.resetState()">
             <div class="modal-window">
                 <div class="modal-header">
-                    <div class="modal-title">{{app.getLz('action.addToLibrary')}}</div>
+                    <div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
                     <button class="close-btn" @click="app.resetState()"></button>
                 </div>
                 <div class="modal-content">
-                    <button class="playlist-item" 
+                    <sidebar-playlist :playlist-select="playlistSelect" v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')" :item="item">
-                    :class="{ focused: playlist.id == focused }"
+                    </sidebar-playlist>
-                    @click="addToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlistSorted" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">
-                    <div class="icon"><%- include("../svg/playlist.svg") %></div>
-                    <div class="name">{{ playlist.attributes.name }}</div>
-                </button>
                 </div>
                 <div class="modal-search">
                     <div class="search-input-container" style="width:100%;margin: 16px 0;">
@@ -25,7 +22,7 @@
                                v-model="searchQuery"
                                @input="search()"
                                class="search-input">
-                    </div>                
+                    </div>
                 </div>
             </div>
         </div>
@@ -61,6 +58,11 @@
             })
         },
         methods: {
+            playlistSelect(playlist) {
+                if(playlist.type != "library-playlist-folders") {
+                    this.addToPlaylist(playlist.id)
+                }
+            },
             addToPlaylist(id) {
                 app.addSelectedToPlaylist(id)
             },

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

@@ -7,7 +7,7 @@
                 @dragover="dragOver"
                 @drop="onDrop"
                 :href="item.href"
-                @click='item.type != "library-playlist-folders" ? openPlaylist(item) : getPlaylistChildren(item)'>
+                @click='clickEvent()'>
             <template v-if="!renaming">
                 <div class="sidebar-icon" v-html="icon"></div> {{ item.attributes.name }}
             </template>
@@ -15,7 +15,7 @@
         </button>
         <div class="folder-body" v-if="item.type === 'library-playlist-folders' && folderOpened">
             <template v-if="children.length != 0">
-                <sidebar-playlist v-for="item in children" :item="item" :key="item.id"></sidebar-playlist>
+                <sidebar-playlist v-for="item in children" :playlist-select="playlistSelect" :item="item" :key="item.id"></sidebar-playlist>
             </template>
             <template v-else>
                 <div class="spinner"></div>
@@ -31,6 +31,10 @@
             item: {
                 type: Object,
                 required: true
+            },
+            playlistSelect: {
+                type: Function,
+                required: false
             }
         },
         data: function () {
@@ -50,6 +54,17 @@
             }
         },
         methods: {
+            clickEvent() {
+                if(this.item.type != "library-playlist-folders") {
+                    if(this.playlistSelect) {
+                        this.playlistSelect(this.item)
+                    }else{
+                        this.openPlaylist(this.item)
+                    }
+                }else{
+                    this.getPlaylistChildren(this.item)
+                }
+            },
             rename() {
                 this.renaming = false