401 lines
12 KiB
Vue
401 lines
12 KiB
Vue
<template>
|
|
<LayoutHeader>
|
|
<template #left-header>
|
|
<Breadcrumbs :items="breadcrumbs" />
|
|
</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 } }),
|
|
onNewClick: (column) => onNewClick(column),
|
|
}"
|
|
@update="(data) => viewControls.updateKanbanSettings(data)"
|
|
>
|
|
<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-gray-500" 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 class="truncate text-base">
|
|
{{ getRow(itemName, fieldName).label }}
|
|
</div>
|
|
</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)"
|
|
/>
|
|
<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-gray-500"
|
|
>
|
|
<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"
|
|
:defaults="defaults"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import CustomActions from '@/components/CustomActions.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 ViewControls from '@/components/ViewControls.vue'
|
|
import { usersStore } from '@/stores/users'
|
|
import { organizationsStore } from '@/stores/organizations'
|
|
import { statusesStore } from '@/stores/statuses'
|
|
import {
|
|
dateFormat,
|
|
dateTooltipFormat,
|
|
timeAgo,
|
|
formatNumberIntoCurrency,
|
|
formatTime,
|
|
} from '@/utils'
|
|
import { Breadcrumbs, Tooltip, Avatar } from 'frappe-ui'
|
|
import { useRoute } from 'vue-router'
|
|
import { ref, reactive, computed, h } from 'vue'
|
|
|
|
const breadcrumbs = [{ label: __('Deals'), route: { name: 'Deals' } }]
|
|
|
|
const { getUser } = usersStore()
|
|
const { getOrganization } = organizationsStore()
|
|
const { getDealStatus } = statusesStore()
|
|
|
|
const route = useRoute()
|
|
|
|
const dealsListView = ref(null)
|
|
const showDealModal = 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') {
|
|
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?.name) return []
|
|
return getGroupedByRows(
|
|
deals.value?.data.data,
|
|
deals.value?.data.group_by_field,
|
|
)
|
|
} else if (deals.value.data.view_type === 'kanban') {
|
|
return getKanbanRows(deals.value.data.data)
|
|
} else {
|
|
return parseRows(deals.value?.data.data)
|
|
}
|
|
})
|
|
|
|
function getGroupedByRows(listRows, groupByField) {
|
|
let groupedRows = []
|
|
|
|
groupByField.options?.forEach((option) => {
|
|
let filteredRows = []
|
|
|
|
if (!option) {
|
|
filteredRows = listRows.filter((row) => !row[groupByField.name])
|
|
} else {
|
|
filteredRows = listRows.filter((row) => row[groupByField.name] == option)
|
|
}
|
|
|
|
let groupDetail = {
|
|
label: groupByField.label,
|
|
group: option || __(' '),
|
|
collapsed: false,
|
|
rows: parseRows(filteredRows),
|
|
}
|
|
if (groupByField.name == 'status') {
|
|
groupDetail.icon = () =>
|
|
h(IndicatorIcon, {
|
|
class: getDealStatus(option)?.iconColorClass,
|
|
})
|
|
}
|
|
groupedRows.push(groupDetail)
|
|
})
|
|
|
|
return groupedRows || listRows
|
|
}
|
|
|
|
function getKanbanRows(data) {
|
|
let _rows = []
|
|
data.forEach((column) => {
|
|
column.data?.forEach((row) => {
|
|
_rows.push(row)
|
|
})
|
|
})
|
|
return parseRows(_rows)
|
|
}
|
|
|
|
function parseRows(rows) {
|
|
return rows.map((deal) => {
|
|
let _rows = {}
|
|
deals.value.data.rows.forEach((row) => {
|
|
_rows[row] = deal[row]
|
|
|
|
if (row == 'organization') {
|
|
_rows[row] = {
|
|
label: deal.organization,
|
|
logo: getOrganization(deal.organization)?.organization_logo,
|
|
}
|
|
} else if (row == 'annual_revenue') {
|
|
_rows[row] = formatNumberIntoCurrency(
|
|
deal.annual_revenue,
|
|
deal.currency,
|
|
)
|
|
} else if (row == 'status') {
|
|
_rows[row] = {
|
|
label: deal.status,
|
|
color: getDealStatus(deal.status)?.iconColorClass,
|
|
}
|
|
} 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 = dateFormat(deal.response_by, dateTooltipFormat)
|
|
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) || []
|
|
if (!assignees.length && deal.deal_owner) {
|
|
assignees = [deal.deal_owner]
|
|
}
|
|
_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: dateFormat(deal[row], dateTooltipFormat),
|
|
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] ? dateFormat(deal[field], dateTooltipFormat) : '',
|
|
timeAgo: deal[row]
|
|
? row == 'first_response_time'
|
|
? formatTime(deal[row])
|
|
: __(timeAgo(deal[row]))
|
|
: '',
|
|
}
|
|
}
|
|
})
|
|
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
|
|
}
|
|
</script>
|