sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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

Browse Source 
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
pull/4/head
Carlo Venusino 5 years ago committed by Hans-Peter Herzog
parent 49956d7085
commit 1c839a7f84
7 changed files with 138 additions and 5 deletions
Show Stats Download Patch File Download Diff File

29
src/components/pages/PbxConfiguration/CscPbxGroup.vue
Unescape View File

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

18
src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue
Unescape View File

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

29
src/components/pages/PbxConfiguration/CscPbxSeat.vue
Unescape View File

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

21
src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
Unescape View File

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

13
src/helpers/validation.js
Unescape View File

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

5
src/i18n/en.json
Unescape View File

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

28
src/store/pbx.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save