fix: cannot add/create contact from deal

This commit is contained in:
Shariq Ansari 2025-02-04 12:47:35 +05:30
parent 99e6216904
commit 69f14159cf
2 changed files with 131 additions and 120 deletions

View File

@ -15,40 +15,16 @@
:opened="section.opened" :opened="section.opened"
> >
<template v-if="!preview" #actions> <template v-if="!preview" #actions>
<div v-if="section.name == 'contacts_section'" class="pr-2"> <slot name="actions" v-bind="{ section }">
<Link <Button
value="" v-if="section.showEditButton"
doctype="Contact" variant="ghost"
@change="(e) => addContact(e)" class="w-7 mr-2"
:onCreate=" @click="showSidePanelModal = true"
(value, close) => {
_contact = {
first_name: value,
company_name: deal.data.organization,
}
showContactModal = true
close()
}
"
> >
<template #target="{ togglePopover }"> <EditIcon class="h-4 w-4" />
<Button </Button>
class="h-7 px-3" </slot>
variant="ghost"
icon="plus"
@click="togglePopover()"
/>
</template>
</Link>
</div>
<Button
v-else-if="section.showEditButton"
variant="ghost"
class="w-7 mr-2"
@click="showSidePanelModal = true"
>
<EditIcon class="h-4 w-4" />
</Button>
</template> </template>
<slot v-bind="{ section }"> <slot v-bind="{ section }">
<FadedScrollableDiv <FadedScrollableDiv

View File

@ -125,102 +125,136 @@
:sections="sections.data" :sections="sections.data"
:addContact="addContact" :addContact="addContact"
doctype="CRM Deal" doctype="CRM Deal"
v-slot="{ section }"
@update="updateField" @update="updateField"
@reload="sections.reload" @reload="sections.reload"
> >
<div v-if="section.name == 'contacts_section'" class="contacts-area"> <template #actions="{ section }">
<div <div v-if="section.name == 'contacts_section'" class="pr-2">
v-if="dealContacts?.loading && dealContacts?.data?.length == 0" <Link
class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4" value=""
> doctype="Contact"
<LoadingIndicator class="h-4 w-4" /> @change="(e) => addContact(e)"
<span>{{ __('Loading...') }}</span> :onCreate="
(value, close) => {
_contact = {
first_name: value,
company_name: deal.data.organization,
}
showContactModal = true
close()
}
"
>
<template #target="{ togglePopover }">
<Button
class="h-7 px-3"
variant="ghost"
icon="plus"
@click="togglePopover()"
/>
</template>
</Link>
</div> </div>
</template>
<template #default="{ section }">
<div <div
v-else-if="dealContacts?.data?.length" v-if="section.name == 'contacts_section'"
v-for="(contact, i) in dealContacts.data" class="contacts-area"
:key="contact.name"
> >
<div class="px-2 pb-2.5" :class="[i == 0 ? 'pt-5' : 'pt-2.5']"> <div
<Section :opened="contact.opened"> v-if="dealContacts?.loading && dealContacts?.data?.length == 0"
<template #header="{ opened, toggle }"> class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
<div >
class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7" <LoadingIndicator class="h-4 w-4" />
> <span>{{ __('Loading...') }}</span>
<div
class="flex h-7 items-center gap-2 truncate"
@click="toggle()"
>
<Avatar
:label="contact.full_name"
:image="contact.image"
size="md"
/>
<div class="truncate">
{{ contact.full_name }}
</div>
<Badge
v-if="contact.is_primary"
class="ml-2"
variant="outline"
:label="__('Primary')"
theme="green"
/>
</div>
<div class="flex items-center">
<Dropdown :options="contactOptions(contact)">
<Button
icon="more-horizontal"
class="text-ink-gray-5"
variant="ghost"
/>
</Dropdown>
<Button
variant="ghost"
@click="
router.push({
name: 'Contact',
params: { contactId: contact.name },
})
"
>
<ArrowUpRightIcon class="h-4 w-4" />
</Button>
<Button variant="ghost" @click="toggle()">
<FeatherIcon
name="chevron-right"
class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
:class="{ 'rotate-90': opened }"
/>
</Button>
</div>
</div>
</template>
<div class="flex flex-col gap-1.5 text-base text-ink-gray-8">
<div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
<Email2Icon class="h-4 w-4" />
{{ contact.email }}
</div>
<div class="flex items-center gap-3 p-1 py-1.5">
<PhoneIcon class="h-4 w-4" />
{{ contact.mobile_no }}
</div>
</div>
</Section>
</div> </div>
<div <div
v-if="i != dealContacts.data.length - 1" v-else-if="dealContacts?.data?.length"
class="mx-2 h-px border-t border-outline-gray-modals" v-for="(contact, i) in dealContacts.data"
/> :key="contact.name"
>
<div class="px-2 pb-2.5" :class="[i == 0 ? 'pt-5' : 'pt-2.5']">
<Section :opened="contact.opened">
<template #header="{ opened, toggle }">
<div
class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
>
<div
class="flex h-7 items-center gap-2 truncate"
@click="toggle()"
>
<Avatar
:label="contact.full_name"
:image="contact.image"
size="md"
/>
<div class="truncate">
{{ contact.full_name }}
</div>
<Badge
v-if="contact.is_primary"
class="ml-2"
variant="outline"
:label="__('Primary')"
theme="green"
/>
</div>
<div class="flex items-center">
<Dropdown :options="contactOptions(contact)">
<Button
icon="more-horizontal"
class="text-ink-gray-5"
variant="ghost"
/>
</Dropdown>
<Button
variant="ghost"
@click="
router.push({
name: 'Contact',
params: { contactId: contact.name },
})
"
>
<ArrowUpRightIcon class="h-4 w-4" />
</Button>
<Button variant="ghost" @click="toggle()">
<FeatherIcon
name="chevron-right"
class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
:class="{ 'rotate-90': opened }"
/>
</Button>
</div>
</div>
</template>
<div
class="flex flex-col gap-1.5 text-base text-ink-gray-8"
>
<div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
<Email2Icon class="h-4 w-4" />
{{ contact.email }}
</div>
<div class="flex items-center gap-3 p-1 py-1.5">
<PhoneIcon class="h-4 w-4" />
{{ contact.mobile_no }}
</div>
</div>
</Section>
</div>
<div
v-if="i != dealContacts.data.length - 1"
class="mx-2 h-px border-t border-outline-gray-modals"
/>
</div>
<div
v-else
class="flex h-20 items-center justify-center text-base text-ink-gray-5"
>
{{ __('No contacts added') }}
</div>
</div> </div>
<div </template>
v-else
class="flex h-20 items-center justify-center text-base text-ink-gray-5"
>
{{ __('No contacts added') }}
</div>
</div>
</SidePanelLayout> </SidePanelLayout>
</div> </div>
</Resizer> </Resizer>
@ -278,6 +312,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
import AssignTo from '@/components/AssignTo.vue' import AssignTo from '@/components/AssignTo.vue'
import FilesUploader from '@/components/FilesUploader/FilesUploader.vue' import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
import ContactModal from '@/components/Modals/ContactModal.vue' import ContactModal from '@/components/Modals/ContactModal.vue'
import Link from '@/components/Controls/Link.vue'
import Section from '@/components/Section.vue' import Section from '@/components/Section.vue'
import SidePanelLayout from '@/components/SidePanelLayout.vue' import SidePanelLayout from '@/components/SidePanelLayout.vue'
import SLASection from '@/components/SLASection.vue' import SLASection from '@/components/SLASection.vue'