Change-Id: I15e9d100233408fbfe82cbb916c7d2fb76a311f8mr12.0
Hugo Zigha
2 years ago
parent
8e7c0ad2b2
commit
177f01d535
@ -0,0 +1,313 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="row justify-center full-width q-gutter-x-sm"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-xs-12 col-md-3"
|
||||||
|
>
|
||||||
|
<q-select
|
||||||
|
v-model="filterTypeModel"
|
||||||
|
dense
|
||||||
|
:options="filterTypeOptions"
|
||||||
|
:label="$t('Filter by')"
|
||||||
|
data-cy="csc-cdr-filter"
|
||||||
|
:disable="loading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="filterType === 'timerange'"
|
||||||
|
class="row col-xs-12 col-md-6"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
v-model="dateStartFilter"
|
||||||
|
class="q-pr-sm col-6"
|
||||||
|
dense
|
||||||
|
:disable="loading || filterType === null"
|
||||||
|
:label="$t('From')"
|
||||||
|
data-cy="csc-cdr-filter-from"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="loadFormattedDateStart()"
|
||||||
|
>
|
||||||
|
<q-popup-proxy
|
||||||
|
transition-show="scale"
|
||||||
|
transition-hide="scale"
|
||||||
|
@hide="addFilter('startTime', dateStartFilter)"
|
||||||
|
>
|
||||||
|
<q-date
|
||||||
|
v-model="dateStartFilter"
|
||||||
|
mask="YYYY-MM-DD"
|
||||||
|
format24h
|
||||||
|
>
|
||||||
|
<div class="row items-center justify-end">
|
||||||
|
<q-btn
|
||||||
|
v-close-popup
|
||||||
|
:label="$t('Close')"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-date>
|
||||||
|
</q-popup-proxy>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-input
|
||||||
|
v-model="dateEndFilter"
|
||||||
|
class="col-6"
|
||||||
|
dense
|
||||||
|
:disable="loading || filterType === null"
|
||||||
|
:label="$t('To')"
|
||||||
|
data-cy="csc-cdr-filter-to"
|
||||||
|
@input="triggerFilter"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="loadFormattedDateEnd()"
|
||||||
|
>
|
||||||
|
<q-popup-proxy
|
||||||
|
transition-show="scale"
|
||||||
|
transition-hide="scale"
|
||||||
|
@hide="addFilter('endTime', dateEndFilter)"
|
||||||
|
>
|
||||||
|
<q-date
|
||||||
|
v-model="dateEndFilter"
|
||||||
|
mask="YYYY-MM-DD"
|
||||||
|
>
|
||||||
|
<div class="row items-center justify-end">
|
||||||
|
<q-btn
|
||||||
|
v-close-popup
|
||||||
|
:label="$t('Close')"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-date>
|
||||||
|
</q-popup-proxy>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="false"
|
||||||
|
class="row col-xs-12 col-md-3"
|
||||||
|
>
|
||||||
|
<q-select
|
||||||
|
v-model="filterDirection"
|
||||||
|
class="full-width"
|
||||||
|
dense
|
||||||
|
:options="filterDirectionOptions"
|
||||||
|
:label="$t('In/Out')"
|
||||||
|
data-cy="csc-cdr-filter"
|
||||||
|
:disable="loading"
|
||||||
|
@update:model-value="triggerDirectionFilter"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="filterType === 'type'"
|
||||||
|
class="row col-xs-12 col-md-3"
|
||||||
|
>
|
||||||
|
<q-select
|
||||||
|
v-model="filterTypeField"
|
||||||
|
class="full-width"
|
||||||
|
dense
|
||||||
|
:options="filterTypeFieldOptions"
|
||||||
|
:label="$t('Type')"
|
||||||
|
data-cy="csc-cdr-filter"
|
||||||
|
:disable="loading"
|
||||||
|
@update:model-value="triggerTypeFieldFilter"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="row justify-center full-width q-gutter-x-sm"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-xs-12 col-md-4"
|
||||||
|
>
|
||||||
|
<q-chip
|
||||||
|
v-for="({ filterInfo, id }) in filtersList"
|
||||||
|
:key="id"
|
||||||
|
:label="filterInfo"
|
||||||
|
:disable="false"
|
||||||
|
icon="filter_alt"
|
||||||
|
removable
|
||||||
|
dense
|
||||||
|
color="primary"
|
||||||
|
text-color="dark"
|
||||||
|
@remove="removeFilter(id)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CscCdrFilters',
|
||||||
|
props: {
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['filter'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
filterTypeModel: null,
|
||||||
|
filterDirection: null,
|
||||||
|
filterTypeField: null,
|
||||||
|
dateStartFilter: null,
|
||||||
|
dateEndFilter: null,
|
||||||
|
filters: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters([
|
||||||
|
'getCurrentFormattedDateWithDash'
|
||||||
|
]),
|
||||||
|
filterType () {
|
||||||
|
return this.filterTypeModel && this.filterTypeModel.value
|
||||||
|
},
|
||||||
|
filterTypeOptions () {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: this.$t('Timerange'),
|
||||||
|
value: 'timerange'
|
||||||
|
},
|
||||||
|
/* {
|
||||||
|
label: this.$t('Direction'),
|
||||||
|
value: 'direction'
|
||||||
|
}, */
|
||||||
|
{
|
||||||
|
label: this.$t('Type'),
|
||||||
|
value: 'type'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
filterDirectionOptions () {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: this.$t('In'),
|
||||||
|
value: 'in'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('Out'),
|
||||||
|
value: 'out'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
filterTypeFieldOptions () {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: this.$t('Call'),
|
||||||
|
value: 'call'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('Voicemail'),
|
||||||
|
value: 'voicemail'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('Sms'),
|
||||||
|
value: 'sms'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('Fax'),
|
||||||
|
value: 'fax'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
filtersList () {
|
||||||
|
return this.filters.map((filterItem) => {
|
||||||
|
const filterDisplayValue = filterItem.value
|
||||||
|
let filterName
|
||||||
|
switch (filterItem.name) {
|
||||||
|
case 'startTime':
|
||||||
|
filterName = this.$t('Start time')
|
||||||
|
break
|
||||||
|
case 'endTime' :
|
||||||
|
filterName = this.$t('End time')
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
filterName = this.filterTypeOptions.find(option => option.value === filterItem.name).label
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
id: filterItem.name,
|
||||||
|
filterInfo: filterName + ': ' + filterDisplayValue
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
filterTypeModel () {
|
||||||
|
this.resetFilters()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
triggerDirectionFilter () {
|
||||||
|
this.addFilter(this.filterTypeModel?.value, this.filterDirection.value)
|
||||||
|
},
|
||||||
|
triggerTypeFieldFilter () {
|
||||||
|
this.addFilter(this.filterTypeModel?.value, this.filterTypeField.value)
|
||||||
|
},
|
||||||
|
removeFilter (name) {
|
||||||
|
this.filters = this.filters.filter(item => item.name !== name)
|
||||||
|
this.filter()
|
||||||
|
},
|
||||||
|
removeFilters () {
|
||||||
|
if (this.filters.length > 0) {
|
||||||
|
this.filters = []
|
||||||
|
this.filter()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addFilter (name, value) {
|
||||||
|
const valueTrimmed = _.trim(value)
|
||||||
|
if (valueTrimmed) {
|
||||||
|
this.resetFilters()
|
||||||
|
this.filters = this.filters.filter(item => item.name !== name)
|
||||||
|
const filter = {
|
||||||
|
name: name,
|
||||||
|
value: valueTrimmed
|
||||||
|
}
|
||||||
|
this.filters.push(filter)
|
||||||
|
this.filter()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
filter () {
|
||||||
|
const params = {}
|
||||||
|
this.filters.forEach(filter => {
|
||||||
|
params[filter.name] = filter.value
|
||||||
|
})
|
||||||
|
this.$emit('filter', params)
|
||||||
|
},
|
||||||
|
resetFilters () {
|
||||||
|
this.typedFilter = null
|
||||||
|
this.dateStartFilter = null
|
||||||
|
this.dateEndFilter = null
|
||||||
|
this.filterDirection = null
|
||||||
|
this.filterTypeField = null
|
||||||
|
},
|
||||||
|
loadFormattedDateStart () {
|
||||||
|
const currentDate = this.getCurrentFormattedDateWithDash
|
||||||
|
if (!this.dateStartFilter) {
|
||||||
|
this.dateStartFilter = currentDate
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loadFormattedDateEnd () {
|
||||||
|
const currentDate = this.getCurrentFormattedDateWithDash
|
||||||
|
if (!this.dateEndFilter) {
|
||||||
|
this.dateEndFilter = currentDate
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,221 @@
|
|||||||
|
<!-- eslint-disable vue/no-v-model-argument -->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<csc-page-sticky
|
||||||
|
id="csc-page-pbx-statistics-cdr"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
#header
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
v-if="!showFilters"
|
||||||
|
icon="filter_alt"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
:label="$t('Filter')"
|
||||||
|
@click="openFilters"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
v-if="showFilters"
|
||||||
|
icon="clear"
|
||||||
|
color="negative"
|
||||||
|
flat
|
||||||
|
:label="$t('Close filters')"
|
||||||
|
@click="closeFilters"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
#toolbar
|
||||||
|
>
|
||||||
|
<csc-cdr-filters
|
||||||
|
v-if="showFilters"
|
||||||
|
ref="filters"
|
||||||
|
:loading="$wait.is('loadConversations')"
|
||||||
|
class="q-mb-md q-pa-md"
|
||||||
|
@filter="filterEvent"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<div>
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<q-table
|
||||||
|
v-model:pagination="pagination"
|
||||||
|
class="no-shadow"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="conversations"
|
||||||
|
:loading="$wait.is('loadConversations')"
|
||||||
|
row-key="id"
|
||||||
|
@request="fetchPaginatedConversations"
|
||||||
|
>
|
||||||
|
<template #loading>
|
||||||
|
<q-inner-loading
|
||||||
|
showing
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<csc-spinner />
|
||||||
|
</q-inner-loading>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #top-left>
|
||||||
|
<q-btn
|
||||||
|
icon="refresh"
|
||||||
|
size="sm"
|
||||||
|
flat
|
||||||
|
@click="refresh"
|
||||||
|
>
|
||||||
|
{{ $t('Refresh') }}
|
||||||
|
</q-btn>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</csc-page-sticky>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
import CscPageSticky from 'components/CscPageSticky'
|
||||||
|
import { mapWaitingActions } from 'vue-wait'
|
||||||
|
import CscSpinner from 'components/CscSpinner'
|
||||||
|
import { LIST_DEFAULT_ROWS } from 'src/api/common'
|
||||||
|
import CscCdrFilters from 'components/pages/PbxStatistics/CscCdrFilters'
|
||||||
|
|
||||||
|
import _ from 'lodash'
|
||||||
|
export default {
|
||||||
|
name: 'CscPagePbxStatisticsCdr',
|
||||||
|
components: {
|
||||||
|
CscSpinner,
|
||||||
|
CscPageSticky,
|
||||||
|
CscCdrFilters
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
data: [],
|
||||||
|
pagination: {
|
||||||
|
sortBy: 'timestamp',
|
||||||
|
descending: true,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: LIST_DEFAULT_ROWS,
|
||||||
|
rowsNumber: 0
|
||||||
|
},
|
||||||
|
showFilters: false,
|
||||||
|
filter: {
|
||||||
|
startTime: null,
|
||||||
|
endTime: null,
|
||||||
|
caller: null,
|
||||||
|
callee: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('conversations', [
|
||||||
|
'conversations'
|
||||||
|
]),
|
||||||
|
columns () {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
name: 'start_time',
|
||||||
|
required: true,
|
||||||
|
label: this.$t('Start time'),
|
||||||
|
align: 'left',
|
||||||
|
field: row => this.$filters.smartTime(row.start_time),
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'type',
|
||||||
|
required: true,
|
||||||
|
align: 'left',
|
||||||
|
label: this.$t('Type'),
|
||||||
|
field: row => _.capitalize(row.type),
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'caller',
|
||||||
|
required: true,
|
||||||
|
align: 'left',
|
||||||
|
label: this.$t('Caller'),
|
||||||
|
field: row => row.caller,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'callee',
|
||||||
|
required: true,
|
||||||
|
align: 'left',
|
||||||
|
label: this.$t('Callee'),
|
||||||
|
field: row => row.callee,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'direction',
|
||||||
|
required: true,
|
||||||
|
align: 'left',
|
||||||
|
label: this.$t('Direction'),
|
||||||
|
field: row => row.direction,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'duration',
|
||||||
|
required: true,
|
||||||
|
align: 'left',
|
||||||
|
label: this.$t('Duration'),
|
||||||
|
field: row => row.duration,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'status',
|
||||||
|
required: true,
|
||||||
|
align: 'left',
|
||||||
|
label: this.$t('Status'),
|
||||||
|
field: row => row.status,
|
||||||
|
sortable: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted () {
|
||||||
|
await this.refresh()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapWaitingActions('conversations', {
|
||||||
|
loadConversations: 'loadConversations'
|
||||||
|
}),
|
||||||
|
async refresh () {
|
||||||
|
await this.fetchPaginatedConversations({
|
||||||
|
pagination: this.pagination
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async fetchPaginatedConversations (props) {
|
||||||
|
const { page, rowsPerPage, sortBy, descending } = props.pagination
|
||||||
|
const { startTime, endTime, direction, type } = this.filter
|
||||||
|
const count = await this.loadConversations({
|
||||||
|
page,
|
||||||
|
rows: rowsPerPage,
|
||||||
|
order_by: sortBy,
|
||||||
|
order_by_direction: descending ? 'desc' : 'asc',
|
||||||
|
from: startTime,
|
||||||
|
to: endTime,
|
||||||
|
direction: direction,
|
||||||
|
type: type
|
||||||
|
})
|
||||||
|
this.pagination = { ...props.pagination }
|
||||||
|
this.pagination.rowsNumber = count
|
||||||
|
},
|
||||||
|
openFilters () {
|
||||||
|
this.showFilters = true
|
||||||
|
},
|
||||||
|
closeFilters () {
|
||||||
|
if (this.$refs.filters) {
|
||||||
|
this.$refs.filters.removeFilters()
|
||||||
|
}
|
||||||
|
this.showFilters = false
|
||||||
|
},
|
||||||
|
filterEvent (filter) {
|
||||||
|
this.$scrollTo(this.$parent.$el)
|
||||||
|
console.log(filter)
|
||||||
|
this.filter = filter
|
||||||
|
this.fetchPaginatedConversations({
|
||||||
|
pagination: this.pagination
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue