Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-01-08 00:08:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add:Support for pasting semicolon separated strings in multi select inputs #1198

Browse Source
This commit is contained in:
advplyr 2023-10-06 16:52:12 -05:00
parent b447cf5c1c
commit db9d5c9d43
2 changed files with 56 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/components/ui/MultiSelect.vue
View File

@ -11,7 +11,7 @@
</div>
{{ item }}
</div>
<input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
<input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
</div>
</form>
@ -145,6 +145,31 @@ export default {
this.menu.style.left = boundingBox.x + 'px'
this.menu.style.width = boundingBox.width + 'px'
},
inputPaste(evt) {
setTimeout(() => {
const pastedText = evt.target?.value || ''
console.log('Pasted text=', pastedText)
const pastedItems = [
...new Set(
pastedText
.split(';')
.map((i) => i.trim())
.filter((i) => i)
)
]
// Filter out items already selected
const itemsToAdd = pastedItems.filter((i) => !this.selected.some((_i) => _i.toLowerCase() === i.toLowerCase()))
if (pastedItems.length && !itemsToAdd.length) {
this.textInput = null
this.currentSearch = null
} else {
for (const itemToAdd of itemsToAdd) {
this.insertNewItem(itemToAdd)
}
}
}, 10)
},
inputFocus() {
if (!this.menu) {
this.unmountMountMenu()

31
client/components/ui/MultiSelectQueryInput.vue
View File

@ -14,7 +14,7 @@
<div v-if="showEdit && !disabled" class="rounded-full cursor-pointer w-6 h-6 mx-0.5 bg-bg flex items-center justify-center">
<span class="material-icons text-white hover:text-success pt-px pr-px" style="font-size: 1.1rem" @click.stop="addItem">add</span>
</div>
<input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
<input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
</div>
</form>
@ -112,6 +112,7 @@ export default {
return !!this.selected.find((i) => i.id === itemValue)
},
search() {
if (!this.textInput) return
this.currentSearch = this.textInput
const dataToSearch = this.filterData[this.filterKey] || []
@ -165,6 +166,34 @@ export default {
this.menu.style.left = boundingBox.x + 'px'
this.menu.style.width = boundingBox.width + 'px'
},
inputPaste(evt) {
setTimeout(() => {
const pastedText = evt.target?.value || ''
console.log('Pasted text=', pastedText)
const pastedItems = [
...new Set(
pastedText
.split(';')
.map((i) => i.trim())
.filter((i) => i)
)
]
// Filter out items already selected
const itemsToAdd = pastedItems.filter((i) => !this.selected.some((_i) => _i[this.textKey].toLowerCase() === i.toLowerCase()))
if (pastedItems.length && !itemsToAdd.length) {
this.textInput = null
this.currentSearch = null
} else {
for (const [index, itemToAdd] of itemsToAdd.entries()) {
this.insertNewItem({
id: `new-${Date.now()}-${index}`,
name: itemToAdd
})
}
}
}, 10)
},
inputFocus() {
if (!this.menu) {
this.unmountMountMenu()