diff --git a/client/components/ui/MultiSelect.vue b/client/components/ui/MultiSelect.vue index f2c542eb..4fa8e394 100644 --- a/client/components/ui/MultiSelect.vue +++ b/client/components/ui/MultiSelect.vue @@ -11,7 +11,7 @@ {{ item }} - + @@ -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() diff --git a/client/components/ui/MultiSelectQueryInput.vue b/client/components/ui/MultiSelectQueryInput.vue index fb9528ce..c86d3228 100644 --- a/client/components/ui/MultiSelectQueryInput.vue +++ b/client/components/ui/MultiSelectQueryInput.vue @@ -14,7 +14,7 @@
add
- + @@ -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()