extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-12-30 18:48:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix:Edit library modal blur inputs on submit #1427

Browse Source
This commit is contained in:
advplyr 2023-01-31 16:04:30 -06:00
parent d8753aafb9
commit cefc75a4ed
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/components/modals/libraries/EditLibrary.vue
View File

@ -6,7 +6,7 @@
<ui-dropdown v-model="mediaType" :items="mediaTypes" :label="$strings.LabelMediaType" :disabled="!isNew" small @input="changedMediaType" /> <ui-dropdown v-model="mediaType" :items="mediaTypes" :label="$strings.LabelMediaType" :disabled="!isNew" small @input="changedMediaType" />
</div> </div>
<div class="w-full md:flex-grow px-1 py-1 md:py-0"> <div class="w-full md:flex-grow px-1 py-1 md:py-0">
<ui-text-input-with-label v-model="name" :label="$strings.LabelLibraryName" @blur="nameBlurred" /> <ui-text-input-with-label ref="nameInput" v-model="name" :label="$strings.LabelLibraryName" @blur="nameBlurred" />
</div> </div>
<div class="w-1/5 md:w-18 px-1 py-1 md:py-0"> <div class="w-1/5 md:w-18 px-1 py-1 md:py-0">
<ui-media-icon-picker v-model="icon" :label="$strings.LabelIcon" @input="iconChanged" /> <ui-media-icon-picker v-model="icon" :label="$strings.LabelIcon" @input="iconChanged" />
@ -20,12 +20,12 @@
<p class="px-1 text-sm font-semibold">{{ $strings.LabelFolders }}</p> <p class="px-1 text-sm font-semibold">{{ $strings.LabelFolders }}</p>
<div v-for="(folder, index) in folders" :key="index" class="w-full flex items-center py-1 px-2"> <div v-for="(folder, index) in folders" :key="index" class="w-full flex items-center py-1 px-2">
<span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span> <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
<ui-editable-text v-model="folder.fullPath" readonly type="text" class="w-full" /> <ui-editable-text ref="folderInput" v-model="folder.fullPath" readonly type="text" class="w-full" />
<span v-show="folders.length > 1" class="material-icons text-2xl ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span> <span v-show="folders.length > 1" class="material-icons text-2xl ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
</div> </div>
<div class="flex py-1 px-2 items-center w-full"> <div class="flex py-1 px-2 items-center w-full">
<span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span> <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
<ui-editable-text v-model="newFolderPath" :placeholder="$strings.PlaceholderNewFolderPath" type="text" class="w-full" @blur="newFolderInputBlurred" /> <ui-editable-text ref="newFolderInput" v-model="newFolderPath" :placeholder="$strings.PlaceholderNewFolderPath" type="text" class="w-full" @blur="newFolderInputBlurred" />
</div> </div>
<ui-btn class="w-full mt-2" color="primary" @click="browseForFolder">{{ $strings.ButtonBrowseForFolder }}</ui-btn> <ui-btn class="w-full mt-2" color="primary" @click="browseForFolder">{{ $strings.ButtonBrowseForFolder }}</ui-btn>
@ -82,6 +82,19 @@ export default {
} }
}, },
methods: { methods: {
checkBlurExpressionInput() {
if (this.$refs.nameInput) {
this.$refs.nameInput.blur()
}
if (this.$refs.folderInput && this.$refs.folderInput.length) {
this.$refs.folderInput.forEach((input) => {
if (input.blur) input.blur()
})
}
if (this.$refs.newFolderInput) {
this.$refs.newFolderInput.blur()
}
},
browseForFolder() { browseForFolder() {
this.showDirectoryPicker = true this.showDirectoryPicker = true
}, },

4
client/components/modals/libraries/EditModal.vue
View File

@ -144,8 +144,6 @@ export default {
return true return true
}, },
submit() { submit() {
if (!this.validate()) return
// If custom expression input is focused then unfocus it instead of submitting // If custom expression input is focused then unfocus it instead of submitting
if (this.$refs.tabComponent && this.$refs.tabComponent.checkBlurExpressionInput) { if (this.$refs.tabComponent && this.$refs.tabComponent.checkBlurExpressionInput) {
if (this.$refs.tabComponent.checkBlurExpressionInput()) { if (this.$refs.tabComponent.checkBlurExpressionInput()) {
@ -153,6 +151,8 @@ export default {
} }
} }
if (!this.validate()) return
if (this.library) { if (this.library) {
this.submitUpdateLibrary() this.submitUpdateLibrary()
} else { } else {