From 63347a0b7d21c8dccd88873025872b59ecba3bca Mon Sep 17 00:00:00 2001 From: Sergii Leonenko Date: Mon, 9 Nov 2020 22:02:13 +0200 Subject: [PATCH] TT#100551 CSC: As Customer, I want to search PBXDevices by Username using a selection with autocompletion 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 --- .../CscPbxAttendantSelection.vue | 64 +++++++++++ .../PbxConfiguration/CscPbxDeviceConfig.vue | 64 ++--------- .../PbxConfiguration/CscPbxDeviceFilters.vue | 105 ++++++++++++++---- src/store/pbx.js | 9 +- 4 files changed, 168 insertions(+), 74 deletions(-) create mode 100644 src/components/pages/PbxConfiguration/CscPbxAttendantSelection.vue diff --git a/src/components/pages/PbxConfiguration/CscPbxAttendantSelection.vue b/src/components/pages/PbxConfiguration/CscPbxAttendantSelection.vue new file mode 100644 index 00000000..b2d9a7a8 --- /dev/null +++ b/src/components/pages/PbxConfiguration/CscPbxAttendantSelection.vue @@ -0,0 +1,64 @@ + + + diff --git a/src/components/pages/PbxConfiguration/CscPbxDeviceConfig.vue b/src/components/pages/PbxConfiguration/CscPbxDeviceConfig.vue index 38bb7fc9..faf747f7 100644 --- a/src/components/pages/PbxConfiguration/CscPbxDeviceConfig.vue +++ b/src/components/pages/PbxConfiguration/CscPbxDeviceConfig.vue @@ -51,44 +51,13 @@ - - - - + /> 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) diff --git a/src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue b/src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue index d85e3c42..2453ae82 100644 --- a/src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue +++ b/src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue @@ -18,7 +18,7 @@ class="col-xs-12 col-md-2" > +
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 diff --git a/src/store/pbx.js b/src/store/pbx.js index ffb5fb5d..e32da43c 100644 --- a/src/store/pbx.js +++ b/src/store/pbx.js @@ -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