- Integrate date range input in CallRecording list view - Adjust data fetching part - Specify UX flow Change-Id: I666aaa397a09ec9a5c2c63e76485e7fc4a797a46mr9.5.2
Carlo Venusino
5 years ago
parent
cd6e98a14a
commit
6bc5155662
@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="row justify-center full-width q-gutter-x-sm"
|
||||
>
|
||||
<div
|
||||
class="col-xs-12 col-md-2"
|
||||
>
|
||||
<q-select
|
||||
v-model="filterTypeModel"
|
||||
dense
|
||||
:options="filterTypeOptions"
|
||||
:label="$t('Filter by')"
|
||||
:disable="loading"
|
||||
data-cy="filter-type"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="filterType === 'timerange'"
|
||||
class="row col-xs-12 col-md-4"
|
||||
>
|
||||
<q-input
|
||||
v-model="dateStartFilter"
|
||||
class="q-pr-sm col-6"
|
||||
dense
|
||||
:disable="loading || filterType === null"
|
||||
:label="$t('Start time')"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-popup-proxy
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
@hide="addFilter('startTime', dateStartFilter)"
|
||||
>
|
||||
<q-date
|
||||
v-model="dateStartFilter"
|
||||
mask="YYYY-MM-DD HH:mm"
|
||||
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>
|
||||
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
name="access_time"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-popup-proxy
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
@hide="addFilter('startTime', dateStartFilter)"
|
||||
>
|
||||
<q-time
|
||||
v-model="dateStartFilter"
|
||||
mask="YYYY-MM-DD HH:mm"
|
||||
format24h
|
||||
>
|
||||
<div class="row items-center justify-end">
|
||||
<q-btn
|
||||
v-close-popup
|
||||
:label="$t('Close')"
|
||||
color="primary"
|
||||
flat
|
||||
/>
|
||||
</div>
|
||||
</q-time>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
v-model="dateEndFilter"
|
||||
class="col-6"
|
||||
dense
|
||||
:disable="loading || filterType === null"
|
||||
:label="$t('End time')"
|
||||
@input="triggerFilter"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-popup-proxy
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
@hide="addFilter('endTime', dateEndFilter)"
|
||||
>
|
||||
<q-date
|
||||
v-model="dateEndFilter"
|
||||
mask="YYYY-MM-DD HH:mm"
|
||||
>
|
||||
<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>
|
||||
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
name="access_time"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<q-popup-proxy
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
@hide="addFilter('endTime', dateEndFilter)"
|
||||
>
|
||||
<q-time
|
||||
v-model="dateEndFilter"
|
||||
mask="YYYY-MM-DD HH:mm"
|
||||
format24h
|
||||
>
|
||||
<div class="row items-center justify-end">
|
||||
<q-btn
|
||||
v-close-popup
|
||||
:label="$t('Close')"
|
||||
color="primary"
|
||||
flat
|
||||
/>
|
||||
</div>
|
||||
</q-time>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</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"
|
||||
data-cy="filter-applied-item"
|
||||
@remove="removeFilter(id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'CscCallRecordingFilters',
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
filterTypeModel: null,
|
||||
typedFilter: null,
|
||||
dateStartFilter: null,
|
||||
dateEndFilter: null,
|
||||
filters: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filterType () {
|
||||
return this.filterTypeModel && this.filterTypeModel.value
|
||||
},
|
||||
filterTypeOptions () {
|
||||
return [
|
||||
{
|
||||
label: this.$t('Timerange'),
|
||||
value: 'timerange'
|
||||
}
|
||||
]
|
||||
},
|
||||
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: {
|
||||
triggerFilter (data) {
|
||||
this.addFilter(this.filterTypeModel?.value, this.typedFilter)
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue