From 213f52b16d2a1ebb6704b35a8e0a5d39805dbfcb Mon Sep 17 00:00:00 2001
From: Sergii Leonenko <sleonenko@sipwise.com>
Date: Wed, 28 Oct 2020 16:20:31 +0200
Subject: [PATCH] TT#96811 CSC: Refactor PBXDevice filtering

- Can i select a filter criteria
- Can i input filter according to filter criteria
- Can i see model selection as input if filter criterial is device model
- Can i see text input if filter criteria is not device model
- Can i trigger the search
- Can i see spinner
- Can i see a list reloaded after triggering the filter

In general align the filtering User Experience to PBXSeats. Important is that we have always 3 main elements (Criteria selection, Filter input, Current/Active filters) only.

Change-Id: Ibbe43e543a173b6e8c27bccb5790007d12788d4b
---
 .gitignore                                    |   1 +
 .../PbxConfiguration/CscPbxDeviceFilters.vue  | 235 +++++++++++-------
 src/pages/CscPagePbxDevices.vue               |  54 ++--
 3 files changed, 158 insertions(+), 132 deletions(-)

diff --git a/.gitignore b/.gitignore
index f9375961..575868ff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # Editor directories and files
+.vscode
 .idea
 *.suo
 *.ntvs*
diff --git a/src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue b/src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue
index 06ea0667..1f9a872f 100644
--- a/src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue
@@ -1,94 +1,90 @@
 <template>
-	<div
-		class="csc-pbx-device-filters"
-	>
+	<div>
 		<div
-			class="csc-pbx-device-filter-inputs row justify-center sm-gutter items-end"
+			class="row justify-center full-width q-gutter-x-sm"
 		>
-			<csc-search-input
-				:label="$t('pbxConfig.deviceStationName')"
-				:phrase="stationNameFilter"
-				:searching="loading"
-				@search="filterStationName"
-				@reset="resetStationName"
-			/>
-			<csc-search-input
-				:label="$t('pbxConfig.deviceIdentifier')"
-				:phrase="identifierFilter"
-				:searching="loading"
-				@search="filterIdentifier"
-				@reset="resetIdentifier"
-			/>
-			<csc-pbx-model-select
-				:value="profileFilter"
-				:profiles="profiles"
-				:profile-map="profileMap"
-				:has-reset-button="true"
-				@opened="$emit('model-select-opened')"
-				@input="filterProfile"
-				@reset="resetProfile"
-			/>
+			<div
+				class="col-xs-12 col-md-2"
+			>
+				<q-select
+					v-model="filterTypeModel"
+					dense
+					:options="filterTypeOptions"
+					:label="$t('pbxConfig.seatsFiltersFilterByLabel')"
+					:disable="loading"
+				/>
+			</div>
+			<div
+				class="col-xs-12 col-md-2"
+			>
+				<q-input
+					v-if="filterType !== 'profileFilter'"
+					v-model="typedFilter"
+					type="text"
+					dense
+					:disable="loading || filterType === null"
+					:label="(filterType === null) ? $t('pbxConfig.seatsFilterInputLabel') : filterTypeModel.label"
+					@keypress.enter="triggerFilter"
+				>
+					<template
+						v-slot:append
+					>
+						<q-btn
+							icon="search"
+							color="primary"
+							dense
+							flat
+							:disable="loading"
+							@click="triggerFilter"
+						/>
+					</template>
+				</q-input>
+				<csc-pbx-model-select
+					v-if="filterType === 'profileFilter'"
+					v-model="typedFilter"
+					:profiles="deviceProfileList"
+					:profile-map="deviceProfileMap"
+					:disable="loading || filterType === null"
+					dense
+					@opened="$emit('model-select-opened')"
+					@input="triggerFilter"
+				/>
+			</div>
 		</div>
 		<div
-			class="row justify-center"
+			class="row justify-center full-width q-gutter-x-sm"
 		>
-			<q-btn
-				flat
-				icon="clear"
-				color="default"
-				:disable="loading"
-				:label="$t('pbxConfig.closeFilters')"
-				@click="$emit('close-filters')"
-			/>
-			<q-btn
-				flat
-				icon="filter_alt"
-				color="negative"
-				:disable="loading"
-				:label="$t('pbxConfig.resetFilters')"
-				@click="$emit('reset-filters')"
-			/>
+			<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"
+					@remove="removeFilter(id)"
+				/>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
+import _ from 'lodash'
 import CscPbxModelSelect from '../PbxConfiguration/CscPbxModelSelect'
-import CscSearchInput from '../../CscSearchInput'
+import { mapState } from 'vuex'
 
 export default {
 	name: 'CscPbxDeviceFilters',
 	components: {
-		CscSearchInput,
 		CscPbxModelSelect
 	},
 	props: {
-		stationNameFilter: {
-			type: String,
-			default: ''
-		},
-		identifierFilter: {
-			type: String,
-			default: ''
-		},
-		profileFilter: {
-			type: Number,
-			default: null
-		},
-		profiles: {
-			type: Array,
-			default () {
-				return []
-			}
-		},
-		profileMap: {
-			type: Object,
-			default: null
-		},
-		modelImageMap: {
-			type: Object,
-			default: null
-		},
 		loading: {
 			type: Boolean,
 			default: false
@@ -96,38 +92,87 @@ export default {
 	},
 	data () {
 		return {
+			filterTypeModel: null,
+			typedFilter: null,
+			filters: []
+		}
+	},
+	computed: {
+		...mapState('pbx', [
+			'deviceProfileMap',
+			'deviceProfileList'
+		]),
+		filterType () {
+			return this.filterTypeModel && this.filterTypeModel.value
+		},
+		filterTypeOptions () {
+			return [
+				{
+					label: this.$t('pbxConfig.deviceStationName'),
+					value: 'stationNameFilter'
+				},
+				{
+					label: this.$t('pbxConfig.deviceIdentifier'),
+					value: 'identifierFilter'
+				},
+				{
+					label: this.$t('pbxConfig.deviceModel'),
+					value: 'profileFilter'
+				}
+			]
+		},
+		filtersList () {
+			return this.filters.map((filterItem) => {
+				let filterDisplayValue = filterItem.value
+				if (filterItem.name === 'profileFilter') {
+					filterDisplayValue = this.deviceProfileMap[filterItem.value].name
+				}
+				return {
+					id: filterItem.name,
+					filterInfo: this.filterTypeOptions.find(option => option.value === filterItem.name).label + ': ' + filterDisplayValue
+				}
+			})
+		}
+	},
+	watch: {
+		filterTypeModel () {
+			this.typedFilter = null
 		}
 	},
 	methods: {
-		filterStationName (input) {
-			if (input !== '') {
-				this.$emit('filter-station-name', input)
-			}
+		triggerFilter (data) {
+			this.addFilter(this.filterTypeModel?.value, this.typedFilter)
 		},
-		resetStationName () {
-			this.$emit('reset-station-name')
+		removeFilter (name) {
+			this.filters = this.filters.filter(item => item.name !== name)
+			this.filter()
 		},
-		filterIdentifier (input) {
-			if (input !== '') {
-				this.$emit('filter-identifier', input)
+		removeFilters () {
+			if (this.filters.length > 0) {
+				this.filters = []
+				this.filter()
 			}
 		},
-		resetIdentifier () {
-			this.$emit('reset-identifier')
-		},
-		filterProfile (profile) {
-			this.$emit('filter-profile', Number(profile))
+		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()
+			}
 		},
-		resetProfile () {
-			this.$emit('reset-profile')
+		filter () {
+			const params = {}
+			this.filters.forEach(filter => {
+				params[filter.name] = filter.value
+			})
+			this.$emit('filter', params)
 		}
 	}
 }
 </script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-    .csc-pbx-device-filters
-        margin-bottom $flex-gutter-sm
-    .csc-pbx-device-filter-inputs
-        margin-bottom $flex-gutter-sm
-</style>
diff --git a/src/pages/CscPagePbxDevices.vue b/src/pages/CscPagePbxDevices.vue
index 0101910c..f1fca5ce 100644
--- a/src/pages/CscPagePbxDevices.vue
+++ b/src/pages/CscPagePbxDevices.vue
@@ -3,7 +3,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="isDeviceAddFormDisabled"
@@ -23,7 +23,17 @@
 				:disable="isDeviceListRequesting || isDeviceCreating || isDeviceRemoving || isDeviceUpdating"
 				@click="enableFilters"
 			/>
+			<csc-list-action-button
+				v-if="filtersEnabled"
+				slot="slot2"
+				icon="clear"
+				color="negative"
+				:label="$t('pbxConfig.closeFilters')"
+				:disable="isDeviceListRequesting || isDeviceCreating || isDeviceRemoving || isDeviceUpdating"
+				@click="closeFilters"
+			/>
 		</csc-list-actions>
+		<q-separator class="q-mb-xs" />
 		<q-slide-transition>
 			<div
 				v-if="!isDeviceAddFormDisabled"
@@ -45,20 +55,8 @@
 			<csc-pbx-device-filters
 				v-if="hasFilters || filtersEnabled"
 				:loading="isDeviceListRequesting"
-				:profiles="deviceProfileList"
-				:profile-map="deviceProfileMap"
-				:model-image-map="deviceModelImageMap"
-				:station-name-filter="stationNameFilter"
-				:identifier-filter="identifierFilter"
-				:profile-filter="profileFilter"
-				@filter-station-name="filterByStationName"
-				@filter-identifier="filterByIdentifier"
-				@filter-profile="filterByProfile"
-				@reset-station-name="resetStationNameFilter"
-				@reset-identifier="resetIdentifierFilter"
-				@reset-profile="resetProfileFilter"
-				@close-filters="closeFilters"
-				@reset-filters="resetFilters"
+				class="q-pb-md"
+				@filter="applyFilter"
 				@model-select-opened="loadDeviceModels('front_thumb')"
 			/>
 		</q-slide-transition>
@@ -296,28 +294,10 @@ export default {
 			this.filtersEnabled = true
 			this.disableDeviceAddForm()
 		},
-		filterByStationName (stationName) {
-			this.stationNameFilter = stationName
-			this.loadDeviceListItemsFiltered()
-		},
-		filterByIdentifier (identifier) {
-			this.identifierFilter = identifier
-			this.loadDeviceListItemsFiltered()
-		},
-		filterByProfile (profile) {
-			this.profileFilter = profile
-			this.loadDeviceListItemsFiltered()
-		},
-		resetStationNameFilter () {
-			this.stationNameFilter = null
-			this.loadDeviceListItemsFiltered()
-		},
-		resetIdentifierFilter () {
-			this.identifierFilter = null
-			this.loadDeviceListItemsFiltered()
-		},
-		resetProfileFilter () {
-			this.profileFilter = null
+		applyFilter (filterData) {
+			this.stationNameFilter = filterData.stationNameFilter
+			this.identifierFilter = filterData.identifierFilter
+			this.profileFilter = filterData.profileFilter ? Number(filterData.profileFilter) : null
 			this.loadDeviceListItemsFiltered()
 		},
 		closeFilters () {