Skip to content

Commit

Permalink
Merge pull request #576 from shariquerik/cannot-add-create-contact
Browse files Browse the repository at this point in the history
  • Loading branch information
@shariquerik
shariquerik authored Feb 4, 2025
2 parents 99e6216 + 82a728e commit 5e60cef
Show file tree
Hide file tree
Showing 3 changed files with 242 additions and 201 deletions.
42 changes: 9 additions & 33 deletions frontend/src/components/SidePanelLayout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
195 changes: 115 additions & 80 deletions frontend/src/pages/Deal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
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-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 h-7 items-center gap-2 truncate"
@click="toggle()"
class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
>
<Avatar
:label="contact.full_name"
:image="contact.image"
size="md"
/>
<div class="truncate">
{{ contact.full_name }}
<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>
<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)">
<div class="flex items-center">
<Dropdown :options="contactOptions(contact)">
<Button
icon="more-horizontal"
class="text-ink-gray-5"
variant="ghost"
/>
</Dropdown>
<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>
@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>
</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>
</Section>
</div>
<div
v-if="i != dealContacts.data.length - 1"
class="mx-2 h-px border-t border-outline-gray-modals"
/>
</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') }}
v-else
class="flex h-20 items-center justify-center text-base text-ink-gray-5"
>
{{ __('No contacts added') }}
</div>
</div>
</div>
</template>
</SidePanelLayout>
</div>
</Resizer>
Expand Down Expand Up @@ -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'
Expand Down
Loading

0 comments on commit 5e60cef

Please sign in to comment.