From f0fae040189a489155394038a5d5acdcb0b1c695 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 23:37:17 +0530
Subject: [PATCH] refactor: get link options

---
 frontend/src/components/Controls/Link.vue | 52 +++++++++++++++--------
 frontend/src/pages/Contact.vue            |  2 +-
 frontend/src/pages/Deal.vue               |  2 +-
 frontend/src/pages/Lead.vue               |  2 +-
 4 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 830f36ac..0f79b2b6 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -5,7 +5,7 @@
     </label>
     <Autocomplete
       ref="autocomplete"
-      :options="options"
+      :options="options.data"
       v-model="value"
       :size="attrs.size || 'sm'"
       :variant="attrs.variant"
@@ -31,10 +31,10 @@
 </template>
 
 <script setup>
-import { call } from 'frappe-ui'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import { watchDebounced } from '@vueuse/core'
+import { createResource } from 'frappe-ui'
 import { useAttrs, computed, ref } from 'vue'
-import { computedAsync, watchDebounced } from '@vueuse/core'
 
 const props = defineProps({
   doctype: {
@@ -55,8 +55,12 @@ const valuePropPassed = computed(() => 'value' in attrs)
 
 const value = computed({
   get: () => (valuePropPassed.value ? attrs.value : props.modelValue),
-  set: (val) =>
-    emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value),
+  set: (val) => {
+    return (
+      val?.value &&
+      emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value)
+    )
+  },
 })
 
 const autocomplete = ref(null)
@@ -64,22 +68,36 @@ const text = ref('')
 
 watchDebounced(
   () => autocomplete.value?.query,
-  (val) => (text.value = val),
-  { debounce: 500 }
+  (val) => {
+    if (text.value === val) return
+    text.value = val
+    options.update({
+      params: {
+        txt: val,
+        doctype: props.doctype,
+      },
+    })
+    options.reload()
+  },
+  { debounce: 300, immediate: true }
 )
 
-const options = computedAsync(async () => {
-  let options = await call('frappe.desk.search.search_link', {
+const options = createResource({
+  url: 'frappe.desk.search.search_link',
+  cache: [props.doctype, text.value],
+  method: 'POST',
+  params: {
     txt: text.value,
     doctype: props.doctype,
-  })
-  options = options?.map((option) => {
-    return {
-      label: option.value,
-      value: option.value,
-    }
-  })
-  return options
+  },
+  transform: (data) => {
+    return data.map((option) => {
+      return {
+        label: option.value,
+        value: option.value,
+      }
+    })
+  },
 })
 
 const labelClasses = computed(() => {
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 46363bb0..2d6b9cbb 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -135,7 +135,7 @@
                 :value="contact[field.name]"
                 :doctype="field.doctype"
                 :placeholder="field.placeholder"
-                @change="(e) => e && field.change(e)"
+                @change="(e) => field.change(e)"
               />
               <FormControl
                 v-else
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 0abefb39..5d4089b5 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -118,7 +118,7 @@
                   <Link
                     value=""
                     doctype="Contact"
-                    @change="(e) => e && addContact(e)"
+                    @change="(e) => addContact(e)"
                   >
                     <template #target="{ togglePopover }">
                       <Button
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index e2ed0d2e..eb02c9ea 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -204,7 +204,7 @@
                         :value="lead.data[field.name]"
                         :doctype="field.doctype"
                         :placeholder="field.placeholder"
-                        @change="(e) => e && field.change(e)"
+                        @change="(e) => field.change(e)"
                       >
                         <template
                           v-if="field.create"