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

This commit is contained in:
Shariq Ansari 2023-12-27 16:32:27 +05:30
parent ba05d0db40
commit cb9a11cbda
2 changed files with 42 additions and 41 deletions

View File

@ -31,25 +31,10 @@
>
<Button icon="more-horizontal" />
</Dropdown>
<Link
class="form-control"
:value="getUser(deal.data.deal_owner).full_name"
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>
<MultipleAvatar
v-model="deal.data._assignedTo"
@click="showAssignmentModal = true"
/>
<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(() => {

View File

@ -31,25 +31,10 @@
>
<Button icon="more-horizontal" />
</Dropdown>
<Link
class="form-control"
:value="getUser(lead.data.lead_owner).full_name"
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>
<MultipleAvatar
v-model="lead.data._assignedTo"
@click="showAssignmentModal = true"
/>
<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(() => {