TT#79757 CF Offline implement mutations, actions and Vue store related functions

Change-Id: I04aa842b1ea97f1c4750a30145dca439ae61dac9

src/components/pages/NewCallForward/CscCallForwardGroup.vue

@@ -10,12 +10,7 @@
                     class="col col-xs-12 col-md-4 text-right csc-cf-group-title"
                 >
                     {{ !(groupsCount < 2 && (group.name.includes('timeout') || group.name.includes('unconditional'))) ? groupTitle :"" }}
-                    <q-spinner-dots
-                        v-if="toggleGroupInProgress"
-                        class="csc-call-spinner"
-                        color="primary"
-                        :size="24"
-                    />
+
                 </div>
                 <div class="col text-left col-xs-12 col-md-2 csc-cf-dest-number-cont">
                     <q-toggle
@@ -24,6 +19,12 @@
                     />
                 </div>
                 <div class="col col-xs-12 col-md-5 ">
+                    <q-spinner-dots
+                        v-if="toggleGroupInProgress || destinationInCreation"
+                        class="csc-call-spinner"
+                        color="primary"
+                        :size="24"
+                    />
                 </div>
         </div>
         <div
@@ -60,13 +61,6 @@
 
                         {{ $t('pages.newCallForward.addDestinationLabel') }}
 
-                        <q-spinner-dots
-                            v-if="destinationInCreation"
-                            class="csc-call-spinner"
-                            color="primary"
-                            :size="24"
-                        />
-
                     </div>
                     <q-popover
                         ref="destTypeForm"
@@ -197,8 +191,10 @@
                         this.$refs.numberForm.open();
                     break;
                     case 'voicemail':
+                        await this.$store.dispatch('newCallForward/setDestinationInCreation', true);
                         await this.$store.dispatch('newCallForward/addVoiceMail', this.group.id);
                         await this.$store.dispatch('newCallForward/loadForwardGroups');
+                        await this.$store.dispatch('newCallForward/setDestinationInCreation', false);
                     break;
                 }
             },

src/components/pages/NewCallForward/CscNewCallForward.vue

@@ -26,6 +26,28 @@
                     @change="toggleChange" />
             </div>
         </div>
+        <div
+            class="csc-cf-row row"
+            v-for="(forwardGroup, item) in forwardGroups"
+            :key="forwardGroup.id"
+        >
+            <csc-cf-group
+                v-if="!groupInCreation"
+                :group="forwardGroup"
+            />
+        </div>
+        <div class="csc-cf-row row">
+            <div
+                class="column col col-xs-12 col-md-4"
+            >
+                <q-spinner-dots
+                    v-if="groupsLoading"
+                    class="csc-call-spinner"
+                    color="primary"
+                    :size="24"
+                />
+            </div>
+        </div>
         <div class="csc-cf-row row">
             <div
                 class="column col col-xs-12 col-md-4 items-end"
@@ -62,29 +84,6 @@
 
             </div>
         </div>
-        <div
-            class="csc-cf-row row"
-            v-for="(forwardGroup, item) in forwardGroups"
-            :key="forwardGroup.id"
-        >
-            <csc-cf-group
-                v-if="!groupInCreation"
-                :group="forwardGroup"
-            />
-        </div>
-        <div class="csc-cf-row row">
-            <div
-                class="column col col-xs-12 col-md-4"
-            >
-                <q-spinner-dots
-                    v-if="groupsLoading"
-                    class="csc-call-spinner"
-                    color="primary"
-                    :size="24"
-                />
-            </div>
-        </div>
-
     </csc-page>
 </template>
 
@@ -183,10 +182,7 @@
                     }
                     break;
                     case "offline":{
-                        const offlineFwdGroup = await this.$store.dispatch('newCallForward/getForwardGroupByName', 'offline');
-                        if(!offlineFwdGroup){
-                            await this.$store.dispatch('newCallForward/addTempGroup','offline' );
-                        }
+                        await this.$store.dispatch('newCallForward/addTempGroup','offline' );
                     }
 
                     break;

src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue

@@ -116,6 +116,7 @@
                     });
                 }
                 else { // new destination
+                    await this.$store.dispatch('newCallForward/setDestinationInCreation', true);
                     if(forwardGroup.id.toString().includes('temp-')){ // unexisting group
                         forwardGroup.destinations[0].simple_destination = this.number; // optimistic UI update :)
                         await this.$store.dispatch('newCallForward/addForwardGroup', {
@@ -124,7 +125,7 @@
                         });
                     }
                     else{ // existing group
-                        await this.$store.dispatch('newCallForward/setDestinationInCreation', true);
+
                         await this.$store.dispatch('newCallForward/addDestination', {
                             forwardGroupId: forwardGroup.id,
                             destination: this.number

src/store/new-call-forward.js

@@ -93,8 +93,13 @@ export default {
             state.mappings = mappings;
         },
         loadForwardGroups(state, forwardGroups){
-            if(forwardGroups[0] && (forwardGroups[0].name.includes('unconditional') || forwardGroups[0].name.includes('timeout'))){
-                forwardGroups.push(forwardGroups.shift())
+
+            for (let i = 0; i < forwardGroups.length; i++) {
+                const group = forwardGroups[i];
+              if (!group.name.includes('unconditional') && !group.name.includes('timeout')){
+                  forwardGroups.splice(i, 1);
+                  forwardGroups.unshift(group);
+              }
             }
             state.forwardGroups = forwardGroups;
         },