TT#92007 and #96801 CSC: As a Customer, I want to filter PBXDevice by Extension and Username (Seat assigned as Private Line)

AC:
Can filter by extension
Can filter by Username (Seat assigned as Private Line)
Can select filter criteria from criteria selection
Can see the right input component according to this criteria
Change-Id: I6f35098854a866fe2b7de68d17570582dc693340

src/api/pbx-devices.js

@@ -29,29 +29,32 @@ export function getDevices (options) {
 
 export function getDeviceList (options) {
 	return new Promise((resolve, reject) => {
+		const filters = options.filters || {}
+		// normalize filters
+		Object.keys(filters).forEach(key => {
+			let value = filters[key]
+			if (value === null || value === undefined || value === '') {
+				delete filters[key]
+			} else {
+				switch (key) {
+				case 'profile_id':
+					value = String(value)
+					break
+				case 'identifier':
+				case 'station_name':
+					value = '*' + value + '*'
+					break
+				}
+				filters[key] = value
+			}
+		})
+
 		const params = {
 			page: options.page,
-			profile_id: options.profile_id,
+			...filters,
-			identifier: options.identifier,
-			station_name: options.station_name,
 			order_by: PBX_CONFIG_ORDER_BY,
 			order_by_direction: PBX_CONFIG_ORDER_DIRECTION
 		}
-		if (params.profile_id === null || params.profile_id === undefined || params.profile_id === '') {
-			delete params.profile_id
-		} else {
-			params.profile_id = String(params.profile_id)
-		}
-		if (params.identifier === null || params.identifier === undefined || params.identifier === '') {
-			delete params.identifier
-		} else {
-			params.identifier = '*' + params.identifier + '*'
-		}
-		if (params.station_name === null || params.station_name === undefined || params.station_name === '') {
-			delete params.station_name
-		} else {
-			params.station_name = '*' + params.station_name + '*'
-		}
 		getDevices({
 			params: params
 		}).then((devices) => {

src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue

@@ -18,7 +18,7 @@
 				class="col-xs-12 col-md-2"
 			>
 				<q-input
-					v-if="filterType !== 'profileFilter'"
+					v-if="filterType !== 'profile_id'"
 					v-model="typedFilter"
 					type="text"
 					dense
@@ -40,7 +40,7 @@
 					</template>
 				</q-input>
 				<csc-pbx-model-select
-					v-if="filterType === 'profileFilter'"
+					v-if="filterType === 'profile_id'"
 					v-model="typedFilter"
 					:profiles="deviceProfileList"
 					:profile-map="deviceProfileMap"
@@ -109,22 +109,30 @@ export default {
 			return [
 				{
 					label: this.$t('pbxConfig.deviceStationName'),
-					value: 'stationNameFilter'
+					value: 'station_name'
 				},
 				{
 					label: this.$t('pbxConfig.deviceIdentifier'),
-					value: 'identifierFilter'
+					value: 'identifier'
 				},
 				{
 					label: this.$t('pbxConfig.deviceModel'),
-					value: 'profileFilter'
+					value: 'profile_id'
+				},
+				{
+					label: this.$t('pbxConfig.extension'),
+					value: 'pbx_extension'
+				},
+				{
+					label: this.$t('pbxConfig.queueExtensionName'),
+					value: 'display_name'
 				}
 			]
 		},
 		filtersList () {
 			return this.filters.map((filterItem) => {
 				let filterDisplayValue = filterItem.value
-				if (filterItem.name === 'profileFilter') {
+				if (filterItem.name === 'profile_id') {
 					filterDisplayValue = this.deviceProfileMap[filterItem.value].name
 				}
 				return {
@@ -171,6 +179,12 @@ export default {
 			this.filters.forEach(filter => {
 				params[filter.name] = filter.value
 			})
+
+			// a special fix because of q-select behaviour. it stores 0 for empty selection
+			if (!params.profile_id) {
+				delete params.profile_id
+			}
+
 			this.$emit('filter', params)
 		}
 	}

src/pages/CscPagePbxDevices.vue

@@ -176,9 +176,7 @@ export default {
 	},
 	data () {
 		return {
-			stationNameFilter: null,
+			filters: {},
-			identifierFilter: null,
-			profileFilter: null,
 			filtersEnabled: false
 		}
 	},
@@ -222,9 +220,7 @@ export default {
 			'getDeviceRemovalToastMessage'
 		]),
 		hasFilters () {
-			return this.stationNameFilter !== null ||
+			return Object.keys(this.filters).length > 0
-				this.identifierFilter !== null ||
-				this.profileFilter !== null
 		}
 	},
 	watch: {
@@ -282,9 +278,7 @@ export default {
 		loadDeviceListItemsFiltered (page) {
 			this.loadDeviceListItems({
 				page: page || 1,
-				stationNameFilter: this.stationNameFilter,
+				filters: this.filters
-				identifierFilter: this.identifierFilter,
-				profileFilter: this.profileFilter
 			})
 		},
 		enableAddForm () {
@@ -296,9 +290,7 @@ export default {
 			this.disableDeviceAddForm()
 		},
 		applyFilter (filterData) {
-			this.stationNameFilter = filterData.stationNameFilter
+			this.filters = filterData
-			this.identifierFilter = filterData.identifierFilter
-			this.profileFilter = filterData.profileFilter ? Number(filterData.profileFilter) : null
 			this.loadDeviceListItemsFiltered()
 		},
 		closeFilters () {
@@ -306,12 +298,8 @@ export default {
 			this.resetFilters()
 		},
 		resetFilters () {
-			if (this.stationNameFilter !== null ||
+			if (this.hasFilters) {
-				this.identifierFilter !== null ||
+				this.filters = {}
-				this.profileFilter !== null) {
-				this.stationNameFilter = null
-				this.identifierFilter = null
-				this.profileFilter = null
 				this.loadDeviceListItemsFiltered()
 			}
 		},

src/store/pbx-devices.js

@@ -204,9 +204,7 @@ export default {
 			return new Promise((resolve, reject) => {
 				const page = _.get(options, 'page', context.state.deviceListCurrentPage)
 				const clearList = _.get(options, 'clearList', true)
-				const stationNameFilter = _.get(options, 'stationNameFilter', null)
+				const filters = _.get(options, 'filters', {})
-				const identifierFilter = _.get(options, 'identifierFilter', null)
-				const profileFilter = _.get(options, 'profileFilter', null)
 				context.commit('deviceListItemsRequesting', {
 					clearList: clearList
 				})
@@ -215,9 +213,7 @@ export default {
 				}).then(() => {
 					return getDeviceList({
 						page: page,
-						station_name: stationNameFilter,
+						filters
-						identifier: identifierFilter,
-						profile_id: profileFilter
 					})
 				}).then((devices) => {
 					context.commit('deviceListItemsSucceeded', {