fix: populated deals list, created deal page and create new deal feature
moved getstatus for lead and deal in utils
This commit is contained in:
Shariq Ansari
parent
68369f3d45
commit
1944efbf80
170
frontend/src/components/NewDeal.vue
Normal file
170
frontend/src/components/NewDeal.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div v-for="section in allFields" :key="section.section">
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div v-for="field in section.fields" :key="field.name">
|
||||
<div class="text-gray-600 text-sm mb-2">{{ field.label }}</div>
|
||||
<FormControl
|
||||
v-if="field.type === 'select'"
|
||||
type="select"
|
||||
:options="field.options"
|
||||
v-model="newDeal[field.name]"
|
||||
>
|
||||
<template v-if="field.name == 'deal_status'" #prefix>
|
||||
<IndicatorIcon :class="dealStatuses[newDeal[field.name]].color" />
|
||||
</template>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'email'"
|
||||
type="email"
|
||||
v-model="newDeal[field.name]"
|
||||
/>
|
||||
<Autocomplete
|
||||
v-else-if="field.type === 'link'"
|
||||
:options="activeAgents"
|
||||
:value="getUser(newDeal[field.name]).full_name"
|
||||
@change="(option) => (newDeal[field.name] = option.email)"
|
||||
:placeholder="field.placeholder"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar class="mr-2" :user="newDeal[field.name]" size="sm" />
|
||||
</template>
|
||||
<template #item-prefix="{ option }">
|
||||
<UserAvatar class="mr-2" :user="option.email" size="sm" />
|
||||
</template>
|
||||
</Autocomplete>
|
||||
<Dropdown
|
||||
v-else-if="field.type === 'dropdown'"
|
||||
:options="statusDropdownOptions(newDeal, 'deal')"
|
||||
class="w-full flex-1"
|
||||
>
|
||||
<template #default="{ open }">
|
||||
<Button
|
||||
:label="newDeal[field.name]"
|
||||
class="justify-between w-full"
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon :class="dealStatuses[newDeal[field.name]].color" />
|
||||
</template>
|
||||
<template #default>{{ newDeal[field.name] }}</template>
|
||||
<template #suffix>
|
||||
<FeatherIcon
|
||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||
class="h-4"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<FormControl v-else type="text" v-model="newDeal[field.name]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { dealStatuses, statusDropdownOptions } from '@/utils'
|
||||
import {
|
||||
FormControl,
|
||||
Button,
|
||||
Autocomplete,
|
||||
Dropdown,
|
||||
FeatherIcon,
|
||||
} from 'frappe-ui'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const { getUser, users } = usersStore()
|
||||
const props = defineProps({
|
||||
newDeal: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const allFields = [
|
||||
{
|
||||
section: 'Deal Details',
|
||||
fields: [
|
||||
{
|
||||
label: 'Salutation',
|
||||
name: 'salutation',
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: 'Mr',
|
||||
value: 'Mr',
|
||||
},
|
||||
{
|
||||
label: 'Ms',
|
||||
value: 'Ms',
|
||||
},
|
||||
{
|
||||
label: 'Mrs',
|
||||
value: 'Mrs',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'First Name',
|
||||
name: 'first_name',
|
||||
type: 'data',
|
||||
},
|
||||
{
|
||||
label: 'Last Name',
|
||||
name: 'last_name',
|
||||
type: 'data',
|
||||
},
|
||||
{
|
||||
label: 'Email',
|
||||
name: 'email',
|
||||
type: 'data',
|
||||
},
|
||||
{
|
||||
label: 'Mobile no',
|
||||
name: 'mobile_no',
|
||||
type: 'data',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
section: 'Other Details',
|
||||
fields: [
|
||||
{
|
||||
label: 'Organization',
|
||||
name: 'organization_name',
|
||||
type: 'data',
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
name: 'deal_status',
|
||||
type: 'select',
|
||||
options: statusDropdownOptions(props.newDeal, 'deal'),
|
||||
},
|
||||
{
|
||||
label: 'Deal owner',
|
||||
name: 'lead_owner',
|
||||
type: 'link',
|
||||
placeholder: 'Deal owner',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const activeAgents = computed(() => {
|
||||
const nonAgents = ['Administrator', 'Guest']
|
||||
return users.data
|
||||
.filter((user) => !nonAgents.includes(user.name))
|
||||
.sort((a, b) => a.full_name - b.full_name)
|
||||
.map((user) => {
|
||||
return {
|
||||
label: user.full_name,
|
||||
value: user.email,
|
||||
...user,
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -11,7 +11,7 @@
|
||||
v-model="newLead[field.name]"
|
||||
>
|
||||
<template v-if="field.name == 'status'" #prefix>
|
||||
<IndicatorIcon :class="indicatorColor[newLead[field.name]]" />
|
||||
<IndicatorIcon :class="leadStatuses[newLead[field.name]].color" />
|
||||
</template>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
@ -35,7 +35,7 @@
|
||||
</Autocomplete>
|
||||
<Dropdown
|
||||
v-else-if="field.type === 'dropdown'"
|
||||
:options="statusDropdownOptions"
|
||||
:options="statusDropdownOptions(newLead)"
|
||||
class="w-full flex-1"
|
||||
>
|
||||
<template #default="{ open }">
|
||||
@ -44,7 +44,7 @@
|
||||
class="justify-between w-full"
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon :class="indicatorColor[newLead[field.name]]" />
|
||||
<IndicatorIcon :class="leadStatuses[newLead[field.name]].color" />
|
||||
</template>
|
||||
<template #default>{{ newLead[field.name] }}</template>
|
||||
<template #suffix>
|
||||
@ -67,6 +67,7 @@
|
||||
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { leadStatuses, statusDropdownOptions } from '@/utils'
|
||||
import {
|
||||
FormControl,
|
||||
Button,
|
||||
@ -84,44 +85,6 @@ const props = defineProps({
|
||||
},
|
||||
})
|
||||
|
||||
const statusDropdownOptions = [
|
||||
{
|
||||
label: 'New',
|
||||
icon: () => h(IndicatorIcon, { class: '!text-gray-600' }),
|
||||
onClick: () => {
|
||||
newLead.status = 'New'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Contact made',
|
||||
icon: () => h(IndicatorIcon, { class: 'text-orange-600' }),
|
||||
onClick: () => {
|
||||
newLead.status = 'Contact made'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Proposal made',
|
||||
icon: () => h(IndicatorIcon, { class: '!text-blue-600' }),
|
||||
onClick: () => {
|
||||
newLead.status = 'Proposal made'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Negotiation',
|
||||
icon: () => h(IndicatorIcon, { class: 'text-red-600' }),
|
||||
onClick: () => {
|
||||
newLead.status = 'Negotiation'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Converted',
|
||||
icon: () => h(IndicatorIcon, { class: 'text-green-600' }),
|
||||
onClick: () => {
|
||||
newLead.status = 'Converted'
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const allFields = [
|
||||
{
|
||||
section: 'Lead Details',
|
||||
@ -179,7 +142,7 @@ const allFields = [
|
||||
label: 'Status',
|
||||
name: 'status',
|
||||
type: 'select',
|
||||
options: statusDropdownOptions,
|
||||
options: statusDropdownOptions(props.newLead),
|
||||
},
|
||||
{
|
||||
label: 'Lead owner',
|
||||
@ -191,14 +154,6 @@ const allFields = [
|
||||
},
|
||||
]
|
||||
|
||||
const indicatorColor = {
|
||||
New: 'text-gray-600',
|
||||
'Contact made': 'text-orange-500',
|
||||
'Proposal made': 'text-blue-600',
|
||||
Negotiation: 'text-red-600',
|
||||
Converted: 'text-green-600',
|
||||
}
|
||||
|
||||
const activeAgents = computed(() => {
|
||||
const nonAgents = ['Administrator', 'Guest']
|
||||
return users.data
|
||||
|
||||
456
frontend/src/pages/Deal.vue
Normal file
456
frontend/src/pages/Deal.vue
Normal file
@ -0,0 +1,456 @@
|
||||
<template>
|
||||
<LayoutHeader v-if="deal.data">
|
||||
<template #left-header>
|
||||
<Breadcrumbs :items="breadcrumbs" />
|
||||
</template>
|
||||
<template #right-header>
|
||||
<Autocomplete
|
||||
:options="activeAgents"
|
||||
:value="getUser(deal.data.lead_owner).full_name"
|
||||
@change="(option) => (deal.data.lead_owner = option.email)"
|
||||
placeholder="Deal owner"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar class="mr-2" :user="deal.data.lead_owner" size="sm" />
|
||||
</template>
|
||||
<template #item-prefix="{ option }">
|
||||
<UserAvatar class="mr-2" :user="option.email" size="sm" />
|
||||
</template>
|
||||
</Autocomplete>
|
||||
<Dropdown :options="statusDropdownOptions(deal.data, 'deal')">
|
||||
<template #default="{ open }">
|
||||
<Button :label="deal.data.deal_status">
|
||||
<template #prefix>
|
||||
<IndicatorIcon :class="dealStatuses[deal.data.deal_status].color" />
|
||||
</template>
|
||||
<template #suffix
|
||||
><FeatherIcon
|
||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||
class="h-4"
|
||||
/></template>
|
||||
</Button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<Button icon="more-horizontal" />
|
||||
<Button label="Save" variant="solid" @click="() => updateDeal()" />
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<TabGroup v-slot="{ selectedIndex }" v-if="deal.data" @change="onTabChange">
|
||||
<TabList class="flex items-center gap-6 border-b pl-5 relative">
|
||||
<Tab
|
||||
ref="tabRef"
|
||||
as="template"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.label"
|
||||
v-slot="{ selected }"
|
||||
>
|
||||
<button
|
||||
class="flex items-center gap-2 py-[9px] -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 }"
|
||||
>
|
||||
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</Tab>
|
||||
<div
|
||||
ref="indicator"
|
||||
class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
|
||||
:style="{ left: `${indicatorLeftValue}px` }"
|
||||
/>
|
||||
</TabList>
|
||||
<div class="flex h-full overflow-hidden">
|
||||
<div class="flex-1 flex flex-col">
|
||||
<TabPanels class="flex flex-1 overflow-hidden">
|
||||
<TabPanel
|
||||
class="flex-1 overflow-y-auto"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.label"
|
||||
>
|
||||
<Activities :title="tab.activityTitle" :activities="tab.content" />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
<CommunicationArea
|
||||
v-if="[0, 1].includes(selectedIndex)"
|
||||
v-model="deal"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between border-l w-[360px]">
|
||||
<div
|
||||
class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
|
||||
>
|
||||
<Avatar
|
||||
size="3xl"
|
||||
:label="deal.data.first_name"
|
||||
:image="deal.data.image"
|
||||
/>
|
||||
<div class="font-medium text-2xl">{{ deal.data.lead_name }}</div>
|
||||
<div class="flex gap-3">
|
||||
<Tooltip text="Make a call...">
|
||||
<Button
|
||||
class="rounded-full h-8 w-8"
|
||||
@click="() => makeCall(deal.data.mobile_no)"
|
||||
>
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Button class="rounded-full h-8 w-8">
|
||||
<EmailIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button icon="message-square" class="rounded-full h-8 w-8" />
|
||||
<Button icon="more-horizontal" class="rounded-full h-8 w-8" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between overflow-hidden">
|
||||
<div class="flex flex-col gap-6 p-3 overflow-y-auto">
|
||||
<div
|
||||
v-for="section in detailSections"
|
||||
:key="section.label"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
|
||||
<div
|
||||
class="flex items-center gap-2 text-base font-semibold leading-5 pl-2 pr-3 cursor-pointer max-w-fit"
|
||||
@click="toggle()"
|
||||
>
|
||||
<FeatherIcon
|
||||
name="chevron-right"
|
||||
class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
|
||||
:class="{ 'rotate-90': opened }"
|
||||
/>
|
||||
{{ section.label }}
|
||||
</div>
|
||||
<transition
|
||||
enter-active-class="duration-300 ease-in"
|
||||
leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
|
||||
enter-to-class="max-h-[200px] overflow-hidden"
|
||||
leave-from-class="max-h-[200px] overflow-hidden"
|
||||
enter-from-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-for="field in section.fields"
|
||||
:key="field.label"
|
||||
class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
|
||||
>
|
||||
<div class="text-gray-600 w-[106px]">
|
||||
{{ field.label }}
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<FormControl
|
||||
v-if="field.type === 'select'"
|
||||
type="select"
|
||||
:options="field.options"
|
||||
v-model="deal.data[field.name]"
|
||||
class="form-control cursor-pointer [&_select]:cursor-pointer"
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon
|
||||
:class="dealStatuses[deal.data[field.name]].color"
|
||||
/>
|
||||
</template>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'email'"
|
||||
type="email"
|
||||
class="form-control"
|
||||
v-model="deal.data[field.name]"
|
||||
/>
|
||||
<Autocomplete
|
||||
v-else-if="field.type === 'link'"
|
||||
:options="activeAgents"
|
||||
:value="getUser(deal.data[field.name]).full_name"
|
||||
@change="
|
||||
(option) => (deal.data[field.name] = option.email)
|
||||
"
|
||||
class="form-control"
|
||||
placeholder="Deal owner"
|
||||
>
|
||||
<template #target="{ togglePopover }">
|
||||
<Button
|
||||
variant="ghost"
|
||||
@click="togglePopover()"
|
||||
:label="getUser(deal.data[field.name]).full_name"
|
||||
class="!justify-start w-full"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar
|
||||
:user="deal.data[field.name]"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
<template #item-prefix="{ option }">
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="option.email"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
</Autocomplete>
|
||||
<Dropdown
|
||||
v-else-if="field.type === 'dropdown'"
|
||||
:options="statusDropdownOptions(deal.data, 'deal')"
|
||||
class="w-full flex-1"
|
||||
>
|
||||
<template #default="{ open }">
|
||||
<Button
|
||||
:label="deal.data[field.name]"
|
||||
class="justify-between w-full"
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon
|
||||
:class="
|
||||
dealStatuses[deal.data[field.name]].color
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #default>{{
|
||||
deal.data[field.name]
|
||||
}}</template>
|
||||
<template #suffix>
|
||||
<FeatherIcon
|
||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||
class="h-4"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<FormControl
|
||||
v-else
|
||||
type="text"
|
||||
v-model="deal.data[field.name]"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</Toggler>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-1 text-sm px-6 p-3 leading-5 cursor-pointer"
|
||||
>
|
||||
<span class="text-gray-600">Created </span>
|
||||
<Tooltip :text="dateFormat(deal.data.creation, dateTooltipFormat)">
|
||||
{{ timeAgo(deal.data.creation) }}
|
||||
</Tooltip>
|
||||
<span> · </span>
|
||||
<span class="text-gray-600">Updated </span>
|
||||
<Tooltip :text="dateFormat(deal.data.modified, dateTooltipFormat)">
|
||||
{{ timeAgo(deal.data.modified) }}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabGroup>
|
||||
</template>
|
||||
<script setup>
|
||||
import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
|
||||
import EmailIcon from '@/components/Icons/EmailIcon.vue'
|
||||
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||
import TaskIcon from '@/components/Icons/TaskIcon.vue'
|
||||
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
||||
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
||||
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||
import Toggler from '@/components/Toggler.vue'
|
||||
import Activities from '@/components/Activities.vue'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import CommunicationArea from '@/components/CommunicationArea.vue'
|
||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||
import { dateFormat, timeAgo, dateTooltipFormat, dealStatuses, statusDropdownOptions } from '@/utils'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import {
|
||||
createResource,
|
||||
createDocumentResource,
|
||||
FeatherIcon,
|
||||
Autocomplete,
|
||||
FormControl,
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
Avatar,
|
||||
} from 'frappe-ui'
|
||||
import { ref, computed, inject } from 'vue'
|
||||
|
||||
const { getUser, users } = usersStore()
|
||||
|
||||
const makeCall = inject('makeOutgoingCall')
|
||||
|
||||
const props = defineProps({
|
||||
dealId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const deal = createResource({
|
||||
url: 'crm.crm.doctype.crm_lead.api.get_lead',
|
||||
params: { name: props.dealId },
|
||||
cache: ['deal', props.dealId],
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const uDeal = createDocumentResource({
|
||||
doctype: 'CRM Lead',
|
||||
name: props.dealId,
|
||||
setValue: {
|
||||
onSuccess: () => {
|
||||
deal.reload()
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
function updateDeal() {
|
||||
let dealCopy = { ...deal.data }
|
||||
delete dealCopy.activities
|
||||
uDeal.setValue.submit({ ...dealCopy })
|
||||
}
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
let items = [{ label: 'Deals', route: { name: 'Deals' } }]
|
||||
items.push({
|
||||
label: deal.data.lead_name,
|
||||
route: { name: 'Deal', params: { dealId: deal.data.name } },
|
||||
})
|
||||
return items
|
||||
})
|
||||
|
||||
const tabs = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: 'Activity',
|
||||
icon: ActivityIcon,
|
||||
content: deal.data.activities,
|
||||
activityTitle: 'Activity log',
|
||||
},
|
||||
{
|
||||
label: 'Emails',
|
||||
icon: EmailIcon,
|
||||
content: deal.data.activities.filter(
|
||||
(activity) => activity.activity_type === 'communication'
|
||||
),
|
||||
activityTitle: 'Emails',
|
||||
},
|
||||
{
|
||||
label: 'Calls',
|
||||
icon: PhoneIcon,
|
||||
content: deal.data.activities.filter(
|
||||
(activity) => activity.activity_type === 'call'
|
||||
),
|
||||
activityTitle: 'Calls',
|
||||
},
|
||||
{
|
||||
label: 'Tasks',
|
||||
icon: TaskIcon,
|
||||
activityTitle: 'Tasks',
|
||||
},
|
||||
{
|
||||
label: 'Notes',
|
||||
icon: NoteIcon,
|
||||
activityTitle: 'Notes',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const tabRef = ref([])
|
||||
const indicator = ref(null)
|
||||
|
||||
let indicatorLeft = ref(20)
|
||||
const indicatorLeftValue = useTransition(indicatorLeft, {
|
||||
duration: 250,
|
||||
ease: TransitionPresets.easeOutCubic,
|
||||
})
|
||||
|
||||
function onTabChange(index) {
|
||||
const selectedTab = tabRef.value[index].el
|
||||
indicator.value.style.width = `${selectedTab.offsetWidth}px`
|
||||
indicatorLeft.value = selectedTab.offsetLeft
|
||||
}
|
||||
|
||||
const detailSections = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: 'About this deal',
|
||||
opened: true,
|
||||
fields: [
|
||||
{
|
||||
label: 'Status',
|
||||
type: 'select',
|
||||
name: 'deal_status',
|
||||
options: statusDropdownOptions(deal.data, 'deal'),
|
||||
},
|
||||
{
|
||||
label: 'Deal owner',
|
||||
type: 'link',
|
||||
name: 'lead_owner',
|
||||
},
|
||||
{
|
||||
label: 'Organization',
|
||||
type: 'data',
|
||||
name: 'organization_name',
|
||||
},
|
||||
{
|
||||
label: 'Website',
|
||||
type: 'data',
|
||||
name: 'website',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Person',
|
||||
opened: true,
|
||||
fields: [
|
||||
{
|
||||
label: 'First name',
|
||||
type: 'data',
|
||||
name: 'first_name',
|
||||
},
|
||||
{
|
||||
label: 'Last name',
|
||||
type: 'data',
|
||||
name: 'last_name',
|
||||
},
|
||||
{
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
},
|
||||
{
|
||||
label: 'Mobile no.',
|
||||
type: 'phone',
|
||||
name: 'mobile_no',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const activeAgents = computed(() => {
|
||||
const nonAgents = ['Administrator', 'Guest']
|
||||
return users.data
|
||||
.filter((user) => !nonAgents.includes(user.name))
|
||||
.sort((a, b) => a.full_name - b.full_name)
|
||||
.map((user) => {
|
||||
return {
|
||||
label: user.full_name,
|
||||
value: user.email,
|
||||
...user,
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.form-control input),
|
||||
:deep(.form-control select),
|
||||
:deep(.form-control button) {
|
||||
border-color: transparent;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
<Breadcrumbs :items="[{ label: list.title }]" />
|
||||
</template>
|
||||
<template #right-header>
|
||||
<Button variant="solid" label="Create">
|
||||
<Button variant="solid" label="Create" @click="showNewDialog = true">
|
||||
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
||||
</Button>
|
||||
</template>
|
||||
@ -14,51 +14,194 @@
|
||||
<Dropdown :options="viewsDropdownOptions">
|
||||
<template #default="{ open }">
|
||||
<Button :label="currentView.label">
|
||||
<template #prefix
|
||||
><FeatherIcon :name="currentView.icon" class="h-4"
|
||||
/></template>
|
||||
<template #suffix
|
||||
><FeatherIcon
|
||||
<template #prefix>
|
||||
<FeatherIcon :name="currentView.icon" class="h-4" />
|
||||
</template>
|
||||
<template #suffix>
|
||||
<FeatherIcon
|
||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||
class="h-4"
|
||||
/></template>
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button label="Sort">
|
||||
<template #prefix><SortIcon class="h-4" /></template>
|
||||
</Button>
|
||||
<Button label="Filter">
|
||||
<template #prefix><FilterIcon class="h-4" /></template>
|
||||
</Button>
|
||||
<Filter doctype="CRM Lead" />
|
||||
<SortBy doctype="CRM Lead" />
|
||||
<Button icon="more-horizontal" />
|
||||
</div>
|
||||
</div>
|
||||
<ListView :list="list" row-key="name" />
|
||||
<ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
|
||||
<Dialog
|
||||
v-model="showNewDialog"
|
||||
:options="{
|
||||
size: '3xl',
|
||||
title: 'New Deal',
|
||||
actions: [{ label: 'Save', variant: 'solid' }],
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<NewDeal :newDeal="newDeal" />
|
||||
</template>
|
||||
<template #actions="{ close }">
|
||||
<div class="flex flex-row-reverse gap-2">
|
||||
<Button variant="solid" label="Save" @click="createNewDeal(close)" />
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ListView from '@/components/ListView.vue'
|
||||
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
||||
import SortIcon from '@/components/Icons/SortIcon.vue'
|
||||
import FilterIcon from '@/components/Icons/FilterIcon.vue'
|
||||
import { FeatherIcon, Button, Dropdown } from 'frappe-ui'
|
||||
import { ref } from 'vue'
|
||||
import NewDeal from '@/components/NewDeal.vue'
|
||||
import SortBy from '@/components/SortBy.vue'
|
||||
import Filter from '@/components/Filter.vue'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { useOrderBy } from '@/composables/orderby'
|
||||
import { useFilter } from '@/composables/filter'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { dealStatuses } from '@/utils'
|
||||
import {
|
||||
FeatherIcon,
|
||||
Dialog,
|
||||
Button,
|
||||
Dropdown,
|
||||
createListResource,
|
||||
createResource,
|
||||
} from 'frappe-ui'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref, computed, reactive, watch } from 'vue'
|
||||
|
||||
const list = {
|
||||
title: 'Deals',
|
||||
plural_label: 'Deals',
|
||||
singular_label: 'Deal',
|
||||
}
|
||||
const { getUser } = usersStore()
|
||||
const { get: getOrderBy } = useOrderBy()
|
||||
const { getArgs, storage } = useFilter()
|
||||
|
||||
const currentView = ref({
|
||||
label: 'List',
|
||||
icon: 'list',
|
||||
})
|
||||
|
||||
function getFilter() {
|
||||
return {
|
||||
...(getArgs() || {}),
|
||||
is_deal: 1,
|
||||
}
|
||||
}
|
||||
|
||||
const leads = createListResource({
|
||||
type: 'list',
|
||||
doctype: 'CRM Lead',
|
||||
fields: [
|
||||
'name',
|
||||
'first_name',
|
||||
'lead_name',
|
||||
'image',
|
||||
'organization_name',
|
||||
'organization_logo',
|
||||
'deal_status',
|
||||
'email',
|
||||
'mobile_no',
|
||||
'lead_owner',
|
||||
'modified',
|
||||
],
|
||||
filters: getFilter(),
|
||||
orderBy: 'modified desc',
|
||||
pageLength: 20,
|
||||
auto: true,
|
||||
})
|
||||
|
||||
watch(
|
||||
() => getOrderBy(),
|
||||
(value, old_value) => {
|
||||
if (!value && !old_value) return
|
||||
leads.orderBy = getOrderBy() || 'modified desc'
|
||||
leads.reload()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
storage,
|
||||
useDebounceFn((value, old_value) => {
|
||||
if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
|
||||
leads.filters = getFilter()
|
||||
leads.reload()
|
||||
}, 300),
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const columns = [
|
||||
{
|
||||
label: 'Name',
|
||||
key: 'lead_name',
|
||||
type: 'avatar',
|
||||
size: 'w-44',
|
||||
},
|
||||
{
|
||||
label: 'Organization',
|
||||
key: 'organization_name',
|
||||
type: 'logo',
|
||||
size: 'w-44',
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
key: 'deal_status',
|
||||
type: 'indicator',
|
||||
size: 'w-44',
|
||||
},
|
||||
{
|
||||
label: 'Email',
|
||||
key: 'email',
|
||||
type: 'email',
|
||||
size: 'w-44',
|
||||
},
|
||||
{
|
||||
label: 'Mobile no',
|
||||
key: 'mobile_no',
|
||||
type: 'phone',
|
||||
size: 'w-44',
|
||||
},
|
||||
{
|
||||
label: 'Lead owner',
|
||||
key: 'lead_owner',
|
||||
type: 'avatar',
|
||||
size: 'w-44',
|
||||
},
|
||||
]
|
||||
|
||||
const rows = computed(() => {
|
||||
return leads.data?.map((lead) => {
|
||||
return {
|
||||
name: lead.name,
|
||||
lead_name: {
|
||||
label: lead.lead_name,
|
||||
image: lead.image,
|
||||
image_label: lead.first_name,
|
||||
},
|
||||
organization_name: {
|
||||
label: lead.organization_name,
|
||||
logo: lead.organization_logo,
|
||||
},
|
||||
deal_status: {
|
||||
label: lead.deal_status,
|
||||
color: dealStatuses[lead.deal_status]?.color,
|
||||
},
|
||||
email: lead.email,
|
||||
mobile_no: lead.mobile_no,
|
||||
lead_owner: lead.lead_owner && getUser(lead.lead_owner),
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const viewsDropdownOptions = [
|
||||
{
|
||||
label: 'List',
|
||||
@ -101,4 +244,52 @@ const viewsDropdownOptions = [
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const showNewDialog = ref(false)
|
||||
|
||||
let newDeal = reactive({
|
||||
salutation: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
lead_name: '',
|
||||
organization_name: '',
|
||||
deal_status: 'Qualification',
|
||||
email: '',
|
||||
mobile_no: '',
|
||||
lead_owner: getUser().email,
|
||||
})
|
||||
|
||||
const createLead = createResource({
|
||||
url: 'frappe.client.insert',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doc: {
|
||||
doctype: 'CRM Lead',
|
||||
...values,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function createNewDeal(close) {
|
||||
createLead
|
||||
.submit(newDeal, {
|
||||
validate() {
|
||||
if (!newDeal.first_name) {
|
||||
return 'First name is required'
|
||||
}
|
||||
},
|
||||
onSuccess(data) {
|
||||
router.push({
|
||||
name: 'Lead',
|
||||
params: {
|
||||
leadId: data.name,
|
||||
},
|
||||
})
|
||||
},
|
||||
})
|
||||
.then(close)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -17,11 +17,11 @@
|
||||
<UserAvatar class="mr-2" :user="option.email" size="sm" />
|
||||
</template>
|
||||
</Autocomplete>
|
||||
<Dropdown :options="statusDropdownOptions">
|
||||
<Dropdown :options="statusDropdownOptions(lead.data)">
|
||||
<template #default="{ open }">
|
||||
<Button :label="lead.data.status">
|
||||
<template #prefix>
|
||||
<IndicatorIcon :class="indicatorColor[lead.data.status]" />
|
||||
<IndicatorIcon :class="leadStatuses[lead.data.status].color" />
|
||||
</template>
|
||||
<template #suffix
|
||||
><FeatherIcon
|
||||
@ -146,7 +146,7 @@
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon
|
||||
:class="indicatorColor[lead.data[field.name]]"
|
||||
:class="leadStatuses[lead.data[field.name]].color"
|
||||
/>
|
||||
</template>
|
||||
</FormControl>
|
||||
@ -191,7 +191,7 @@
|
||||
</Autocomplete>
|
||||
<Dropdown
|
||||
v-else-if="field.type === 'dropdown'"
|
||||
:options="statusDropdownOptions"
|
||||
:options="statusDropdownOptions(lead.data)"
|
||||
class="w-full flex-1"
|
||||
>
|
||||
<template #default="{ open }">
|
||||
@ -201,7 +201,9 @@
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon
|
||||
:class="indicatorColor[lead.data[field.name]]"
|
||||
:class="
|
||||
leadStatuses[lead.data[field.name]].color
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template #default>{{
|
||||
@ -262,7 +264,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import CommunicationArea from '@/components/CommunicationArea.vue'
|
||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||
import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
|
||||
import { dateFormat, timeAgo, dateTooltipFormat, leadStatuses, statusDropdownOptions } from '@/utils'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import {
|
||||
createResource,
|
||||
@ -274,7 +276,7 @@ import {
|
||||
Tooltip,
|
||||
Avatar,
|
||||
} from 'frappe-ui'
|
||||
import { ref, computed, h, inject } from 'vue'
|
||||
import { ref, computed, inject } from 'vue'
|
||||
|
||||
const { getUser, users } = usersStore()
|
||||
|
||||
@ -371,52 +373,6 @@ function onTabChange(index) {
|
||||
indicatorLeft.value = selectedTab.offsetLeft
|
||||
}
|
||||
|
||||
const statusDropdownOptions = [
|
||||
{
|
||||
label: 'New',
|
||||
icon: () => h(IndicatorIcon, { class: '!text-gray-600' }),
|
||||
onClick: () => {
|
||||
lead.data.status = 'New'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Contact made',
|
||||
icon: () => h(IndicatorIcon, { class: 'text-orange-600' }),
|
||||
onClick: () => {
|
||||
lead.data.status = 'Contact made'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Proposal made',
|
||||
icon: () => h(IndicatorIcon, { class: '!text-blue-600' }),
|
||||
onClick: () => {
|
||||
lead.data.status = 'Proposal made'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Negotiation',
|
||||
icon: () => h(IndicatorIcon, { class: 'text-red-600' }),
|
||||
onClick: () => {
|
||||
lead.data.status = 'Negotiation'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Converted',
|
||||
icon: () => h(IndicatorIcon, { class: 'text-green-600' }),
|
||||
onClick: () => {
|
||||
lead.data.status = 'Converted'
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const indicatorColor = {
|
||||
New: 'text-gray-600',
|
||||
'Contact made': 'text-orange-500',
|
||||
'Proposal made': 'text-blue-600',
|
||||
Negotiation: 'text-red-600',
|
||||
Converted: 'text-green-600',
|
||||
}
|
||||
|
||||
const detailSections = computed(() => {
|
||||
return [
|
||||
{
|
||||
@ -427,7 +383,7 @@ const detailSections = computed(() => {
|
||||
label: 'Status',
|
||||
type: 'select',
|
||||
name: 'status',
|
||||
options: statusDropdownOptions,
|
||||
options: statusDropdownOptions(lead.data),
|
||||
},
|
||||
{
|
||||
label: 'Lead owner',
|
||||
|
||||
@ -63,6 +63,7 @@ import { usersStore } from '@/stores/users'
|
||||
import { useOrderBy } from '@/composables/orderby'
|
||||
import { useFilter } from '@/composables/filter'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { leadStatuses } from '@/utils'
|
||||
import {
|
||||
FeatherIcon,
|
||||
Dialog,
|
||||
@ -88,6 +89,13 @@ const currentView = ref({
|
||||
icon: 'list',
|
||||
})
|
||||
|
||||
function getFilter() {
|
||||
return {
|
||||
...(getArgs() || {}),
|
||||
is_deal: 0,
|
||||
}
|
||||
}
|
||||
|
||||
const leads = createListResource({
|
||||
type: 'list',
|
||||
doctype: 'CRM Lead',
|
||||
@ -104,7 +112,7 @@ const leads = createListResource({
|
||||
'lead_owner',
|
||||
'modified',
|
||||
],
|
||||
filters: getArgs() || {},
|
||||
filters: getFilter(),
|
||||
orderBy: 'modified desc',
|
||||
pageLength: 20,
|
||||
auto: true,
|
||||
@ -124,7 +132,7 @@ watch(
|
||||
storage,
|
||||
useDebounceFn((value, old_value) => {
|
||||
if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
|
||||
leads.filters = getArgs() || {}
|
||||
leads.filters = getFilter()
|
||||
leads.reload()
|
||||
}, 300),
|
||||
{ deep: true }
|
||||
@ -184,7 +192,7 @@ const rows = computed(() => {
|
||||
},
|
||||
status: {
|
||||
label: lead.status,
|
||||
color: indicatorColor[lead.status],
|
||||
color: leadStatuses[lead.status]?.color,
|
||||
},
|
||||
email: lead.email,
|
||||
mobile_no: lead.mobile_no,
|
||||
@ -236,14 +244,6 @@ const viewsDropdownOptions = [
|
||||
},
|
||||
]
|
||||
|
||||
const indicatorColor = {
|
||||
New: 'text-gray-600',
|
||||
'Contact made': 'text-orange-500',
|
||||
'Proposal made': 'text-blue-600',
|
||||
Negotiation: 'text-red-600',
|
||||
Converted: 'text-green-600',
|
||||
}
|
||||
|
||||
const showNewDialog = ref(false)
|
||||
|
||||
let newLead = reactive({
|
||||
@ -252,7 +252,7 @@ let newLead = reactive({
|
||||
last_name: '',
|
||||
lead_name: '',
|
||||
organization_name: '',
|
||||
status: 'New',
|
||||
status: 'Open',
|
||||
email: '',
|
||||
mobile_no: '',
|
||||
lead_owner: getUser().email,
|
||||
|
||||
@ -23,6 +23,12 @@ const routes = [
|
||||
name: 'Deals',
|
||||
component: () => import('@/pages/Deals.vue'),
|
||||
},
|
||||
{
|
||||
path: '/deals/:dealId',
|
||||
name: 'Deal',
|
||||
component: () => import('@/pages/Deal.vue'),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: '/inbox',
|
||||
name: 'Inbox',
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
||||
import { useDateFormat, useTimeAgo } from '@vueuse/core'
|
||||
import { h } from 'vue'
|
||||
|
||||
export function dateFormat(date, format) {
|
||||
const _format = format || 'DD-MM-YYYY HH:mm:ss'
|
||||
@ -10,3 +12,47 @@ export function timeAgo(date) {
|
||||
}
|
||||
|
||||
export const dateTooltipFormat = 'ddd, MMM D, YYYY h:mm A'
|
||||
|
||||
export const leadStatuses = {
|
||||
Open: { label: 'Open', color: '!text-gray-600' },
|
||||
Contacted: { label: 'Contacted', color: '!text-orange-600' },
|
||||
Nurture: { label: 'Nurture', color: '!text-blue-600' },
|
||||
Qualified: { label: 'Qualified', color: '!text-green-600' },
|
||||
Unqualified: { label: 'Unqualified', color: '!text-red-600' },
|
||||
Junk: { label: 'Junk', color: '!text-purple-600' },
|
||||
}
|
||||
|
||||
export const dealStatuses = {
|
||||
Qualification: { label: 'Qualification', color: '!text-gray-600' },
|
||||
'Demo/Making': { label: 'Demo/Making', color: '!text-orange-600' },
|
||||
'Proposal/Quotation': {
|
||||
label: 'Proposal/Quotation',
|
||||
color: '!text-blue-600',
|
||||
},
|
||||
Negotiation: { label: 'Negotiation', color: '!text-yellow-600' },
|
||||
'Ready to Close': { label: 'Ready to Close', color: '!text-purple-600' },
|
||||
Won: { label: 'Won', color: '!text-green-600' },
|
||||
Lost: { label: 'Lost', color: '!text-red-600' },
|
||||
}
|
||||
|
||||
export function statusDropdownOptions(data, doctype) {
|
||||
let statuses = leadStatuses
|
||||
if (doctype == 'deal') {
|
||||
statuses = dealStatuses
|
||||
}
|
||||
let options = []
|
||||
for (const status in statuses) {
|
||||
options.push({
|
||||
label: statuses[status].label,
|
||||
icon: () => h(IndicatorIcon, { class: statuses[status].color }),
|
||||
onClick: () => {
|
||||
if (doctype == 'deal') {
|
||||
data.deal_status = statuses[status].label
|
||||
} else {
|
||||
data.status = statuses[status].label
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
return options
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user