TT#86201 CF: Further requests optimisation

√ 1 - mapping, destinationset, sourceset and timeset GET endopints should be called in parallel (instead of synchronously) when possible
√ 2 - mapping, destinationset, sourceset and timeset PATCH and PUT endpoints should be called with header "return=representation" instead of "return=minimal" to allow consistency between local and persisted data without having to refetch the data every time a change is made

Change-Id: Idec6281c8fd560383e983107e78b48f5094f4dcc

src/api/call-forward.js

@@ -4,7 +4,7 @@ import Vue from 'vue';
 import { i18n } from '../i18n';
 import { getJsonBody } from './utils';
 import { normalizeDestination } from '../filters/number-format';
-import { LIST_ALL_ROWS } from './common';
+import { LIST_ALL_ROWS, patchReplaceFull } from './common';
 
 export function getMappings(id) {
     return new Promise((resolve, reject) => {
@@ -297,34 +297,19 @@ export function deleteDestinationsetById(id) {
 }
 
 export function updateDestinationsetName(options) {
-    return new Promise((resolve, reject) => {
-        let headers = { 'Content-Type': 'application/json-patch+json' };
-        Vue.http.patch('api/cfdestinationsets/' + options.id, [{
-            op: 'replace',
-            path: '/name',
-            value: options.name
-        }], { headers: headers }).then((result) => {
-            resolve(result);
-        }).catch((err) => {
-            reject(err);
-        });
+    return patchReplaceFull({
+        path: 'api/cfdestinationsets/' + options.id,
+        fieldPath: 'name',
+        value: options.name
     });
 }
 
 export function addDestinationToDestinationset(options) {
-    let headers = {
-        'Content-Type': 'application/json-patch+json'
-    };
-    return new Promise((resolve, reject) => {
-        Vue.http.patch('api/cfdestinationsets/' + options.id, [{
-            op: 'replace',
-            path: '/destinations',
-            value: options.data
-        }], { headers: headers }).then((result) => {
-                resolve(result);
-        }).catch((err) => {
-            reject(err);
-        });
+
+    return patchReplaceFull({
+        path: 'api/cfdestinationsets/' + options.id,
+        fieldPath: 'destinations',
+        value: options.data
     });
 }
 
@@ -402,14 +387,22 @@ export function addDestinationToEmptyGroup(options) {
 }
 
 export function addNewMapping(options) {
+    return patchReplaceFull({
+        path: 'api/cfmappings/' + options.subscriberId,
+        fieldPath: options.group,
+        value: options.mappings
+    });
+}
+
+export function addMultipleNewMappings(options) {
     return new Promise((resolve, reject) => {
-        let headers = { 'Content-Type': 'application/json-patch+json' };
-        Vue.http.patch('api/cfmappings/' + options.subscriberId, [{
-            op: 'replace',
-            path: '/' + options.group,
-            value: options.mappings
-        }], { headers: headers }).then((result) => {
-            resolve(result);
+        let headers = {
+            'Content-Type': 'application/json-patch+json',
+            'Prefer': 'return=representation'
+        };
+        Vue.http.patch('api/cfmappings/' + options.subscriberId, options.mappings
+        , { headers: headers }).then((result) => {
+            resolve(getJsonBody(result.body));
         }).catch((err) => {
             reject(err);
         });
@@ -678,19 +671,10 @@ export function resetTimesetByName(options) {
 }
 
 export function addTimeToTimeset(options) {
-    return new Promise((resolve, reject) => {
-        let headers = {
-            'Content-Type': 'application/json-patch+json'
-        };
-        Vue.http.patch('api/cftimesets/' + options.id, [{
-            op: 'replace',
-            path: '/times',
-            value: options.times
-        }], { headers: headers }).then(() => {
-            resolve();
-        }).catch((err) => {
-            reject(err);
-        });
+    return patchReplaceFull({
+        path: 'api/cftimesets/' + options.id,
+        fieldPath: 'times',
+        value: options.times
     });
 }
 
@@ -976,18 +960,9 @@ export function getOwnPhoneTimeout(id) {
 }
 
 export function updateOwnPhoneTimeout(options) {
-    return new Promise((resolve, reject)=>{
-        let headers = {
-            'Content-Type': 'application/json-patch+json'
-        };
-        Vue.http.patch('api/cfmappings/' + options.subscriberId, [{
-            op: 'replace',
-            path: '/cft_ringtimeout',
-            value: options.timeout
-        }], { headers: headers }).then(() => {
-            resolve();
-        }).catch((err) => {
-            reject(err);
-        });
+    return patchReplaceFull({
+        path: 'api/cfmappings/' + options.subscriberId,
+        fieldPath: 'cft_ringtimeout',
+        value: options.timeout
     });
 }

src/components/pages/NewCallForward/CscCallForwardGroup.vue

@@ -310,8 +310,8 @@
                     const isGroupEnabled =  await this.$store.dispatch('newCallForward/isGroupEnabled', {groupName: this.group.name, id: this.group.id});
                     this.isEnabled = isGroupEnabled;
                 }
-                await this.updateSourcesetNames();
-                await this.updateTimeSetNames();
+                this.updateSourcesetNames();
+                this.updateTimeSetNames();
             }
             catch(err){
                 console.log(err)
@@ -391,7 +391,7 @@
                 },
                  set(value) {
                      if(value !== ""){
-                         this.addTimeset(value);
+                         this.addTimeToExistingTimeset(value);
                      }
                      else{
                          this.showConfirmDeleteTimesetDialog()
@@ -432,10 +432,10 @@
                         this.$refs.numberForm.open();
                     break;
                     case 'voicemail':
-                        await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
+                        this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
                         await this.$store.dispatch('newCallForward/addVoiceMail', this.group.id);
-                        await this.$store.dispatch('newCallForward/loadForwardGroups');
-                        await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
+                        this.$store.dispatch('newCallForward/loadForwardGroups');
+                        this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
                     break;
                 }
             },
@@ -482,13 +482,13 @@
                 return destination;
             },
             async toggleGroupChange(){
-                await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
+                this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
                 await this.$store.dispatch('newCallForward/enableGroup', {
                     groupName: this.group.name,
                     id: this.group.id,
                     enabled: this.isEnabled
                 });
-                await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
+                this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
             },
             showConditions(){
                 this.$refs.addCondition.add();
@@ -547,10 +547,10 @@
             },
             async confirmDeleteGroup(){
                 try{
-                    await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
+                    this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
                     await this.$store.dispatch('newCallForward/deleteForwardGroup', this.group);
-                    await this.$store.dispatch('newCallForward/loadForwardGroups');
-                    await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
+                    this.$store.dispatch('newCallForward/loadForwardGroups');
+                    this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
                 }
                 catch(e){
                     console.log(e)
@@ -565,31 +565,31 @@
             },
             async deleteTimeset(){
                 try{
-                    await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
+                    this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
                     await this.$store.dispatch('newCallForward/deleteTimesFromTimeset', this.timeSet.id);
                     await this.$store.dispatch('newCallForward/loadTimesets');
-                    await this.$store.dispatch('newCallForward/loadMappings');
-                    await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
+                    this.$store.dispatch('newCallForward/loadMappings');
+                    this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
                 }
                 catch(e){
                     console.log(e)
                 }
             },
-            async addTimeset(time){
+            async addTimeToExistingTimeset(time){
                 try{
-                    await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
+                    this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
                     this.day = {
                         "year": date.formatDate(time, 'YYYY'),
                         "month": date.formatDate(time, 'M'),
                         "mday": date.formatDate(time, 'D')
                     }
-                    await this.$store.dispatch('newCallForward/addTimeToTimeset', {
+
+                    const updatedTimeset = await this.$store.dispatch('newCallForward/addTimeToTimeset', {
                         id: this.timeSet.id,
                         time: this.day
                     });
-                    await this.$store.dispatch('newCallForward/loadTimesets');
-                    await this.$store.dispatch('newCallForward/loadMappings');
-                    await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
+                    this.$store.dispatch('newCallForward/editTimes', updatedTimeset);
+                    this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
                 }
                 catch(e){
                     console.log(e)

src/components/pages/NewCallForward/CscNewCallForward.vue

@@ -144,18 +144,13 @@
         },
         async mounted(){
             this.groupsLoading = true;
-            try{
-                await this.$store.dispatch('newCallForward/loadMappings');
-                await this.$store.dispatch('newCallForward/loadSourcesets');
-                await this.$store.dispatch('newCallForward/loadTimesets');
-                await this.$store.dispatch('newCallForward/loadForwardGroups');
-                let unconditionalGroups = await this.$store.dispatch('newCallForward/getForwardGroupByName', 'unconditional');
-                this.toggleDefaultNumber = !unconditionalGroups;
-            }
-            catch(err){
-                console.log(err)
-            }
-
+            this.$store.dispatch('newCallForward/loadMappings');
+            // here we need to wait for the groups to be available in client
+            await this.$store.dispatch('newCallForward/loadForwardGroups');
+            const unconditionalGroups = await this.$store.dispatch('newCallForward/getForwardGroupByName', 'unconditional');
+            this.toggleDefaultNumber = !unconditionalGroups;
+            this.$store.dispatch('newCallForward/loadSourcesets');
+            this.$store.dispatch('newCallForward/loadTimesets');
             this.groupsLoading = false;
 
         },
@@ -186,13 +181,13 @@
                             if(this.toggleDefaultNumber){
                                 const tempTimeoutFwdGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', 'temp-csc-timeout');
                                 if(!tempTimeoutFwdGroup){
-                                    await this.$store.dispatch('newCallForward/addTempGroup','timeout' );
+                                    this.$store.dispatch('newCallForward/addTempGroup','timeout' );
                                 }
                             }
                             else{
                                 const tempUnconditionalFwdGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', 'temp-csc-unconditional');
                                 if(!tempUnconditionalFwdGroup){
-                                    await this.$store.dispatch('newCallForward/addTempGroup','unconditional' );
+                                    this.$store.dispatch('newCallForward/addTempGroup','unconditional' );
                                 }
                             }
                         }
@@ -201,23 +196,23 @@
                             if(this.toggleDefaultNumber){
                                 const tempTimeoutFwdGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', 'temp-csc-timeout-from');
                                 if(!tempTimeoutFwdGroup){
-                                    await this.$store.dispatch('newCallForward/addTempGroup','timeoutFrom' );
+                                    this.$store.dispatch('newCallForward/addTempGroup','timeoutFrom' );
                                 }
                             }
                             else{
                                 const tempUnconditionalFwdGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', 'temp-csc-unconditional-from');
                                 if(!tempUnconditionalFwdGroup){
-                                    await this.$store.dispatch('newCallForward/addTempGroup','unconditionalFrom' );
+                                    this.$store.dispatch('newCallForward/addTempGroup','unconditionalFrom' );
                                 }
                             }
                         }
                         break;
                         case "offline":{
-                            await this.$store.dispatch('newCallForward/addTempGroup','offline' );
+                            this.$store.dispatch('newCallForward/addTempGroup','offline' );
                         }
                         break;
                         case "busy":{
-                            await this.$store.dispatch('newCallForward/addTempGroup','busy' );
+                            this.$store.dispatch('newCallForward/addTempGroup','busy' );
                         }
                         break;
                     }
@@ -228,13 +223,13 @@
                 this.$refs.destinationType.close();
                 this.$refs.addDestinationForm.add();
             },
-            async toggleChange(){
+            toggleChange(){
                 this.groupInCreation = true;
-                await this.$store.dispatch('newCallForward/forwardAllCalls', !this.toggleDefaultNumber);
+                this.$store.dispatch('newCallForward/forwardAllCalls', !this.toggleDefaultNumber);
                 this.groupInCreation = false;
             },
-            async resetSelectFwdGroup(){
-                await this.$store.dispatch('newCallForward/setSelectedDestType', null);
+            resetSelectFwdGroup(){
+                this.$store.dispatch('newCallForward/setSelectedDestType', null);
             }
         }
     }

src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue

@@ -102,7 +102,7 @@
                 const forwardGroupId = this.groupId;
                 const forwardGroupName = this.groupName;
                 const forwardGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', forwardGroupId);
-                await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
+                this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
                 if (this.numberError || this.saveDisabled) {
                     showGlobalError(this.$t('validationErrors.generic'));
                 }
@@ -113,7 +113,7 @@
                         destination: this.number
                     });
                 }
-                else { // new group
+                else {
                     if(forwardGroup.id.toString().includes('temp-')){ // unexisting group
                         forwardGroup.destinations[0].simple_destination = this.number; // optimistic UI update :)
                         const newGroupId = await this.$store.dispatch('newCallForward/addForwardGroup', {
@@ -126,18 +126,17 @@
                         if(this.destinationIndex === 0 && this.firstDestinationInCreation){
                             await this.$store.dispatch('newCallForward/setFirstDestinationInCreation', newGroupId);
                         }
-
                     }
                     else{ // existing group
-
                         await this.$store.dispatch('newCallForward/addDestination', {
                             forwardGroupId: forwardGroup.id,
                             destination: this.number
                         });
+                        await this.$store.dispatch('newCallForward/loadForwardGroups');
                     }
-                    await this.$store.dispatch('newCallForward/loadForwardGroups');
+
                 }
-                await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
+                this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
             },
             cancel() {
                 this.number = '';

src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue

@@ -114,7 +114,7 @@
                     return;
                 }
                 try{
-                    await this.$store.dispatch('newCallForward/addGroupLoader', forwardGroupId);
+                    this.$store.dispatch('newCallForward/addGroupLoader', forwardGroupId);
                     sourceSetId = await this.$store.dispatch('newCallForward/createSourceSet', {
                         name: this.name,
                         source: this.number
@@ -124,10 +124,8 @@
                         id: forwardGroupId,
                         sourceSetId: sourceSetId
                     });
-                    await this.$store.dispatch('newCallForward/loadSourcesets');
-                    await this.$store.dispatch('newCallForward/loadMappings');
-                    await this.$store.dispatch('newCallForward/loadForwardGroups');
-                    await this.$store.dispatch('newCallForward/removeGroupLoader', forwardGroupId);
+                    this.$store.dispatch('newCallForward/loadSourcesets');
+                    this.$store.dispatch('newCallForward/removeGroupLoader', forwardGroupId);
 
                 }
                 catch(err){

src/components/pages/NewCallForward/CscNewCallForwardConditionTypeSelect.vue

@@ -76,25 +76,24 @@
                 },
                 async set(value) {
                     try{
-                        await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
+                        this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
                         const timeSetId = await this.$store.dispatch('newCallForward/createTimeSet', this.timesetName);
-                        await this.$store.dispatch('newCallForward/addTimesetToGroup', {
-                            name: this.groupName,
-                            groupId: this.groupId,
-                            timeSetId: timeSetId
-                        });
                         this.day = {
                             "year": date.formatDate(value, 'YYYY'),
                             "month": date.formatDate(value, 'M'),
                             "mday": date.formatDate(value, 'D')
                         }
+                        this.$store.dispatch('newCallForward/addTimesetToGroup', {
+                            name: this.groupName,
+                            groupId: this.groupId,
+                            timeSetId: timeSetId
+                        });
                         await this.$store.dispatch('newCallForward/addTimeToTimeset', {
                             id: timeSetId,
                             time: this.day
                         });
-                        await this.$store.dispatch('newCallForward/loadMappings');
                         await this.$store.dispatch('newCallForward/loadTimesets');
-                        await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
+                        this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
 
                     }
                     catch(err){

src/components/pages/NewCallForward/CscNewCallForwardDestination.vue

@@ -184,7 +184,7 @@
 						this.$refs.numberForm.open();
 					break;
 					case 'voicemail':
-						await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
+						this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
 						if(this.groupId.toString().includes('temp-')){ // unexisting group
 							const newGroupId = await this.$store.dispatch('newCallForward/addForwardGroup', {
 								name: this.groupName,
@@ -202,7 +202,7 @@
 						else{
 							await this.$store.dispatch('newCallForward/addVoiceMail', this.groupId);
 						}
-						await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
+						this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
 						this.popoverToTop = false;
 						this.popoverTimeoutToTop = false;
 					break;
@@ -219,13 +219,13 @@
 				this.$refs.selectDestinationType.add();
 			},
 			async saveTimeout(){
-				await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
+				this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
 				await this.$store.dispatch('newCallForward/editTimeout', {
 					index: this.destinationIndex,
 					timeout: this.destinationTimeout,
 					forwardGroupId: this.groupId
 				});
-				await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
+				this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
 
 			},
 			showConfirmDialog(){
@@ -233,12 +233,12 @@
 			},
 			async confirmDeleteDest(){
 				this.removeInProgress = true;
-				await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
+				this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
 				await this.$store.dispatch('newCallForward/removeDestination', {
 					destination: this.destination,
 					forwardGroupId: this.groupId
 				});
-				await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
+				this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
 			},
 			isVoiceMail(){
 				return this.destination.destination.includes('voicebox.local')

src/components/pages/NewCallForward/CscNewCallForwardEditSources.vue

@@ -179,7 +179,7 @@
                     source: this.number
                 });
                 try{
-                    await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
+                    this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
                     this.$refs.sourceInputField.reset();
                     await this.$store.dispatch('newCallForward/addSourceToSourceset', {
                         id: this.sourceSetId,
@@ -192,7 +192,7 @@
                     console.log(err)
                 }
                 finally {
-                  await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
+                  this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
                 }
             },
             showRemoveDialog(){
@@ -200,12 +200,11 @@
                 this.toggleFormVisibility = true;
             },
             async confirmDeleteSourceset(){
-                await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
+                this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
                 await this.$store.dispatch('newCallForward/deleteSourcesetById', this.sourceSetId);
-                await this.$store.dispatch('newCallForward/loadMappings');
-                await this.$store.dispatch('newCallForward/loadSourcesets');
-                await this.$store.dispatch('newCallForward/loadForwardGroups');
-                await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
+                this.$store.dispatch('newCallForward/loadMappings');
+                this.$store.dispatch('newCallForward/loadSourcesets');
+                this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
                 this.restorePopver();
             },
             restorePopver(){

src/components/pages/NewCallForward/CscNewCallForwardSource.vue

@@ -78,7 +78,7 @@
 				let sources = this.getSourcesesBySourcesetId(this.sourceSetId);
 				sources = sources.filter($source=> $source.source !== this.source);
 				try{
-					await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
+					this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
 					await this.$store.dispatch('newCallForward/removeSourceFromSourceset', {
 						id: this.sourceSetId,
 						sources: sources
@@ -89,7 +89,7 @@
 					console.log(err)
 				}
 				finally{
-					await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
+					this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
 				}
 				this.removeInProgress = false;
 			}

src/store/new-call-forward.js

@@ -1,4 +1,5 @@
 'use strict';
+import _ from 'lodash';
 import Vue from 'vue'
 import {
     getMappings,
@@ -7,6 +8,7 @@ import {
     deleteDestinationsetById,
     addDestinationToDestinationset,
     addNewMapping,
+    addMultipleNewMappings,
     updateOwnPhoneTimeout,
     updateDestinationsetName,
     createSourcesetWithSource,
@@ -165,9 +167,6 @@ export default {
             destination.timeout =  data.timeout;
             Vue.set(group.destinations, data.index-1, destination)
         },
-        loadMappings(state, mappings){
-            state.mappings = mappings;
-        },
         loadForwardGroups(state, forwardGroups){
             for (let i = 0; i < forwardGroups.length; i++) {
                 const group = forwardGroups[i];
@@ -178,6 +177,21 @@ export default {
             }
             state.forwardGroups = forwardGroups;
         },
+        setDestinationSet(state, data){
+            let forwardGroup = state.forwardGroups.find((group)=>{
+                return group.id === data.id;
+            });
+            Object.assign(forwardGroup, data);
+        },
+        setDestinations(state, data){
+            let group = state.forwardGroups.find((group)=>{
+                return group.id === data.groupId;
+            });
+            group.destinations = data.destinations;
+        },
+        setMappings(state, mappings){
+            state.mappings = mappings;
+        },
         setSelectedDestType(state, destType){
             state.selectedDestType = destType;
         },
@@ -187,6 +201,12 @@ export default {
         setTimeSets(state, timeSets){
             state.timeSets = timeSets;
         },
+        editTimes(state, timeSet){
+            let timeSetToUpdate = state.timeSets.find(($timeset)=>{
+                return $timeset.id === timeSet.id;
+            });
+            timeSetToUpdate.times = timeSet.times;
+        },
         addGroupLoader(state, groupId){
             state.groupsLoaders.push(groupId)
         },
@@ -195,6 +215,10 @@ export default {
         },
         setFirstDestinationInCreation(state, groupId){
             state.firstDestinationInCreation = groupId;
+        },
+        setOwnPhoneTimeout(state, cft_ringtimeout){
+            const mappings = state.mappings;
+            mappings.cft_ringtimeout = cft_ringtimeout
         }
     },
     actions: {
@@ -211,7 +235,7 @@ export default {
         async loadMappings(context) {
             try{
                 const mappings = await getMappings(localStorage.getItem('subscriberId'));
-                context.commit('loadMappings', mappings);
+                context.commit('setMappings', mappings);
             }
             catch(err){
                 console.log(err)
@@ -236,7 +260,6 @@ export default {
                 if(data.replaceMapping){
                     for(let mapping of groupMappings){
                         if(mapping.destinationset_id === data.groupId){
-
                             mapping.sourceset_id = data.sourceSetId || null;
                             mapping.timeset_id = data.timeSetId || null;
                             break;
@@ -250,12 +273,12 @@ export default {
                         "timeset_id": data.timeSetId || null
                     });
                 }
-                await addNewMapping({
+                const updatedMappings = await addNewMapping({
                     mappings: groupMappings,
                     group: groupMappingId,
                     subscriberId: subscriberId
                 });
-                context.dispatch('loadMappings');
+                context.commit('setMappings', updatedMappings);
             }
             catch(err){
                 console.log(err)
@@ -273,12 +296,12 @@ export default {
                     "priority": 1,
                     "timeout": 5
                 };
-                await context.dispatch('editMapping', {
+                context.dispatch('editMapping', {
                     name: data.name,
                     groupId: newForwardGroupId
                 });
 
-                await addDestinationToDestinationset({
+                addDestinationToDestinationset({
                     id: newForwardGroupId,
                     data: [destination]
                 });
@@ -286,7 +309,7 @@ export default {
                 // setting cft_ringtimeout in case it is
                 // not set while creating timeout group
                 if((data.name === 'timeout' || data.name === 'csc-timeout') && (!context.getters.getOwnPhoneTimeout || isNaN(context.getters.getOwnPhoneTimeout))){
-                    await context.dispatch('editRingTimeout', 5);
+                    context.dispatch('editRingTimeout', 5);
                 }
 
                 return newForwardGroupId;
@@ -297,14 +320,7 @@ export default {
         },
         async deleteForwardGroup(context, group) {
             try{
-                const subscriberId = localStorage.getItem('subscriberId');
-                const groupMappingId = await context.dispatch('getMappingIdByGroupName', group.name);
                 await deleteDestinationsetById(group.id);
-                await addNewMapping({
-                    mappings: [],
-                    group: groupMappingId,
-                    subscriberId: subscriberId
-                });
                 context.dispatch('loadMappings');
             }
             catch(err){
@@ -405,22 +421,24 @@ export default {
                 let destinations, group = context.state.forwardGroups.find((group)=>{
                     return group.id === data.forwardGroupId;
                 });
-
                 destinations = group.destinations.filter(($destination) => {
                     return $destination.destination !== data.destination.destination;
                 });
-
                 if(destinations.length < 1){
                     await context.dispatch('deleteForwardGroup', group);
+                    context.dispatch('loadForwardGroups');
                 }
                 else{
-                    await addDestinationToDestinationset({
+                    const updatedGroup = await addDestinationToDestinationset({
                         id: group.id,
                         data: destinations
                     });
-                    await context.dispatch('loadMappings');
+                    context.commit('setDestinations', {
+                        groupId: updatedGroup.id,
+                        destinations: updatedGroup.destinations
+                    });
                 }
-                await context.dispatch('loadForwardGroups');
+
 
             }
             catch(err){
@@ -428,17 +446,22 @@ export default {
             }
         },
         async editDestination(context, data){
-            let group = context.state.forwardGroups.find((group)=>{
+            const group = context.state.forwardGroups.find((group)=>{
                 return group.id === data.forwardGroupId;
             });
-            let destination = group.destinations.slice(data.index, data.index+1)[0];
+            const groupClone = _.cloneDeep(group);
+            let destination = groupClone.destinations.slice(data.index, data.index+1)[0];
             destination.simple_destination =  data.destination;
             destination.destination =  data.destination;
-            context.commit('editDestination', data);
+
             try{
-                await addDestinationToDestinationset({
+                const result = await addDestinationToDestinationset({
                     id: data.forwardGroupId,
-                    data: group.destinations
+                    data: groupClone.destinations
+                });
+                context.commit('setDestinations', {
+                    groupId: data.forwardGroupId,
+                    destinations: result.destinations
                 });
             }
             catch(err){
@@ -447,11 +470,11 @@ export default {
         },
         async editRingTimeout(context, timeout){
             try{
-                await updateOwnPhoneTimeout({
+                const data = await updateOwnPhoneTimeout({
                     subscriberId: localStorage.getItem('subscriberId'),
                     timeout: timeout
                 });
-                await context.dispatch('loadMappings');
+                context.commit('setOwnPhoneTimeout', data.cft_ringtimeout)
             }
             catch(err){
                 console.log(err)
@@ -459,6 +482,7 @@ export default {
         },
         async editTimeout(context, data){
             try{
+
                 if(data.index === 0){ // first row -> change cft_ringtimeout
                     await context.dispatch('editRingTimeout', data.timeout);
                 }
@@ -466,13 +490,17 @@ export default {
                     const group = context.state.forwardGroups.find((group)=>{
                         return group.id === data.forwardGroupId;
                     });
-                    let destination = group.destinations.slice(data.index-1, data.index)[0];
+                    const groupClone = _.cloneDeep(group);
+                    let destination = groupClone.destinations.slice(data.index-1, data.index)[0];
                     destination.timeout =  data.timeout;
-                    await addDestinationToDestinationset({
-                        id: group.id,
-                        data: group.destinations
+                    const result = await addDestinationToDestinationset({
+                        id: groupClone.id,
+                        data: groupClone.destinations
+                    });
+                    context.commit('setDestinations', {
+                        groupId: group.id,
+                        destinations: result.destinations
                     });
-                    context.commit('editTimeout', data);
                 }
             }
             catch(err){
@@ -487,63 +515,68 @@ export default {
                 let timeoutGroups = await context.dispatch('getForwardGroupByName', 'timeout');
 
                 if(noSelfNumber && timeoutGroups){
-                    for(let timeoutGroup of timeoutGroups){ // TODO multiple logic
+                    for(let timeoutGroup of timeoutGroups){
                         if(timeoutGroup && !timeoutGroup.id.toString().includes('temp')){
-
-                            await updateDestinationsetName({
+                            context.dispatch('addGroupLoader', timeoutGroup.id);
+                            const updatedDestinationset = await updateDestinationsetName({
                                 id: timeoutGroup.id,
                                 name: 'csc-unconditional'
                             });
-
-                            await addNewMapping({
-                                mappings: [],
-                                group: 'cft',
-                                subscriberId: subscriberId
-                            });
-
-                            await addNewMapping({
-                                mappings: mappings['cft'],
-                                group: 'cfu',
-                                subscriberId: subscriberId
-                            });
-
+                            context.commit('setDestinationSet', updatedDestinationset);
+                            context.dispatch('removeGroupLoader', timeoutGroup.id);
                         }
                         else {
-                            await context.dispatch('addTempGroup', 'unconditional');
+                            context.dispatch('addTempGroup', 'unconditional');
                         }
-                        await context.dispatch('loadMappings');
-                        await context.dispatch('loadForwardGroups');
                     }
+                    const updatedMappings = await addMultipleNewMappings({
+                        subscriberId: subscriberId,
+                        mappings: [
+                            {
+                                op: 'replace',
+                                value: [],
+                                path: '/cft'
+                            },
+                            {
+                                op: 'replace',
+                                value: mappings['cft'],
+                                path: '/cfu'
+                            }
+                        ]
+                    });
+                    context.commit('setMappings', updatedMappings);
                 }
                 else{
                     if(unconditionalGroups ){
-                        for(let unconditionalGroup of unconditionalGroups){ // TODO multiple logic
+                        for(let unconditionalGroup of unconditionalGroups){
                             if(!unconditionalGroup.id.toString().includes('temp')){
-
-                                await updateDestinationsetName({
+                                context.dispatch('addGroupLoader', unconditionalGroup.id);
+                                const updatedDestinationset  = await updateDestinationsetName({
                                     id: unconditionalGroup.id,
                                     name: 'csc-timeout'
                                 });
-
-                                await addNewMapping({
-                                    mappings: [],
-                                    group: 'cfu',
-                                    subscriberId: subscriberId
-                                });
-
-                                await addNewMapping({
-                                    mappings: mappings['cfu'],
-                                    group: 'cft',
-                                    subscriberId: subscriberId
-                                });
-
+                                context.commit('setDestinationSet', updatedDestinationset);
+                                context.dispatch('removeGroupLoader', unconditionalGroup.id);
                             }
                             else{
-                                await context.dispatch('addTempGroup', 'timeout');
+                                 context.dispatch('addTempGroup', 'timeout');
                             }
-                            await context.dispatch('loadMappings');
-                            await context.dispatch('loadForwardGroups');
                         }
+
+                        const updatedMappings = await addMultipleNewMappings({
+                            subscriberId: subscriberId,
+                            mappings: [{
+                                op: 'replace',
+                                value: [],
+                                path: '/cfu'
+                            },
+                            {
+                                op: 'replace',
+                                value: mappings['cfu'],
+                                path: '/cft'
+                            }]
+                        });
+                        context.commit('setMappings', updatedMappings);
                     }
                 }
             }
@@ -584,12 +617,12 @@ export default {
                             group.enabled = data.enabled;
                         }
                     }
-                    await addNewMapping({
+                    const updatedMappings = await addNewMapping({
                         mappings: groupMappings,
                         group: mappingId,
                         subscriberId: subscriberId
                     });
-                    context.dispatch('loadMappings');
+                    context.commit('setMappings', updatedMappings);
                 }
 
             }
@@ -610,6 +643,9 @@ export default {
             const timeSets = await getTimesets(subscriberId);
             context.commit('setTimeSets', timeSets);
         },
+        editTimes(context, timeSet){
+            context.commit('editTimes', timeSet);
+        },
         async createSourceSet(context, data){
             const sourceSetId = await createSourcesetWithSource({
                 sourcesetName: data.name,
@@ -677,10 +713,11 @@ export default {
         },
         async addTimeToTimeset(context, data){
             try{
-                await addTimeToTimeset({
+                const timeset = await addTimeToTimeset({
                     id: data.id,
                     times: [data.time]
                 });
+                return timeset;
             }
             catch(err){
                 console.log(err)