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

feat: replace create playlist prompt with custom modal
This commit is contained in:
Bnyro 2024-02-20 09:45:03 +01:00 committed by GitHub
commit ccddf89fba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 64 additions and 19 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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 = {