Merge pull request #3412 from Bnyro/replace-create-playlist-modal

feat: replace create playlist prompt with custom modal

src/components/CreatePlaylistModal.vue

@@ -0,0 +1,41 @@
+<template>
+    <ModalComponent @close="$emit('close')">
+        <div class="flex flex-col">
+            <h2 v-t="'actions.create_playlist'" />
+            <input type="text" class="input mt-2" v-model="playlistName" />
+            <div class="flex mt-3 ml-auto w-min">
+                <button class="btn" v-t="'actions.cancel'" @click="$emit('close')" />
+                <button class="btn ml-2" v-t="'actions.okay'" @click="onCreatePlaylist" />
+            </div>
+        </div>
+    </ModalComponent>
+</template>
+
+<script>
+import ModalComponent from "./ModalComponent.vue";
+
+export default {
+    components: {
+        ModalComponent,
+    },
+    emits: ["created", "close"],
+    data() {
+        return {
+            playlistName: "",
+        };
+    },
+    methods: {
+        onCreatePlaylist() {
+            if (!this.playlistName) return;
+
+            this.createPlaylist(this.playlistName).then(response => {
+                if (response.error) alert(response.error);
+                else {
+                    this.$emit("created");
+                    this.$emit("close");
+                }
+            });
+        },
+    },
+};
+</script>

src/components/PlaylistAddModal.vue

@@ -5,7 +5,12 @@
             <option v-for="playlist in playlists" :key="playlist.id" :value="playlist.id" v-text="playlist.name" />
         </select>
         <div class="mt-3 w-full flex justify-between">
-            <button ref="addButton" v-t="'actions.create_playlist'" class="btn" @click="onCreatePlaylist" />
+            <button
+                ref="addButton"
+                v-t="'actions.create_playlist'"
+                class="btn"
+                @click="showCreatePlaylistModal = true"
+            />
             <button
                 ref="addButton"
                 v-t="'actions.add_to_playlist'"
@@ -14,14 +19,21 @@
             />
         </div>
     </ModalComponent>
+    <CreatePlaylistModal
+        v-if="showCreatePlaylistModal"
+        @close="showCreatePlaylistModal = false"
+        @created="fetchPlaylists"
+    />
 </template>
 
 <script>
 import ModalComponent from "./ModalComponent.vue";
+import CreatePlaylistModal from "./CreatePlaylistModal.vue";
 
 export default {
     components: {
         ModalComponent,
+        CreatePlaylistModal,
     },
     props: {
         videoInfo: {
@@ -39,6 +51,7 @@ export default {
             playlists: [],
             selectedPlaylist: null,
             processing: false,
+            showCreatePlaylistModal: false,
         };
     },
     mounted() {
@@ -79,14 +92,6 @@ export default {
                 this.playlists = json;
             });
         },
-        onCreatePlaylist() {
-            const name = prompt(this.$t("actions.create_playlist"));
-            if (!name) return;
-            this.createPlaylist(name).then(json => {
-                if (json.error) alert(json.error);
-                else this.fetchPlaylists();
-            });
-        },
     },
 };
 </script>

src/components/PlaylistsPage.vue

@@ -2,7 +2,7 @@
     <h2 v-t="'titles.playlists'" class="my-4 font-bold" />
 
     <div class="mb-3 flex justify-between">
-        <button v-t="'actions.create_playlist'" class="btn" @click="onCreatePlaylist" />
+        <button v-t="'actions.create_playlist'" class="btn" @click="showCreatePlaylistModal = true" />
         <div class="flex">
             <button v-if="playlists.length > 0" v-t="'actions.export_to_json'" class="btn" @click="exportPlaylists" />
             <input
@@ -92,14 +92,20 @@
         </router-link>
     </div>
     <br />
+    <CreatePlaylistModal
+        v-if="showCreatePlaylistModal"
+        @close="showCreatePlaylistModal = false"
+        @created="fetchPlaylists"
+    />
 </template>
 
 <script>
 import ConfirmModal from "./ConfirmModal.vue";
 import ModalComponent from "./ModalComponent.vue";
+import CreatePlaylistModal from "./CreatePlaylistModal.vue";
 
 export default {
-    components: { ConfirmModal, ModalComponent },
+    components: { ConfirmModal, ModalComponent, CreatePlaylistModal },
     data() {
         return {
             playlists: [],
@@ -108,6 +114,7 @@ export default {
             playlistToEdit: null,
             newPlaylistName: "",
             newPlaylistDescription: "",
+            showCreatePlaylistModal: false,
         };
     },
     mounted() {
@@ -153,14 +160,6 @@ export default {
             });
             this.playlistToDelete = null;
         },
-        onCreatePlaylist() {
-            const name = prompt(this.$t("actions.create_playlist"));
-            if (!name) return;
-            this.createPlaylist(name).then(json => {
-                if (json.error) alert(json.error);
-                else this.fetchPlaylists();
-            });
-        },
         async exportPlaylists() {
             if (!this.playlists) return;
             let json = {