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

src/components/pages/PbxConfiguration/CscPbxAttendantSelection.vue

@@ -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>

src/components/pages/PbxConfiguration/CscPbxDeviceConfig.vue

@@ -51,44 +51,13 @@
 					</div>
 				</div>
 			</div>
-			<q-select
+			<csc-pbx-attendant-selection
-				ref="selectSubscriber"
-				emit-value
-				map-options
-				:label="selectedKeyLabel"
 				: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)

src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue

@@ -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,
+					id: filterItem.id,
-					filterInfo: this.filterTypeOptions.find(option => option.value === filterItem.name).label + ': ' + filterDisplayValue
+					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) {
+		removeFilter (id) {
-			this.filters = this.filters.filter(item => item.name !== name)
+			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

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