fix: replaced all User Autocomplete with Link Component

frappe · Dec 11, 2023 · d41219b · d41219b
1 parent 512783e
commit d41219b
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 63 deletions.
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
@@ -44,19 +44,25 @@
               </template>
             </Button>
           </Dropdown>
-          <Autocomplete
-            :options="activeAgents"
+          <Link
+            class="form-control"
             :value="getUser(_task.assigned_to).full_name"
-            @change="(option) => (_task.assigned_to = option.email)"
+            doctype="User"
+            @change="(option) => (_task.assigned_to = option)"
             placeholder="Assignee"
           >
             <template #prefix>
               <UserAvatar class="mr-2 !h-4 !w-4" :user="_task.assigned_to" />
             </template>
             <template #item-prefix="{ option }">
-              <UserAvatar class="mr-2" :user="option.email" size="sm" />
+              <UserAvatar class="mr-2" :user="option.value" size="sm" />
             </template>
-          </Autocomplete>
+            <template #item-label="{ option }">
+              <Tooltip :text="option.value">
+                {{ getUser(option.value).full_name }}
+              </Tooltip>
+            </template>
+          </Link>
           <DatePicker
             class="datepicker w-36"
             v-model="_task.due_date"
@@ -81,14 +87,15 @@
 import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { activeAgents, taskStatusOptions, taskPriorityOptions } from '@/utils'
+import Link from '@/components/Controls/Link.vue'
+import { taskStatusOptions, taskPriorityOptions } from '@/utils'
 import { usersStore } from '@/stores/users'
 import {
   TextInput,
   TextEditor,
   Dialog,
   Dropdown,
-  Autocomplete,
+  Tooltip,
   DatePicker,
   call,
 } from 'frappe-ui'

diff --git a/frontend/src/components/NewDeal.vue b/frontend/src/components/NewDeal.vue
@@ -45,24 +45,11 @@
               <UserAvatar class="mr-2" :user="option.value" size="sm" />
             </template>
             <template #item-label="{ option }">
-              {{ getUser(option.value).full_name }}
+              <Tooltip :text="option.value">
+                {{ getUser(option.value).full_name }}
+              </Tooltip>
             </template>
           </Link>
-          <FormControl
-            v-else-if="field.type === 'user'"
-            type="autocomplete"
-            :options="activeAgents"
-            :value="getUser(newDeal[field.name]).full_name"
-            @change="(option) => (newDeal[field.name] = option.email)"
-            :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.email" size="sm" />
-            </template>
-          </FormControl>
           <FormControl v-else type="text" v-model="newDeal[field.name]" />
         </div>
       </div>
@@ -85,8 +72,7 @@ import Link from '@/components/Controls/Link.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
-import { activeAgents } from '@/utils'
-import { FormControl, Button, Dropdown, FeatherIcon } from 'frappe-ui'
+import { FormControl, Tooltip } from 'frappe-ui'
 import { ref } from 'vue'
 
 const { getUser } = usersStore()

diff --git a/frontend/src/components/NewLead.vue b/frontend/src/components/NewLead.vue
@@ -45,7 +45,9 @@
               <UserAvatar class="mr-2" :user="option.value" size="sm" />
             </template>
             <template #item-label="{ option }">
-              {{ getUser(option.value).full_name }}
+              <Tooltip :text="option.value">
+                {{ getUser(option.value).full_name }}
+              </Tooltip>
             </template>
           </Link>
           <FormControl v-else type="text" v-model="newLead[field.name]" />
@@ -70,8 +72,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
-import { activeAgents } from '@/utils'
-import { FormControl, Button, Dropdown, FeatherIcon } from 'frappe-ui'
+import { FormControl, Tooltip } from 'frappe-ui'
 import { ref } from 'vue'
 
 const { getUser } = usersStore()

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
@@ -4,20 +4,25 @@
       <Breadcrumbs :items="breadcrumbs" />
     </template>
     <template #right-header>
-      <FormControl
-        type="autocomplete"
-        :options="activeAgents"
+      <Link
+        class="form-control"
         :value="getUser(deal.data.deal_owner).full_name"
-        @change="(option) => updateField('deal_owner', option.email)"
-        placeholder="Deal owner"
+        doctype="User"
+        @change="(option) => updateField('deal_owner', option)"
+        placeholder="Deal Owner"
       >
         <template #prefix>
           <UserAvatar class="mr-2" :user="deal.data.deal_owner" 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 }">
+          <Tooltip :text="option.value">
+            {{ getUser(option.value).full_name }}
+          </Tooltip>
+        </template>
+      </Link>
       <Dropdown :options="statusOptions('deal', updateField)">
         <template #default="{ open }">
           <Button
@@ -344,7 +349,6 @@ import SectionFields from '@/components/SectionFields.vue'
 import {
   openWebsite,
   createToast,
-  activeAgents,
   dateFormat,
   timeAgo,
   formatTime,
@@ -356,7 +360,6 @@ import { statusesStore } from '@/stores/statuses'
 import {
   createResource,
   FeatherIcon,
-  FormControl,
   Dropdown,
   Tooltip,
   Avatar,

diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
@@ -4,20 +4,25 @@
       <Breadcrumbs :items="breadcrumbs" />
     </template>
     <template #right-header>
-      <FormControl
-        type="autocomplete"
-        :options="activeAgents"
+      <Link
+        class="form-control"
         :value="getUser(lead.data.lead_owner).full_name"
-        @change="(option) => updateField('lead_owner', option.email)"
-        placeholder="Lead owner"
+        doctype="User"
+        @change="(option) => updateField('lead_owner', option)"
+        placeholder="Lead Owner"
       >
         <template #prefix>
           <UserAvatar class="mr-2" :user="lead.data.lead_owner" 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 }">
+          <Tooltip :text="option.value">
+            {{ getUser(option.value).full_name }}
+          </Tooltip>
+        </template>
+      </Link>
       <Dropdown :options="statusOptions('lead', updateField)">
         <template #default="{ open }">
           <Button
@@ -247,10 +252,10 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import Section from '@/components/Section.vue'
 import SectionFields from '@/components/SectionFields.vue'
+import Link from '@/components/Controls/Link.vue'
 import {
   openWebsite,
   createToast,
-  activeAgents,
   dateFormat,
   timeAgo,
   formatTime,
@@ -264,7 +269,6 @@ import {
   FileUploader,
   ErrorMessage,
   FeatherIcon,
-  FormControl,
   Dropdown,
   Tooltip,
   Avatar,

diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
@@ -1,6 +1,5 @@
 import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
-import { usersStore } from '@/stores/users'
 import { useDateFormat, useTimeAgo } from '@vueuse/core'
 import { toast } from 'frappe-ui'
 import { h, computed } from 'vue'
@@ -107,19 +106,3 @@ export function formatNumberIntoCurrency(value) {
 export function startCase(str) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
-
-const { users } = usersStore()
-
-export const activeAgents = computed(() => {
-  const nonAgents = ['Administrator', 'admin@example.com', 'Guest']
-  return users.data
-    .filter((user) => !nonAgents.includes(user.name))
-    .sort((a, b) => a.full_name - b.full_name)
-    .map((user) => {
-      return {
-        label: user.full_name,
-        value: user.email,
-        ...user,
-      }
-    })
-})