TT#99563 CSC: As a PBXAdmin, I want to see the allowed PBXExtension range near the PBXExtension input

TT#99564 CSC: As a Customer, I want to be the PBXExtension validated according to the defined range

AC:
Can see a short text/hint under the PBXExtension input field, that shows the PBXExtension range in a human readable way
Can see an error if I try to input a PBXExtension that is out of range
Can input any value in case no range is set
Can see a different message wether min or max only are set

* Enable the extension range on AUI
1. install ngcp-ppa -k gerrit_fmates_ext_range on your dev environment
2. in AUI go to Subscriber's customer->customer preferences->cloud pbx

Change-Id: Ia97cd3049bfed68e67317aceaf26f0d304496b5b

src/components/pages/PbxConfiguration/CscPbxGroup.vue

@@ -84,8 +84,13 @@
 			</q-input>
 			<q-input
 				v-model="changes.extension"
+				hide-hint
+				:error="$v.changes.extension.$error"
+				:error-message="extensionErrorMessage"
 				:label="$t('pbxConfig.extension')"
+				:hint="getExtensionHint"
 				@keyup.enter="save"
+				@input="$v.changes.extension.$touch"
 			>
 				<template
 					v-if="hasExtensionChanged"
@@ -218,6 +223,9 @@
 
 <script>
 import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import { between } from 'vuelidate/lib/validators'
+import { inRange } from 'src/helpers/validation'
 import CscListItem from '../../CscListItem'
 import CscListItemTitle from '../../CscListItemTitle'
 import CscListItemSubtitle from '../../CscListItemSubtitle'
@@ -285,12 +293,26 @@ export default {
 			default: false
 		}
 	},
+	validations: {
+		changes: {
+			extension: {
+				isInRange: function (value) {
+					return inRange(value, this.getMinAllowedExtension, this.getMaxAllowedExtension, between)
+				}
+			}
+		}
+	},
 	data () {
 		return {
 			changes: this.getGroupData()
 		}
 	},
 	computed: {
+		...mapGetters('pbx', [
+			'getExtensionHint',
+			'getMinAllowedExtension',
+			'getMaxAllowedExtension'
+		]),
 		getPrimaryNumber () {
 			return numberFilter(this.group.primary_number)
 		},
@@ -317,6 +339,13 @@ export default {
 		},
 		hasSoundSetChanged () {
 			return this.changes.soundSet !== this.getSoundSetId()
+		},
+		extensionErrorMessage () {
+			if (!this.$v.changes.extension.isInRange) {
+				return this.getExtensionHint
+			} else {
+				return ''
+			}
 		}
 	},
 	watch: {

src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue

@@ -28,6 +28,7 @@
 					:disable="loading"
 					:readonly="loading"
 					:label="$t('pbxConfig.extension')"
+					:hint="getExtensionHint"
 					data-cy="group-extension"
 					@input="$v.data.extension.$touch"
 				/>
@@ -135,13 +136,16 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import {
 	required,
 	minValue,
 	maxValue,
 	maxLength,
-	numeric
+	numeric,
+	between
 } from 'vuelidate/lib/validators'
+import { inRange } from 'src/helpers/validation'
 import CscObjectSpinner from '../../CscObjectSpinner'
 export default {
 	name: 'CscPbxGroupAddForm',
@@ -179,7 +183,10 @@ export default {
 			extension: {
 				required,
 				maxLength: maxLength(64),
-				numeric
+				numeric,
+				isInRange: function (value) {
+					return inRange(value, this.getMinAllowedExtension, this.getMaxAllowedExtension, between)
+				}
 			},
 			huntTimeout: {
 				required,
@@ -195,6 +202,11 @@ export default {
 		}
 	},
 	computed: {
+		...mapGetters('pbx', [
+			'getExtensionHint',
+			'getMinAllowedExtension',
+			'getMaxAllowedExtension'
+		]),
 		groupNameErrorMessage () {
 			if (!this.$v.data.name.required) {
 				return this.$t('validationErrors.fieldRequired', {
@@ -223,6 +235,8 @@ export default {
 				return this.$t('validationErrors.numeric', {
 					field: this.$t('pbxConfig.extension')
 				})
+			} else if (!this.$v.data.extension.isInRange) {
+				return this.getExtensionHint
 			} else {
 				return ''
 			}

src/components/pages/PbxConfiguration/CscPbxSeat.vue

@@ -125,9 +125,14 @@
 			</q-input>
 			<q-input
 				v-model="changes.extension"
+				hide-hint
+				:error="$v.changes.extension.$error"
+				:error-message="extensionErrorMessage"
 				:label="$t('pbxConfig.extension')"
 				:disable="loading"
+				:hint="getExtensionHint"
 				@keyup.enter="save"
+				@input="$v.changes.extension.$touch"
 			>
 				<template
 					v-slot:append
@@ -238,6 +243,9 @@
 
 <script>
 import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import { between } from 'vuelidate/lib/validators'
+import { inRange } from 'src/helpers/validation'
 import CscChangePasswordDialog from '../../CscChangePasswordDialog'
 import numberFilter from '../../../filters/number'
 import CscInputButtonSave from 'components/form/CscInputButtonSave'
@@ -311,7 +319,21 @@ export default {
 			changes: this.getSeatData()
 		}
 	},
+	validations: {
+		changes: {
+			extension: {
+				isInRange: function (value) {
+					return inRange(value, this.getMinAllowedExtension, this.getMaxAllowedExtension, between)
+				}
+			}
+		}
+	},
 	computed: {
+		...mapGetters('pbx', [
+			'getExtensionHint',
+			'getMinAllowedExtension',
+			'getMaxAllowedExtension'
+		]),
 		getPrimaryNumber () {
 			return numberFilter(this.seat.primary_number)
 		},
@@ -332,6 +354,13 @@ export default {
 		},
 		hasSoundSetChanged () {
 			return this.changes.soundSet !== this.getSoundSetId()
+		},
+		extensionErrorMessage () {
+			if (!this.$v.changes.extension.isInRange) {
+				return this.getExtensionHint
+			} else {
+				return ''
+			}
 		}
 	},
 	watch: {

src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue

@@ -32,11 +32,13 @@
 					clearable
 					dense
 					hide-bottom-space
+					hide-hint
 					:error="$v.data.extension.$error"
 					:error-message="extensionErrorMessage"
 					:disable="loading"
 					:readonly="loading"
 					:label="$t('pbxConfig.extension')"
+					:hint="getExtensionHint"
 					@input="$v.data.extension.$touch"
 				>
 					<template
@@ -143,11 +145,16 @@
 </template>
 
 <script>
+import {
+	mapGetters
+} from 'vuex'
 import {
 	required,
 	maxLength,
-	numeric
+	numeric,
+	between
 } from 'vuelidate/lib/validators'
+import { inRange } from 'src/helpers/validation'
 import CscInput from 'components/form/CscInput'
 import CscInputPasswordRetype from 'components/form/CscInputPasswordRetype'
 export default {
@@ -183,7 +190,10 @@ export default {
 			extension: {
 				required,
 				numeric,
-				maxLength: maxLength(64)
+				maxLength: maxLength(64),
+				isInRange: function (value) {
+					return inRange(value, this.getMinAllowedExtension, this.getMaxAllowedExtension, between)
+				}
 			}
 		}
 	},
@@ -193,6 +203,11 @@ export default {
 		}
 	},
 	computed: {
+		...mapGetters('pbx', [
+			'getExtensionHint',
+			'getMinAllowedExtension',
+			'getMaxAllowedExtension'
+		]),
 		seatNameErrorMessage () {
 			if (!this.$v.data.name.required) {
 				return this.$t('validationErrors.fieldRequired', {
@@ -221,6 +236,8 @@ export default {
 				return this.$t('validationErrors.numeric', {
 					field: this.$t('pbxConfig.extension')
 				})
+			} else if (!this.$v.data.extension.isInRange) {
+				return this.getExtensionHint
 			} else {
 				return ''
 			}

src/helpers/validation.js

@@ -20,3 +20,16 @@ export function customMacAddress (value) {
 export function isPhone (value) {
 	return /^\+[0-9]?()[0-9](\s|\S)(\d[0-9]{9})$/.test(value)
 }
+
+export function inRange (value, min, max, between) {
+	value = Number(value)
+	if (min && max == null) {
+		return min <= value
+	} else if (min == null && max) {
+		return max >= value
+	} else if (min && max) {
+		return between(min, max)(value)
+	} else {
+		return true
+	}
+}

src/i18n/en.json

@@ -630,7 +630,10 @@
         "seatsFiltersClose": "Close",
         "seatsFiltersReset": "Reset Filters",
         "seatsFilterInputLabel": "Type something",
-		"webusername": "Login"
+		"webusername": "Login",
+		"pbxExtensionHint": "Allowed extensions are between {min} and {max}",
+		"pbxExtensionMinOnlyHint": "Minimum allowed extension is {min}",
+		"pbxExtensionMaxOnlyHint": "Maximum allowed extension is {max}"
     },
     "callBlocking": {
         "privacyEnabledToast": "Your number is hidden to the callee",

src/store/pbx.js

@@ -147,6 +147,34 @@ export default {
 		},
 		isNumbersRequesting (state) {
 			return state.numberListState === RequestState.requesting
+		},
+		getMinAllowedExtension (state, getters, rootState, rootGetters) {
+			const subscriber = rootGetters['user/getSubscriber']
+			return subscriber.ext_range_min
+		},
+		getMaxAllowedExtension (state, getters, rootState, rootGetters) {
+			const subscriber = rootGetters['user/getSubscriber']
+			return subscriber.ext_range_max
+		},
+		getExtensionHint (state, getters, rootState, rootGetters) {
+			const min = getters.getMinAllowedExtension
+			const max = getters.getMaxAllowedExtension
+			if (min && max == null) {
+				return i18n.t('pbxConfig.pbxExtensionMinOnlyHint', {
+					min: min
+				})
+			} else if (min == null && max) {
+				return i18n.t('pbxConfig.pbxExtensionMaxOnlyHint', {
+					max: max
+				})
+			} else if (min && max) {
+				return i18n.t('pbxConfig.pbxExtensionHint', {
+					min: min,
+					max: max
+				})
+			} else {
+				return null
+			}
 		}
 	},
 	mutations: {