Merge pull request #576 from shariquerik/cannot-add-create-contact
This commit is contained in:
Shariq Ansari
GitHub
commit
5e60cef6bd
@ -15,40 +15,16 @@
|
||||
:opened="section.opened"
|
||||
>
|
||||
<template v-if="!preview" #actions>
|
||||
<div v-if="section.name == 'contacts_section'" class="pr-2">
|
||||
<Link
|
||||
value=""
|
||||
doctype="Contact"
|
||||
@change="(e) => addContact(e)"
|
||||
:onCreate="
|
||||
(value, close) => {
|
||||
_contact = {
|
||||
first_name: value,
|
||||
company_name: deal.data.organization,
|
||||
}
|
||||
showContactModal = true
|
||||
close()
|
||||
}
|
||||
"
|
||||
<slot name="actions" v-bind="{ section }">
|
||||
<Button
|
||||
v-if="section.showEditButton"
|
||||
variant="ghost"
|
||||
class="w-7 mr-2"
|
||||
@click="showSidePanelModal = true"
|
||||
>
|
||||
<template #target="{ togglePopover }">
|
||||
<Button
|
||||
class="h-7 px-3"
|
||||
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>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
</slot>
|
||||
</template>
|
||||
<slot v-bind="{ section }">
|
||||
<FadedScrollableDiv
|
||||
|
||||
@ -125,102 +125,136 @@
|
||||
:sections="sections.data"
|
||||
:addContact="addContact"
|
||||
doctype="CRM Deal"
|
||||
v-slot="{ section }"
|
||||
@update="updateField"
|
||||
@reload="sections.reload"
|
||||
>
|
||||
<div v-if="section.name == 'contacts_section'" class="contacts-area">
|
||||
<div
|
||||
v-if="dealContacts?.loading && dealContacts?.data?.length == 0"
|
||||
class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
|
||||
>
|
||||
<LoadingIndicator class="h-4 w-4" />
|
||||
<span>{{ __('Loading...') }}</span>
|
||||
<template #actions="{ section }">
|
||||
<div v-if="section.name == 'contacts_section'" class="pr-2">
|
||||
<Link
|
||||
value=""
|
||||
doctype="Contact"
|
||||
@change="(e) => addContact(e)"
|
||||
: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>
|
||||
</template>
|
||||
<template #default="{ section }">
|
||||
<div
|
||||
v-else-if="dealContacts?.data?.length"
|
||||
v-for="(contact, i) in dealContacts.data"
|
||||
:key="contact.name"
|
||||
v-if="section.name == 'contacts_section'"
|
||||
class="contacts-area"
|
||||
>
|
||||
<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
|
||||
v-if="dealContacts?.loading && dealContacts?.data?.length == 0"
|
||||
class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
|
||||
>
|
||||
<LoadingIndicator class="h-4 w-4" />
|
||||
<span>{{ __('Loading...') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="i != dealContacts.data.length - 1"
|
||||
class="mx-2 h-px border-t border-outline-gray-modals"
|
||||
/>
|
||||
v-else-if="dealContacts?.data?.length"
|
||||
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
|
||||
v-else
|
||||
class="flex h-20 items-center justify-center text-base text-ink-gray-5"
|
||||
>
|
||||
{{ __('No contacts added') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</SidePanelLayout>
|
||||
</div>
|
||||
</Resizer>
|
||||
@ -278,6 +312,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
|
||||
import AssignTo from '@/components/AssignTo.vue'
|
||||
import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
|
||||
import ContactModal from '@/components/Modals/ContactModal.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import Section from '@/components/Section.vue'
|
||||
import SidePanelLayout from '@/components/SidePanelLayout.vue'
|
||||
import SLASection from '@/components/SLASection.vue'
|
||||
|
||||
@ -65,112 +65,141 @@
|
||||
v-model="deal.data"
|
||||
:sections="sections.data"
|
||||
doctype="CRM Deal"
|
||||
v-slot="{ section }"
|
||||
@update="updateField"
|
||||
@reload="sections.reload"
|
||||
>
|
||||
<div
|
||||
v-if="section.name == 'contacts_section'"
|
||||
class="contacts-area"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
dealContacts?.loading && dealContacts?.data?.length == 0
|
||||
"
|
||||
class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
|
||||
>
|
||||
<LoadingIndicator class="h-4 w-4" />
|
||||
<span>{{ __('Loading...') }}</span>
|
||||
<template #actions="{ section }">
|
||||
<div v-if="section.name == 'contacts_section'" class="pr-2">
|
||||
<Link
|
||||
value=""
|
||||
doctype="Contact"
|
||||
@change="(e) => addContact(e)"
|
||||
: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>
|
||||
</template>
|
||||
<template #default="{ section }">
|
||||
<div
|
||||
v-else-if="section.contacts.length"
|
||||
v-for="(contact, i) in section.contacts"
|
||||
:key="contact.name"
|
||||
v-if="section.name == 'contacts_section'"
|
||||
class="contacts-area"
|
||||
>
|
||||
<div
|
||||
class="px-2 pb-2.5"
|
||||
:class="[i == 0 ? 'pt-5' : 'pt-2.5']"
|
||||
v-if="
|
||||
dealContacts?.loading && dealContacts?.data?.length == 0
|
||||
"
|
||||
class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
|
||||
>
|
||||
<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.name)">
|
||||
<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>
|
||||
<LoadingIndicator class="h-4 w-4" />
|
||||
<span>{{ __('Loading...') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="i != section.contacts.length - 1"
|
||||
class="mx-2 h-px border-t border-outline-gray-modals"
|
||||
/>
|
||||
v-else-if="section.contacts.length"
|
||||
v-for="(contact, i) in section.contacts"
|
||||
: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.name)">
|
||||
<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 != section.contacts.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
|
||||
v-else
|
||||
class="flex h-20 items-center justify-center text-base text-ink-gray-5"
|
||||
>
|
||||
{{ __('No contacts added') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</SidePanelLayout>
|
||||
</div>
|
||||
</div>
|
||||
@ -224,6 +253,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
|
||||
import AssignTo from '@/components/AssignTo.vue'
|
||||
import ContactModal from '@/components/Modals/ContactModal.vue'
|
||||
import Section from '@/components/Section.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import SidePanelLayout from '@/components/SidePanelLayout.vue'
|
||||
import SLASection from '@/components/SLASection.vue'
|
||||
import CustomActions from '@/components/CustomActions.vue'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user