AC: Can filter by display_name Can filter by extension Can filter by primary_number Can filter by alias_number Can filter the same way as it is possible for PBXSeats Can navigate through filtered items via pagination - in addition there were added "data-cy" attributes to simplify selectors for E2E tools like Cypress. Change-Id: Iba3919a198c2464982502d529b54182bc266bb01mr9.1.1
Sergii Leonenko
5 years ago
parent
cd9c2a8bcb
commit
61f635b859
@ -0,0 +1,162 @@
|
||||
<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('pbxConfig.seatsFiltersFilterByLabel')"
|
||||
:disable="loading"
|
||||
data-cy="filter-type"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-12 col-md-3"
|
||||
>
|
||||
<q-input
|
||||
v-model="typedFilter"
|
||||
type="text"
|
||||
dense
|
||||
:disable="loading || filterType === null"
|
||||
:label="(filterType === null) ? $t('pbxConfig.seatsFilterInputLabel') : filterTypeModel.label"
|
||||
data-cy="filter-value"
|
||||
@keypress.enter="triggerFilter"
|
||||
>
|
||||
<template
|
||||
v-slot:append
|
||||
>
|
||||
<q-btn
|
||||
icon="search"
|
||||
color="primary"
|
||||
dense
|
||||
flat
|
||||
:disable="loading"
|
||||
data-cy="filter-btn-search"
|
||||
@click="triggerFilter"
|
||||
/>
|
||||
</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: 'CscPbxGroupFilters',
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
filterTypeModel: null,
|
||||
typedFilter: null,
|
||||
filters: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filterType () {
|
||||
return this.filterTypeModel && this.filterTypeModel.value
|
||||
},
|
||||
filterTypeOptions () {
|
||||
return [
|
||||
{
|
||||
label: this.$t('pbxConfig.groupName'),
|
||||
value: 'display_name'
|
||||
},
|
||||
{
|
||||
label: this.$t('pbxConfig.extension'),
|
||||
value: 'pbx_extension'
|
||||
},
|
||||
{
|
||||
label: this.$t('pbxConfig.primaryNumber'),
|
||||
value: 'primary_number'
|
||||
},
|
||||
{
|
||||
label: this.$t('pbxConfig.aliasNumbers'),
|
||||
value: 'alias'
|
||||
}
|
||||
]
|
||||
},
|
||||
filtersList () {
|
||||
return this.filters.map((filterItem) => {
|
||||
const filterDisplayValue = filterItem.value
|
||||
return {
|
||||
id: filterItem.name,
|
||||
filterInfo: this.filterTypeOptions.find(option => option.value === filterItem.name).label + ': ' + filterDisplayValue
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterTypeModel () {
|
||||
this.typedFilter = null
|
||||
}
|
||||
},
|
||||
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.typedFilter = null
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue