TT#82501 As a Customer, I want to be forced to input a initial number/destination in order to add conditions afterwards

AC:
If forwarding group is not persisted yet:
√ Can click "and condition" and sees the possible conditions like "call from ..."
√ Can click a condition
√ Can see a number input to save the initial destination
√ Can see information why all this is happening
√ Can see the origin condition popup (source list, time widget) again after saving the number

Change-Id: I78c44fe000f980335b4c49480cb43c6250fbe1ce

src/components/pages/NewCallForward/CscCallForwardGroup.vue

@@ -12,6 +12,29 @@
 
                     {{groupTitle}}
 
+
+                    <span
+                        class="csc-cf-destination-add-condition"
+                        v-if="isTempGroup"
+                    >
+                        {{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
+                        <span class="csc-cf-from-link">
+                            {{ $t('pages.newCallForward.conditionBtnLabel') }}
+                        </span>
+                        <q-popover
+                            ref="conditions"
+                            @open="showConditions()"
+                            @close="showFirstDestMenu()"
+                        >
+                            <csc-new-call-forward-condition-type-select
+                                ref="addCondition"
+                                :enabled="true"
+                                :groupName="group.name"
+                                :groupId="group.id"
+                            />
+                        </q-popover>
+                    </span>
+
                     <span
                         class="csc-cf-destination-add-condition"
                         v-if="!groupSourceset && !isTempGroup"
@@ -35,7 +58,7 @@
                          <q-popover
                             ref="onlineSourceset"
                             class="csc-cf-number-form"
-                            v-bind:class="{ 'csc-cf-popover-hide': toggleConditionFromForm }"
+                            v-bind:class="{ 'csc-cf-popover-hide': toggleConditionFromForm}"
                             @open="showSourcesetForm()"
                             @close="resetToggleCondition()"
                         >
@@ -105,6 +128,7 @@
         >
             <csc-new-call-forward-destination
                 :destination="getDestination(index)"
+                ref="destination"
                 :index="index"
                 :groupId="group.id"
                 :groupName="group.name"
@@ -166,6 +190,9 @@
     import {
         mapGetters,
     } from 'vuex'
+    import {
+        showGlobalWarning
+    } from '../../../helpers/ui'
     import {
         QSpinnerDots,
         QToggle,
@@ -200,6 +227,7 @@
             QItemSide,
             CscConfirmDialog,
             CscObjectSpinner,
+            showGlobalWarning,
             CscNewCallForwardDestination,
             CscNewCallForwardAddDestinationForm,
             CscNewCallForwardEditSources,
@@ -215,7 +243,8 @@
                 toggleConditionFromForm: true,
                 groupIsLoading: false,
                 sourceSet: null,
-                sources: []
+                sources: [],
+                firstDestinationInCreation: false
             };
         },
         async mounted(){
@@ -236,7 +265,9 @@
                 'getOwnPhoneTimeout',
                 'groupsCount',
                 'getMappings',
-                'getGroupsLoaders'
+                'getGroupsLoaders',
+                'getSourcesets',
+                'getFirstDestinationInCreation'
             ]),
             showAddDestBtn(){
                 const destinations = this.group.destinations;
@@ -273,15 +304,24 @@
             },
             isTempGroup(){
                 return this.group.id.toString().includes('temp-');
+            },
+            isFirstDestInCreation(){
+                return this.group.id.toString() === this.getFirstDestinationInCreation;
             }
         },
         watch: {
-            group: function () {
+            getSourcesets: function () {
                  this.updateSourcesetNames();
             },
             getGroupsLoaders: function(){
                 const groupLoaders = this.getGroupsLoaders;
                 this.groupIsLoading =  groupLoaders.includes(this.group.id);
+            },
+            getFirstDestinationInCreation: function(){
+                if(this.getFirstDestinationInCreation === this.group.id.toString()){
+                    this.toggleConditionFromForm = false;
+                    this.$refs.onlineSourceset.open();
+                }
             }
         },
         methods: {
@@ -306,18 +346,24 @@
                     break;
                 }
             },
+            showFirstDestMenu(){
+                const firstDestinationCmp = this.$refs.destination[0];
+                firstDestinationCmp.firstDestinationInCreation = true;
+                firstDestinationCmp.$refs.destTypeForm.open();
+                showGlobalWarning(`${this.$t('pages.newCallForward.mandatoryDestinationLabel')}`, 5000)
+            },
             async showConditionForm(){
-                switch(this.$refs.addCondition.action){
+                this.toggleConditionFromForm = false;
-                    case 'addFromCondition':
+                this.$refs.onlineSourceset.open();
-                        this.toggleConditionFromForm = false;
+
-                        this.$refs.onlineSourceset.open();
-                    break;
-                }
             },
             showDestTypeForm(){
                 this.toggleNumberForm = true;
                 this.$refs.selectDestinationType.add();
             },
+            getDestName(index){
+                return "destination" + index;
+            },
             getDestination(index){
                 let destination = {...this.group.destinations[index]}
                 if(index === 0){
@@ -359,6 +405,7 @@
                         return $mapping.destinationset_id == this.group.id;
                     });
                     sourceSet = groupMapping[0] && groupMapping[0].sourceset_id ? await this.$store.dispatch('newCallForward/getSourcesetById', groupMapping[0].sourceset_id) :  null;
+
                     if(sourceSet){
                         this.sourceSet = sourceSet;
                         this.sources = this.sourceSet.sources;
@@ -369,10 +416,16 @@
                 this.$refs.confirmDialog.open();
             },
             async confirmDeleteGroup(){
-                await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
+                try{
-                await this.$store.dispatch('newCallForward/deleteForwardGroup', this.group);
+                    await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
-                await this.$store.dispatch('newCallForward/loadForwardGroups');
+                    await this.$store.dispatch('newCallForward/deleteForwardGroup', this.group);
-                await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
+                    await this.$store.dispatch('newCallForward/loadForwardGroups');
+                    await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
+                }
+                catch(e){
+                    console.log(e)
+                }
+
             }
         }
     }

src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue

@@ -115,10 +115,17 @@
                 else { // new group
                     if(forwardGroup.id.toString().includes('temp-')){ // unexisting group
                         forwardGroup.destinations[0].simple_destination = this.number; // optimistic UI update :)
-                        await this.$store.dispatch('newCallForward/addForwardGroup', {
+                        const newGroupId = await this.$store.dispatch('newCallForward/addForwardGroup', {
                             name: forwardGroupName,
                             destination: this.number
                         });
+
+                        await this.$store.dispatch('newCallForward/loadForwardGroups');
+
+                        if(this.destinationIndex === 0){
+                            await this.$store.dispatch('newCallForward/setFirstDestinationInCreation', newGroupId);
+                        }
+
                     }
                     else{ // existing group
 

src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue

@@ -124,9 +124,11 @@
                         id: forwardGroupId,
                         sourceSetId: sourceSetId
                     });
-                    await this.$store.dispatch('newCallForward/removeGroupLoader', forwardGroupId);
-                    await this.$store.dispatch('newCallForward/loadForwardGroups');
                     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);
+
                 }
                 catch(err){
                     console.log(err)

src/components/pages/NewCallForward/CscNewCallForwardDestination.vue

@@ -141,7 +141,8 @@
 				destinationNumber: null,
 				destinationIndex: null,
 				removeInProgress: false,
-				toggleNumberForm: true
+				toggleNumberForm: true,
+				firstDestinationInCreation: false
 			}
 		},
 		computed: {
@@ -174,12 +175,18 @@
 					case 'voicemail':
 						await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
 						if(this.groupId.toString().includes('temp-')){ // unexisting group
-							await this.$store.dispatch('newCallForward/addForwardGroup', {
+							const newGroupId = await this.$store.dispatch('newCallForward/addForwardGroup', {
 								name: this.groupName,
 								destination: 'voicebox'
 							});
+
 							await this.$store.dispatch('newCallForward/loadForwardGroups');
 
+							if(this.firstDestinationInCreation){
+								await this.$store.dispatch('newCallForward/setFirstDestinationInCreation', newGroupId);
+								this.firstDestinationInCreation = false;
+							}
+
 						}
 						else{
 							await this.$store.dispatch('newCallForward/addVoiceMail', this.groupId);

src/helpers/ui.js

@@ -22,7 +22,7 @@ export function showGlobalError(message) {
     setTimeout(()=>{ alert.dismiss(); }, 2000);
 }
 
-export function showGlobalWarning(message) {
+export function showGlobalWarning(message, timeout) {
     const alert = Alert.create({
         html: message,
         position: 'top-center',
@@ -30,7 +30,7 @@ export function showGlobalWarning(message) {
         leave: 'fadeOut',
         color: 'warning'
     });
-    setTimeout(()=>{ alert.dismiss(); }, 2000);
+    setTimeout(()=>{ alert.dismiss(); }, timeout || 2000);
 }
 
 export function showPermanentGlobalWarning(message) {

src/locales/en.json

@@ -240,7 +240,8 @@
             "fromLabelShort": " call from ",
             "offlineLabel": "If offline",
             "busyLabel": "If busy",
-            "sourcesetName": "List name"
+            "sourcesetName": "List name",
+            "mandatoryDestinationLabel": "Please add a destination to the group before adding conditions"
         },
         "callForward": {
             "titles": {

src/store/new-call-forward.js

@@ -48,12 +48,16 @@ export default {
         sourceSets: [],
         forwardGroups: [],
         groupsLoaders: [],
-        selectedDestType: null
+        selectedDestType: null,
+        firstDestinationInCreation: null
     },
     getters: {
         getGroupsLoaders(state){
             return state.groupsLoaders;
         },
+        getFirstDestinationInCreation(state){
+            return state.firstDestinationInCreation
+        },
         primaryNumber(state, getters, rootState, rootGetters) {
             const subscriber = rootGetters['user/getSubscriber'];
             if(subscriber !== null) {
@@ -177,6 +181,9 @@ export default {
         },
         removeGroupLoader(state, groupId){
             state.groupsLoaders = state.groupsLoaders.filter($groupId => $groupId !== groupId);
+        },
+        setFirstDestinationInCreation(state, groupId){
+            state.firstDestinationInCreation = groupId;
         }
     },
     actions: {
@@ -618,5 +625,8 @@ export default {
         async removeSourceFromSourceset(context, data){
             await addSourceToSourceset(data)
         },
+        setFirstDestinationInCreation(context, groupId){
+            context.commit('setFirstDestinationInCreation', groupId);
+        }
     }
 };