fix: added contact email dropdown in multiselectinput using search_link
This commit is contained in:
Shariq Ansari
parent
11b5563fa2
commit
669f26cdf2
@ -11,6 +11,7 @@ def after_install():
|
||||
add_default_lead_statuses()
|
||||
add_default_deal_statuses()
|
||||
add_default_communication_statuses()
|
||||
add_property_setter()
|
||||
frappe.db.commit()
|
||||
|
||||
def add_default_lead_statuses():
|
||||
@ -103,3 +104,13 @@ def add_default_communication_statuses():
|
||||
doc = frappe.new_doc("CRM Communication Status")
|
||||
doc.status = status
|
||||
doc.insert()
|
||||
|
||||
def add_property_setter():
|
||||
if not frappe.db.exists("Property Setter", {"name": "Contact-main-search_fields"}):
|
||||
doc = frappe.new_doc("Property Setter")
|
||||
doc.doctype_or_field = "DocType"
|
||||
doc.doc_type = "Contact"
|
||||
doc.property = "search_fields"
|
||||
doc.property_type = "Data"
|
||||
doc.value = "email_id"
|
||||
doc.insert()
|
||||
@ -19,20 +19,84 @@
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
<TextInput
|
||||
class="min-w-20 flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
|
||||
v-model="currentValue"
|
||||
@keydown.enter.capture.stop="addValue"
|
||||
@keydown.tab.capture.stop="addValue"
|
||||
@keydown.delete.capture.stop="removeLastValue"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<Combobox v-model="selectedValue" nullable>
|
||||
<Popover class="w-full" v-model:show="showOptions">
|
||||
<template #target="{ togglePopover }">
|
||||
<ComboboxInput
|
||||
ref="search"
|
||||
class="search-input form-input w-full border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
|
||||
type="text"
|
||||
:value="query"
|
||||
@change="
|
||||
(e) => {
|
||||
query = e.target.value
|
||||
showOptions = true
|
||||
}
|
||||
"
|
||||
autocomplete="off"
|
||||
@focus="() => togglePopover()"
|
||||
@keydown.delete.capture.stop="removeLastValue"
|
||||
/>
|
||||
</template>
|
||||
<template #body="{ isOpen }">
|
||||
<div v-show="isOpen">
|
||||
<div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
|
||||
<ComboboxOptions
|
||||
class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
|
||||
static
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
:value="option"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'flex cursor-pointer items-center rounded px-2 py-1 text-base',
|
||||
{ 'bg-gray-100': active },
|
||||
]"
|
||||
>
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="option.value"
|
||||
size="lg"
|
||||
/>
|
||||
<div class="flex flex-col gap-1 p-1 text-gray-800">
|
||||
<div class="text-base font-medium">
|
||||
{{ option.label }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
{{ option.value }}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
</ComboboxOptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</Combobox>
|
||||
</div>
|
||||
</div>
|
||||
<ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineModel } from 'vue'
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxInput,
|
||||
ComboboxOptions,
|
||||
ComboboxOption,
|
||||
} from '@headlessui/vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import { contactsStore } from '@/stores/contacts'
|
||||
import { Popover, createResource } from 'frappe-ui'
|
||||
import { ref, defineModel, computed, nextTick } from 'vue'
|
||||
import { watchDebounced } from '@vueuse/core'
|
||||
|
||||
const props = defineProps({
|
||||
validate: {
|
||||
@ -46,16 +110,87 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const values = defineModel()
|
||||
const currentValue = ref('')
|
||||
|
||||
const { getContactByName } = contactsStore()
|
||||
|
||||
const emails = ref([])
|
||||
const search = ref(null)
|
||||
const error = ref(null)
|
||||
const query = ref('')
|
||||
const text = ref('')
|
||||
const showOptions = ref(false)
|
||||
|
||||
const addValue = () => {
|
||||
const selectedValue = computed({
|
||||
get: () => query.value || '',
|
||||
set: (val) => {
|
||||
query.value = ''
|
||||
if (val) {
|
||||
showOptions.value = false
|
||||
}
|
||||
val?.value && addValue(val.value)
|
||||
},
|
||||
})
|
||||
|
||||
watchDebounced(
|
||||
query,
|
||||
(val) => {
|
||||
val = val || ''
|
||||
if (text.value === val) return
|
||||
text.value = val
|
||||
reload(val)
|
||||
},
|
||||
{ debounce: 300, immediate: true }
|
||||
)
|
||||
|
||||
const filterOptions = createResource({
|
||||
url: 'frappe.desk.search.search_link',
|
||||
method: 'POST',
|
||||
cache: [text.value, 'Contact'],
|
||||
params: {
|
||||
txt: text.value,
|
||||
doctype: 'Contact',
|
||||
},
|
||||
transform: (data) => {
|
||||
let allData = data
|
||||
.filter((c) => {
|
||||
return getContactByName(c.value).email_id
|
||||
})
|
||||
.map((option) => {
|
||||
let c = getContactByName(option.value)
|
||||
return {
|
||||
label: c.full_name || c.email_id,
|
||||
value: c.email_id,
|
||||
}
|
||||
})
|
||||
return allData
|
||||
},
|
||||
})
|
||||
|
||||
const options = computed(() => {
|
||||
let searchedContacts = filterOptions.data || []
|
||||
if (!searchedContacts.length && query.value) {
|
||||
searchedContacts.push({
|
||||
label: query.value,
|
||||
value: query.value,
|
||||
})
|
||||
}
|
||||
return searchedContacts
|
||||
})
|
||||
|
||||
function reload(val) {
|
||||
filterOptions.update({
|
||||
params: {
|
||||
txt: val,
|
||||
doctype: 'Contact',
|
||||
},
|
||||
})
|
||||
filterOptions.reload()
|
||||
}
|
||||
|
||||
const addValue = (value) => {
|
||||
error.value = null
|
||||
if (currentValue.value) {
|
||||
const splitValues = currentValue.value.split(',')
|
||||
if (value) {
|
||||
const splitValues = value.split(',')
|
||||
splitValues.forEach((value) => {
|
||||
value = value.trim()
|
||||
if (value) {
|
||||
@ -68,11 +203,11 @@ const addValue = () => {
|
||||
}
|
||||
// add value to values array
|
||||
values.value.push(value)
|
||||
currentValue.value = currentValue.value.replace(value, '')
|
||||
value = value.replace(value, '')
|
||||
}
|
||||
}
|
||||
})
|
||||
!error.value && (currentValue.value = '')
|
||||
!error.value && (value = '')
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,8 +216,21 @@ const removeValue = (value) => {
|
||||
}
|
||||
|
||||
const removeLastValue = () => {
|
||||
if (!currentValue.value) {
|
||||
if (query.value) return
|
||||
|
||||
let emailRef = emails.value[emails.value.length - 1].$el
|
||||
if (document.activeElement === emailRef) {
|
||||
values.value.pop()
|
||||
nextTick(() => {
|
||||
if (values.value.length) {
|
||||
emailRef = emails.value[emails.value.length - 1].$el
|
||||
emailRef.focus()
|
||||
} else {
|
||||
setFocus()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
emailRef.focus()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user