432 lines
13 KiB
Vue
432 lines
13 KiB
Vue
<template>
|
|
<LayoutHeader>
|
|
<template #left-header>
|
|
<Breadcrumbs :items="breadcrumbs" />
|
|
</template>
|
|
<template #right-header>
|
|
<CustomActions
|
|
v-if="leadsListView?.customListActions"
|
|
:actions="leadsListView.customListActions"
|
|
/>
|
|
<Button
|
|
variant="solid"
|
|
:label="__('Create')"
|
|
@click="showLeadModal = true"
|
|
>
|
|
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
|
</Button>
|
|
</template>
|
|
</LayoutHeader>
|
|
<ViewControls
|
|
ref="viewControls"
|
|
v-model="leads"
|
|
v-model:loadMore="loadMore"
|
|
v-model:resizeColumn="triggerResize"
|
|
v-model:updatedPageCount="updatedPageCount"
|
|
doctype="CRM Lead"
|
|
:filters="{ converted: 0 }"
|
|
:options="{
|
|
allowedViews: ['list', 'group_by', 'kanban'],
|
|
}"
|
|
/>
|
|
<KanbanView
|
|
v-if="route.params.viewType == 'kanban'"
|
|
v-model="leads"
|
|
:options="{
|
|
getRoute: (row) => ({ name: 'Lead', params: { leadId: row.name } }),
|
|
onNewClick: (column) => onNewClick(column),
|
|
}"
|
|
@update="(data) => viewControls.updateKanbanSettings(data)"
|
|
>
|
|
<template #item-title="{ titleField, itemName }">
|
|
<div class="flex items-center gap-2">
|
|
<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 === 'lead_name' && getRow(itemName, titleField).label
|
|
"
|
|
>
|
|
<Avatar
|
|
class="flex items-center"
|
|
:image="getRow(itemName, titleField).image"
|
|
:label="getRow(itemName, titleField).image_label"
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else-if="
|
|
titleField === 'lead_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-else-if="titleField === 'mobile_no'">
|
|
<PhoneIcon class="h-4 w-4" />
|
|
</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 #item-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' && getRow(itemName, fieldName).label
|
|
"
|
|
>
|
|
<Avatar
|
|
class="flex items-center"
|
|
:image="getRow(itemName, fieldName).logo"
|
|
:label="getRow(itemName, fieldName).label"
|
|
size="xs"
|
|
/>
|
|
</div>
|
|
<div v-else-if="fieldName === 'lead_name'">
|
|
<Avatar
|
|
v-if="getRow(itemName, fieldName).label"
|
|
class="flex items-center"
|
|
:image="getRow(itemName, fieldName).image"
|
|
:label="getRow(itemName, fieldName).image_label"
|
|
size="xs"
|
|
/>
|
|
</div>
|
|
<div v-else-if="fieldName === 'lead_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 === 'Check'">
|
|
<FormControl
|
|
type="checkbox"
|
|
:modelValue="getRow(itemName, fieldName)"
|
|
:disabled="true"
|
|
class="text-gray-900"
|
|
/>
|
|
</div>
|
|
<div v-else class="truncate text-base">
|
|
{{ getRow(itemName, fieldName).label }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</KanbanView>
|
|
<LeadsListView
|
|
ref="leadsListView"
|
|
v-else-if="leads.data && rows.length"
|
|
v-model="leads.data.page_length_count"
|
|
v-model:list="leads"
|
|
:rows="rows"
|
|
:columns="leads.data.columns"
|
|
:options="{
|
|
showTooltip: false,
|
|
resizeColumn: true,
|
|
rowCount: leads.data.row_count,
|
|
totalCount: leads.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="leads.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"
|
|
>
|
|
<LeadsIcon class="h-10 w-10" />
|
|
<span>{{ __('No {0} Found', [__('Leads')]) }}</span>
|
|
<Button :label="__('Create')" @click="showLeadModal = true">
|
|
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<LeadModal
|
|
v-if="showLeadModal"
|
|
v-model="showLeadModal"
|
|
:defaults="defaults"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import CustomActions from '@/components/CustomActions.vue'
|
|
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
|
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
|
import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
|
|
import LayoutHeader from '@/components/LayoutHeader.vue'
|
|
import LeadsListView from '@/components/ListViews/LeadsListView.vue'
|
|
import KanbanView from '@/components/Kanban/KanbanView.vue'
|
|
import LeadModal from '@/components/Modals/LeadModal.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, formatTime } from '@/utils'
|
|
import { Breadcrumbs, Avatar, Tooltip } from 'frappe-ui'
|
|
import { useRoute } from 'vue-router'
|
|
import { ref, computed, reactive, h } from 'vue'
|
|
|
|
const breadcrumbs = [{ label: __('Leads'), route: { name: 'Leads' } }]
|
|
|
|
const { getUser } = usersStore()
|
|
const { getOrganization } = organizationsStore()
|
|
const { getLeadStatus } = statusesStore()
|
|
|
|
const route = useRoute()
|
|
|
|
const leadsListView = ref(null)
|
|
const showLeadModal = ref(false)
|
|
|
|
const defaults = reactive({})
|
|
|
|
// leads data is loaded in the ViewControls component
|
|
const leads = 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 (!leads.value?.data?.data) return []
|
|
if (leads.value.data.view_type === 'group_by') {
|
|
if (!leads.value?.data.group_by_field?.name) return []
|
|
return getGroupedByRows(
|
|
leads.value?.data.data,
|
|
leads.value?.data.group_by_field,
|
|
)
|
|
} else if (leads.value.data.view_type === 'kanban') {
|
|
return getKanbanRows(leads.value.data.data)
|
|
} else {
|
|
return parseRows(leads.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: getLeadStatus(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((lead) => {
|
|
let _rows = {}
|
|
leads.value?.data.rows.forEach((row) => {
|
|
_rows[row] = lead[row]
|
|
|
|
if (row == 'lead_name') {
|
|
_rows[row] = {
|
|
label: lead.lead_name,
|
|
image: lead.image,
|
|
image_label: lead.first_name,
|
|
}
|
|
} else if (row == 'organization') {
|
|
_rows[row] = {
|
|
label: lead.organization,
|
|
logo: getOrganization(lead.organization)?.organization_logo,
|
|
}
|
|
} else if (row == 'status') {
|
|
_rows[row] = {
|
|
label: lead.status,
|
|
color: getLeadStatus(lead.status)?.iconColorClass,
|
|
}
|
|
} else if (row == 'sla_status') {
|
|
let value = lead.sla_status
|
|
let tooltipText = value
|
|
let color =
|
|
lead.sla_status == 'Failed'
|
|
? 'red'
|
|
: lead.sla_status == 'Fulfilled'
|
|
? 'green'
|
|
: 'orange'
|
|
if (value == 'First Response Due') {
|
|
value = __(timeAgo(lead.response_by))
|
|
tooltipText = dateFormat(lead.response_by, dateTooltipFormat)
|
|
if (new Date(lead.response_by) < new Date()) {
|
|
color = 'red'
|
|
}
|
|
}
|
|
_rows[row] = {
|
|
label: tooltipText,
|
|
value: value,
|
|
color: color,
|
|
}
|
|
} else if (row == 'lead_owner') {
|
|
_rows[row] = {
|
|
label: lead.lead_owner && getUser(lead.lead_owner).full_name,
|
|
...(lead.lead_owner && getUser(lead.lead_owner)),
|
|
}
|
|
} else if (row == '_assign') {
|
|
let assignees = JSON.parse(lead._assign) || []
|
|
if (!assignees.length && lead.lead_owner) {
|
|
assignees = [lead.lead_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(lead[row], dateTooltipFormat),
|
|
timeAgo: __(timeAgo(lead[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: lead[field] ? dateFormat(lead[field], dateTooltipFormat) : '',
|
|
timeAgo: lead[row]
|
|
? row == 'first_response_time'
|
|
? formatTime(lead[row])
|
|
: __(timeAgo(lead[row]))
|
|
: '',
|
|
}
|
|
}
|
|
})
|
|
return _rows
|
|
})
|
|
}
|
|
|
|
function onNewClick(column) {
|
|
let column_field = leads.value.params.column_field
|
|
|
|
if (column_field) {
|
|
defaults[column_field] = column.column.name
|
|
}
|
|
|
|
showLeadModal.value = true
|
|
}
|
|
</script>
|