From 8554bf10cc8f283403b8bd4f445ab1b5017a7c33 Mon Sep 17 00:00:00 2001 From: Carlo Venusino Date: Wed, 26 Feb 2020 18:07:51 +0100 Subject: [PATCH] TT#75404 CF: As a Customer, I want to add phone numbers in order to forward calls to these numbers Change-Id: Ibc557c446156c55db229043c18b345066c32a867 --- src/components/CscPage.vue | 8 +- .../NewCallForward/CscCallForwardGroup.vue | 187 ++++++++++++++++++ .../NewCallForward/CscNewCallForward.vue | 155 ++++++++------- .../CscNewCallForwardAddDestinationForm.vue | 18 +- .../CscNewCallForwardDestination.vue | 122 ++++++------ .../NewCallForward/CscNewCallForwardInput.vue | 10 +- src/filters/number.js | 8 +- src/locales/en.json | 5 +- src/store/new-call-forward.js | 130 ++++++++---- src/themes/app.common.styl | 8 + 10 files changed, 457 insertions(+), 194 deletions(-) create mode 100644 src/components/pages/NewCallForward/CscCallForwardGroup.vue diff --git a/src/components/CscPage.vue b/src/components/CscPage.vue index 919d7fca..d696f2d8 100644 --- a/src/components/CscPage.vue +++ b/src/components/CscPage.vue @@ -64,15 +64,11 @@ diff --git a/src/components/pages/NewCallForward/CscCallForwardGroup.vue b/src/components/pages/NewCallForward/CscCallForwardGroup.vue new file mode 100644 index 00000000..0ab1af8b --- /dev/null +++ b/src/components/pages/NewCallForward/CscCallForwardGroup.vue @@ -0,0 +1,187 @@ + + + + + + diff --git a/src/components/pages/NewCallForward/CscNewCallForward.vue b/src/components/pages/NewCallForward/CscNewCallForward.vue index d7a35e11..81aea50b 100644 --- a/src/components/pages/NewCallForward/CscNewCallForward.vue +++ b/src/components/pages/NewCallForward/CscNewCallForward.vue @@ -3,113 +3,103 @@ class="csc-simple-page" >
- {{toggleLabel}} + {{ toggleLabel }}
- {{subscriberDisplayName}} + {{ primaryNumber | number }}
- - - -
+ >
-
+
- - + {{ $t('pages.newCallForward.forwardBtnLabel') }} - - - - - - - - - - - + + {{ $t('pages.newCallForward.forwardBtnLabel') }} + + +
+
-
- -
+
-
+ +
- -
+ @@ -162,4 +166,13 @@ margin-top 25px .csc-cf-field-toggle margin-top 0px; + .csc-call-spinner + margin-left auto + .csc-cf-self-number-cont + padding-left 30px + width 150px + white-space nowrap + overflow hidden + text-overflow ellipsis + diff --git a/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue b/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue index 71827673..af8f9e94 100644 --- a/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue +++ b/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue @@ -96,8 +96,8 @@ }, methods: { async save() { - const destinationSetName = 'csc-unconditional'; // gonna be dynamic - const getDestinationSetByName = await this.$store.dispatch('newCallForward/getDestinationSetByName', destinationSetName); + const forwardGroupName = 'unconditional'; // gonna be dynamic + const forwardGroup = await this.$store.dispatch('newCallForward/getForwardGroupByName', forwardGroupName); if (this.numberError || this.saveDisabled) { showGlobalError(this.$t('validationErrors.generic')); @@ -105,22 +105,22 @@ else if(Number.isInteger(this.destinationIndex)){ // edit mode this.$store.dispatch('newCallForward/editDestination',{ index: this.destinationIndex, - destinationSetId: getDestinationSetByName.id, + forwardGroupId: forwardGroup.id, destination: this.number }); } else { // new destination - let destinationSetId; - if(!getDestinationSetByName){ - destinationSetId = await this.$store.dispatch('newCallForward/addDestinationSet', destinationSetName); - await this.$store.dispatch('newCallForward/loadDestinationsets'); // keeps local data updated + let forwardGroupId; + if(!forwardGroup){ + forwardGroupId = await this.$store.dispatch('newCallForward/addForwardGroup', forwardGroupName); + await this.$store.dispatch('newCallForward/loadForwardGroups'); // keeps local data updated } else{ - destinationSetId = getDestinationSetByName.id; + forwardGroupId = forwardGroup.id; } this.$store.dispatch('newCallForward/addDestination', { - destinationSetId: destinationSetId, + forwardGroupId: forwardGroupId, destination: this.number }); } diff --git a/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue b/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue index b6552870..7ef59796 100644 --- a/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue +++ b/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue @@ -1,55 +1,60 @@ @@ -122,15 +114,23 @@ diff --git a/src/components/pages/NewCallForward/CscNewCallForwardInput.vue b/src/components/pages/NewCallForward/CscNewCallForwardInput.vue index ff72e173..0b8f7c22 100644 --- a/src/components/pages/NewCallForward/CscNewCallForwardInput.vue +++ b/src/components/pages/NewCallForward/CscNewCallForwardInput.vue @@ -26,7 +26,9 @@ QField, QInput } from 'quasar-framework' - import { isPhone } from '../../../helpers/validation' + import { + userInfoAndEmpty + } from '../../../helpers/validation' import { maxLength, required @@ -41,7 +43,7 @@ }, mounted(){ if(this.prefilled){ - this.inputValue = this.prefilled; + this.inputValue = this.prefilled === " " ? "" : this.prefilled; } }, @@ -53,7 +55,7 @@ }, validations: { inputValue: { - isPhone, + userInfoAndEmpty, maxLength: maxLength(64), required } @@ -75,7 +77,7 @@ maxLength: this.$v.inputValue.$params.maxLength.max }); } - else if (!this.$v.inputValue.isPhone) { + else if (!this.$v.inputValue.userInfoAndEmpty) { return this.$t('validationErrors.inputValidNumber'); } }, diff --git a/src/filters/number.js b/src/filters/number.js index 3180c3cd..34ef5ff6 100644 --- a/src/filters/number.js +++ b/src/filters/number.js @@ -1,6 +1,12 @@ export default function(number, extension) { - let constructedNumber = "" + number.cc + number.ac + number.sn; + let constructedNumber = ""; + if(number !== null && number.is_devid && number.is_devid === true) { + constructedNumber = "" + number.devid_alias; + } + else if (number !== null) { + constructedNumber = "" + number.cc + number.ac + number.sn; + } if (extension) { return constructedNumber.replace(new RegExp(extension + '$'), ''); } diff --git a/src/locales/en.json b/src/locales/en.json index a0bbb2fe..0118ae71 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -216,7 +216,10 @@ "numberLabel": "Number", "voiceMailLabel": "Voicemail", "destinationTimeoutLabel": "Then after ", - "destinationNumberLabel": "seconds forwarded to" + "destinationNumberLabel": "seconds forwarded to", + "destinationLabel": "Destination", + "addDestinationLabel": "Add destination", + "allCallsForwardedTo": "All calls forwarded to" }, "callForward": { "titles": { diff --git a/src/store/new-call-forward.js b/src/store/new-call-forward.js index 33ff502a..8bc573ba 100644 --- a/src/store/new-call-forward.js +++ b/src/store/new-call-forward.js @@ -4,6 +4,7 @@ import Vue from 'vue' // import _ from 'lodash'; // import { RequestState } from './common' // import { i18n } from '../i18n'; + import { // getSourcesets, getDestinationsets, @@ -31,111 +32,156 @@ import { // updateOwnPhoneTimeout } from '../api/call-forward'; +const ForwardGroup = { + unconditional: 'unconditional' +}; + export default { namespaced: true, state: { - destinationsets:[], - destinations: [], + forwardGroups: [] }, getters: { + primaryNumber(state, getters, rootState, rootGetters) { + let subscriber = rootGetters['user/getSubscriber']; + + if(subscriber !== null) { + return subscriber.primary_number; + } + else { + return null; + } + }, subscriberDisplayName(state, getters, rootState, rootGetters) { return rootGetters['user/getUsername']; }, - destinations(state) { - return state.destinations; - }, - destinationsets(state){ - return state.destinationsets; + // destinations(state) { + // return state.destinations; + // }, + forwardGroups(state){ + return state.forwardGroups; } }, mutations: { - addDestination(state, destination){ - state.destinations.push(destination); + addDestination(state, forwardGroupId, destination){ + let group = state.forwardGroups.find((group)=>{ + return group.id === forwardGroupId; + }); + group.destinations.push(destination); }, editDestination(state, data){ - let destination = state.destinations.slice(data.index, data.index+1)[0]; + let group = state.forwardGroups.find((group)=>{ + return group.id === data.forwardGroupId; + }); + let destination = group.destinations.slice(data.index, data.index+1)[0]; destination.simple_destination = data.destination; destination.destination = data.destination; - Vue.set(state.destinations, data.index, destination) + Vue.set(group.destinations, data.index, destination) }, editTimeout(state, data){ - let destination = state.destinations.slice(data.index, data.index+1)[0]; + let group = state.forwardGroups.find((group)=>{ + return group.id === data.forwardGroupId; + }); + let destination = group.destinations.slice(data.index, data.index+1)[0]; destination.timeout = data.timeout; - Vue.set(state.destinations, data.index, destination) + Vue.set(group.destinations, data.index, destination) }, - loadDestinationsets(state, destinationsets){ - state.destinationsets = destinationsets; + // loadDestinationsets(state, destinationsets){ + // state.destinationsets = destinationsets; + // }, + loadForwardGroups(state, forwardGroups){ + state.forwardGroups = forwardGroups; }, - loadDestinations(state, destinations){ - state.destinations = destinations; - } + // loadDestinations(state, destinations){ + // state.destinations = destinations; + // }, }, actions: { - async loadDestinationsets(context) { + async loadForwardGroups(context) { try{ - const destinationsets = await getDestinationsets(localStorage.getItem('subscriberId')); - context.commit('loadDestinationsets', destinationsets); + const forwardGroups = await getDestinationsets(localStorage.getItem('subscriberId')); + context.commit('loadForwardGroups', forwardGroups); } catch(err){ console.log(err) } }, - loadDestinations(context, destinations){ - context.commit('loadDestinations', destinations); - }, - async addDestinationSet(context, name) { + // loadDestinations(context, destinations){ + // context.commit('loadDestinations', destinations); + // }, + async addForwardGroup(context, name) { try{ - const newDestinationset = await addNewDestinationsetWithName(name); - return newDestinationset; + const destination = { + "announcement_id": null, + "simple_destination": " ", + "destination": " ", + "priority": 1, + "timeout": 20 + }; + const newForwardGroupId = await addNewDestinationsetWithName(ForwardGroup[name]); + await addDestinationToDestinationset({ + id: newForwardGroupId, + data: [destination] + }); + return newForwardGroupId; } catch(err){ console.log(err) } }, - getDestinationSetByName(context, name){ - let destinationsets = context.getters.destinationsets; - destinationsets = destinationsets.filter(($destinationset) => { - return $destinationset.name === name; + getForwardGroupByName(context, name){ + let forwardGroups = context.getters.forwardGroups; + forwardGroups = forwardGroups.filter(($forwardGroup) => { + return $forwardGroup.name === name; }); - return destinationsets.length > 0 ? destinationsets[0] : null; + return forwardGroups.length > 0 ? forwardGroups[0] : null; }, async addDestination(context, data){ try{ + let group = context.state.forwardGroups.find((group)=>{ + return group.id === data.forwardGroupId; + }); const destination = { "announcement_id": null, "simple_destination": data.destination, "destination": data.destination, "priority": 1, - "timeout": 10 + "timeout": 20 }; await addDestinationToDestinationset({ - id: data.destinationSetId, - data: [...context.state.destinations, destination] + id: data.forwardGroupId, + data: [...group.destinations, destination] }); - context.commit('addDestination', destination); + // context.commit('addDestination', group.id, destination); } catch(err){ console.log(err); } }, async editDestination(context, data){ - let destination = context.state.destinations.slice(data.index, data.index+1)[0]; + let group = context.state.forwardGroups.find((group)=>{ + return group.id === data.forwardGroupId; + }); + let destination = group.destinations.slice(data.index, data.index+1)[0]; destination.simple_destination = data.destination; destination.destination = data.destination; context.commit('editDestination', data); await addDestinationToDestinationset({ - id: data.destinationSetId, - data: context.state.destinations + id: data.forwardGroupId, + data: group.destinations }); }, async editTimeout(context, data){ - let destination = context.state.destinations.slice(data.index, data.index+1)[0]; + let group = context.state.forwardGroups.find((group)=>{ + return group.id === data.forwardGroupId; + }); + let destination = group.destinations.slice(data.index, data.index+1)[0]; destination.timeout = data.timeout; context.commit('editTimeout', data); await addDestinationToDestinationset({ - id: data.destinationSetId, - data: context.state.destinations + id: group.id, + data: group.destinations }); } } diff --git a/src/themes/app.common.styl b/src/themes/app.common.styl index 218fadad..4fd6b36a 100644 --- a/src/themes/app.common.styl +++ b/src/themes/app.common.styl @@ -308,3 +308,11 @@ input.q-input-target position relative left 50% !important transform translateX(-50%) + +.csc-text-action + color $primary + cursor pointer + font-weight bold + +.csc-cf-row + margin-bottom $flex-gutter-sm