124 lines
3.7 KiB
Vue
124 lines
3.7 KiB
Vue
<template>
|
|
<LayoutHeader>
|
|
<template #left-header>
|
|
<ViewBreadcrumbs v-model="viewControls" routeName="Call Logs" />
|
|
</template>
|
|
<template #right-header>
|
|
<CustomActions
|
|
v-if="callLogsListView?.customListActions"
|
|
:actions="callLogsListView.customListActions"
|
|
/>
|
|
<Button variant="solid" :label="__('Create')" @click="createCallLog">
|
|
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
|
</Button>
|
|
</template>
|
|
</LayoutHeader>
|
|
<ViewControls
|
|
ref="viewControls"
|
|
v-model="callLogs"
|
|
v-model:loadMore="loadMore"
|
|
v-model:resizeColumn="triggerResize"
|
|
v-model:updatedPageCount="updatedPageCount"
|
|
doctype="CRM Call Log"
|
|
/>
|
|
<CallLogsListView
|
|
ref="callLogsListView"
|
|
v-if="callLogs.data && rows.length"
|
|
v-model="callLogs.data.page_length_count"
|
|
v-model:list="callLogs"
|
|
:rows="rows"
|
|
:columns="callLogs.data.columns"
|
|
:options="{
|
|
showTooltip: false,
|
|
resizeColumn: true,
|
|
rowCount: callLogs.data.row_count,
|
|
totalCount: callLogs.data.total_count,
|
|
}"
|
|
@showCallLog="showCallLog"
|
|
@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="callLogs.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"
|
|
>
|
|
<PhoneIcon class="h-10 w-10" />
|
|
<span>{{ __('No {0} Found', [__('Logs')]) }}</span>
|
|
</div>
|
|
</div>
|
|
<CallLogDetailModal
|
|
v-model="showCallLogDetailModal"
|
|
v-model:callLogModal="showCallLogModal"
|
|
v-model:callLog="callLog"
|
|
/>
|
|
<CallLogModal
|
|
v-model="showCallLogModal"
|
|
v-model:callLog="callLog"
|
|
:options="{ afterInsert: () => callLogs.reload() }"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
|
|
import CustomActions from '@/components/CustomActions.vue'
|
|
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
|
import LayoutHeader from '@/components/LayoutHeader.vue'
|
|
import ViewControls from '@/components/ViewControls.vue'
|
|
import CallLogsListView from '@/components/ListViews/CallLogsListView.vue'
|
|
import CallLogDetailModal from '@/components/Modals/CallLogDetailModal.vue'
|
|
import CallLogModal from '@/components/Modals/CallLogModal.vue'
|
|
import { getCallLogDetail } from '@/utils/callLog'
|
|
import { createResource } from 'frappe-ui'
|
|
import { computed, ref } from 'vue'
|
|
|
|
const callLogsListView = ref(null)
|
|
const showCallLogModal = ref(false)
|
|
|
|
// callLogs data is loaded in the ViewControls component
|
|
const callLogs = ref({})
|
|
const loadMore = ref(1)
|
|
const triggerResize = ref(1)
|
|
const updatedPageCount = ref(20)
|
|
const viewControls = ref(null)
|
|
|
|
const rows = computed(() => {
|
|
if (
|
|
!callLogs.value?.data?.data ||
|
|
!['list', 'group_by'].includes(callLogs.value.data.view_type)
|
|
)
|
|
return []
|
|
return callLogs.value?.data.data.map((callLog) => {
|
|
let _rows = {}
|
|
callLogs.value?.data.rows.forEach((row) => {
|
|
_rows[row] = getCallLogDetail(row, callLog, callLogs.value?.data.columns)
|
|
})
|
|
return _rows
|
|
})
|
|
})
|
|
|
|
const showCallLogDetailModal = ref(false)
|
|
const callLog = ref({})
|
|
|
|
function showCallLog(name) {
|
|
showCallLogDetailModal.value = true
|
|
callLog.value = createResource({
|
|
url: 'crm.fcrm.doctype.crm_call_log.crm_call_log.get_call_log',
|
|
params: { name },
|
|
cache: ['call_log', name],
|
|
auto: true,
|
|
})
|
|
}
|
|
|
|
function createCallLog() {
|
|
callLog.value = {}
|
|
showCallLogModal.value = true
|
|
}
|
|
</script>
|