fix: converted user autocomplete to Link Component also fixed new user loading

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

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),
       },
     ],
   },

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),
       },
     ],
   },

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>

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,