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
Show stats 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')">
<div class="flex flex-col">
<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">
<button v-t="'actions.cancel'" class="btn" @click="$emit('close')" />
<button v-t="'actions.okay'" class="btn ml-2" @click="onCreatePlaylist" />
@ -24,14 +24,27 @@ export default {
playlistName: "",
};
},
mounted() {
this.$refs.input.focus();
window.addEventListener("keydown", this.handleKeyDown);
},
unmounted() {
window.removeEventListener("keydown", this.handleKeyDown);
},
methods: {
handleKeyDown(event) {
if (event.code === "Enter") {
this.onCreatePlaylist();
event.preventDefault();
}
},
onCreatePlaylist() {
if (!this.playlistName) return;
this.createPlaylist(this.playlistName).then(response => {
if (response.error) alert(response.error);
else {
this.$emit("created");
this.$emit("created", response.playlistId, this.playlistName);
this.$emit("close");
}
});

15
src/components/PlaylistAddModal.vue
View file

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