frontend for renaming playlists

src/components/PlaylistsPage.vue

@@ -16,7 +16,8 @@
                     v-text="playlist.name"
                 />
             </router-link>
-            <button class="btn h-auto" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
+            <button class="btn h-auto" @click="renamePlaylist(playlist.id)" v-t="'actions.rename_playlist'" />
+            <button class="btn h-auto ml-2" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
         </div>
     </div>
     <br />
@@ -46,6 +47,31 @@ export default {
                 this.playlists = json;
             });
         },
+        renamePlaylist(id) {
+            const newName = prompt(this.$t("actions.new_playlist_name"));
+            if (!newName) return;
+            this.fetchJson(this.authApiUrl() + "/user/playlists/rename", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    playlist: id,
+                    newName: newName,
+                }),
+                headers: {
+                    Authorization: this.getAuthToken(),
+                    "Content-Type": "application/json",
+                },
+            }).then(json => {
+                if (json.error) alert(json.error);
+                else {
+                    this.playlists.forEach((playlist, index) => {
+                        if (playlist.id == id) {
+                            this.playlists[index].name = newName;
+                            return;
+                        }
+                    });
+                }
+            });
+        },
         deletePlaylist(id) {
             if (confirm(this.$t("actions.delete_playlist_confirm")))
                 this.fetchJson(this.authApiUrl() + "/user/playlists/delete", null, {

src/locales/en.json

@@ -97,7 +97,9 @@
         "confirm_reset_preferences": "Are you sure you want to reset your preferences?",
         "backup_preferences": "Backup preferences",
         "restore_preferences": "Restore preferences",
-        "back_to_home": "Back to home"
+        "back_to_home": "Back to home",
+        "rename_playlist": "Rename playlist",
+        "new_playlist_name": "New playlist name"
     },
     "comment": {
         "pinned_by": "Pinned by",