diff --git a/src/components/pages/NewCallForward/CscCallForwardGroup.vue b/src/components/pages/NewCallForward/CscCallForwardGroup.vue
index c9f98811..2b9e669b 100644
--- a/src/components/pages/NewCallForward/CscCallForwardGroup.vue
+++ b/src/components/pages/NewCallForward/CscCallForwardGroup.vue
@@ -3,16 +3,20 @@
class="csc-cf-group"
v-if="group.destinations.length > 0"
>
-
- <!-- <csc-object-spinner
- /> -->
<div
- v-if="group.id !== 'unconditional'"
- class="csc-cf-group-title"
+ class="row csc-cf-destination-cont"
>
- {{ group.title }}
+ <div class="col col-xs-12 col-md-4 text-right csc-cf-group-title">
+ {{ groupTitle }}
+ </div>
+ <div class="col text-left col-xs-12 col-md-2 csc-cf-dest-number-cont">
+ <q-toggle
+ v-model="isEnabled"
+ @change="toggleGroupChange"
+ />
+ </div>
+ <div class="col col-xs-12 col-md-5 "></div>
</div>
-
<div
v-for="(destination, index) in group.destinations"
:key="genKey()"
@@ -23,6 +27,8 @@
:groupId="group.id"
:groupName="group.name"
:allCallsFwd="group.name == 'csc-unconditional' && index === 0"
+ :class="{ 'cf-destination-disabled': !isEnabled }"
+
/>
</div>
<div
@@ -32,16 +38,17 @@
<div
class="col col-xs-12 col-md-2 text-left"
v-if="showAddDestBtn"
+ :class="{ 'cf-destination-disabled': !isEnabled }"
>
<div
class='csc-cf-destination-add-destination'
- @click="addDestination"
>
<q-icon
name="add"
color="primary"
size="24px"
/>
+
{{ $t('pages.newCallForward.addDestinationLabel') }}
<q-spinner-dots
@@ -52,6 +59,28 @@
/>
</div>
+ <q-popover
+ ref="destTypeForm"
+ anchor="top right"
+ @open="showDestTypeForm()"
+ @close="showNumberFormPopover()"
+ >
+ <csc-new-call-forward-destination-type-form
+ ref="selectDestinationType"
+ />
+ </q-popover>
+ <q-popover
+ ref="numberForm"
+ anchor="top right"
+ class="csc-cf-number-form"
+ v-bind:class="{ 'csc-cf-popover-hide': toggleNumberForm }"
+ @open="showNewDestNumber()"
+ >
+ <csc-new-call-forward-add-destination-form
+ ref="addDestinationForm"
+ :groupName="this.group.name"
+ />
+ </q-popover>
</div>
<div class="col col-xs-12 col-md-6 "></div>
</div>
@@ -64,6 +93,7 @@
} from 'vuex'
import {
QSpinnerDots,
+ QToggle,
QIcon,
QPopover,
QList,
@@ -73,7 +103,8 @@
} from 'quasar-framework'
import CscObjectSpinner from "../../CscObjectSpinner";
import CscNewCallForwardDestination from './CscNewCallForwardDestination'
-
+ import CscNewCallForwardAddDestinationForm from './CscNewCallForwardAddDestinationForm'
+ import CscNewCallForwardDestinationTypeForm from './CscNewCallForwardDestinationTypeForm'
export default {
name: 'csc-cf-group',
props: [
@@ -81,6 +112,7 @@
],
components: {
QSpinnerDots,
+ QToggle,
QIcon,
QPopover,
QList,
@@ -88,16 +120,33 @@
QItemMain,
QItemSide,
CscObjectSpinner,
- CscNewCallForwardDestination
+ CscNewCallForwardDestination,
+ CscNewCallForwardAddDestinationForm,
+ CscNewCallForwardDestinationTypeForm
},
data () {
return {
- destinationInCreation: false
+ toggleGroup: true,
+ isEnabled: true,
+ toggleNumberForm: true
};
},
+ async mounted(){
+ try{
+ if(!this.inCreation){
+ const isGroupEnabled = await this.$store.dispatch('newCallForward/isGroupEnabled', this.group.name);
+ this.isEnabled = isGroupEnabled;
+ }
+
+ }
+ catch(err){
+ console.log(err)
+ }
+ },
computed: {
...mapGetters('newCallForward', [
- 'getOwnPhoneTimeout'
+ 'getOwnPhoneTimeout',
+ 'destinationInCreation'
]),
showAddDestBtn(){
const destinations = this.group.destinations;
@@ -108,6 +157,9 @@
}
return true;
+ },
+ groupTitle(){
+ return ["csc-unconditional", "csc-timeout"].includes(this.group.name) ? `${this.$t('pages.newCallForward.timeoutGroupTitle')}` : "";
}
},
methods: {
@@ -115,25 +167,33 @@
genKey(){
return Math.random();
},
- async addDestination(){
- this.destinationInCreation = true;
- await this.$store.dispatch('newCallForward/addDestination', {
- forwardGroupId: this.group.id,
- destination: " "
- });
- await this.$store.dispatch('newCallForward/loadForwardGroups');
- this.destinationInCreation = false;
-
+ showNewDestNumber(){
+ this.$refs.addDestinationForm.add();
+ },
+ showNumberFormPopover(){
+ this.toggleNumberForm = false;
+ this.$refs.numberForm.open();
+ },
+ showDestTypeForm(){
+ this.toggleNumberForm = true;
+ this.$refs.selectDestinationType.add();
},
getDestination(index){
let destination = {...this.group.destinations[index]}
if(index === 0){
- destination.timeout = this.getOwnPhoneTimeout;
+ destination.timeout = !isNaN(this.getOwnPhoneTimeout) ? this.getOwnPhoneTimeout : 5;
}
else {
destination.timeout = this.group.destinations[index-1].timeout;
}
return destination;
+ },
+ toggleGroupChange(){
+ this.$store.dispatch('newCallForward/enableGroup', {
+ groupName: this.group.name,
+ id: this.group.id,
+ enabled: this.isEnabled
+ });
}
}
}
@@ -143,6 +203,10 @@
@import '../../../themes/app.common.styl'
.csc-cf-group
width 100%
+ .csc-cf-group-cont
+ position relative
+ .csc-cf-group-title
+ font-weight bold
.csc-cf-group-title
text-align right
.csc-cf-destination-label
@@ -157,4 +221,16 @@
text-overflow ellipsis
color $primary
cursor pointer
+ .cf-destination-disabled
+ color $cf-disabled-label
+ .csc-cf-timeout,
+ .csc-cf-destination
+ color $cf-disabled-link
+ .csc-cf-destination-actions
+ .q-icon
+ color $cf-disabled-btn !important
+ .csc-cf-destination-add-destination
+ color $cf-disabled-link
+ .q-icon
+ color $cf-disabled-link !important
</style>
diff --git a/src/components/pages/NewCallForward/CscNewCallForward.vue b/src/components/pages/NewCallForward/CscNewCallForward.vue
index 3db2a0e9..d74cb7d0 100644
--- a/src/components/pages/NewCallForward/CscNewCallForward.vue
+++ b/src/components/pages/NewCallForward/CscNewCallForward.vue
@@ -21,18 +21,15 @@
>
<q-toggle
- v-if="showSwitcher"
+ v-if="forwardGroups.length > 0"
v-model="toggleDefaultNumber"
@change="toggleChange" />
-
</div>
</div>
<div class="csc-cf-row row">
<div
class="column col col-xs-12 col-md-4 items-end"
>
-
-
<div
class="csc-text-action"
>
@@ -75,7 +72,6 @@
:group="forwardGroup"
/>
</div>
-
<div class="csc-cf-row row">
<div
class="column col col-xs-12 col-md-4"
@@ -156,8 +152,7 @@
...mapGetters('newCallForward', [
'primaryNumber',
'subscriberDisplayName',
- 'forwardGroups',
- 'showSwitcher'
+ 'forwardGroups'
]),
primaryNumberEnabled(){
return true;
@@ -172,21 +167,22 @@
if(this.toggleDefaultNumber){
const timeoutFwdGroup = await this.$store.dispatch('newCallForward/getForwardGroupByName', 'timeout');
if(!timeoutFwdGroup){
- await this.$store.dispatch('newCallForward/addForwardGroup', 'timeout');
- await this.$store.dispatch('newCallForward/loadForwardGroups');
+ //await this.$store.dispatch('newCallForward/addForwardGroup', 'timeout');
+ await this.$store.dispatch('newCallForward/addTempDestination','timeout' );
+ //await this.$store.dispatch('newCallForward/loadForwardGroups');
}
}
else{
const unconditionalFwdGroup = await this.$store.dispatch('newCallForward/getForwardGroupByName', 'unconditional');
if(!unconditionalFwdGroup){
- await this.$store.dispatch('newCallForward/addForwardGroup', 'unconditional');
- await this.$store.dispatch('newCallForward/loadForwardGroups');
+ //await this.$store.dispatch('newCallForward/addForwardGroup', 'unconditional');
+ await this.$store.dispatch('newCallForward/addTempDestination','unconditional' );
+ //await this.$store.dispatch('newCallForward/loadForwardGroups');
}
}
this.groupInCreation = false;
},
- togglePrimaryNumber(){},
showForm(){
this.$refs.destinationType.close();
this.$refs.addDestinationForm.add();
diff --git a/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue b/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue
index 4d6d5b9d..b30a0a24 100644
--- a/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue
+++ b/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue
@@ -42,6 +42,9 @@
</template>
<script>
+ import {
+ mapGetters,
+ } from 'vuex'
import CscNewCallForwardInput from './CscNewCallForwardInput'
import CscSpinner from '../../CscSpinner'
import {
@@ -91,6 +94,9 @@
}
},
computed: {
+ ...mapGetters('newCallForward', [
+ 'destinationInCreation'
+ ]),
saveDisabled() {
return this.numberError|| this.disable || this.loading;
}
@@ -99,33 +105,34 @@
async save() {
const forwardGroupName = this.groupName;
const forwardGroup = await this.$store.dispatch('newCallForward/getForwardGroupByName', forwardGroupName);
-
if (this.numberError || this.saveDisabled) {
showGlobalError(this.$t('validationErrors.generic'));
}
- else if(Number.isInteger(this.destinationIndex)){ // edit mode
- this.$store.dispatch('newCallForward/editDestination',{
+ else if(Number.isInteger(this.destinationIndex) && Number.isInteger(forwardGroup.id)){ // edit mode
+ await this.$store.dispatch('newCallForward/editDestination',{
index: this.destinationIndex,
forwardGroupId: forwardGroup.id,
destination: this.number
});
}
else { // new destination
- let forwardGroupId;
- if(!forwardGroup){
- forwardGroupId = await this.$store.dispatch('newCallForward/addForwardGroup', forwardGroupName);
- await this.$store.dispatch('newCallForward/loadForwardGroups'); // keeps local data updated
+ if(forwardGroup.id.toString().includes('temp-')){ // unexisting group
+ forwardGroup.destinations[0].simple_destination = this.number; // optimistic UI update :)
+ await this.$store.dispatch('newCallForward/addForwardGroup', {
+ name: forwardGroupName,
+ destination: this.number
+ });
}
- else{
- forwardGroupId = forwardGroup.id;
+ else{ // existing group
+ await this.$store.dispatch('newCallForward/setDestinationInCreation', true);
+ await this.$store.dispatch('newCallForward/addDestination', {
+ forwardGroupId: forwardGroup.id,
+ destination: this.number
+ });
}
-
- this.$store.dispatch('newCallForward/addDestination', {
- forwardGroupId: forwardGroupId,
- destination: this.number
- });
+ await this.$store.dispatch('newCallForward/loadForwardGroups');
+ await this.$store.dispatch('newCallForward/setDestinationInCreation', false);
}
-
},
cancel() {
this.number = '';
diff --git a/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue b/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue
index 085aab49..069d1e5a 100644
--- a/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue
+++ b/src/components/pages/NewCallForward/CscNewCallForwardDestination.vue
@@ -50,7 +50,6 @@
anchor="top right"
class="csc-cf-number-form"
v-bind:class="{ 'csc-cf-popover-hide': toggleNumberForm }"
- v-if=""
@open="showNumberForm()"
>
<csc-new-call-forward-add-destination-form
@@ -148,7 +147,11 @@
},
methods: {
updateValues(destination){
- this.destinationTimeout = this.index === 0 && this.groupName === 'csc-timeout' ? this.getOwnPhoneTimeout : destination.timeout;
+ this.destinationTimeout = this.index === 0
+ && this.groupName === 'csc-timeout'
+ && isNaN(this.getOwnPhoneTimeout) === false
+ ? this.getOwnPhoneTimeout
+ : destination.timeout;
this.destinationNumber = destination.simple_destination;
this.destinationIndex = this.index;
},
diff --git a/src/locales/en.json b/src/locales/en.json
index 48e42543..77075bed 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -223,6 +223,7 @@
"allCallsForwardedTo": "All calls forwarded to",
"cancelDialogTitle": "Delete from {groupName} forwarding",
"cancelDialogText": "You are about to delete {destination} from {groupName} call forwarding",
+ "timeoutGroupTitle" : "",
"uncoditionalLabel": "Unconditional"
},
"callForward": {
diff --git a/src/store/new-call-forward.js b/src/store/new-call-forward.js
index 2fc8bb7b..700655d0 100644
--- a/src/store/new-call-forward.js
+++ b/src/store/new-call-forward.js
@@ -26,7 +26,7 @@ export default {
state: {
mappings: [],
forwardGroups: [],
- showSwitcher: true
+ destinationInCreation: false
},
getters: {
primaryNumber(state, getters, rootState, rootGetters) {
@@ -48,8 +48,11 @@ export default {
getOwnPhoneTimeout(state){
return parseInt(state.mappings.cft_ringtimeout);
},
- showSwitcher(state){
- return state.showSwitcher;
+ tempDestinations(state){
+ return state.tempDestinations;
+ },
+ destinationInCreation(state){
+ return state.destinationInCreation;
}
},
mutations: {
@@ -82,15 +85,8 @@ export default {
loadForwardGroups(state, forwardGroups){
state.forwardGroups = forwardGroups;
},
- setShowSwitcher(state){
- const forwardGroups = state.forwardGroups;
- const timeoutGroup = forwardGroups.find(($forwardGroup) => {
- return $forwardGroup.name === 'csc-timeout';
- });
- const unconditionalGroup = forwardGroups.find(($forwardGroup) => {
- return $forwardGroup.name === 'csc-unconditional';
- });
- state.showSwitcher = (timeoutGroup && timeoutGroup.destinations.length > 0) || (unconditionalGroup && unconditionalGroup.destinations.length > 0);
+ setDestinationInCreation(state, isInCreation){
+ state.destinationInCreation = isInCreation;
}
},
actions: {
@@ -107,7 +103,6 @@ export default {
try{
const forwardGroups = await getDestinationsets(localStorage.getItem('subscriberId'));
context.commit('loadForwardGroups', forwardGroups);
- context.commit('setShowSwitcher');
return forwardGroups;
}
catch(err){
@@ -117,7 +112,7 @@ export default {
async editMapping(context, data){
try{
const subscriberId = localStorage.getItem('subscriberId');
- const groupMappingId = ForwardGroup[data.name].mapping;
+ const groupMappingId = ForwardGroup[data.name] ? ForwardGroup[data.name].mapping : await context.dispatch('getMappingIdByGroupName', data.name);
const allMappings = await getMappings(subscriberId);
let groupMappings = allMappings[groupMappingId];
@@ -140,19 +135,32 @@ export default {
}
},
- async addForwardGroup(context, name) {
+ createEmptyForwardGroup(context, groupName){
+ const destination = {
+ "announcement_id": null,
+ "simple_destination": " ",
+ "destination": " ",
+ "priority": 1,
+ "timeout": 5
+ };
+ context.state.tempForwardGroups.push({
+ name: groupName,
+ destinations:[destination]
+ });
+ },
+ async addForwardGroup(context, data) {
try{
- const newForwardGroupId = await addNewDestinationsetWithName(ForwardGroup[name].name);
+ const newForwardGroupId = await addNewDestinationsetWithName(ForwardGroup[data.name] ? ForwardGroup[data.name].name : data.name);
const destination = {
"announcement_id": null,
- "simple_destination": " ",
- "destination": " ",
+ "simple_destination": data.destination || " ",
+ "destination": data.destination || " ",
"priority": 1,
"timeout": 5
};
await context.dispatch('editMapping', {
- name: name,
+ name: data.name,
groupId: newForwardGroupId
});
@@ -163,7 +171,7 @@ export default {
// setting cft_ringtimeout in case it is
// not set while creating timeout group
- if(name === 'timeout' && !context.getters.getOwnPhoneTimeout){
+ if((data.name === 'timeout' || data.name === 'csc-timeout') && (!context.getters.getOwnPhoneTimeout || isNaN(context.getters.getOwnPhoneTimeout))){
await context.dispatch('editRingTimeout', 5);
}
@@ -196,10 +204,23 @@ export default {
});
return forwardGroups.length > 0 ? forwardGroups[0] : null;
},
+ addTempDestination(context, groupName){
+ context.state.forwardGroups.push({
+ id: "temp-" + ForwardGroup[groupName].name,
+ name: ForwardGroup[groupName].name,
+ destinations: [{
+ "announcement_id": null,
+ "simple_destination": " ",
+ "destination": " ",
+ "priority": 1,
+ "timeout": 5
+ }]
+ });
+ },
async addDestination(context, data){
try{
let group = context.state.forwardGroups.find((group)=>{
- return group.id === data.forwardGroupId;
+ return group.id === data.forwardGroupId || group.id.toString() === data.forwardGroupId;
});
const destination = {
"announcement_id": null,
@@ -312,13 +333,17 @@ export default {
let timeoutGroup = await context.dispatch('getForwardGroupByName', 'timeout');
if(!unconditionalGroup){
- await context.dispatch('addForwardGroup', 'unconditional');
+ await context.dispatch('addForwardGroup', {
+ name: 'unconditional'
+ });
await context.dispatch('loadMappings');
await context.dispatch('loadForwardGroups');
unconditionalGroup = await context.dispatch('getForwardGroupByName', 'unconditional');
}
if(!timeoutGroup){
- await context.dispatch('addForwardGroup', 'timeout');
+ await context.dispatch('addForwardGroup', {
+ name: 'timeout'
+ });
await context.dispatch('loadMappings');
await context.dispatch('loadForwardGroups');
timeoutGroup = await context.dispatch('getForwardGroupByName', 'timeout');
@@ -346,6 +371,48 @@ export default {
catch(err){
console.log(err)
}
+ },
+ getMappingIdByGroupName(context, groupName){
+ let mappingId;
+ for(let key in ForwardGroup){
+ if(ForwardGroup[key].name == groupName){
+ mappingId = ForwardGroup[key].mapping;
+ break;
+ }
+ }
+ return mappingId;
+ },
+ async isGroupEnabled(context, groupName){
+ const mappingId = await context.dispatch('getMappingIdByGroupName', groupName);
+ return mappingId
+ && context.state.mappings[mappingId]
+ && context.state.mappings[mappingId][0] // IMPROVE remove hardcoded [0]
+ ? context.state.mappings[mappingId][0].enabled
+ : true;
+ },
+ async enableGroup(context, data){
+ try{
+ if(!data.id.toString().includes('temp-')){
+ const subscriberId = localStorage.getItem('subscriberId');
+ const mappingId = await context.dispatch('getMappingIdByGroupName', data.groupName);
+ let groupMappings = context.state.mappings[mappingId];
+ groupMappings[0].enabled = data.enabled; // IMPROVE remove hardcoded [0]
+
+ await addNewMapping({
+ mappings: groupMappings,
+ group: mappingId,
+ subscriberId: subscriberId
+ });
+ context.dispatch('loadMappings');
+ }
+
+ }
+ catch(err){
+ console.log(err)
+ }
+ },
+ setDestinationInCreation(context, isInCreation){
+ context.commit('setDestinationInCreation', isInCreation);
}
}
};
diff --git a/src/themes/app.variables.styl b/src/themes/app.variables.styl
index 25fdc27f..df4b8002 100644
--- a/src/themes/app.variables.styl
+++ b/src/themes/app.variables.styl
@@ -97,3 +97,7 @@ $chip-color = $dark
$conf-participant-icon-color = rgba(255, 255, 255, 0.6);
$conf-participant-box-color = rgba(21,29,48,0.8);
+
+$cf-disabled-label = lighten($white, -35%);
+$cf-disabled-link = lighten($primary, -35%);
+$cf-disabled-btn = lighten($negative, -35%);