From 6a6081a3206065e1f4ee6900c99e0c3b62e149be Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 11 Dec 2023 16:50:15 +0530
Subject: [PATCH] fix: converted user autocomplete to Link Component also fixed
 new user loading

---
 frontend/src/components/Controls/Link.vue     |  4 ++++
 frontend/src/components/NewDeal.vue           | 20 ++++++++++++++++++
 frontend/src/components/NewLead.vue           | 21 ++++++++++++-------
 .../src/components/frappe-ui/Autocomplete.vue |  7 ++++++-
 frontend/src/stores/users.js                  |  1 +
 5 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 971abc41..d09cd224 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -24,6 +24,10 @@
         <slot name="item-prefix" v-bind="{ active, selected, option }" />
       </template>
 
+      <template #item-label="{ active, selected, option }">
+        <slot name="item-label" v-bind="{ active, selected, option }" />
+      </template>
+
       <template v-if="attrs.onCreate" #footer="{ value, close }">
         <div>
           <Button
diff --git a/frontend/src/components/NewDeal.vue b/frontend/src/components/NewDeal.vue
index 6c662c04..5abf663b 100644
--- a/frontend/src/components/NewDeal.vue
+++ b/frontend/src/components/NewDeal.vue
@@ -30,6 +30,24 @@
             :placeholder="field.placeholder"
             :onCreate="field.create"
           />
+          <Link
+            v-else-if="field.type === 'user'"
+            class="form-control"
+            :value="getUser(newDeal[field.name]).full_name"
+            :doctype="field.doctype"
+            @change="(e) => field.change(e)"
+            :placeholder="field.placeholder"
+          >
+            <template #prefix>
+              <UserAvatar class="mr-2" :user="newDeal[field.name]" size="sm" />
+            </template>
+            <template #item-prefix="{ option }">
+              <UserAvatar class="mr-2" :user="option.value" size="sm" />
+            </template>
+            <template #item-label="{ option }">
+              {{ getUser(option.value).full_name }}
+            </template>
+          </Link>
           <FormControl
             v-else-if="field.type === 'user'"
             type="autocomplete"
@@ -156,6 +174,8 @@ const allFields = [
         name: 'deal_owner',
         type: 'user',
         placeholder: 'Deal Owner',
+        doctype: 'User',
+        change: (data) => (props.newDeal.deal_owner = data),
       },
     ],
   },
diff --git a/frontend/src/components/NewLead.vue b/frontend/src/components/NewLead.vue
index 05ccf6ca..e3e626ef 100644
--- a/frontend/src/components/NewLead.vue
+++ b/frontend/src/components/NewLead.vue
@@ -11,7 +11,9 @@
             v-model="newLead[field.name]"
           >
             <template v-if="field.name == 'status'" #prefix>
-              <IndicatorIcon :class="getLeadStatus(newLead[field.name]).iconColorClass" />
+              <IndicatorIcon
+                :class="getLeadStatus(newLead[field.name]).iconColorClass"
+              />
             </template>
           </FormControl>
           <FormControl
@@ -28,21 +30,24 @@
             :placeholder="field.placeholder"
             :onCreate="field.create"
           />
-          <FormControl
+          <Link
             v-else-if="field.type === 'user'"
-            type="autocomplete"
-            :options="activeAgents"
+            class="form-control"
             :value="getUser(newLead[field.name]).full_name"
-            @change="(option) => (newLead[field.name] = option.email)"
+            :doctype="field.doctype"
+            @change="(e) => field.change(e)"
             :placeholder="field.placeholder"
           >
             <template #prefix>
               <UserAvatar class="mr-2" :user="newLead[field.name]" size="sm" />
             </template>
             <template #item-prefix="{ option }">
-              <UserAvatar class="mr-2" :user="option.email" size="sm" />
+              <UserAvatar class="mr-2" :user="option.value" size="sm" />
             </template>
-          </FormControl>
+            <template #item-label="{ option }">
+              {{ getUser(option.value).full_name }}
+            </template>
+          </Link>
           <FormControl v-else type="text" v-model="newLead[field.name]" />
         </div>
       </div>
@@ -154,6 +159,8 @@ const allFields = [
         name: 'lead_owner',
         type: 'user',
         placeholder: 'Lead Owner',
+        doctype: 'User',
+        change: (data) => (props.newLead.lead_owner = data),
       },
     ],
   },
diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index 3ea95e2d..a28f5f03 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -87,7 +87,12 @@
                       name="item-prefix"
                       v-bind="{ active, selected, option }"
                     />
-                    {{ option.label }}
+                    <slot
+                      name="item-label"
+                      v-bind="{ active, selected, option }"
+                    >
+                      {{ option.label }}
+                    </slot>
                   </li>
                 </ComboboxOption>
               </div>
diff --git a/frontend/src/stores/users.js b/frontend/src/stores/users.js
index 52adfc94..bcec291b 100644
--- a/frontend/src/stores/users.js
+++ b/frontend/src/stores/users.js
@@ -36,6 +36,7 @@ export const usersStore = defineStore('crm-users', () => {
       }
     }
     if (!usersByName[email]) {
+      users.reload()
       usersByName[email] = {
         name: email,
         email: email,