TT#96802 CSC: As a Customer, I want to filter PBXGroups

AC:
Can filter by display_name
Can filter by extension
Can filter by primary_number
Can filter by alias_number
Can filter the same way as it is possible for PBXSeats
Can navigate through filtered items via pagination

- in addition there were added "data-cy" attributes to simplify selectors for  E2E tools like Cypress.

Change-Id: Iba3919a198c2464982502d529b54182bc266bb01

src/api/pbx-groups.js

@@ -85,10 +85,12 @@ export function getGroupsOnly (options) {
 export function getGroupList (options) {
 	return new Promise((resolve, reject) => {
 		const page = _.get(options, 'page', 1)
+		const filters = _.get(options, 'filters', {})
 		Promise.all([
 			getGroups({
 				params: {
 					page: page,
+					...filters,
 					order_by: PBX_CONFIG_ORDER_BY,
 					order_by_direction: PBX_CONFIG_ORDER_DIRECTION
 				}

src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue

@@ -16,6 +16,7 @@
 					:disable="loading"
 					:readonly="loading"
 					:label="$t('pbxConfig.groupName')"
+					data-cy="group-name"
 					@input="$v.data.name.$touch"
 				/>
 				<q-input
@@ -27,6 +28,7 @@
 					:disable="loading"
 					:readonly="loading"
 					:label="$t('pbxConfig.extension')"
+					data-cy="group-extension"
 					@input="$v.data.extension.$touch"
 				/>
 				<q-select
@@ -39,6 +41,7 @@
 					:readonly="loading"
 					:label="$t('pbxConfig.huntPolicy')"
 					:options="huntPolicyOptions"
+					data-cy="group-hunt-policy"
 				/>
 				<q-input
 					v-model="data.huntTimeout"
@@ -52,6 +55,7 @@
 					:suffix="$t('pbxConfig.seconds')"
 					:min="1"
 					:max="3600"
+					data-cy="group-hunt-timeout"
 					@input="$v.data.huntTimeout.$touch"
 				/>
 			</div>
@@ -70,6 +74,7 @@
 					:readonly="loading"
 					:label="$t('pbxConfig.aliasNumbers')"
 					:options="aliasNumberOptions"
+					data-cy="group-alias-numbers"
 				/>
 				<q-select
 					v-model="data.seats"
@@ -83,6 +88,7 @@
 					:readonly="loading"
 					:label="$t('pbxConfig.seats')"
 					:options="seatOptions"
+					data-cy="group-seats"
 				/>
 				<q-select
 					v-model="data.soundSet"
@@ -94,6 +100,7 @@
 					:readonly="loading"
 					:label="$t('pbxConfig.soundSet')"
 					:options="soundSetOptions"
+					data-cy="group-sound-set"
 				/>
 			</div>
 		</div>
@@ -103,6 +110,7 @@
 				flat
 				color="default"
 				icon="clear"
+				data-cy="group-btn-clear"
 				@mousedown.native="cancel()"
 			>
 				{{ $t('buttons.cancel') }}
@@ -113,6 +121,7 @@
 				color="primary"
 				icon="group"
 				:disable="$v.data.$invalid"
+				data-cy="group-btn-save"
 				@click="save()"
 			>
 				{{ $t('pbxConfig.createGroup') }}

src/components/pages/PbxConfiguration/CscPbxGroupFilters.vue

@@ -0,0 +1,162 @@
+<template>
+	<div>
+		<div
+			class="row justify-center full-width q-gutter-x-sm"
+		>
+			<div
+				class="col-xs-12 col-md-3"
+			>
+				<q-select
+					v-model="filterTypeModel"
+					dense
+					:options="filterTypeOptions"
+					:label="$t('pbxConfig.seatsFiltersFilterByLabel')"
+					:disable="loading"
+					data-cy="filter-type"
+				/>
+			</div>
+			<div
+				class="col-xs-12 col-md-3"
+			>
+				<q-input
+					v-model="typedFilter"
+					type="text"
+					dense
+					:disable="loading || filterType === null"
+					:label="(filterType === null) ? $t('pbxConfig.seatsFilterInputLabel') : filterTypeModel.label"
+					data-cy="filter-value"
+					@keypress.enter="triggerFilter"
+				>
+					<template
+						v-slot:append
+					>
+						<q-btn
+							icon="search"
+							color="primary"
+							dense
+							flat
+							:disable="loading"
+							data-cy="filter-btn-search"
+							@click="triggerFilter"
+						/>
+					</template>
+				</q-input>
+			</div>
+		</div>
+		<div
+			class="row justify-center full-width q-gutter-x-sm"
+		>
+			<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"
+					data-cy="filter-applied-item"
+					@remove="removeFilter(id)"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import _ from 'lodash'
+export default {
+	name: 'CscPbxGroupFilters',
+	props: {
+		loading: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data () {
+		return {
+			filterTypeModel: null,
+			typedFilter: null,
+			filters: []
+		}
+	},
+	computed: {
+		filterType () {
+			return this.filterTypeModel && this.filterTypeModel.value
+		},
+		filterTypeOptions () {
+			return [
+				{
+					label: this.$t('pbxConfig.groupName'),
+					value: 'display_name'
+				},
+				{
+					label: this.$t('pbxConfig.extension'),
+					value: 'pbx_extension'
+				},
+				{
+					label: this.$t('pbxConfig.primaryNumber'),
+					value: 'primary_number'
+				},
+				{
+					label: this.$t('pbxConfig.aliasNumbers'),
+					value: 'alias'
+				}
+			]
+		},
+		filtersList () {
+			return this.filters.map((filterItem) => {
+				const filterDisplayValue = filterItem.value
+				return {
+					id: filterItem.name,
+					filterInfo: this.filterTypeOptions.find(option => option.value === filterItem.name).label + ': ' + filterDisplayValue
+				}
+			})
+		}
+	},
+	watch: {
+		filterTypeModel () {
+			this.typedFilter = null
+		}
+	},
+	methods: {
+		triggerFilter (data) {
+			this.addFilter(this.filterTypeModel?.value, this.typedFilter)
+		},
+		removeFilter (name) {
+			this.filters = this.filters.filter(item => item.name !== name)
+			this.filter()
+		},
+		removeFilters () {
+			if (this.filters.length > 0) {
+				this.filters = []
+				this.filter()
+			}
+		},
+		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()
+			}
+		},
+		filter () {
+			const params = {}
+			this.filters.forEach(filter => {
+				params[filter.name] = filter.value
+			})
+			this.$emit('filter', params)
+		}
+	}
+}
+</script>

src/i18n/en.json

@@ -460,6 +460,7 @@
         "removeGroup": "Remove group",
         "removeGroupTitle": "Remove group",
         "removeGroupText": "You are about to remove group {group}",
+        "filterGroups": "Filter groups",
         "name": "Name",
         "seatName": "Seat name",
         "addSeat": "Add Seat",
@@ -483,6 +484,7 @@
         "noMacAddress": "Could not find any device with MAC address matching the filter criteria",
         "noStationName": "Could not find any device with station name matching the filter criteria",
         "noGroups": "No groups created yet",
+        "noGroupsFound": "Could not find any group matching any of the filter criteria",
         "noSeats": "No seats created yet",
         "noCallQueues": "No call queues created yet",
         "noSoundSets": "No sound sets created yet",

src/pages/CscPagePbxGroups.vue

@@ -4,7 +4,7 @@
 		class="q-pa-lg"
 	>
 		<csc-list-actions
-			class="row justify-center q-mb-lg"
+			class="row justify-center q-mb-xs"
 		>
 			<csc-list-action-button
 				v-if="isGroupAddFormDisabled"
@@ -13,9 +13,29 @@
 				color="primary"
 				:label="$t('pbxConfig.addGroup')"
 				:disable="isGroupListRequesting"
-				@click="enableGroupAddForm"
+				data-cy="groups-add-new"
+				@click="enableAddForm"
+			/>
+			<csc-list-action-button
+				v-if="!filtersEnabled"
+				slot="slot2"
+				icon="filter_alt"
+				color="primary"
+				:label="$t('pbxConfig.filterGroups')"
+				data-cy="groups-filter-open"
+				@click="enableFilters"
+			/>
+			<csc-list-action-button
+				v-if="filtersEnabled"
+				slot="slot2"
+				icon="clear"
+				color="negative"
+				:label="$t('pbxConfig.closeFilters')"
+				data-cy="groups-filter-close"
+				@click="closeFilters"
 			/>
 		</csc-list-actions>
+		<q-separator class="q-mb-xs" />
 		<q-slide-transition>
 			<div
 				v-if="!isGroupAddFormDisabled"
@@ -34,6 +54,14 @@
 				/>
 			</div>
 		</q-slide-transition>
+		<q-slide-transition>
+			<CscPbxGroupFilters
+				v-if="hasFilters || filtersEnabled"
+				:loading="isGroupListRequesting"
+				class="q-pb-md"
+				@filter="applyFilter"
+			/>
+		</q-slide-transition>
 		<div
 			v-if="isGroupListPaginationActive"
 			class="row justify-center"
@@ -83,7 +111,13 @@
 			</csc-fade>
 		</csc-list>
 		<div
-			v-if="isGroupListEmpty && !isGroupListRequesting"
+			v-if="isGroupListEmpty && !isGroupListRequesting && hasFilters"
+			class="row justify-center csc-no-entities"
+		>
+			{{ $t('pbxConfig.noGroupsFound') }}
+		</div>
+		<div
+			v-else-if="isGroupListEmpty && !isGroupListRequesting"
 			class="row justify-center csc-no-entities"
 		>
 			{{ $t('pbxConfig.noGroups') }}
@@ -100,6 +134,7 @@
 
 <script>
 import CscPage from 'components/CscPage'
+import CscPbxGroupFilters from 'components/pages/PbxConfiguration/CscPbxGroupFilters'
 import CscPbxGroupAddForm from 'components/pages/PbxConfiguration/CscPbxGroupAddForm'
 import CscPbxGroup from 'components/pages/PbxConfiguration/CscPbxGroup'
 import CscRemoveDialog from 'components/CscRemoveDialog'
@@ -130,6 +165,7 @@ export default {
 		CscFade,
 		CscPage,
 		CscPbxGroup,
+		CscPbxGroupFilters,
 		CscPbxGroupAddForm,
 		CscRemoveDialog,
 		CscList,
@@ -140,7 +176,10 @@ export default {
 		platform
 	],
 	data () {
-		return {}
+		return {
+			filters: {},
+			filtersEnabled: false
+		}
 	},
 	computed: {
 		...mapState('pbx', [
@@ -187,7 +226,10 @@ export default {
 			'getGroupRemovalToastMessage',
 			'getHuntPolicyOptions',
 			'hasCallQueue'
-		])
+		]),
+		hasFilters () {
+			return Object.keys(this.filters).length > 0
+		}
 	},
 
 	watch: {
@@ -219,7 +261,7 @@ export default {
 	mounted () {
 		this.$scrollTo(this.$parent.$el)
 		this.disableGroupAddForm()
-		this.loadGroupListItems()
+		this.loadGroups()
 	},
 	methods: {
 		...mapActions('pbxGroups', [
@@ -245,11 +287,40 @@ export default {
 		...mapActions('pbxCallQueues', [
 			'jumpToCallQueue'
 		]),
+		loadGroups (page) {
+			this.loadGroupListItems({
+				page: page,
+				filters: this.filters
+			})
+		},
 		resetGroupAddForm () {
 			if (this.$refs.addForm) {
 				this.$refs.addForm.reset()
 			}
 		},
+		enableAddForm () {
+			this.closeFilters()
+			this.enableGroupAddForm()
+		},
+		enableFilters () {
+			this.filtersEnabled = true
+			this.disableGroupAddForm()
+		},
+		applyFilter (filterData) {
+			this.filters = filterData
+			this.loadGroups(1)
+		},
+		resetFilters () {
+			if (this.hasFilters) {
+				this.filters = []
+				this.loadGroups(1)
+			}
+		},
+		closeFilters () {
+			this.filtersEnabled = false
+			this.resetFilters()
+		},
+
 		openGroupRemovalDialog (groupId) {
 			if (this.$refs.removeDialog) {
 				this.groupRemovalRequesting(groupId)
@@ -261,9 +332,7 @@ export default {
 		},
 		loadGroupListItemsPaginated (page) {
 			this.$scrollTo(this.$parent.$el)
-			this.loadGroupListItems({
+			this.loadGroups(page)
-				page: page
-			})
 		}
 	}
 }

src/store/pbx-groups.js

@@ -263,12 +263,14 @@ export default {
 		loadGroupListItems (context, options) {
 			return new Promise((resolve, reject) => {
 				const page = _.get(options, 'page', context.state.groupListCurrentPage)
+				const filters = _.get(options, 'filters', {})
 				const clearList = _.get(options, 'clearList', true)
 				context.commit('groupListItemsRequesting', {
 					clearList: clearList
 				})
 				getGroupList({
-					page: page
+					page,
+					filters
 				}).then((groupList) => {
 					context.commit('pbx/pilotSucceeded', groupList.pilot, { root: true })
 					context.commit('pbx/numbersSucceeded', groupList.numbers, { root: true })