@ -1,94 +1,90 @@
< template >
< div
class = "csc-pbx-device-filters"
>
< div >
< div
class = " csc-pbx-device-filter-inputs row justify-center sm-gutter items-end "
class = "row justify-center full-width q-gutter-x-sm"
>
< csc -search -input
: label = "$t('pbxConfig.deviceStationName')"
: phrase = "stationNameFilter"
: searching = "loading"
@ search = "filterStationName"
@ reset = "resetStationName"
/ >
< csc -search -input
: label = "$t('pbxConfig.deviceIdentifier')"
: phrase = "identifierFilter"
: searching = "loading"
@ search = "filterIdentifier"
@ reset = "resetIdentifier"
/ >
< csc -pbx -model -select
: value = "profileFilter"
: profiles = "profiles"
: profile - map = "profileMap"
: has - reset - button = "true"
@ opened = "$emit('model-select-opened')"
@ input = "filterProfile"
@ reset = "resetProfile"
/ >
< div
class = "col-xs-12 col-md-2"
>
< q -select
v - model = "filterTypeModel"
dense
: options = "filterTypeOptions"
: label = "$t('pbxConfig.seatsFiltersFilterByLabel')"
: disable = "loading"
/ >
< / div >
< div
class = "col-xs-12 col-md-2"
>
< q -input
v - if = "filterType !== 'profileFilter'"
v - model = "typedFilter"
type = "text"
dense
: disable = "loading || filterType === null"
: label = "(filterType === null) ? $t('pbxConfig.seatsFilterInputLabel') : filterTypeModel.label"
@ keypress . enter = "triggerFilter"
>
< template
v - slot : append
>
< q -btn
icon = "search"
color = "primary"
dense
flat
: disable = "loading"
@ click = "triggerFilter"
/ >
< / template >
< / q - i n p u t >
< csc -pbx -model -select
v - if = "filterType === 'profileFilter'"
v - model = "typedFilter"
: profiles = "deviceProfileList"
: profile - map = "deviceProfileMap"
: disable = "loading || filterType === null"
dense
@ opened = "$emit('model-select-opened')"
@ input = "triggerFilter"
/ >
< / div >
< / div >
< div
class = "row justify-center"
class = "row justify-center full-width q-gutter-x-sm "
>
< q -btn
flat
icon = "clear"
color = "default"
: disable = "loading"
: label = "$t('pbxConfig.closeFilters')"
@ click = "$emit('close-filters')"
/ >
< q -btn
flat
icon = "filter_alt"
color = "negative"
: disable = "loading"
: label = "$t('pbxConfig.resetFilters')"
@ click = "$emit('reset-filters')"
/ >
< 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 CscPbxModelSelect from '../PbxConfiguration/CscPbxModelSelect'
import CscSearchInput from '../../CscSearchInput
import { mapState } from 'vuex
export default {
name : 'CscPbxDeviceFilters' ,
components : {
CscSearchInput ,
CscPbxModelSelect
} ,
props : {
stationNameFilter : {
type : String ,
default : ''
} ,
identifierFilter : {
type : String ,
default : ''
} ,
profileFilter : {
type : Number ,
default : null
} ,
profiles : {
type : Array ,
default ( ) {
return [ ]
}
} ,
profileMap : {
type : Object ,
default : null
} ,
modelImageMap : {
type : Object ,
default : null
} ,
loading : {
type : Boolean ,
default : false
@ -96,38 +92,87 @@ export default {
} ,
data ( ) {
return {
filterTypeModel : null ,
typedFilter : null ,
filters : [ ]
}
} ,
computed : {
... mapState ( 'pbx' , [
'deviceProfileMap' ,
'deviceProfileList'
] ) ,
filterType ( ) {
return this . filterTypeModel && this . filterTypeModel . value
} ,
filterTypeOptions ( ) {
return [
{
label : this . $t ( 'pbxConfig.deviceStationName' ) ,
value : 'stationNameFilter'
} ,
{
label : this . $t ( 'pbxConfig.deviceIdentifier' ) ,
value : 'identifierFilter'
} ,
{
label : this . $t ( 'pbxConfig.deviceModel' ) ,
value : 'profileFilter'
}
]
} ,
filtersList ( ) {
return this . filters . map ( ( filterItem ) => {
let filterDisplayValue = filterItem . value
if ( filterItem . name === 'profileFilter' ) {
filterDisplayValue = this . deviceProfileMap [ filterItem . value ] . name
}
return {
id : filterItem . name ,
filterInfo : this . filterTypeOptions . find ( option => option . value === filterItem . name ) . label + ': ' + filterDisplayValue
}
} )
}
} ,
watch : {
filterTypeModel ( ) {
this . typedFilter = null
}
} ,
methods : {
filterStationName ( input ) {
if ( input !== '' ) {
this . $emit ( 'filter-station-name' , input )
}
triggerFilter ( data ) {
this . addFilter ( this . filterTypeModel ? . value , this . typedFilter )
} ,
resetStationName ( ) {
this . $emit ( 'reset-station-name' )
removeFilter ( name ) {
this . filters = this . filters . filter ( item => item . name !== name )
this . filter ( )
} ,
filterIdentifier ( input ) {
if ( input !== '' ) {
this . $emit ( 'filter-identifier' , input )
removeFilters ( ) {
if ( this . filters . length > 0 ) {
this . filters = [ ]
this . filter ( )
}
} ,
resetIdentifier ( ) {
this . $emit ( 'reset-identifier' )
} ,
filterProfile ( profile ) {
this . $emit ( 'filter-profile' , Number ( profile ) )
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 ( )
}
} ,
resetProfile ( ) {
this . $emit ( 'reset-profile' )
filter ( ) {
const params = { }
this . filters . forEach ( filter => {
params [ filter . name ] = filter . value
} )
this . $emit ( 'filter' , params )
}
}
}
< / script >
< style lang = "stylus" rel = "stylesheet/stylus" >
. csc - pbx - device - filters
margin - bottom $flex - gutter - sm
. csc - pbx - device - filter - inputs
margin - bottom $flex - gutter - sm
< / style >
Sergii Leonenko
5 years ago