122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
<template>
|
|
<LayoutHeader>
|
|
<template #left-header>
|
|
<Breadcrumbs :items="[{ label: list.title }]" />
|
|
</template>
|
|
</LayoutHeader>
|
|
<div class="flex justify-between items-center px-5 pb-2.5 border-b">
|
|
<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>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Button icon="more-horizontal" />
|
|
</div>
|
|
</div>
|
|
<ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
|
|
</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 { secondsToDuration } from '@/utils'
|
|
import { Button, createListResource } from 'frappe-ui'
|
|
import { computed } from 'vue'
|
|
|
|
const list = {
|
|
title: 'Call Logs',
|
|
plural_label: 'Call Logs',
|
|
singular_label: 'Call Log',
|
|
}
|
|
|
|
const callLogs = createListResource({
|
|
type: 'list',
|
|
doctype: 'CRM Call Log',
|
|
fields: [
|
|
'name',
|
|
'from',
|
|
'to',
|
|
'duration',
|
|
'start_time',
|
|
'end_time',
|
|
'status',
|
|
'type',
|
|
'recording_url',
|
|
'creation',
|
|
],
|
|
orderBy: 'creation desc',
|
|
cache: 'Call Logs',
|
|
pageLength: 999,
|
|
auto: true,
|
|
})
|
|
|
|
const columns = [
|
|
{
|
|
label: 'From',
|
|
key: 'from',
|
|
type: 'data',
|
|
size: 'w-32',
|
|
},
|
|
{
|
|
label: 'To',
|
|
key: 'to',
|
|
type: 'data',
|
|
size: 'w-32',
|
|
},
|
|
{
|
|
label: 'Duration',
|
|
key: 'duration',
|
|
type: 'icon',
|
|
size: 'w-20',
|
|
},
|
|
{
|
|
label: 'Type',
|
|
key: 'type',
|
|
type: 'icon',
|
|
size: 'w-32',
|
|
},
|
|
{
|
|
label: 'Status',
|
|
key: 'status',
|
|
type: 'badge',
|
|
size: 'w-32',
|
|
},
|
|
{
|
|
label: 'Created on',
|
|
key: 'creation',
|
|
type: 'pretty_date',
|
|
size: 'w-28',
|
|
},
|
|
]
|
|
|
|
const rows = computed(() => {
|
|
return callLogs.data?.map((callLog) => {
|
|
return {
|
|
name: callLog.name,
|
|
from: callLog.from,
|
|
to: callLog.to,
|
|
duration: {
|
|
label: secondsToDuration(callLog.duration),
|
|
icon: 'clock',
|
|
},
|
|
type: {
|
|
label: callLog.type,
|
|
icon: callLog.type === 'Incoming' ? 'phone-incoming' : 'phone-outgoing',
|
|
},
|
|
status: {
|
|
label: callLog.status,
|
|
color: callLog.status === 'Completed' ? 'green' : 'gray',
|
|
},
|
|
creation: callLog.creation,
|
|
}
|
|
})
|
|
})
|
|
</script>
|