TT#81164 CF: As a Customer, I want to add new forwarding groups "If call from ..."

ACs:
√ Can click a new type of forwarding group under "Add forwarding"
√ Can create a new group "If online and call from ..."
√ Can delete an existing group
√ Can add destinations as in other groups
√ Can delete destinations
√ Can edit destinations
√ Can define a list of sources by clicking the highlighted part in the title "call from ..."
√ Can see a popup after clicking "call from ..."
√ Can input a name to identify the source list, add a first number and save it
√ Can see the title "If online and call from nameOfTheSourceList" after saving the new source list initially
√ Can see the popup with the source list after clicking the title again
√ Can add numbers to that source list by clicking an add button in the popup
√ Can delete numbers from the source list by clicking a delete button

extra:

√ Adding a sourceset to an unpersisted destinationset is prevented:
√ Changed condition menu label

Change-Id: Ifaa7b9cf5e8e5785bbfe2efd9ab7acaa0497cef5
changes/47/40247/7
Carlo Venusino 5 years ago
parent a063d1ab9c
commit 4f6f3f2f23

@ -14,19 +14,14 @@
<span <span
class="csc-cf-destination-add-condition" class="csc-cf-destination-add-condition"
v-if="!groupSourceset" v-if="!groupSourceset && !isTempGroup"
> >
<q-icon {{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
name="add" <span class="csc-cf-from-link">
color="primary" {{ $t('pages.newCallForward.conditionBtnLabel') }}
size="20px" </span>
/>
{{ $t('pages.newCallForward.conditionBtnLabel') }}
<q-popover <q-popover
ref="conditions" ref="conditions"
class="csc-cf-number-form"
@open="showConditions()" @open="showConditions()"
@close="showConditionForm()" @close="showConditionForm()"
> >
@ -55,10 +50,11 @@
<span <span
v-if="groupSourceset" v-if="groupSourceset"
class="csc-cf-from-link"
> >
{{ $t('pages.newCallForward.fromLabelShort') +'"'+ groupSourceset +'"'}} {{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
<span class="csc-cf-from-link">
{{ $t('pages.newCallForward.fromLabelShort') +'"'+ groupSourceset +'"'}}
</span>
<q-popover <q-popover
ref="sourcesList" ref="sourcesList"
class="csc-cf-number-form" class="csc-cf-number-form"
@ -66,8 +62,8 @@
> >
<csc-new-call-forward-edit-sources <csc-new-call-forward-edit-sources
ref="editSources" ref="editSources"
:sources="sources"
:sourceSetName="groupSourceset" :sourceSetName="groupSourceset"
:sourceSetId="sourceSet.id"
:groupName="group.name" :groupName="group.name"
:groupId="group.id" :groupId="group.id"
/> />
@ -228,7 +224,7 @@
const isGroupEnabled = await this.$store.dispatch('newCallForward/isGroupEnabled', {groupName: this.group.name, id: this.group.id}); const isGroupEnabled = await this.$store.dispatch('newCallForward/isGroupEnabled', {groupName: this.group.name, id: this.group.id});
this.isEnabled = isGroupEnabled; this.isEnabled = isGroupEnabled;
} }
this.updateSourcesetNames() await this.updateSourcesetNames()
} }
catch(err){ catch(err){
console.log(err) console.log(err)
@ -236,6 +232,7 @@
}, },
computed: { computed: {
...mapGetters('newCallForward', [ ...mapGetters('newCallForward', [
'getGroupsLoaders',
'getOwnPhoneTimeout', 'getOwnPhoneTimeout',
'groupsCount', 'groupsCount',
'getMappings', 'getMappings',
@ -273,6 +270,9 @@
}, },
groupSourceset(){ groupSourceset(){
return this.sourceSet ? this.sourceSet.name : false; return this.sourceSet ? this.sourceSet.name : false;
},
isTempGroup(){
return this.group.id.toString().includes('temp-');
} }
}, },
watch: { watch: {
@ -389,8 +389,6 @@
.csc-cf-destination-value .csc-cf-destination-value
text-align center text-align center
.csc-cf-destination-add-condition .csc-cf-destination-add-condition
color $primary
cursor pointer
font-size 16px font-size 16px
.csc-cf-destination-add-destination .csc-cf-destination-add-destination
padding-left 25px padding-left 25px

@ -154,9 +154,10 @@
this.groupsLoading = true; this.groupsLoading = true;
try{ try{
await this.$store.dispatch('newCallForward/loadMappings'); await this.$store.dispatch('newCallForward/loadMappings');
await this.$store.dispatch('newCallForward/loadSourcesets');
await this.$store.dispatch('newCallForward/loadForwardGroups'); await this.$store.dispatch('newCallForward/loadForwardGroups');
let unconditionalGroups = await this.$store.dispatch('newCallForward/getForwardGroupByName', 'unconditional'); let unconditionalGroups = await this.$store.dispatch('newCallForward/getForwardGroupByName', 'unconditional');
this.toggleDefaultNumber = !unconditionalGroups; //|| unconditionalGroup.destinations.length < 1; this.toggleDefaultNumber = !unconditionalGroups;
} }
catch(err){ catch(err){
console.log(err) console.log(err)

@ -76,7 +76,6 @@
}, },
data () { data () {
return { return {
mode: 'create',
loading: false, loading: false,
enabled: false, enabled: false,
number: '', number: '',
@ -112,29 +111,25 @@
if (this.numberError || this.nameError || this.saveDisabled) { if (this.numberError || this.nameError || this.saveDisabled) {
showGlobalError(this.$t('validationErrors.generic')); showGlobalError(this.$t('validationErrors.generic'));
return;
} }
switch(this.mode){ try{
case 'create': await this.$store.dispatch('newCallForward/addGroupLoader', forwardGroupId);
try{ sourceSetId = await this.$store.dispatch('newCallForward/createSourceSet', {
sourceSetId = await this.$store.dispatch('newCallForward/createSourceSet', { name: this.name,
name: this.name, source: this.number
source: this.number });
}); await this.$store.dispatch('newCallForward/addSourcesetToGroup', {
await this.$store.dispatch('newCallForward/addSourcesetToGroup', { name: forwardGroupName,
name: forwardGroupName, id: forwardGroupId,
id: forwardGroupId, sourceSetId: sourceSetId
sourceSetId: sourceSetId });
}); await this.$store.dispatch('newCallForward/removeGroupLoader', forwardGroupId);
await this.$store.dispatch('newCallForward/loadForwardGroups'); await this.$store.dispatch('newCallForward/loadForwardGroups');
} await this.$store.dispatch('newCallForward/loadSourcesets');
catch(err){ }
console.log(err) catch(err){
} console.log(err)
break;
case 'edit':
break;
} }
}, },
cancel() { cancel() {

@ -3,8 +3,17 @@
v-if="enabled" v-if="enabled"
class="csc-form" class="csc-form"
> >
<div class="col text-left col-xs-12 col-md-12 ">
<div
class='csc-cf-sourceset-name'
>
{{ sourceSetName }}
</div>
</div>
<div <div
class="csc-cf-row row"
v-for="(source, item) in sources" v-for="(source, item) in sources"
:key="source + '_' + item" :key="source + '_' + item"
> >
@ -12,6 +21,7 @@
:groupId="groupId" :groupId="groupId"
:groupName="groupName" :groupName="groupName"
:source="source.source" :source="source.source"
:sourceSetId="sourceSetId"
:sourceSetName="sourceSetName" :sourceSetName="sourceSetName"
/> />
</div> </div>
@ -20,9 +30,10 @@
class="csc-cf-row row" class="csc-cf-row row"
> >
<csc-new-call-forward-input <csc-new-call-forward-input
ref="sourceInputField"
:label="$t('callBlocking.number')" :label="$t('callBlocking.number')"
v-model="number" v-model="number"
@submit="save" @submit="save()"
@error="errorNumber" @error="errorNumber"
/> />
</div> </div>
@ -43,7 +54,7 @@
flat flat
color="primary" color="primary"
icon="done" icon="done"
@click="save(); close()" @click="save()"
:disable="saveDisabled" :disable="saveDisabled"
> >
{{ $t('buttons.save') }} {{ $t('buttons.save') }}
@ -94,14 +105,15 @@
enabled: false, enabled: false,
number: '', number: '',
numberError: false, numberError: false,
destinationIndex: null destinationIndex: null,
sources: []
} }
}, },
props: [ props: [
'groupName', 'groupName',
'groupId', 'groupId',
'sourceSetName', 'sourceSetName',
'sources' 'sourceSetId'
], ],
validations: { validations: {
number: { number: {
@ -111,6 +123,7 @@
}, },
computed: { computed: {
...mapGetters('newCallForward', [ ...mapGetters('newCallForward', [
'destinationInCreation',
'getSourcesets', 'getSourcesets',
'getSourcesesBySourcesetId' 'getSourcesesBySourcesetId'
]), ]),
@ -118,16 +131,45 @@
return this.number.length < 1 || this.numberError || this.disable || this.loading; return this.number.length < 1 || this.numberError || this.disable || this.loading;
} }
}, },
async mounted(){
try{
this.sources = await this.getSourcesesBySourcesetId(this.sourceSetId);
}
catch(err){
console.log(err)
}
},
watch:{
getSourcesets: function(){
this.sources = this.getSourcesesBySourcesetId(this.sourceSetId);
}
},
methods: { methods: {
async save() { async save() {
//const forwardGroupId = this.groupId; const sources = this.sources;
// const forwardGroupName = this.groupName;
//const forwardGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', forwardGroupId);
if (this.numberError || this.saveDisabled) { if (this.numberError || this.saveDisabled) {
showGlobalError(this.$t('validationErrors.generic')); showGlobalError(this.$t('validationErrors.generic'));
} }
// TODO save source sources.push({
source: this.number
});
try{
await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
this.$refs.sourceInputField.reset();
await this.$store.dispatch('newCallForward/addSourceToSourceset', {
id: this.sourceSetId,
sources: sources
});
await this.$store.dispatch('newCallForward/loadSourcesets');
}
catch(err){
console.log(err)
}
finally {
await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
}
}, },
cancel() { cancel() {
this.number = ''; this.number = '';
@ -152,4 +194,6 @@
<style lang="stylus" rel="stylesheet/stylus"> <style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/app.common.styl' @import '../../../themes/app.common.styl'
.csc-cf-sourceset-name
margin-top 10px
</style> </style>

@ -7,6 +7,7 @@
dark dark
clearable clearable
type="text" type="text"
ref="inputField"
:float-label="label" :float-label="label"
v-model="inputValue" v-model="inputValue"
@keyup.enter="submit" @keyup.enter="submit"
@ -44,6 +45,7 @@
mounted(){ mounted(){
if(this.prefilled){ if(this.prefilled){
this.inputValue = this.prefilled === " " ? "" : this.prefilled; this.inputValue = this.prefilled === " " ? "" : this.prefilled;
this.$v.$reset();
} }
}, },
@ -97,6 +99,10 @@
blur() { blur() {
this.$v.inputValue.$touch(); this.$v.inputValue.$touch();
this.error = this.$v.inputValue.$error; this.error = this.$v.inputValue.$error;
},
reset(){
this.$refs.inputField.clear();
this.$v.$reset();
} }
}, },
watch: { watch: {

@ -3,16 +3,6 @@
class="row csc-cf-source-cont" class="row csc-cf-source-cont"
v-bind:class="{ 'csc-cf-removed-source': removeInProgress }" v-bind:class="{ 'csc-cf-removed-source': removeInProgress }"
> >
<div class="col text-left col-xs-12 col-md-12 ">
<div
class='csc-cf-sourceset-name'
>
{{ sourceSetName }}
</div>
</div>
<div class="col text-left col-xs-12 col-md-6 "> <div class="col text-left col-xs-12 col-md-6 ">
<div <div
@ -28,14 +18,7 @@
name="delete" name="delete"
color="negative" color="negative"
size="24px" size="24px"
@click="showConfirmDialog" @click="deleteSource"
/>
<csc-confirm-dialog
ref="confirmDialog"
title-icon="delete"
:title="$t('pages.newCallForward.cancelDialogTitle', {sourceSetName: this.sourceSetName})"
:message="$t('pages.newCallForward.cancelDialogText', {sourceSetName: this.sourceSetName, source: this.source})"
@confirm="confirmDeleteSource"
/> />
</div> </div>
</div> </div>
@ -74,31 +57,40 @@
'groupId', 'groupId',
'groupName', 'groupName',
'source', 'source',
'sourceSetName' 'sourceSetName',
'sourceSetId'
], ],
// mounted(){
// this.updateValues(this.destination)
// },
data(){ data(){
return { return {
removeInProgress: false, removeInProgress: false,
toggleNumberForm: true toggleNumberForm: true,
sources: []
} }
}, },
computed: { computed: {
...mapGetters('newCallForward', []), ...mapGetters('newCallForward', [
'getSourcesesBySourcesetId'
]),
}, },
methods: { methods: {
showConfirmDialog(){ async deleteSource(){
this.$refs.confirmDialog.open();
},
async confirmDeleteSource(){
this.removeInProgress = true; this.removeInProgress = true;
await this.$store.dispatch('newCallForward/removeSourceFromSourceset', { let sources = this.getSourcesesBySourcesetId(this.sourceSetId);
source: this.source, sources = sources.filter($source=> $source.source !== this.source);
forwardGroupId: this.groupId, try{
sourceSetId: this.sourceSetId await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
}); await this.$store.dispatch('newCallForward/removeSourceFromSourceset', {
id: this.sourceSetId,
sources: sources
});
await this.$store.dispatch('newCallForward/loadSourcesets');
}
catch(err){
console.log(err)
}
finally{
await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
}
this.removeInProgress = false; this.removeInProgress = false;
} }
} }

@ -221,7 +221,8 @@
"primarNumberEnabled": "All calls go to the primary number", "primarNumberEnabled": "All calls go to the primary number",
"primarNumberDisabled": "No call goes to primary number", "primarNumberDisabled": "No call goes to primary number",
"forwardBtnLabel": "Add forwarding", "forwardBtnLabel": "Add forwarding",
"conditionBtnLabel": "add condition", "conditionBtnLabelPrefix": " and",
"conditionBtnLabel": " condition",
"numberLabel": "Number", "numberLabel": "Number",
"voiceMailLabel": "Voicemail", "voiceMailLabel": "Voicemail",
"destinationTimeoutLabel": "Then after ", "destinationTimeoutLabel": "Then after ",
@ -236,7 +237,7 @@
"cancelGroupDialogText": "You are about to delete {groupName} call forwarding group", "cancelGroupDialogText": "You are about to delete {groupName} call forwarding group",
"unconditionalLabel": "If online", "unconditionalLabel": "If online",
"fromLabel": "If call from ...", "fromLabel": "If call from ...",
"fromLabelShort": " and call from ", "fromLabelShort": " call from ",
"offlineLabel": "If offline", "offlineLabel": "If offline",
"busyLabel": "If busy", "busyLabel": "If busy",
"sourcesetName": "List name" "sourcesetName": "List name"

@ -166,9 +166,6 @@ export default {
} }
state.forwardGroups = forwardGroups; state.forwardGroups = forwardGroups;
}, },
setDestinationInCreation(state, isInCreation){
state.destinationInCreation = isInCreation;
},
setSelectedDestType(state, destType){ setSelectedDestType(state, destType){
state.selectedDestType = destType; state.selectedDestType = destType;
}, },
@ -581,9 +578,6 @@ export default {
console.log(err) console.log(err)
} }
}, },
setDestinationInCreation(context, isInCreation){
context.commit('setDestinationInCreation', isInCreation);
},
setSelectedDestType(context, destType){ setSelectedDestType(context, destType){
context.commit('setSelectedDestType', destType); context.commit('setSelectedDestType', destType);
}, },

Loading…
Cancel
Save