sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#100551 CSC: As Customer, I want to search PBXDevices by Username using a selection with autocompletion

Browse Source 
AC:
Can input PBXSeats, PBXGroups or PBXPilots name in the search input
Can see a list of possible PBXSeat, PBXGroup or PBXPilot according to the search input
Can select PBXSeat, PBXGroup or PBXPilot from the list to apply the search

Change-Id: Id97cf90b0a5fb62bc2049f73daf98d811fb4583e
pull/4/head
Sergii Leonenko 5 years ago
parent 7c0c1f412a
commit 63347a0b7d
4 changed files with 168 additions and 74 deletions
Show Stats Download Patch File Download Diff File

64
src/components/pages/PbxConfiguration/CscPbxAttendantSelection.vue
Unescape View File

@ -0,0 +1,64 @@
<template>
<q-select
:label="selectedKeyLabel"
v-bind="$attrs"
v-on="$listeners"
>
<template
v-if="showSelectedItemIcon"
v-slot:prepend
>
<q-icon
:name="selectedKeyIcon"
/>
</template>
<template v-slot:option="scope">
<q-item
v-bind="scope.itemProps"
v-on="scope.itemEvents"
>
<q-item-section
side
>
<q-icon
:name="scope.opt.icon"
/>
</q-item-section>
<q-item-section>
<q-item-label>
{{ scope.opt.label }}
</q-item-label>
</q-item-section>
</q-item>
</template>
</q-select>
</template>
<script>
export default {
name: 'CscPbxAttendantSelection',
props: {
showSelectedItemIcon: {
type: Boolean,
default: true
}
},
computed: {
selectedKeyLabel () {
const selectedValue = this.$attrs.value || { type: null }
let label = this.$t('pbxConfig.keyBothLabel')
if (selectedValue.type !== null) {
label = ({
pilot: this.$t('pbxConfig.keyPilotLabel'),
seat: this.$t('pbxConfig.keySeatLabel'),
group: this.$t('pbxConfig.keyGroupLabel')
})[selectedValue.type]
}
return label
},
selectedKeyIcon () {
return this.$attrs.value?.icon
}
}
}
</script>

64
src/components/pages/PbxConfiguration/CscPbxDeviceConfig.vue
Unescape View File

@ -51,44 +51,13 @@
</div>
</div>
</div>
<q-select
ref="selectSubscriber"
emit-value
map-options
:label="selectedKeyLabel"
<csc-pbx-attendant-selection
:value="selectedKeySubscriber"
:options="subscriberOptions"
@input="keySubscriberChanged"
>
<template
v-slot:prepend
>
<q-icon
:name="selectedKeyIcon"
/>
</template>
<template v-slot:option="scope">
<q-item
v-bind="scope.itemProps"
v-on="scope.itemEvents"
>
<q-item-section
side
>
<q-icon
:name="scope.opt.icon"
/>
</q-item-section>
<q-item-section>
<q-item-label>
{{ scope.opt.label }}
</q-item-label>
</q-item-section>
</q-item>
</template>
</q-select>
/>
<q-select
v-show="selectedKeySubscriber !== null"
v-show="selectedKeySubscriber !== null && selectedKeySubscriber.value !== null"
ref="selectType"
v-model="selectedKeyType"
emit-value
@ -137,9 +106,13 @@ import {
import {
BoundingBox2D
} from 'src/helpers/graphics'
import CscPbxAttendantSelection from './CscPbxAttendantSelection'
export default {
name: 'CscPbxDeviceConfig',
components: {
CscPbxAttendantSelection
},
props: {
device: {
type: Object,
@ -199,26 +172,13 @@ export default {
}
return ''
},
selectedKeyLabel () {
if (this.selectedLine !== null) {
const subscriber = this.subscriberMap[this.selectedLine.subscriber_id]
if (subscriber !== null && subscriber.is_pbx_pilot === true) {
return this.$t('pbxConfig.keyPilotLabel')
} else if (subscriber !== null && subscriber.is_pbx_group === true) {
return this.$t('pbxConfig.keyGroupLabel')
} else if (subscriber !== null) {
return this.$t('pbxConfig.keySeatLabel')
} else {
return this.$t('pbxConfig.keyBothLabel')
}
}
return this.$t('pbxConfig.keyBothLabel')
},
selectedKeySubscriber () {
const unassignedItem = this.subscriberOptions[0]
if (this.selectedLine !== null) {
return this.selectedLine.subscriber_id
const selectedOption = this.subscriberOptions.find(opt => opt.value === this.selectedLine.subscriber_id)
return selectedOption || unassignedItem
}
return null
return unassignedItem
},
selectedKeyType: {
get () {
@ -432,7 +392,7 @@ export default {
loadGroupsAndSeats () {
this.$emit('loadGroupsAndSeats')
},
keySubscriberChanged (subscriberId) {
keySubscriberChanged ({ value: subscriberId }) {
const newLines = []
const lines = _.clone(this.lines)
const line = this.getLineByKey(this.selectedKey)

105
src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue
Unescape View File

@ -18,7 +18,7 @@
class="col-xs-12 col-md-2"
>
<q-input
v-if="filterType !== 'profile_id'"
v-if="!filterTypeModel || filterTypeModel.control === 'input'"
v-model="typedFilter"
type="text"
dense
@ -49,6 +49,17 @@
@opened="$emit('model-select-opened')"
@input="triggerFilter"
/>
<csc-pbx-attendant-selection
v-if="filterType === 'display_name'"
use-input
dense
:show-selected-item-icon="false"
:value="typedFilter"
:options="subscribersOptionsFiltered"
:disable="loading"
@filter="filterSubscriberOptions"
@input="triggerFilter"
/>
</div>
</div>
<div
@ -77,12 +88,14 @@
<script>
import _ from 'lodash'
import CscPbxModelSelect from '../PbxConfiguration/CscPbxModelSelect'
import { mapState } from 'vuex'
import CscPbxAttendantSelection from '../PbxConfiguration/CscPbxAttendantSelection'
import { mapActions, mapState } from 'vuex'
export default {
name: 'CscPbxDeviceFilters',
components: {
CscPbxModelSelect
CscPbxModelSelect,
CscPbxAttendantSelection
},
props: {
loading: {
@ -94,14 +107,41 @@ export default {
return {
filterTypeModel: null,
typedFilter: null,
filters: []
filters: [],
subscribersFilter: ''
}
},
computed: {
...mapState('pbx', [
'deviceProfileMap',
'deviceProfileList'
'deviceProfileList',
'subscriberList'
]),
subscribersOptions () {
const options = []
this.subscriberList.forEach((subscriber) => {
let icon = 'person'
let subscriberTypeTitle = this.$t('pbxConfig.keySeatLabel')
if (subscriber.is_pbx_group) {
icon = 'group'
subscriberTypeTitle = this.$t('pbxConfig.keyGroupLabel')
} else if (subscriber.is_pbx_pilot) {
icon = 'person_outline'
subscriberTypeTitle = this.$t('pbxConfig.keyPilotLabel')
}
options.push({
label: subscriber.display_name || subscriber.webusername,
icon: icon,
value: subscriber.display_name,
disable: !subscriber.display_name,
subscriberTypeTitle
})
})
return options
},
subscribersOptionsFiltered () {
return this.subscribersOptions.filter(option => option.label.toLowerCase().indexOf(this.subscribersFilter) > -1)
},
filterType () {
return this.filterTypeModel && this.filterTypeModel.value
},
@ -109,35 +149,40 @@ export default {
return [
{
label: this.$t('pbxConfig.deviceStationName'),
value: 'station_name'
value: 'station_name',
control: 'input'
},
{
label: this.$t('pbxConfig.deviceIdentifier'),
value: 'identifier'
value: 'identifier',
control: 'input'
},
{
label: this.$t('pbxConfig.deviceModel'),
value: 'profile_id'
value: 'profile_id',
control: 'select'
},
{
label: this.$t('pbxConfig.extension'),
value: 'pbx_extension'
value: 'pbx_extension',
control: 'input'
},
{
label: this.$t('pbxConfig.queueExtensionName'),
value: 'display_name'
value: 'display_name',
control: 'select'
}
]
},
filtersList () {
return this.filters.map((filterItem) => {
let filterDisplayValue = filterItem.value
if (filterItem.name === 'profile_id') {
if (filterItem.id === 'profile_id') {
filterDisplayValue = this.deviceProfileMap[filterItem.value].name
}
return {
id: filterItem.name,
filterInfo: this.filterTypeOptions.find(option => option.value === filterItem.name).label + ': ' + filterDisplayValue
id: filterItem.id,
filterInfo: filterItem.title + ': ' + filterDisplayValue
}
})
}
@ -147,12 +192,31 @@ export default {
this.typedFilter = null
}
},
mounted () {
this.loadSubscribers()
},
methods: {
...mapActions('pbx', [
'loadSubscribers'
]),
filterSubscriberOptions (val, update, abort) {
update(() => {
this.subscribersFilter = val.toLowerCase()
})
},
triggerFilter (data) {
this.addFilter(this.filterTypeModel?.value, this.typedFilter)
const filterId = this.filterTypeModel?.value
let filterTitle = this.filterTypeOptions.find(option => option.value === filterId).label
let filterValue = this.typedFilter
if (this.filterType === 'display_name') {
filterTitle = data.subscriberTypeTitle
filterValue = data.value
}
this.addFilter(filterId, filterTitle, filterValue)
},
removeFilter (name) {
this.filters = this.filters.filter(item => item.name !== name)
removeFilter (id) {
this.filters = this.filters.filter(item => item.id !== id)
this.filter()
},
removeFilters () {
@ -161,13 +225,14 @@ export default {
this.filter()
}
},
addFilter (name, value) {
addFilter (id, title, value) {
const valueTrimmed = _.trim(value)
if (valueTrimmed) {
this.typedFilter = null
this.filters = this.filters.filter(item => item.name !== name)
this.filters = this.filters.filter(item => item.id !== id)
const filter = {
name: name,
id,
title,
value: valueTrimmed
}
this.filters.push(filter)
@ -177,7 +242,7 @@ export default {
filter () {
const params = {}
this.filters.forEach(filter => {
params[filter.name] = filter.value
params[filter.id] = filter.value
})
// a special fix because of q-select behaviour. it stores 0 for empty selection

9
src/store/pbx.js
Unescape View File

@ -120,19 +120,24 @@ export default {
options.push({
label: i18n.t('pbxConfig.keyEmptyLabel'),
icon: 'clear',
value: null
value: null,
type: null
})
state.subscriberList.forEach((subscriber) => {
let icon = 'person'
let type = 'seat'
if (subscriber.is_pbx_group) {
icon = 'group'
type = 'group'
} else if (subscriber.is_pbx_pilot) {
icon = 'person_outline'
type = 'pilot'
}
options.push({
label: subscriber.display_name || subscriber.webusername,
icon: icon,
value: subscriber.id
value: subscriber.id,
type
})
})
return options

Write Preview
Loading…
Cancel
Save