fix: also fixed for mobile view
This commit is contained in:
Shariq Ansari
parent
69f14159cf
commit
82a728e041
@ -65,112 +65,141 @@
|
|||||||
v-model="deal.data"
|
v-model="deal.data"
|
||||||
:sections="sections.data"
|
:sections="sections.data"
|
||||||
doctype="CRM Deal"
|
doctype="CRM Deal"
|
||||||
v-slot="{ section }"
|
|
||||||
@update="updateField"
|
@update="updateField"
|
||||||
@reload="sections.reload"
|
@reload="sections.reload"
|
||||||
>
|
>
|
||||||
<div
|
<template #actions="{ section }">
|
||||||
v-if="section.name == 'contacts_section'"
|
<div v-if="section.name == 'contacts_section'" class="pr-2">
|
||||||
class="contacts-area"
|
<Link
|
||||||
>
|
value=""
|
||||||
<div
|
doctype="Contact"
|
||||||
v-if="
|
@change="(e) => addContact(e)"
|
||||||
dealContacts?.loading && dealContacts?.data?.length == 0
|
:onCreate="
|
||||||
"
|
(value, close) => {
|
||||||
class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
|
_contact = {
|
||||||
>
|
first_name: value,
|
||||||
<LoadingIndicator class="h-4 w-4" />
|
company_name: deal.data.organization,
|
||||||
<span>{{ __('Loading...') }}</span>
|
}
|
||||||
|
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="section.contacts.length"
|
v-if="section.name == 'contacts_section'"
|
||||||
v-for="(contact, i) in section.contacts"
|
class="contacts-area"
|
||||||
:key="contact.name"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="px-2 pb-2.5"
|
v-if="
|
||||||
:class="[i == 0 ? 'pt-5' : 'pt-2.5']"
|
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">
|
<LoadingIndicator class="h-4 w-4" />
|
||||||
<template #header="{ opened, toggle }">
|
<span>{{ __('Loading...') }}</span>
|
||||||
<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>
|
||||||
<div
|
<div
|
||||||
v-if="i != section.contacts.length - 1"
|
v-else-if="section.contacts.length"
|
||||||
class="mx-2 h-px border-t border-outline-gray-modals"
|
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>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
@ -224,6 +253,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
|
|||||||
import AssignTo from '@/components/AssignTo.vue'
|
import AssignTo from '@/components/AssignTo.vue'
|
||||||
import ContactModal from '@/components/Modals/ContactModal.vue'
|
import ContactModal from '@/components/Modals/ContactModal.vue'
|
||||||
import Section from '@/components/Section.vue'
|
import Section from '@/components/Section.vue'
|
||||||
|
import Link from '@/components/Controls/Link.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'
|
||||||
import CustomActions from '@/components/CustomActions.vue'
|
import CustomActions from '@/components/CustomActions.vue'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user