fix: lead/deal details tab breaking in mobile view
This commit is contained in:
Shariq Ansari
parent
3627f48cf4
commit
693c6a1eaf
@ -58,155 +58,115 @@
|
|||||||
@updateField="updateField"
|
@updateField="updateField"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
v-if="fieldsLayout.data"
|
v-if="sections.data"
|
||||||
class="flex flex-1 flex-col justify-between overflow-hidden"
|
class="flex flex-1 flex-col justify-between overflow-hidden"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col overflow-y-auto">
|
<SidePanelLayout
|
||||||
|
v-model="deal.data"
|
||||||
|
:sections="sections.data"
|
||||||
|
doctype="CRM Deal"
|
||||||
|
v-slot="{ section }"
|
||||||
|
@update="updateField"
|
||||||
|
@reload="sections.reload"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
v-for="(section, i) in fieldsLayout.data"
|
v-if="section.name == 'contacts_section'"
|
||||||
:key="section.name"
|
class="contacts-area"
|
||||||
class="flex flex-col px-2 py-3 sm:p-3"
|
|
||||||
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
|
|
||||||
>
|
>
|
||||||
<Section :label="section.label" :opened="section.opened">
|
<div
|
||||||
<template #actions>
|
v-if="dealContacts?.loading && dealContacts?.data?.length == 0"
|
||||||
<div v-if="section.contacts" class="pr-2">
|
class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
|
||||||
<Link
|
>
|
||||||
value=""
|
<LoadingIndicator class="h-4 w-4" />
|
||||||
doctype="Contact"
|
<span>{{ __('Loading...') }}</span>
|
||||||
@change="(e) => addContact(e)"
|
</div>
|
||||||
:onCreate="
|
<div
|
||||||
(value, close) => {
|
v-else-if="section.contacts.length"
|
||||||
_contact = {
|
v-for="(contact, i) in section.contacts"
|
||||||
first_name: value,
|
:key="contact.name"
|
||||||
company_name: deal.data.organization,
|
>
|
||||||
}
|
<div class="px-2 pb-2.5" :class="[i == 0 ? 'pt-5' : 'pt-2.5']">
|
||||||
showContactModal = true
|
<Section :opened="contact.opened">
|
||||||
close()
|
<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"
|
||||||
>
|
>
|
||||||
<template #target="{ togglePopover }">
|
|
||||||
<Button
|
|
||||||
class="h-7 px-3"
|
|
||||||
variant="ghost"
|
|
||||||
icon="plus"
|
|
||||||
@click="togglePopover()"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<SidePanelLayout
|
|
||||||
v-if="section.columns?.[0].fields"
|
|
||||||
:fields="section.columns[0].fields"
|
|
||||||
:isLastSection="i == fieldsLayout.data.length - 1"
|
|
||||||
doctype="CRM Deal"
|
|
||||||
v-model="deal.data"
|
|
||||||
@update="updateField"
|
|
||||||
/>
|
|
||||||
<div v-else>
|
|
||||||
<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="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
|
<div
|
||||||
class="flex flex-col gap-1.5 text-base text-ink-gray-8"
|
class="flex h-7 items-center gap-2 truncate"
|
||||||
|
@click="toggle()"
|
||||||
>
|
>
|
||||||
<div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
|
<Avatar
|
||||||
<Email2Icon class="h-4 w-4" />
|
:label="contact.full_name"
|
||||||
{{ contact.email }}
|
:image="contact.image"
|
||||||
</div>
|
size="md"
|
||||||
<div class="flex items-center gap-3 p-1 py-1.5">
|
/>
|
||||||
<PhoneIcon class="h-4 w-4" />
|
<div class="truncate">
|
||||||
{{ contact.mobile_no }}
|
{{ contact.full_name }}
|
||||||
</div>
|
</div>
|
||||||
|
<Badge
|
||||||
|
v-if="contact.is_primary"
|
||||||
|
class="ml-2"
|
||||||
|
variant="outline"
|
||||||
|
:label="__('Primary')"
|
||||||
|
theme="green"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Section>
|
<div class="flex items-center">
|
||||||
</div>
|
<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
|
<div
|
||||||
v-if="i != section.contacts.length - 1"
|
class="flex flex-col gap-1.5 text-base text-ink-gray-8"
|
||||||
class="mx-2 h-px border-t border-outline-gray-modals"
|
>
|
||||||
/>
|
<div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
|
||||||
</div>
|
<Email2Icon class="h-4 w-4" />
|
||||||
<div
|
{{ contact.email }}
|
||||||
v-else
|
</div>
|
||||||
class="flex h-20 items-center justify-center text-base text-ink-gray-5"
|
<div class="flex items-center gap-3 p-1 py-1.5">
|
||||||
>
|
<PhoneIcon class="h-4 w-4" />
|
||||||
{{ __('No contacts added') }}
|
{{ contact.mobile_no }}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
</div>
|
</div>
|
||||||
</Section>
|
<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>
|
</SidePanelLayout>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Activities
|
<Activities
|
||||||
@ -257,7 +217,6 @@ import Activities from '@/components/Activities/Activities.vue'
|
|||||||
import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
|
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 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'
|
||||||
@ -324,7 +283,7 @@ const deal = createResource({
|
|||||||
resource: {
|
resource: {
|
||||||
deal,
|
deal,
|
||||||
dealContacts,
|
dealContacts,
|
||||||
fieldsLayout,
|
sections,
|
||||||
},
|
},
|
||||||
call,
|
call,
|
||||||
}
|
}
|
||||||
@ -490,7 +449,7 @@ const tabs = computed(() => {
|
|||||||
})
|
})
|
||||||
const { tabIndex } = useActiveTabManager(tabs, 'lastDealTab')
|
const { tabIndex } = useActiveTabManager(tabs, 'lastDealTab')
|
||||||
|
|
||||||
const fieldsLayout = createResource({
|
const sections = createResource({
|
||||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
|
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
|
||||||
cache: ['sidePanelSections', 'CRM Deal'],
|
cache: ['sidePanelSections', 'CRM Deal'],
|
||||||
params: { doctype: 'CRM Deal' },
|
params: { doctype: 'CRM Deal' },
|
||||||
@ -593,7 +552,7 @@ const dealContacts = createResource({
|
|||||||
cache: ['deal_contacts', props.dealId],
|
cache: ['deal_contacts', props.dealId],
|
||||||
auto: true,
|
auto: true,
|
||||||
onSuccess: (data) => {
|
onSuccess: (data) => {
|
||||||
let contactSection = fieldsLayout.data?.find(
|
let contactSection = sections.data?.find(
|
||||||
(section) => section.name == 'contacts_section',
|
(section) => section.name == 'contacts_section',
|
||||||
)
|
)
|
||||||
if (!contactSection) return
|
if (!contactSection) return
|
||||||
|
|||||||
@ -63,26 +63,16 @@
|
|||||||
@updateField="updateField"
|
@updateField="updateField"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
v-if="fieldsLayout.data"
|
v-if="sections.data"
|
||||||
class="flex flex-1 flex-col justify-between overflow-hidden"
|
class="flex flex-1 flex-col justify-between overflow-hidden"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col overflow-y-auto">
|
<SidePanelLayout
|
||||||
<div
|
v-model="lead.data"
|
||||||
v-for="(section, i) in fieldsLayout.data"
|
:sections="sections.data"
|
||||||
:key="section.name"
|
doctype="CRM Lead"
|
||||||
class="flex flex-col px-2 py-3 sm:p-3"
|
@update="updateField"
|
||||||
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
|
@reload="sections.reload"
|
||||||
>
|
/>
|
||||||
<Section :label="section.label" :opened="section.opened">
|
|
||||||
<SidePanelLayout
|
|
||||||
:fields="section.columns[0].fields"
|
|
||||||
:isLastSection="i == fieldsLayout.data.length - 1"
|
|
||||||
v-model="lead.data"
|
|
||||||
@update="updateField"
|
|
||||||
/>
|
|
||||||
</Section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Activities
|
<Activities
|
||||||
@ -180,7 +170,6 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
|
|||||||
import Activities from '@/components/Activities/Activities.vue'
|
import Activities from '@/components/Activities/Activities.vue'
|
||||||
import AssignTo from '@/components/AssignTo.vue'
|
import AssignTo from '@/components/AssignTo.vue'
|
||||||
import Link from '@/components/Controls/Link.vue'
|
import Link from '@/components/Controls/Link.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'
|
||||||
import CustomActions from '@/components/CustomActions.vue'
|
import CustomActions from '@/components/CustomActions.vue'
|
||||||
@ -240,7 +229,7 @@ const lead = createResource({
|
|||||||
deleteDoc: deleteLead,
|
deleteDoc: deleteLead,
|
||||||
resource: {
|
resource: {
|
||||||
lead,
|
lead,
|
||||||
fieldsLayout,
|
sections,
|
||||||
},
|
},
|
||||||
call,
|
call,
|
||||||
}
|
}
|
||||||
@ -410,7 +399,7 @@ watch(tabs, (value) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const fieldsLayout = createResource({
|
const sections = createResource({
|
||||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
|
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
|
||||||
cache: ['sidePanelSections', 'CRM Lead'],
|
cache: ['sidePanelSections', 'CRM Lead'],
|
||||||
params: { doctype: 'CRM Lead' },
|
params: { doctype: 'CRM Lead' },
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user