TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3475 from AndyRusso/createplaylistmodal-handle-enter

Browse source 
feat: make `CreatePlaylistmodal` handle `Enter` key and auto focus input, `PlaylistAddModal` switches to created playlist
This commit is contained in:
Bnyro 2024-03-22 20:26:04 +01:00 • committed by GitHub
commit 1cc64ad213
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/CreatePlaylistModal.vue
View file

@ -2,7 +2,7 @@
<ModalComponent @close="$emit('close')"> <ModalComponent @close="$emit('close')">
<div class="flex flex-col"> <div class="flex flex-col">
<h2 v-t="'actions.create_playlist'" /> <h2 v-t="'actions.create_playlist'" />
<input v-model="playlistName" type="text" class="input mt-2" /> <input ref="input" v-model="playlistName" type="text" class="input mt-2" />
<div class="ml-auto mt-3 w-min flex"> <div class="ml-auto mt-3 w-min flex">
<button v-t="'actions.cancel'" class="btn" @click="$emit('close')" /> <button v-t="'actions.cancel'" class="btn" @click="$emit('close')" />
<button v-t="'actions.okay'" class="btn ml-2" @click="onCreatePlaylist" /> <button v-t="'actions.okay'" class="btn ml-2" @click="onCreatePlaylist" />
@ -24,14 +24,27 @@ export default {
playlistName: "", playlistName: "",
}; };
}, },
mounted() {
this.$refs.input.focus();
window.addEventListener("keydown", this.handleKeyDown);
},
unmounted() {
window.removeEventListener("keydown", this.handleKeyDown);
},
methods: { methods: {
handleKeyDown(event) {
if (event.code === "Enter") {
this.onCreatePlaylist();
event.preventDefault();
}
},
onCreatePlaylist() { onCreatePlaylist() {
if (!this.playlistName) return; if (!this.playlistName) return;
this.createPlaylist(this.playlistName).then(response => { this.createPlaylist(this.playlistName).then(response => {
if (response.error) alert(response.error); if (response.error) alert(response.error);
else { else {
this.$emit("created"); this.$emit("created", response.playlistId, this.playlistName);
this.$emit("close"); this.$emit("close");
} }
}); });

15
src/components/PlaylistAddModal.vue
View file

@ -22,7 +22,7 @@
<CreatePlaylistModal <CreatePlaylistModal
v-if="showCreatePlaylistModal" v-if="showCreatePlaylistModal"
@close="showCreatePlaylistModal = false" @close="showCreatePlaylistModal = false"
@created="fetchPlaylists" @created="addCreatedPlaylist"
/> />
</template> </template>
@ -55,7 +55,9 @@ export default {
}; };
}, },
mounted() { mounted() {
this.fetchPlaylists(); this.getPlaylists().then(json => {
this.playlists = json;
});
this.selectedPlaylist = this.getPreferenceString("selectedPlaylist" + this.hashCode(this.authApiUrl())); this.selectedPlaylist = this.getPreferenceString("selectedPlaylist" + this.hashCode(this.authApiUrl()));
window.addEventListener("keydown", this.handleKeyDown); window.addEventListener("keydown", this.handleKeyDown);
window.blur(); window.blur();
@ -65,7 +67,7 @@ export default {
}, },
methods: { methods: {
handleKeyDown(event) { handleKeyDown(event) {
if (event.code === "Enter") { if (event.code === "Enter" && !this.showCreatePlaylistModal) {
this.handleClick(this.selectedPlaylist); this.handleClick(this.selectedPlaylist);
event.preventDefault(); event.preventDefault();
} }
@ -87,10 +89,9 @@ export default {
if (json.error) alert(json.error); if (json.error) alert(json.error);
}); });
}, },
async fetchPlaylists() { addCreatedPlaylist(playlistId, playlistName) {
this.getPlaylists().then(json => { this.playlists.push({ id: playlistId, name: playlistName });
this.playlists = json; this.selectedPlaylist = playlistId;
});
}, },
}, },
}; };