test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: moved communicationBox from lead/deal to activities component

Browse Source
This commit is contained in:
Shariq Ansari 2023-09-25 14:48:10 +05:30
parent e1fdbfb284
commit ecad862831
4 changed files with 101 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/Activities.vue
View File

@ -12,7 +12,7 @@
<FeatherIcon name="plus" class="w-4 h-4" /> <FeatherIcon name="plus" class="w-4 h-4" />
</Button> </Button>
</div> </div>
<div v-if="activities.length" class="overflow-y-auto"> <div v-if="activities.length" class="flex-1 overflow-y-auto">
<div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 p-5 pt-0"> <div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 p-5 pt-0">
<div <div
v-for="note in activities" v-for="note in activities"
@ -370,9 +370,14 @@
v-else-if="title == 'Emails'" v-else-if="title == 'Emails'"
variant="solid" variant="solid"
label="Send email" label="Send email"
@click="emit('setFocusOnEmail')" @click="$refs.emailBox.show = true"
/> />
</div> </div>
<CommunicationArea
ref="emailBox"
v-if="['Emails', 'Activity'].includes(title) && lead"
v-model="lead"
/>
</template> </template>
<script setup> <script setup>
import UserAvatar from '@/components/UserAvatar.vue' import UserAvatar from '@/components/UserAvatar.vue'
@ -381,6 +386,7 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import NoteIcon from '@/components/Icons/NoteIcon.vue' import NoteIcon from '@/components/Icons/NoteIcon.vue'
import DurationIcon from '@/components/Icons/DurationIcon.vue' import DurationIcon from '@/components/Icons/DurationIcon.vue'
import PlayIcon from '@/components/Icons/PlayIcon.vue' import PlayIcon from '@/components/Icons/PlayIcon.vue'
import CommunicationArea from '@/components/CommunicationArea.vue'
import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils' import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
import { usersStore } from '@/stores/users' import { usersStore } from '@/stores/users'
import { import {
@ -391,7 +397,7 @@ import {
TextEditor, TextEditor,
Avatar, Avatar,
} from 'frappe-ui' } from 'frappe-ui'
import { computed, h } from 'vue' import { computed, h, defineModel } from 'vue'
const { getUser } = usersStore() const { getUser } = usersStore()
@ -406,6 +412,8 @@ const props = defineProps({
}, },
}) })
const lead = defineModel()
const emit = defineEmits([ const emit = defineEmits([
'makeCall', 'makeCall',
'makeNote', 'makeNote',

5
frontend/src/components/CommunicationArea.vue
View File

@ -54,9 +54,8 @@
<script setup> <script setup>
import UserAvatar from '@/components/UserAvatar.vue' import UserAvatar from '@/components/UserAvatar.vue'
import EmailEditor from '@/components/EmailEditor.vue' import EmailEditor from '@/components/EmailEditor.vue'
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import { usersStore } from '@/stores/users' import { usersStore } from '@/stores/users'
import { Tooltip, call, FeatherIcon } from 'frappe-ui' import { call } from 'frappe-ui'
import { ref, watch, computed, defineModel } from 'vue' import { ref, watch, computed, defineModel } from 'vue'
const modelValue = defineModel() const modelValue = defineModel()
@ -108,5 +107,5 @@ async function submitComment() {
modelValue.value.reload() modelValue.value.reload()
} }
defineExpose({ el: sendEmailRef }) defineExpose({ show: showCommunicationBox })
</script> </script>

94
frontend/src/pages/Deal.vue
View File

@ -36,54 +36,45 @@
</template> </template>
</LayoutHeader> </LayoutHeader>
<div v-if="deal.data" class="flex h-full overflow-hidden"> <div v-if="deal.data" class="flex h-full overflow-hidden">
<TabGroup v-slot="{ selectedIndex }" @change="onTabChange"> <TabGroup as="div" class="flex flex-col flex-1" @change="onTabChange">
<div class="flex flex-col flex-1"> <TabList class="flex items-center gap-6 border-b pl-5 relative">
<TabList class="flex items-center gap-6 border-b pl-5 relative"> <Tab
<Tab ref="tabRef"
ref="tabRef" as="template"
as="template" v-for="tab in tabs"
v-for="tab in tabs" :key="tab.label"
:key="tab.label" v-slot="{ selected }"
v-slot="{ selected }" >
<button
class="flex items-center gap-2 py-2.5 -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
:class="{ 'text-gray-900': selected }"
> >
<button <component v-if="tab.icon" :is="tab.icon" class="h-5" />
class="flex items-center gap-2 py-2.5 -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out" {{ tab.label }}
:class="{ 'text-gray-900': selected }" </button>
> </Tab>
<component v-if="tab.icon" :is="tab.icon" class="h-5" /> <div
{{ tab.label }} ref="indicator"
</button> class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
</Tab> :style="{ left: `${indicatorLeftValue}px` }"
<div />
ref="indicator" </TabList>
class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]" <TabPanels class="flex flex-1 overflow-hidden">
:style="{ left: `${indicatorLeftValue}px` }" <TabPanel
/> class="flex-1 flex flex-col overflow-y-auto"
</TabList> v-for="tab in tabs"
<div class="flex flex-col h-full overflow-auto"> :key="tab.label"
<TabPanels class="flex flex-1 overflow-hidden"> >
<TabPanel <Activities
class="flex-1 flex flex-col overflow-y-auto" :title="tab.activityTitle"
v-for="tab in tabs" :activities="tab.content"
:key="tab.label"
>
<Activities
:title="tab.activityTitle"
:activities="tab.content"
@makeCall="makeCall(deal.data.mobile_no)"
@makeNote="(e) => showNote(e)"
@deleteNote="(e) => deleteNote(e)"
@setFocusOnEmail="() => $refs.sendEmailRef.el.click()"
/>
</TabPanel>
</TabPanels>
<CommunicationArea
ref="sendEmailRef"
v-if="[0, 1].includes(selectedIndex)"
v-model="deal" v-model="deal"
@makeCall="makeCall(deal.data.mobile_no)"
@makeNote="(e) => showNote(e)"
@deleteNote="(e) => deleteNote(e)"
/> />
</div> </TabPanel>
</div> </TabPanels>
</TabGroup> </TabGroup>
<div class="flex flex-col justify-between border-l w-[352px]"> <div class="flex flex-col justify-between border-l w-[352px]">
<div <div
@ -365,7 +356,6 @@ import Toggler from '@/components/Toggler.vue'
import Activities from '@/components/Activities.vue' import Activities from '@/components/Activities.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue' import Breadcrumbs from '@/components/Breadcrumbs.vue'
import UserAvatar from '@/components/UserAvatar.vue' import UserAvatar from '@/components/UserAvatar.vue'
import CommunicationArea from '@/components/CommunicationArea.vue'
import NoteModal from '@/components/NoteModal.vue' import NoteModal from '@/components/NoteModal.vue'
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue' import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
import { TransitionPresets, useTransition } from '@vueuse/core' import { TransitionPresets, useTransition } from '@vueuse/core'
@ -380,7 +370,6 @@ import { usersStore } from '@/stores/users'
import { contactsStore } from '@/stores/contacts' import { contactsStore } from '@/stores/contacts'
import { import {
createResource, createResource,
createDocumentResource,
createListResource, createListResource,
FeatherIcon, FeatherIcon,
FileUploader, FileUploader,
@ -411,17 +400,6 @@ const deal = createResource({
auto: true, auto: true,
}) })
const uDeal = createDocumentResource({
doctype: 'CRM Lead',
name: props.dealId,
setValue: {
onSuccess: () => {
deal.reload()
contacts.reload()
},
},
})
function updateDeal(fieldname, value) { function updateDeal(fieldname, value) {
createResource({ createResource({
url: 'frappe.client.set_value', url: 'frappe.client.set_value',

113
frontend/src/pages/Lead.vue
View File

@ -39,54 +39,45 @@
</template> </template>
</LayoutHeader> </LayoutHeader>
<div v-if="lead.data" class="flex h-full overflow-hidden"> <div v-if="lead.data" class="flex h-full overflow-hidden">
<TabGroup v-slot="{ selectedIndex }" @change="onTabChange"> <TabGroup as="div" class="flex flex-col flex-1" @change="onTabChange">
<div class="flex flex-col flex-1"> <TabList class="flex items-center gap-6 border-b pl-5 relative">
<TabList class="flex items-center gap-6 border-b pl-5 relative"> <Tab
<Tab ref="tabRef"
ref="tabRef" as="template"
as="template" v-for="tab in tabs"
v-for="tab in tabs" :key="tab.label"
:key="tab.label" v-slot="{ selected }"
v-slot="{ selected }" >
<button
class="flex items-center gap-2 py-2.5 -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
:class="{ 'text-gray-900': selected }"
> >
<button <component v-if="tab.icon" :is="tab.icon" class="h-5" />
class="flex items-center gap-2 py-2.5 -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out" {{ tab.label }}
:class="{ 'text-gray-900': selected }" </button>
> </Tab>
<component v-if="tab.icon" :is="tab.icon" class="h-5" /> <div
{{ tab.label }} ref="indicator"
</button> class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
</Tab> :style="{ left: `${indicatorLeftValue}px` }"
<div />
ref="indicator" </TabList>
class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]" <TabPanels class="flex flex-1 overflow-hidden">
:style="{ left: `${indicatorLeftValue}px` }" <TabPanel
/> class="flex-1 flex flex-col overflow-y-auto"
</TabList> v-for="tab in tabs"
<div class="flex flex-col h-full overflow-auto"> :key="tab.label"
<TabPanels class="flex flex-1 overflow-hidden"> >
<TabPanel <Activities
class="flex-1 flex flex-col overflow-y-auto" :title="tab.activityTitle"
v-for="tab in tabs" :activities="tab.content"
:key="tab.label"
>
<Activities
:title="tab.activityTitle"
:activities="tab.content"
@makeCall="makeCall(lead.data.mobile_no)"
@makeNote="(e) => showNote(e)"
@deleteNote="(e) => deleteNote(e)"
@setFocusOnEmail="() => $refs.sendEmailRef.el.click()"
/>
</TabPanel>
</TabPanels>
<CommunicationArea
ref="sendEmailRef"
v-if="[0, 1].includes(selectedIndex)"
v-model="lead" v-model="lead"
@makeCall="makeCall(lead.data.mobile_no)"
@makeNote="(e) => showNote(e)"
@deleteNote="(e) => deleteNote(e)"
/> />
</div> </TabPanel>
</div> </TabPanels>
</TabGroup> </TabGroup>
<div class="flex flex-col justify-between border-l w-[352px]"> <div class="flex flex-col justify-between border-l w-[352px]">
<div <div
@ -96,7 +87,7 @@
</div> </div>
<FileUploader @success="changeLeadImage" :validateFile="validateFile"> <FileUploader @success="changeLeadImage" :validateFile="validateFile">
<template #default="{ openFileSelector, error }"> <template #default="{ openFileSelector, error }">
<div class="flex gap-5 items-center justify-start p-5 border-b"> <div class="flex gap-5 items-center justify-start p-5">
<div class="relative w-[88px] h-[88px] group"> <div class="relative w-[88px] h-[88px] group">
<Avatar <Avatar
size="3xl" size="3xl"
@ -170,20 +161,21 @@
<div <div
v-for="(section, i) in detailSections" v-for="(section, i) in detailSections"
:key="section.label" :key="section.label"
class="flex flex-col p-3" class="flex flex-col"
:class="{ 'border-b': i !== detailSections.length - 1 }"
> >
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }"> <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
<div <div class="sticky bg-white top-0 p-3 border-t z-10">
class="flex items-center gap-2 text-base font-semibold leading-5 px-2 cursor-pointer max-w-fit" <div
@click="toggle()" class="flex items-center gap-2 text-base font-semibold leading-5 px-2 cursor-pointer max-w-fit"
> @click="toggle()"
<FeatherIcon >
name="chevron-right" <FeatherIcon
class="h-4 text-gray-600 transition-all duration-300 ease-in-out" name="chevron-right"
:class="{ 'rotate-90': opened }" class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
/> :class="{ 'rotate-90': opened }"
{{ section.label }} />
{{ section.label }}
</div>
</div> </div>
<transition <transition
enter-active-class="duration-300 ease-in" enter-active-class="duration-300 ease-in"
@ -193,11 +185,11 @@
enter-from-class="max-h-0 overflow-hidden" enter-from-class="max-h-0 overflow-hidden"
leave-to-class="max-h-0 overflow-hidden" leave-to-class="max-h-0 overflow-hidden"
> >
<div v-if="opened" class="flex flex-col gap-1.5"> <div v-if="opened" class="flex flex-col gap-1.5 p-3 pt-0">
<div <div
v-for="field in section.fields" v-for="field in section.fields"
:key="field.name" :key="field.name"
class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3" class="flex items-center px-3 gap-2 text-base leading-5"
> >
<div class="text-gray-600 w-[106px]"> <div class="text-gray-600 w-[106px]">
{{ field.label }} {{ field.label }}
@ -335,7 +327,6 @@ import Toggler from '@/components/Toggler.vue'
import Activities from '@/components/Activities.vue' import Activities from '@/components/Activities.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue' import Breadcrumbs from '@/components/Breadcrumbs.vue'
import UserAvatar from '@/components/UserAvatar.vue' import UserAvatar from '@/components/UserAvatar.vue'
import CommunicationArea from '@/components/CommunicationArea.vue'
import NoteModal from '@/components/NoteModal.vue' import NoteModal from '@/components/NoteModal.vue'
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue' import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
import { TransitionPresets, useTransition } from '@vueuse/core' import { TransitionPresets, useTransition } from '@vueuse/core'