fix: added MultipleAvatar component to show assignees on lead/deal with dialog

frontend/src/pages/Deal.vue

@@ -31,25 +31,10 @@
       >
         <Button icon="more-horizontal" />
       </Dropdown>
-      <Link
+      <MultipleAvatar
-        class="form-control"
+        v-model="deal.data._assignedTo"
-        :value="getUser(deal.data.deal_owner).full_name"
+        @click="showAssignmentModal = true"
-        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.value" size="sm" />
-        </template>
-        <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
@@ -296,6 +281,12 @@
       afterInsert: (doc) => addContact(doc.name),
     }"
   />
+  <AssignmentModal
+    v-if="deal.data"
+    :doc="deal.data"
+    v-model="showAssignmentModal"
+    v-model:assignees="deal.data._assignedTo"
+  />
 </template>
 <script setup>
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -309,8 +300,9 @@ import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import SuccessIcon from '@/components/Icons/SuccessIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities.vue'
-import UserAvatar from '@/components/UserAvatar.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import Link from '@/components/Controls/Link.vue'
 import Section from '@/components/Section.vue'
@@ -353,10 +345,19 @@ const deal = createResource({
   params: { name: props.dealId },
   cache: ['deal', props.dealId],
   auto: true,
+  onSuccess: (data) => {
+    let assignees = JSON.parse(data._assign) || []
+    data._assignedTo = assignees.map((user) => ({
+      name: user,
+      image: getUser(user).user_image,
+      label: getUser(user).full_name,
+    }))
+  },
 })
 
 const reload = ref(false)
 const showOrganizationModal = ref(false)
+const showAssignmentModal = ref(false)
 const _organization = ref({})
 
 const organization = computed(() => {

frontend/src/pages/Lead.vue

@@ -31,25 +31,10 @@
       >
         <Button icon="more-horizontal" />
       </Dropdown>
-      <Link
+      <MultipleAvatar
-        class="form-control"
+        v-model="lead.data._assignedTo"
-        :value="getUser(lead.data.lead_owner).full_name"
+        @click="showAssignmentModal = true"
-        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.value" size="sm" />
-        </template>
-        <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
@@ -205,6 +190,12 @@
         }),
     }"
   />
+  <AssignmentModal
+    v-if="lead.data"
+    :doc="lead.data"
+    v-model="showAssignmentModal"
+    v-model:assignees="lead.data._assignedTo"
+  />
 </template>
 <script setup>
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -217,12 +208,12 @@ import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import LinkIcon from '@/components/Icons/LinkIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities.vue'
-import UserAvatar from '@/components/UserAvatar.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
+import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import Section from '@/components/Section.vue'
 import SectionFields from '@/components/SectionFields.vue'
 import SLASection from '@/components/SLASection.vue'
-import Link from '@/components/Controls/Link.vue'
 import { openWebsite, createToast } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
@@ -261,10 +252,19 @@ const lead = createResource({
   params: { name: props.leadId },
   cache: ['lead', props.leadId],
   auto: true,
+  onSuccess: (data) => {
+    let assignees = JSON.parse(data._assign) || []
+    data._assignedTo = assignees.map((user) => ({
+      name: user,
+      image: getUser(user).user_image,
+      label: getUser(user).full_name,
+    }))
+  },
 })
 
 const reload = ref(false)
 const showOrganizationModal = ref(false)
+const showAssignmentModal = ref(false)
 const _organization = ref({})
 
 const organization = computed(() => {