559 lines
17 KiB
Vue
559 lines
17 KiB
Vue
<template>
|
|
<LayoutHeader>
|
|
<template #left-header>
|
|
<ViewBreadcrumbs v-model="viewControls" routeName="Deals" />
|
|
</template>
|
|
<template #right-header>
|
|
<CustomActions
|
|
v-if="dealsListView?.customListActions"
|
|
:actions="dealsListView.customListActions"
|
|
/>
|
|
<Button
|
|
variant="solid"
|
|
:label="__('Create')"
|
|
@click="showDealModal = true"
|
|
>
|
|
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
|
</Button>
|
|
</template>
|
|
</LayoutHeader>
|
|
<ViewControls
|
|
ref="viewControls"
|
|
v-model="deals"
|
|
v-model:loadMore="loadMore"
|
|
v-model:resizeColumn="triggerResize"
|
|
v-model:updatedPageCount="updatedPageCount"
|
|
doctype="CRM Deal"
|
|
:options="{
|
|
allowedViews: ['list', 'group_by', 'kanban'],
|
|
}"
|
|
/>
|
|
<KanbanView
|
|
v-if="route.params.viewType == 'kanban'"
|
|
v-model="deals"
|
|
:options="{
|
|
getRoute: (row) => ({
|
|
name: 'Deal',
|
|
params: { dealId: row.name },
|
|
query: { view: route.query.view, viewType: route.params.viewType },
|
|
}),
|
|
onNewClick: (column) => onNewClick(column),
|
|
}"
|
|
@update="(data) => viewControls.updateKanbanSettings(data)"
|
|
@loadMore="(columnName) => viewControls.loadMoreKanban(columnName)"
|
|
>
|
|
<template #title="{ titleField, itemName }">
|
|
<div class="flex gap-2 items-center">
|
|
<div v-if="titleField === 'status'">
|
|
<IndicatorIcon :class="getRow(itemName, titleField).color" />
|
|
</div>
|
|
<div
|
|
v-else-if="
|
|
titleField === 'organization' && getRow(itemName, titleField).label
|
|
"
|
|
>
|
|
<Avatar
|
|
class="flex items-center"
|
|
:image="getRow(itemName, titleField).logo"
|
|
:label="getRow(itemName, titleField).label"
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else-if="
|
|
titleField === 'deal_owner' &&
|
|
getRow(itemName, titleField).full_name
|
|
"
|
|
>
|
|
<Avatar
|
|
class="flex items-center"
|
|
:image="getRow(itemName, titleField).user_image"
|
|
:label="getRow(itemName, titleField).full_name"
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
[
|
|
'modified',
|
|
'creation',
|
|
'first_response_time',
|
|
'first_responded_on',
|
|
'response_by',
|
|
].includes(titleField)
|
|
"
|
|
class="truncate text-base"
|
|
>
|
|
<Tooltip :text="getRow(itemName, titleField).label">
|
|
<div>{{ getRow(itemName, titleField).timeAgo }}</div>
|
|
</Tooltip>
|
|
</div>
|
|
<div v-else-if="titleField === 'sla_status'" class="truncate text-base">
|
|
<Badge
|
|
v-if="getRow(itemName, titleField).value"
|
|
:variant="'subtle'"
|
|
:theme="getRow(itemName, titleField).color"
|
|
size="md"
|
|
:label="getRow(itemName, titleField).value"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else-if="getRow(itemName, titleField).label"
|
|
class="truncate text-base"
|
|
>
|
|
{{ getRow(itemName, titleField).label }}
|
|
</div>
|
|
<div class="text-ink-gray-4" v-else>{{ __('No Title') }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #fields="{ fieldName, itemName }">
|
|
<div
|
|
v-if="getRow(itemName, fieldName).label"
|
|
class="truncate flex items-center gap-2"
|
|
>
|
|
<div v-if="fieldName === 'status'">
|
|
<IndicatorIcon :class="getRow(itemName, fieldName).color" />
|
|
</div>
|
|
<div v-else-if="fieldName === 'organization'">
|
|
<Avatar
|
|
v-if="getRow(itemName, fieldName).label"
|
|
class="flex items-center"
|
|
:image="getRow(itemName, fieldName).logo"
|
|
:label="getRow(itemName, fieldName).label"
|
|
size="xs"
|
|
/>
|
|
</div>
|
|
<div v-else-if="fieldName === 'deal_owner'">
|
|
<Avatar
|
|
v-if="getRow(itemName, fieldName).full_name"
|
|
class="flex items-center"
|
|
:image="getRow(itemName, fieldName).user_image"
|
|
:label="getRow(itemName, fieldName).full_name"
|
|
size="xs"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
[
|
|
'modified',
|
|
'creation',
|
|
'first_response_time',
|
|
'first_responded_on',
|
|
'response_by',
|
|
].includes(fieldName)
|
|
"
|
|
class="truncate text-base"
|
|
>
|
|
<Tooltip :text="getRow(itemName, fieldName).label">
|
|
<div>{{ getRow(itemName, fieldName).timeAgo }}</div>
|
|
</Tooltip>
|
|
</div>
|
|
<div v-else-if="fieldName === 'sla_status'" class="truncate text-base">
|
|
<Badge
|
|
v-if="getRow(itemName, fieldName).value"
|
|
:variant="'subtle'"
|
|
:theme="getRow(itemName, fieldName).color"
|
|
size="md"
|
|
:label="getRow(itemName, fieldName).value"
|
|
/>
|
|
</div>
|
|
<div v-else-if="fieldName === '_assign'" class="flex items-center">
|
|
<MultipleAvatar
|
|
:avatars="getRow(itemName, fieldName).label"
|
|
size="xs"
|
|
/>
|
|
</div>
|
|
<div v-else class="truncate text-base">
|
|
{{ getRow(itemName, fieldName).label }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #actions="{ itemName }">
|
|
<div class="flex gap-2 items-center justify-between">
|
|
<div class="text-ink-gray-5 flex items-center gap-1.5">
|
|
<EmailAtIcon class="h-4 w-4" />
|
|
<span v-if="getRow(itemName, '_email_count').label">
|
|
{{ getRow(itemName, '_email_count').label }}
|
|
</span>
|
|
<span class="text-3xl leading-[0]"> · </span>
|
|
<NoteIcon class="h-4 w-4" />
|
|
<span v-if="getRow(itemName, '_note_count').label">
|
|
{{ getRow(itemName, '_note_count').label }}
|
|
</span>
|
|
<span class="text-3xl leading-[0]"> · </span>
|
|
<TaskIcon class="h-4 w-4" />
|
|
<span v-if="getRow(itemName, '_task_count').label">
|
|
{{ getRow(itemName, '_task_count').label }}
|
|
</span>
|
|
<span class="text-3xl leading-[0]"> · </span>
|
|
<CommentIcon class="h-4 w-4" />
|
|
<span v-if="getRow(itemName, '_comment_count').label">
|
|
{{ getRow(itemName, '_comment_count').label }}
|
|
</span>
|
|
</div>
|
|
<Dropdown
|
|
class="flex items-center gap-2"
|
|
:options="actions(itemName)"
|
|
variant="ghost"
|
|
@click.stop.prevent
|
|
>
|
|
<Button icon="plus" variant="ghost" />
|
|
</Dropdown>
|
|
</div>
|
|
</template>
|
|
</KanbanView>
|
|
<DealsListView
|
|
ref="dealsListView"
|
|
v-else-if="deals.data && rows.length"
|
|
v-model="deals.data.page_length_count"
|
|
v-model:list="deals"
|
|
:rows="rows"
|
|
:columns="deals.data.columns"
|
|
:options="{
|
|
showTooltip: false,
|
|
resizeColumn: true,
|
|
rowCount: deals.data.row_count,
|
|
totalCount: deals.data.total_count,
|
|
}"
|
|
@loadMore="() => loadMore++"
|
|
@columnWidthUpdated="() => triggerResize++"
|
|
@updatePageCount="(count) => (updatedPageCount = count)"
|
|
@applyFilter="(data) => viewControls.applyFilter(data)"
|
|
@applyLikeFilter="(data) => viewControls.applyLikeFilter(data)"
|
|
@likeDoc="(data) => viewControls.likeDoc(data)"
|
|
@selectionsChanged="
|
|
(selections) => viewControls.handleSelectionsChange(selections)
|
|
"
|
|
/>
|
|
<div v-else-if="deals.data" class="flex h-full items-center justify-center">
|
|
<div
|
|
class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
|
|
>
|
|
<DealsIcon class="h-10 w-10" />
|
|
<span>{{ __('No {0} Found', [__('Deals')]) }}</span>
|
|
<Button :label="__('Create')" @click="showDealModal = true">
|
|
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<DealModal
|
|
v-if="showDealModal"
|
|
v-model="showDealModal"
|
|
v-model:quickEntry="showQuickEntryModal"
|
|
:defaults="defaults"
|
|
/>
|
|
<NoteModal
|
|
v-if="showNoteModal"
|
|
v-model="showNoteModal"
|
|
:note="note"
|
|
doctype="CRM Deal"
|
|
:doc="docname"
|
|
/>
|
|
<TaskModal
|
|
v-if="showTaskModal"
|
|
v-model="showTaskModal"
|
|
:task="task"
|
|
doctype="CRM Deal"
|
|
:doc="docname"
|
|
/>
|
|
<QuickEntryModal
|
|
v-if="showQuickEntryModal"
|
|
v-model="showQuickEntryModal"
|
|
doctype="CRM Deal"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
|
|
import MultipleAvatar from '@/components/MultipleAvatar.vue'
|
|
import CustomActions from '@/components/CustomActions.vue'
|
|
import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
|
|
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
|
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
|
import TaskIcon from '@/components/Icons/TaskIcon.vue'
|
|
import CommentIcon from '@/components/Icons/CommentIcon.vue'
|
|
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
|
import DealsIcon from '@/components/Icons/DealsIcon.vue'
|
|
import LayoutHeader from '@/components/LayoutHeader.vue'
|
|
import DealsListView from '@/components/ListViews/DealsListView.vue'
|
|
import KanbanView from '@/components/Kanban/KanbanView.vue'
|
|
import DealModal from '@/components/Modals/DealModal.vue'
|
|
import NoteModal from '@/components/Modals/NoteModal.vue'
|
|
import TaskModal from '@/components/Modals/TaskModal.vue'
|
|
import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
|
|
import ViewControls from '@/components/ViewControls.vue'
|
|
import { getMeta } from '@/stores/meta'
|
|
import { globalStore } from '@/stores/global'
|
|
import { usersStore } from '@/stores/users'
|
|
import { organizationsStore } from '@/stores/organizations'
|
|
import { statusesStore } from '@/stores/statuses'
|
|
import { callEnabled } from '@/composables/settings'
|
|
import { formatDate, timeAgo, website, formatTime } from '@/utils'
|
|
import { Tooltip, Avatar, Dropdown } from 'frappe-ui'
|
|
import { useRoute } from 'vue-router'
|
|
import { ref, reactive, computed, h } from 'vue'
|
|
|
|
const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
|
|
getMeta('CRM Deal')
|
|
const { makeCall } = globalStore()
|
|
const { getUser } = usersStore()
|
|
const { getOrganization } = organizationsStore()
|
|
const { getDealStatus } = statusesStore()
|
|
|
|
const route = useRoute()
|
|
|
|
const dealsListView = ref(null)
|
|
const showDealModal = ref(false)
|
|
const showQuickEntryModal = ref(false)
|
|
|
|
const defaults = reactive({})
|
|
|
|
// deals data is loaded in the ViewControls component
|
|
const deals = ref({})
|
|
const loadMore = ref(1)
|
|
const triggerResize = ref(1)
|
|
const updatedPageCount = ref(20)
|
|
const viewControls = ref(null)
|
|
|
|
function getRow(name, field) {
|
|
function getValue(value) {
|
|
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
|
return value
|
|
}
|
|
return { label: value }
|
|
}
|
|
return getValue(rows.value?.find((row) => row.name == name)[field])
|
|
}
|
|
|
|
// Rows
|
|
const rows = computed(() => {
|
|
if (!deals.value?.data?.data) return []
|
|
if (deals.value.data.view_type === 'group_by') {
|
|
if (!deals.value?.data.group_by_field?.fieldname) return []
|
|
return getGroupedByRows(
|
|
deals.value?.data.data,
|
|
deals.value?.data.group_by_field,
|
|
deals.value.data.columns,
|
|
)
|
|
} else if (deals.value.data.view_type === 'kanban') {
|
|
return getKanbanRows(deals.value.data.data, deals.value.data.fields)
|
|
} else {
|
|
return parseRows(deals.value?.data.data, deals.value.data.columns)
|
|
}
|
|
})
|
|
|
|
function getGroupedByRows(listRows, groupByField, columns) {
|
|
let groupedRows = []
|
|
|
|
groupByField.options?.forEach((option) => {
|
|
let filteredRows = []
|
|
|
|
if (!option) {
|
|
filteredRows = listRows.filter((row) => !row[groupByField.fieldname])
|
|
} else {
|
|
filteredRows = listRows.filter(
|
|
(row) => row[groupByField.fieldname] == option,
|
|
)
|
|
}
|
|
|
|
let groupDetail = {
|
|
label: groupByField.label,
|
|
group: option || __(' '),
|
|
collapsed: false,
|
|
rows: parseRows(filteredRows, columns),
|
|
}
|
|
if (groupByField.fieldname == 'status') {
|
|
groupDetail.icon = () =>
|
|
h(IndicatorIcon, {
|
|
class: getDealStatus(option)?.color,
|
|
})
|
|
}
|
|
groupedRows.push(groupDetail)
|
|
})
|
|
|
|
return groupedRows || listRows
|
|
}
|
|
|
|
function getKanbanRows(data, columns) {
|
|
let _rows = []
|
|
data.forEach((column) => {
|
|
column.data?.forEach((row) => {
|
|
_rows.push(row)
|
|
})
|
|
})
|
|
return parseRows(_rows, columns)
|
|
}
|
|
|
|
function parseRows(rows, columns = []) {
|
|
let view_type = deals.value.data.view_type
|
|
let key = view_type === 'kanban' ? 'fieldname' : 'key'
|
|
let type = view_type === 'kanban' ? 'fieldtype' : 'type'
|
|
|
|
return rows.map((deal) => {
|
|
let _rows = {}
|
|
deals.value.data.rows.forEach((row) => {
|
|
_rows[row] = deal[row]
|
|
|
|
let fieldType = columns?.find((col) => (col[key] || col.value) == row)?.[
|
|
type
|
|
]
|
|
|
|
if (
|
|
fieldType &&
|
|
['Date', 'Datetime'].includes(fieldType) &&
|
|
!['modified', 'creation'].includes(row)
|
|
) {
|
|
_rows[row] = formatDate(deal[row], '', true, fieldType == 'Datetime')
|
|
}
|
|
|
|
if (fieldType && fieldType == 'Currency') {
|
|
_rows[row] = getFormattedCurrency(row, deal)
|
|
}
|
|
|
|
if (fieldType && fieldType == 'Float') {
|
|
_rows[row] = getFormattedFloat(row, deal)
|
|
}
|
|
|
|
if (fieldType && fieldType == 'Percent') {
|
|
_rows[row] = getFormattedPercent(row, deal)
|
|
}
|
|
|
|
if (row == 'organization') {
|
|
_rows[row] = {
|
|
label: deal.organization,
|
|
logo: getOrganization(deal.organization)?.organization_logo,
|
|
}
|
|
} else if (row === 'website') {
|
|
_rows[row] = website(deal.website)
|
|
} else if (row == 'status') {
|
|
_rows[row] = {
|
|
label: deal.status,
|
|
color: getDealStatus(deal.status)?.color,
|
|
}
|
|
} else if (row == 'sla_status') {
|
|
let value = deal.sla_status
|
|
let tooltipText = value
|
|
let color =
|
|
deal.sla_status == 'Failed'
|
|
? 'red'
|
|
: deal.sla_status == 'Fulfilled'
|
|
? 'green'
|
|
: 'orange'
|
|
if (value == 'First Response Due') {
|
|
value = __(timeAgo(deal.response_by))
|
|
tooltipText = formatDate(deal.response_by)
|
|
if (new Date(deal.response_by) < new Date()) {
|
|
color = 'red'
|
|
}
|
|
}
|
|
_rows[row] = {
|
|
label: tooltipText,
|
|
value: value,
|
|
color: color,
|
|
}
|
|
} else if (row == 'deal_owner') {
|
|
_rows[row] = {
|
|
label: deal.deal_owner && getUser(deal.deal_owner).full_name,
|
|
...(deal.deal_owner && getUser(deal.deal_owner)),
|
|
}
|
|
} else if (row == '_assign') {
|
|
let assignees = JSON.parse(deal._assign || '[]')
|
|
_rows[row] = assignees.map((user) => ({
|
|
name: user,
|
|
image: getUser(user).user_image,
|
|
label: getUser(user).full_name,
|
|
}))
|
|
} else if (['modified', 'creation'].includes(row)) {
|
|
_rows[row] = {
|
|
label: formatDate(deal[row]),
|
|
timeAgo: __(timeAgo(deal[row])),
|
|
}
|
|
} else if (
|
|
['first_response_time', 'first_responded_on', 'response_by'].includes(
|
|
row,
|
|
)
|
|
) {
|
|
let field = row == 'response_by' ? 'response_by' : 'first_responded_on'
|
|
_rows[row] = {
|
|
label: deal[field] ? formatDate(deal[field]) : '',
|
|
timeAgo: deal[row]
|
|
? row == 'first_response_time'
|
|
? formatTime(deal[row])
|
|
: __(timeAgo(deal[row]))
|
|
: '',
|
|
}
|
|
}
|
|
})
|
|
_rows['_email_count'] = deal._email_count
|
|
_rows['_note_count'] = deal._note_count
|
|
_rows['_task_count'] = deal._task_count
|
|
_rows['_comment_count'] = deal._comment_count
|
|
return _rows
|
|
})
|
|
}
|
|
|
|
function onNewClick(column) {
|
|
let column_field = deals.value.params.column_field
|
|
|
|
if (column_field) {
|
|
defaults[column_field] = column.column.name
|
|
}
|
|
|
|
showDealModal.value = true
|
|
}
|
|
|
|
function actions(itemName) {
|
|
let mobile_no = getRow(itemName, 'mobile_no')?.label || ''
|
|
let actions = [
|
|
{
|
|
icon: h(PhoneIcon, { class: 'h-4 w-4' }),
|
|
label: __('Make a Call'),
|
|
onClick: () => makeCall(mobile_no),
|
|
condition: () => mobile_no && callEnabled.value,
|
|
},
|
|
{
|
|
icon: h(NoteIcon, { class: 'h-4 w-4' }),
|
|
label: __('New Note'),
|
|
onClick: () => showNote(itemName),
|
|
},
|
|
{
|
|
icon: h(TaskIcon, { class: 'h-4 w-4' }),
|
|
label: __('New Task'),
|
|
onClick: () => showTask(itemName),
|
|
},
|
|
]
|
|
return actions.filter((action) =>
|
|
action.condition ? action.condition() : true,
|
|
)
|
|
}
|
|
|
|
const docname = ref('')
|
|
const showNoteModal = ref(false)
|
|
const note = ref({
|
|
title: '',
|
|
content: '',
|
|
})
|
|
|
|
function showNote(name) {
|
|
docname.value = name
|
|
showNoteModal.value = true
|
|
}
|
|
|
|
const showTaskModal = ref(false)
|
|
const task = ref({
|
|
title: '',
|
|
description: '',
|
|
assigned_to: '',
|
|
due_date: '',
|
|
priority: 'Low',
|
|
status: 'Backlog',
|
|
})
|
|
|
|
function showTask(name) {
|
|
docname.value = name
|
|
showTaskModal.value = true
|
|
}
|
|
</script>
|