What has been done: - TT#29602, CallForwarding: Create UI input form - TT#29603, CallForwarding: Implement API method for add new destination - TT#29604, CallForwarding: Implement store and bindings for add new destination feature Change-Id: I723488e684990c21ee74700cf6e849a5d16cda9cchanges/26/18126/20
raxelsen
7 years ago
committed by
Hans-Peter Herzog
parent
d600aa4a8e
commit
9567594bd1
@ -0,0 +1,170 @@
|
|||||||
|
<template>
|
||||||
|
<div class="add-destination-form">
|
||||||
|
<q-btn v-if="!isFormEnabled" flat color="primary" icon="fa-plus">
|
||||||
|
{{ $t('pages.callForward.addDestinationButton') }}
|
||||||
|
<q-popover ref="popover">
|
||||||
|
<q-list separator link>
|
||||||
|
<q-item @click="enableForm('number'),
|
||||||
|
$refs.popover.close()">
|
||||||
|
{{ $t('pages.callForward.buttons.addNumber') }}
|
||||||
|
</q-item>
|
||||||
|
<q-item @click="enableForm('voicebox'),
|
||||||
|
$refs.popover.close()">
|
||||||
|
{{ $t('pages.callForward.buttons.addVoicemail') }}
|
||||||
|
</q-item>
|
||||||
|
<q-item @click="enableForm('fax2mail'),
|
||||||
|
$refs.popover.close()"
|
||||||
|
v-if="hasFaxCapability">
|
||||||
|
{{ $t('pages.callForward.buttons.addFax2Mail') }}
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-popover>
|
||||||
|
</q-btn>
|
||||||
|
<div v-if="isFormEnabled">
|
||||||
|
<q-field :error="addFormError" :error-label="$t('pages.callForward.addInputError')">
|
||||||
|
<q-input :before="beforeIconDestination" :float-label="$t('pages.callForward.destination')" type="text"
|
||||||
|
v-model="destinationForm.destination" @keyup.enter="addDestination()"
|
||||||
|
:clearable="isFormTypeNumber" :autofocus="isFormTypeNumber"
|
||||||
|
:disable="!isFormTypeNumber || addDestinationIsRequesting" />
|
||||||
|
</q-field>
|
||||||
|
<q-field :error="addFormError"
|
||||||
|
:error-label="$t('pages.callForward.addInputError')">
|
||||||
|
<q-input :before="beforeIconTimeout" :float-label="$t('pages.callForward.timeout')"
|
||||||
|
type="number" v-if="isFormTypeNumber" v-model="destinationForm.timeout"
|
||||||
|
:min="0" :max="600" suffix="seconds" />
|
||||||
|
</q-field>
|
||||||
|
<q-btn flat dark @click="disableForm()">{{ $t('buttons.cancel') }}</q-btn>
|
||||||
|
<q-btn flat color="primary" icon-right="fa-save" @click="addDestination()">{{ $t('buttons.save') }}</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import { startLoading, stopLoading,
|
||||||
|
showGlobalError, showToast } from '../../../helpers/ui'
|
||||||
|
import { normalizeTerminationInput } from '../../../filters/number-format'
|
||||||
|
import { mapGetters, mapState } from 'vuex'
|
||||||
|
import { QItem, Toast, QBtn, QSelect, QPopover, QList,
|
||||||
|
QField, QInput, QSlider } from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-add-destination-form',
|
||||||
|
props: [
|
||||||
|
'destinations',
|
||||||
|
'id',
|
||||||
|
'groupName',
|
||||||
|
'priority'
|
||||||
|
],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
addFormError: false,
|
||||||
|
formEnabled: false,
|
||||||
|
destinationForm: {
|
||||||
|
destination: '',
|
||||||
|
timeout: 300
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
QSelect,
|
||||||
|
QPopover,
|
||||||
|
QField,
|
||||||
|
QInput,
|
||||||
|
QSlider,
|
||||||
|
QList,
|
||||||
|
QItem,
|
||||||
|
Toast,
|
||||||
|
QBtn
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('callForward', [
|
||||||
|
'activeForm',
|
||||||
|
'formType',
|
||||||
|
'addDestinationState',
|
||||||
|
'addDestinationError',
|
||||||
|
'lastAddedDestination'
|
||||||
|
]),
|
||||||
|
...mapGetters('callForward', [
|
||||||
|
'hasFaxCapability'
|
||||||
|
]),
|
||||||
|
isFormTypeNumber() {
|
||||||
|
return this.formType === 'number';
|
||||||
|
},
|
||||||
|
isFormEnabled() {
|
||||||
|
return this.activeForm === this.groupName && this.formEnabled;
|
||||||
|
},
|
||||||
|
addDestinationIsRequesting() {
|
||||||
|
return this.addDestinationState === 'requesting';
|
||||||
|
},
|
||||||
|
addDestinationError() {
|
||||||
|
return this.$store.state.callForward.addDestinationError || this.$t('pages.callForward.addErrorMessage');
|
||||||
|
},
|
||||||
|
beforeIconTimeout() {
|
||||||
|
return [{
|
||||||
|
icon: 'schedule'
|
||||||
|
}];
|
||||||
|
},
|
||||||
|
beforeIconDestination() {
|
||||||
|
return [{
|
||||||
|
icon: 'fa-angle-double-right'
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
addDestinationState(state) {
|
||||||
|
if (state === 'failed') {
|
||||||
|
stopLoading();
|
||||||
|
showGlobalError(this.addDestinationError);
|
||||||
|
} else if (state === 'succeeded') {
|
||||||
|
stopLoading();
|
||||||
|
showToast(this.$t('pages.callForward.addDestinationSuccessMessage', {
|
||||||
|
destination: this.lastAddedDestination
|
||||||
|
}));
|
||||||
|
this.disableForm();
|
||||||
|
} else if (state === 'button') {
|
||||||
|
stopLoading();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
enableForm(type) {
|
||||||
|
this.formEnabled = true;
|
||||||
|
this.$store.dispatch('callForward/setFormType', type);
|
||||||
|
this.$store.dispatch('callForward/setActiveForm', this.groupName);
|
||||||
|
this.$store.dispatch('callForward/setDestinationsetId', this.id);
|
||||||
|
this.$store.dispatch('callForward/setGroupName', this.groupName);
|
||||||
|
this.$store.dispatch('callForward/setPriority', this.priority);
|
||||||
|
if (type === 'voicebox') {
|
||||||
|
this.destinationForm.destination = 'Voicemail';
|
||||||
|
} else if (type === 'fax2mail') {
|
||||||
|
this.destinationForm.destination = 'Fax2Mail';
|
||||||
|
} else {
|
||||||
|
this.destinationForm.destination = '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
disableForm() {
|
||||||
|
this.destinationForm.timeout = 300;
|
||||||
|
this.destinationForm.destination = '';
|
||||||
|
this.formEnabled = false;
|
||||||
|
this.$store.dispatch('callForward/resetFormState');
|
||||||
|
this.$store.dispatch('callForward/resetDestinationState');
|
||||||
|
},
|
||||||
|
addDestination() {
|
||||||
|
startLoading();
|
||||||
|
this.$store.dispatch('callForward/addDestination', {
|
||||||
|
form: this.destinationForm,
|
||||||
|
destinations: this.destinations
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus">
|
||||||
|
@import '~variables'
|
||||||
|
.add-destination-form
|
||||||
|
margin 0 15px
|
||||||
|
.q-slider.label-always
|
||||||
|
padding 15px 0 5px
|
||||||
|
height 50px
|
||||||
|
</style>
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import { assert } from 'chai';
|
||||||
|
import numberFormat from '../../src/filters/number-format';
|
||||||
|
import { normalizeNumber, normalizeDestination } from '../../src/filters/number-format';
|
||||||
|
|
||||||
|
const numbers = {
|
||||||
|
valid1: '+43 993 004',
|
||||||
|
valid2: '43993004',
|
||||||
|
valid3: ' 43993004 ',
|
||||||
|
valid4: '+43993004',
|
||||||
|
valid5: '43 993 004',
|
||||||
|
valid6: '4 3 9 9 3 0 0 4',
|
||||||
|
valid7: '+4 3 9 9 3 0 0 4',
|
||||||
|
valid8: ' +43993004 ',
|
||||||
|
invalid1: '43993004+',
|
||||||
|
invalid2: '$43993004',
|
||||||
|
invalid3: 'a43993004',
|
||||||
|
invalid4: 'abcdefghi'
|
||||||
|
};
|
||||||
|
|
||||||
|
const sipUris = {
|
||||||
|
valid1: 'sip:43993004@sipwise.com',
|
||||||
|
invalid1: 'sip:a43993004@sipwise.com'
|
||||||
|
};
|
||||||
|
|
||||||
|
const destinations = {
|
||||||
|
voiceMail: 'sip:vmu@voicebox.local',
|
||||||
|
fax2Mail: 'sip:@fax2mail.local',
|
||||||
|
managerSecretary: 'sip:@managersecretary.local',
|
||||||
|
app: 'sip:app@app.local',
|
||||||
|
customHours: 'sip:custom-hours@app.local',
|
||||||
|
conference: 'sip:@conference.local',
|
||||||
|
number: 'sip:43993004@sipwise.com'
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('NumberFormatFilter', function() {
|
||||||
|
|
||||||
|
it('should normalize phone numbers', function(){
|
||||||
|
assert.equal(normalizeNumber(numbers.valid1), numbers.valid1);
|
||||||
|
assert.equal(normalizeNumber(numbers.valid2), numbers.valid1);
|
||||||
|
assert.equal(normalizeNumber(numbers.valid3), numbers.valid1);
|
||||||
|
assert.equal(normalizeNumber(numbers.valid4), numbers.valid1);
|
||||||
|
assert.equal(normalizeNumber(numbers.valid5), numbers.valid1);
|
||||||
|
assert.equal(normalizeNumber(numbers.valid6), numbers.valid1);
|
||||||
|
assert.equal(normalizeNumber(numbers.valid7), numbers.valid1);
|
||||||
|
assert.equal(normalizeNumber(numbers.valid8), numbers.valid1);
|
||||||
|
assert.equal(normalizeNumber(numbers.invalid1), numbers.invalid1);
|
||||||
|
assert.equal(normalizeNumber(numbers.invalid2), numbers.invalid2);
|
||||||
|
assert.equal(normalizeNumber(numbers.invalid3), numbers.invalid3);
|
||||||
|
assert.equal(normalizeNumber(numbers.invalid4), numbers.invalid4);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should format a number or sip uri', function(){
|
||||||
|
assert.equal(numberFormat(sipUris.valid1), numbers.valid1);
|
||||||
|
assert.equal(numberFormat(sipUris.invalid1), sipUris.invalid1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should format a call forward destination', function(){
|
||||||
|
assert.equal(normalizeDestination(destinations.voiceMail), 'Voicemail');
|
||||||
|
assert.equal(normalizeDestination(destinations.fax2Mail), 'Fax2Mail');
|
||||||
|
assert.equal(normalizeDestination(destinations.managerSecretary), 'Manager Secretary');
|
||||||
|
assert.equal(normalizeDestination(destinations.app), 'App');
|
||||||
|
assert.equal(normalizeDestination(destinations.customHours), 'Custom Announcement');
|
||||||
|
assert.equal(normalizeDestination(destinations.conference), 'Conference');
|
||||||
|
assert.equal(normalizeDestination(destinations.number), numbers.valid1);
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in new issue