MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-22 11:35:43 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Disable Save button when no playlist name is provided

Browse Source
This commit is contained in:
Alain Nussbaumer 2024-04-20 23:25:58 +02:00
parent ae973f312a
commit 58fbcd7e7a
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web-src/src/components/ModalDialogPlaylistSave.vue
View File

@ -3,10 +3,10 @@
<div v-if="show" class="modal is-active"> <div v-if="show" class="modal is-active">
<div class="modal-background" @click="$emit('close')" /> <div class="modal-background" @click="$emit('close')" />
<div class="modal-content"> <div class="modal-content">
<div class="card"> <form class="card" @submit.prevent="save">
<div class="card-content"> <div class="card-content">
<p class="title is-4" v-text="$t('dialog.playlist.save.title')" /> <p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
<form class="mb-5" @submit.prevent="save">
<div class="field"> <div class="field">
<p class="control has-icons-left"> <p class="control has-icons-left">
<input <input
@ -14,13 +14,15 @@
v-model="playlist_name" v-model="playlist_name"
class="input is-shadowless" class="input is-shadowless"
type="text" type="text"
pattern=".+"
required
:placeholder="$t('dialog.playlist.save.playlist-name')" :placeholder="$t('dialog.playlist.save.playlist-name')"
:disabled="loading" :disabled="loading"
@input="check_name"
/> />
<mdicon class="icon is-left" name="file-music" size="16" /> <mdicon class="icon is-left" name="file-music" size="16" />
</p> </p>
</div> </div>
</form>
</div> </div>
<footer v-if="loading" class="card-footer"> <footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark"> <a class="card-footer-item has-text-dark">
@ -40,6 +42,7 @@
/> />
</a> </a>
<a <a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-background-info has-text-white has-text-weight-bold" class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="save" @click="save"
> >
@ -50,7 +53,7 @@
/> />
</a> </a>
</footer> </footer>
</div> </form>
</div> </div>
<button <button
class="modal-close is-large" class="modal-close is-large"
@ -71,6 +74,7 @@ export default {
data() { data() {
return { return {
disabled: true,
playlist_name: '', playlist_name: '',
loading: false loading: false
} }
@ -89,11 +93,11 @@ export default {
}, },
methods: { methods: {
check_name(event) {
const { validity } = event.target
this.disabled = validity.patternMismatch || validity.valueMissing
},
save() { save() {
if (this.playlist_name.length < 1) {
return
}
this.loading = true this.loading = true
webapi webapi
.queue_save_playlist(this.playlist_name) .queue_save_playlist(this.playlist_name)