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

TT#40253 Notify user invalid destination input

Browse Source 
What has been done:
- TT#43257, Bind validation functions to the input fields
- TT#43256, Provide proper error messages and put these in the
  translation file

Change-Id: I3b8d9c7b627fab960fc5491b0bb8aa9266f6bc73
changes/44/23144/5
raxelsen 7 years ago committed by Hans-Peter Herzog
parent 91e33e2516
commit f6795c77b0
6 changed files with 142 additions and 56 deletions
Show Stats Download Patch File Download Diff File

4
src/components/call/CscPhoneNumberInput.vue
Unescape View File

@ -71,10 +71,10 @@
],
computed: {
errorMessage() {
return this.$t('call.inputValidNumber');
return this.$t('validationErrors.inputValidNumber');
},
helperMessage() {
return this.$t('call.inputNumber');
return this.$t('validationErrors.inputNumber');
},
inputReadonly() {
return this.isMobile;

87
src/components/pages/CallForward/CscAddDestinationForm.vue
Unescape View File

@ -29,8 +29,7 @@
</q-btn>
<div v-if="isFormEnabled">
<q-field
:error="addFormError"
:error-label="$t('pages.callForward.addInputError')"
:error-label="destinationInputError"
>
<q-input
:before="beforeIconDestination"
@ -41,11 +40,13 @@
:clearable="isFormTypeNumber"
:autofocus="isFormTypeNumber"
:disable="!isFormTypeNumber || addDestinationIsRequesting"
@input="$v.destinationForm.destination.$touch"
@blur="$v.destinationForm.destination.$touch"
:error="$v.destinationForm.destination.$error"
/>
</q-field>
<q-field
:error="addFormError"
:error-label="$t('pages.callForward.addInputError')"
:error-label="timeoutInputError"
>
<q-input
v-if="isFormTypeNumber"
@ -54,6 +55,9 @@
type="number"
v-model="destinationForm.timeout"
suffix="seconds"
@input="$v.destinationForm.timeout.$touch"
@blur="$v.destinationForm.timeout.$touch"
:error="$v.destinationForm.timeout.$error"
/>
</q-field>
<q-btn
@ -68,6 +72,7 @@
color="primary"
icon-right="fa-save"
@click="addDestination()"
:disable="$v.destinationForm.destination.$error || $v.destinationForm.timeout.$error"
>
{{ $t('buttons.save') }}
</q-btn>
@ -76,12 +81,31 @@
</template>
<script>
import _ from 'lodash'
import { startLoading } from '../../../helpers/ui'
import { mapGetters, mapState } from 'vuex'
import { QItem, Toast, QBtn, QSelect, QPopover, QList,
QField, QInput, QSlider } from 'quasar-framework'
import {
startLoading,
showGlobalError
} from '../../../helpers/ui'
import {
mapGetters,
mapState
} from 'vuex'
import {
required,
maxLength,
minValue
} from 'vuelidate/lib/validators'
import {
QItem,
Toast,
QBtn,
QSelect,
QPopover,
QList,
QField,
QInput,
QSlider
} from 'quasar-framework'
export default {
name: 'csc-add-destination-form',
props: [
@ -95,7 +119,6 @@
],
data () {
return {
addFormError: false,
formEnabled: false,
destinationForm: {
destination: '',
@ -114,6 +137,18 @@
Toast,
QBtn
},
validations: {
destinationForm: {
destination: {
required,
maxLength: maxLength(64)
},
timeout: {
required,
minValue: minValue(1)
}
}
},
computed: {
...mapState('callForward', [
'activeForm',
@ -124,6 +159,32 @@
'hasSendFaxFeature',
'hasFaxCapability'
]),
destinationInputError() {
if (!this.$v.destinationForm.destination.maxLength) {
return this.$t('validationErrors.maxLength', {
field: this.$t('pages.callForward.destination'),
maxLength: this.$v.destinationForm.destination.$params.maxLength.max
});
}
else if (!this.$v.destinationForm.destination.required) {
return this.$t('validationErrors.fieldRequired', {
field: this.$t('pages.callForward.destination')
});
}
},
timeoutInputError() {
if (!this.$v.destinationForm.timeout.minValue) {
return this.$t('validationErrors.minValueSecond', {
field: this.$t('pages.callForward.timeout'),
minValue: this.$v.destinationForm.timeout.$params.minValue.min
});
}
else if (!this.$v.destinationForm.timeout.required) {
return this.$t('validationErrors.fieldRequired', {
field: this.$t('pages.callForward.timeout')
});
}
},
isFormTypeNumber() {
return this.formType === 'number';
},
@ -178,6 +239,11 @@
this.$store.commit('callForward/resetDestinationState');
},
addDestination() {
if (this.$v.destinationForm.destination.$error ||
this.$v.destinationForm.timeout.$error) {
showGlobalError(this.$t('validationErrors.generic'));
}
else {
startLoading();
this.$store.dispatch('callForward/addDestination', {
form: this.destinationForm,
@ -189,6 +255,7 @@
}
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">

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

@ -3,6 +3,7 @@
<q-field :error-label="groupNameErrorMessage">
<q-input
@input="$v.data.name.$touch"
@blur="$v.data.name.$touch"
:error="$v.data.name.$error"
:disabled="loading"
:readonly="loading"
@ -15,6 +16,7 @@
<q-field :error-label="extensionErrorMessage">
<q-input
@input="$v.data.extension.$touch"
@blur="$v.data.extension.$touch"
:error="$v.data.extension.$error"
:disabled="loading"
:readonly="loading"
@ -100,7 +102,6 @@
</template>
<script>
import {
required,
minValue,
@ -171,38 +172,50 @@
computed: {
groupNameErrorMessage() {
if (!this.$v.data.name.required) {
return this.$t('pbxConfig.requiredGroupName');
return this.$t('validationErrors.fieldRequired', {
field: this.$t('pbxConfig.groupName')
});
}
else if (!this.$v.data.name.maxLength) {
return this.$t('pbxConfig.groupNameMaxLength', {
return this.$t('validationErrors.maxLength', {
field: this.$t('pbxConfig.groupName'),
maxLength: this.$v.data.name.$params.maxLength.max
});
}
},
extensionErrorMessage() {
if (!this.$v.data.extension.required) {
return this.$t('pbxConfig.requiredExtension');
return this.$t('validationErrors.fieldRequired', {
field: this.$t('pbxConfig.extension')
});
}
else if (!this.$v.data.name.maxLength) {
return this.$t('pbxConfig.extensionMaxLength', {
else if (!this.$v.data.extension.maxLength) {
return this.$t('validationErrors.maxLength', {
field: this.$t('pbxConfig.extension'),
maxLength: this.$v.data.extension.$params.maxLength.max
});
}
else if (!this.$v.data.name.numeric) {
return this.$t('pbxConfig.extensionAlphaNum');
else if (!this.$v.data.extension.numeric) {
return this.$t('validationErrors.alphaNum', {
field: this.$t('pbxConfig.extension'),
});
}
},
huntTimeoutErrorMessage() {
if (!this.$v.data.huntTimeout.required) {
return this.$t('pbxConfig.requiredHuntTimeout');
return this.$t('validationErrors.fieldRequired', {
field: this.$t('pbxConfig.huntTimeoutSentence')
});
}
else if (!this.$v.data.huntTimeout.minValue) {
return this.$t('pbxConfig.huntTimeoutMinValue', {
return this.$t('validationErrors.minValueSecond', {
field: this.$t('pbxConfig.huntTimeoutSentence'),
minValue: this.$v.data.huntTimeout.$params.minValue.min
});
}
else if (!this.$v.data.huntTimeout.maxValue) {
return this.$t('pbxConfig.huntTimeoutMaxValue', {
return this.$t('validationErrors.maxValueSecond', {
field: this.$t('pbxConfig.huntTimeoutSentence'),
maxValue: this.$v.data.huntTimeout.$params.maxValue.max
});
}

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

@ -58,7 +58,7 @@
class="csc-list-item-main"
v-if="expanded"
>
<q-field :label="$t('pbxConfig.seatName')">
<q-field :label="$t('pbxConfig.name')">
<q-input
v-model="changes.name"
:after="nameButtons"

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

@ -3,18 +3,20 @@
<q-field :error-label="seatNameErrorMessage">
<q-input
@input="$v.data.name.$touch"
@blur="$v.data.name.$touch"
:error="$v.data.name.$error"
:disabled="loading"
:readonly="loading"
v-model="data.name"
autofocus
:float-label="$t('pbxConfig.seatName')"
:float-label="$t('pbxConfig.name')"
clearable
/>
</q-field>
<q-field :error-label="extensionErrorMessage">
<q-input
@input="$v.data.extension.$touch"
@blur="$v.data.extension.$touch"
:error="$v.data.extension.$error"
:disabled="loading"
:readonly="loading"
@ -138,25 +140,33 @@
computed: {
seatNameErrorMessage() {
if (!this.$v.data.name.required) {
return this.$t('pbxConfig.requiredSeatName');
return this.$t('validationErrors.fieldRequired', {
field: this.$t('pbxConfig.seatName')
});
}
else if (!this.$v.data.name.maxLength) {
return this.$t('pbxConfig.seatNameMaxLength', {
return this.$t('validationErrors.maxLength', {
field: this.$t('pbxConfig.seatName'),
maxLength: this.$v.data.name.$params.maxLength.max
});
}
},
extensionErrorMessage() {
if (!this.$v.data.extension.required) {
return this.$t('pbxConfig.requiredExtension');
return this.$t('validationErrors.fieldRequired', {
field: this.$t('pbxConfig.extension')
});
}
else if (!this.$v.data.name.maxLength) {
return this.$t('pbxConfig.extensionMaxLength', {
else if (!this.$v.data.extension.maxLength) {
return this.$t('validationErrors.maxLength', {
field: this.$t('pbxConfig.extension'),
maxLength: this.$v.data.extension.$params.maxLength.max
});
}
else if (!this.$v.data.name.numeric) {
return this.$t('pbxConfig.extensionAlphaNum');
else if (!this.$v.data.extension.numeric) {
return this.$t('validationErrors.alphaNum', {
field: this.$t('pbxConfig.extension'),
});
}
}
},

28
src/locales/en.json
Unescape View File

@ -24,8 +24,15 @@
"callNotAvailable": "Could not initialize call functionality properly"
},
"validationErrors": {
"generic": "You have invalid form input. Please check and try again.",
"required": "This field is required.",
"maxLength": "{field} must have at most {maxLength} letters",
"fieldRequired": "{field} is required",
"minValueSecond": "{field} must be at least {minValue} second"
"minValueSecond": "{field} must be at least {minValue} second",
"maxValueSecond": "{field} must be maximum of {maxValue} seconds",
"alphaNum": "{field} must consist of numeric characters only",
"inputNumber": "Input a phone number",
"inputValidNumber": "Input a valid phone number"
},
"navigation": {
"home": {
@ -277,8 +284,6 @@
"incoming": "Incoming ...",
"ended": "Ended",
"call": "Established",
"inputNumber": "Input a phone number",
"inputValidNumber": "Input a valid phone number",
"number": "Phone number",
"endCall": "End Call",
"endCallDialog": "You are about to end the current call. Are you sure?",
@ -297,6 +302,7 @@
"groupName": "Group Name",
"huntPolicy": "Hunt Policy",
"huntTimeout": "Hunt Timeout",
"huntTimeoutSentence": "Hunt timeout",
"primaryNumber": "Primary Number",
"aliasNumbers": "Alias Numbers",
"serialRinging": "Serial Ringing",
@ -309,7 +315,9 @@
"removeGroup": "Remove group",
"removeGroupTitle": "Remove group",
"removeGroupText": "You are about to remove group {group}",
"seatName": "Name",
"groupName": "Group name",
"name": "Name",
"seatName": "Seat name",
"addSeat": "Add Seat",
"removeSeat": "Remove seat",
"removeSeatTitle": "Remove seat",
@ -327,18 +335,6 @@
"noStationName": "Could not find any device with station name matching the filter criteria",
"noGroups": "No groups created yet",
"noSeats": "No seats created yet",
"requiredGroupName": "Group name is required",
"groupNameMaxLength": "Group name must have at most {maxLength} letters",
"requiredExtension": "Extension is required",
"extensionMinValue": "Extension must be at least {minValue}",
"extensionMaxValue": "Extension must be maximum {maxValue}",
"requiredHuntTimeout": "Hunt timeout is required",
"huntTimeoutMinValue": "Hunt timeout must be at least {minValue} second",
"huntTimeoutMaxValue": "Hunt timeout must be maximum {maxValue} seconds",
"requiredSeatName": "Seat name is required",
"seatNameMaxLength": "Seat name must have at most {maxLength} letters",
"extensionMaxLength": "Extension must have at most {maxLength} letters",
"extensionAlphaNum": "Only numeric characters are allowed",
"toasts": {
"changedFieldToast": "Changed {type} to {name}",
"updatedAliasNumbersToast": "Alias numbers field updated!",

Write Preview
Loading…
Cancel
Save