TT#79501 CF: As a Customer, I want to add "Voicemail" as destination

Change-Id: Id491d9e455486aed551c9916ef558d8fe1036204

src/components/pages/NewCallForward/CscCallForwardGroup.vue

@@ -8,6 +8,12 @@
         >
                 <div class="col col-xs-12 col-md-4 text-right csc-cf-group-title">
                     {{ 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
@@ -15,7 +21,8 @@
                         @change="toggleGroupChange"
                     />
                 </div>
-                <div class="col col-xs-12 col-md-5 "></div>
+                <div class="col col-xs-12 col-md-5 ">
+                </div>
         </div>
         <div
             v-for="(destination, index) in group.destinations"
@@ -61,9 +68,9 @@
                     </div>
                     <q-popover
                         ref="destTypeForm"
-                        anchor="top right"
                         @open="showDestTypeForm()"
-                        @close="showNumberFormPopover()"
+                        @close="showNext()"
+                        class="csc-cf-group-popover-bottom"
                     >
                         <csc-new-call-forward-destination-type-form
                             ref="selectDestinationType"
@@ -71,8 +78,7 @@
                     </q-popover>
                     <q-popover
                         ref="numberForm"
-                        anchor="top right"
+                        class="csc-cf-number-form csc-cf-group-popover-bottom"
-                        class="csc-cf-number-form"
                         v-bind:class="{ 'csc-cf-popover-hide': toggleNumberForm }"
 						@open="showNewDestNumber()"
                     >
@@ -128,7 +134,8 @@
             return {
                 toggleGroup: true,
                 isEnabled: true,
-                toggleNumberForm: true
+                toggleNumberForm: true,
+                toggleGroupInProgress: false
             };
         },
         async mounted(){
@@ -151,7 +158,7 @@
             showAddDestBtn(){
                 const destinations = this.group.destinations;
                 for(let dest of destinations){
-                    if(dest && dest.simple_destination && dest.simple_destination.length < 2){
+                    if(dest && (dest.simple_destination && dest.simple_destination.length < 2 || dest.destination.includes('voicebox.local'))){
                         return false;
                     }
                 }
@@ -170,9 +177,17 @@
             showNewDestNumber(){
                 this.$refs.addDestinationForm.add();
             },
-            showNumberFormPopover(){
+            async showNext(){
+                switch(this.$refs.selectDestinationType.action){
+                    case 'destination':
                         this.toggleNumberForm = false;
                         this.$refs.numberForm.open();
+                    break;
+                    case 'voicemail':
+                        await this.$store.dispatch('newCallForward/addVoiceMail', this.group.id);
+                        await this.$store.dispatch('newCallForward/loadForwardGroups');
+                    break;
+                }
             },
             showDestTypeForm(){
                 this.toggleNumberForm = true;
@@ -188,12 +203,14 @@
                 }
                 return destination;
             },
-            toggleGroupChange(){
+            async toggleGroupChange(){
-                this.$store.dispatch('newCallForward/enableGroup', {
+                this.toggleGroupInProgress = true;
+                await this.$store.dispatch('newCallForward/enableGroup', {
                     groupName: this.group.name,
                     id: this.group.id,
                     enabled: this.isEnabled
                 });
+                this.toggleGroupInProgress = false;
             }
         }
     }
@@ -221,10 +238,11 @@
         text-overflow ellipsis
         color $primary
         cursor pointer
+    .csc-cf-group-popover-bottom
+        margin-left 30px
     .cf-destination-disabled
         color $cf-disabled-label
-        .csc-cf-timeout,
+        .csc-cf-destination-link
-        .csc-cf-destination
             color $cf-disabled-link
         .csc-cf-destination-actions
             .q-icon

src/components/pages/NewCallForward/CscNewCallForward.vue

@@ -48,7 +48,7 @@
 
                     <q-popover
                         ref="destsetTypeForm"
-                        anchor="top right"
+                        class="cf-popover-bottom"
                         @close="addForwardGroup()"
 
                     >
@@ -56,9 +56,9 @@
                             ref="destsetTypeForm"
                         />
                     </q-popover>
-                </div>
 
 
+                </div>
 
             </div>
         </div>
@@ -167,17 +167,13 @@
                 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/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/addTempDestination','unconditional' );
-                        //await this.$store.dispatch('newCallForward/loadForwardGroups');
                     }
                 }
 
@@ -214,5 +210,8 @@
         white-space nowrap
         overflow hidden
         text-overflow ellipsis
+    .cf-popover-bottom
+        min-width 150px
+        margin-left 5px
 
 </style>

src/components/pages/NewCallForward/CscNewCallForwardDestination.vue

@@ -1,13 +1,13 @@
 <template>
 		<div
 			class="row csc-cf-destination-cont"
-			:class="removed"
+			v-bind:class="{ 'csc-cf-removed-destination': removeInProgress }"
 		>
 			<div class="col col-xs-12 col-md-4 text-right">
 				{{ this.allCallsFwd  ? '' : $t('pages.newCallForward.destinationTimeoutLabel') }}
 				<span
 					v-if="!this.allCallsFwd"
-					class='csc-cf-timeout'
+					class='csc-cf-timeout csc-cf-destination-link'
 				>
 					{{this.destinationTimeout}}
 					<q-popover
@@ -27,29 +27,40 @@
 						/>
 					</q-popover>
 				</span>
-				{{ this.allCallsFwd ?  $t('pages.newCallForward.allCallsForwardedTo') : $t('pages.newCallForward.destinationNumberLabel') }}
+				{{ this.allCallsFwd
+					? $t('pages.newCallForward.allCallsForwardedTo')
+					: isVoiceMail()
+						? $t('pages.newCallForward.destinationVoicemailLabel')
+						: $t('pages.newCallForward.destinationNumberLabel')
+				}}
 			</div>
 			<div class="col text-left col-xs-12 col-md-2 csc-cf-dest-number-cont">
 
-				<div class='csc-cf-destination'>
+				<div
+					v-bind:class="{ 'csc-cf-destination-link': !isVoiceMail() }"
+					class='csc-cf-destination'
+				>
 					{{ !this.destinationNumber || this.destinationNumber.length < 2
 							? $t('pages.newCallForward.destinationLabel')
 							: this.destinationNumber}}
 					<q-popover
 						ref="destTypeForm"
-						anchor="top right"
+						class="csc-cf-dest-popover-bottom"
+						v-if="!isVoiceMail()"
+						v-bind:class="{ 'csc-cf-popover-hide': disableDestType }"
 						@open="showDestTypeForm()"
-						@close="showNumberFormPopover()"
+						@close="showNext()"
 					>
 						<csc-new-call-forward-destination-type-form
 							ref="selectDestinationType"
 						/>
 					</q-popover>
+
 					<q-popover
 						ref="numberForm"
-						anchor="top right"
+						class="csc-cf-number-form csc-cf-dest-popover-bottom"
-						class="csc-cf-number-form"
+						v-if="!isVoiceMail()"
-						v-bind:class="{ 'csc-cf-popover-hide': toggleNumberForm }"
+						v-bind:class="{ 'csc-cf-popover-hide': disableNumberPopover }"
 						@open="showNumberForm()"
 					>
 						<csc-new-call-forward-add-destination-form
@@ -69,17 +80,12 @@
 					size="24px"
 					@click="showConfirmDialog"
 				/>
-				<q-spinner-dots
-					v-if="showDots"
-					color="primary"
-					:size="24"
-				/>
 				<csc-confirm-dialog
 					ref="confirmDialog"
 					title-icon="delete"
 					:title="$t('pages.newCallForward.cancelDialogTitle', {groupName: this.groupName})"
-					:message="$t('pages.newCallForward.cancelDialogText', {groupName: this.groupName, destination: this.destination.simple_destination})"
+					:message="$t('pages.newCallForward.cancelDialogText', {groupName: this.groupName, destination: getDestName()})"
-					@confirm="deleteDestination"
+					@confirm="confirmDeleteDest"
 				/>
 			</div>
 	</div>
@@ -133,7 +139,7 @@
 				destinationTimeout: 0,
 				destinationNumber: null,
 				destinationIndex: null,
-				showDots: false,
+				removeInProgress: false,
 				toggleNumberForm: true
 			}
 		},
@@ -141,8 +147,11 @@
 			...mapGetters('newCallForward', [
 				'getOwnPhoneTimeout'
 			]),
-			removed(){
+			disableDestType(){
-				return this.showDots ? "csc-cf-removed-destination" : "";
+				return !this.groupId.toString().includes('temp-')
+			},
+			disableNumberPopover(){
+				return !this.groupId.toString().includes('temp-') ? false : this.toggleNumberForm;
 			}
 		},
         methods: {
@@ -152,12 +161,30 @@
 											&& isNaN(this.getOwnPhoneTimeout) === false
 												? this.getOwnPhoneTimeout
 												: destination.timeout;
-				this.destinationNumber = destination.simple_destination;
+				this.destinationNumber = this.isVoiceMail() ? `${this.$t('pages.newCallForward.voiceMailLabel')}` : destination.simple_destination;
 				this.destinationIndex = this.index;
 			},
-			showNumberFormPopover(){ // temporarily called onClose
+			async showNext(){
+				switch(this.$refs.selectDestinationType.action){
+					case 'destination':
 						this.toggleNumberForm = false;
 						this.$refs.numberForm.open();
+					break;
+					case 'voicemail':
+						if(this.groupId.toString().includes('temp-')){ // unexisting group
+							this.$parent.toggleGroupInProgress = true;
+							await this.$store.dispatch('newCallForward/addForwardGroup', {
+								name: this.groupName,
+								destination: 'voicebox'
+							});
+							await this.$store.dispatch('newCallForward/loadForwardGroups');
+							this.$parent.toggleGroupInProgress = false;
+						}
+						else{
+							await this.$store.dispatch('newCallForward/addVoiceMail', this.groupId);
+						}
+					break;
+				}
 			},
 			showNumberForm(){
 				this.$refs.addDestinationForm.add();
@@ -167,22 +194,36 @@
 				this.$refs.selectDestinationType.add();
 			},
 			async saveTimeout(){
-				this.$store.dispatch('newCallForward/editTimeout', {
+				this.$parent.toggleGroupInProgress = true;
+				await this.$store.dispatch('newCallForward/editTimeout', {
 					index: this.destinationIndex,
 					timeout: this.destinationTimeout,
 					forwardGroupId: this.groupId
 				});
+				this.$parent.toggleGroupInProgress = false;
+
 			},
 			showConfirmDialog(){
 				this.$refs.confirmDialog.open();
 			},
-			async deleteDestination(){
+			async confirmDeleteDest(){
-				this.showDots = true;
+				this.removeInProgress = true;
 				await this.$store.dispatch('newCallForward/removeDestination', {
 					destination: this.destination,
 					forwardGroupId: this.groupId
 				});
 				await this.$store.dispatch('newCallForward/loadForwardGroups');
+				await this.$store.dispatch('newCallForward/loadMappings');
+			},
+			isVoiceMail(){
+				return this.destination.destination.includes('voicebox.local')
+			},
+			getDestName(){
+				return this.destination.simple_destination
+								? this.destination.simple_destination
+								: this.isVoiceMail()
+									? `${this.$t('pages.newCallForward.voiceMailLabel')}`
+									: "";
 			}
 		}
     }
@@ -199,6 +240,8 @@
 		white-space nowrap
 		overflow hidden
 		text-overflow ellipsis
+		font-weight bold
+	.csc-cf-destination-link
 		color $primary
 		cursor pointer
 	.csc-cf-timeout-form,
@@ -210,10 +253,12 @@
 	.csc-cf-destination-actions
 		text-align left
 		cursor pointer
+	.csc-cf-popover-hide
+		display none
+	.csc-cf-dest-popover-bottom
+        margin-left 0px
 	.csc-cf-removed-destination
 		visibility hidden
 		opacity 0
 		transition visibility 0s 1s, opacity 1s linear
-	.csc-cf-popover-hide
-		display none
 </style>

src/components/pages/NewCallForward/CscNewCallForwardDestinationTypeForm.vue

@@ -10,6 +10,7 @@
         </div>
         <div
             class="csc-cf-dest-type"
+            @click="addVoiceMail()"
         >
             {{ $t('pages.newCallForward.voiceMailLabel') }}
         </div>
@@ -27,14 +28,19 @@
         },
         data () {
             return {
-                enabled: false
+                enabled: false,
+                action: null
             }
         },
-        props: [
+        props: [],
-        ],
         computed: {},
         methods: {
             showNumberForm(){
+                this.action = 'destination';
+                this.$parent.close()
+            },
+            addVoiceMail(){
+                this.action = 'voicemail';
                 this.$parent.close()
             },
             cancel() {

src/locales/en.json

@@ -218,6 +218,7 @@
             "voiceMailLabel": "Voicemail",
             "destinationTimeoutLabel": "Then after ",
             "destinationNumberLabel": "seconds forwarded to",
+            "destinationVoicemailLabel": "seconds finally forwarded to",
             "destinationLabel": "Destination",
             "addDestinationLabel": "Add destination",
             "allCallsForwardedTo": "All calls forwarded to",

src/store/new-call-forward.js

@@ -31,7 +31,6 @@ export default {
     getters: {
         primaryNumber(state, getters, rootState, rootGetters) {
             const subscriber = rootGetters['user/getSubscriber'];
-
             if(subscriber !== null) {
                 return subscriber.primary_number;
             }
@@ -238,6 +237,25 @@ export default {
                 console.log(err);
             }
         },
+        async addVoiceMail(context, groupId){
+            try{
+                let group = context.state.forwardGroups.find((group)=>{
+                    return group.id === groupId || group.id.toString() === groupId;
+                });
+                const destination = {
+                    "announcement_id": null,
+                    "destination": "voicebox",
+                    "priority": 1
+                };
+                await addDestinationToDestinationset({
+                    id: group.id,
+                    data: [...group.destinations, destination]
+                });
+            }
+            catch(err){
+                console.log(err);
+            }
+        },
         async replaceDestinations(context, data){
             try{
                 let group = context.state.forwardGroups.find((group)=>{
@@ -267,7 +285,6 @@ export default {
                 if(destinations.length < 1){
                     context.dispatch('deleteForwardGroup', group);
                     context.dispatch('loadForwardGroups', group);
-                    context.dispatch('loadMappings', group);
                 }
             }
             catch(err){
@@ -305,8 +322,9 @@ export default {
             }
         },
         async editTimeout(context, data){
+            try{
                 if(data.index === 0){ // first row -> change cft_ringtimeout
-                context.dispatch('editRingTimeout', data.timeout);
+                    await context.dispatch('editRingTimeout', data.timeout);
                 }
                 else{
                     const group = context.state.forwardGroups.find((group)=>{
@@ -314,60 +332,60 @@ export default {
                     });
                     let destination = group.destinations.slice(data.index-1, data.index)[0];
                     destination.timeout =  data.timeout;
-                context.commit('editTimeout', data);
-                try{
                     await addDestinationToDestinationset({
                         id: group.id,
                         data: group.destinations
                     });
+                    context.commit('editTimeout', data);
+                }
             }
             catch(err){
                 console.log(err)
             }
-            }
-
         },
         async forwardAllCalls(context, noSelfNumber){
             try{
                 let unconditionalGroup = await context.dispatch('getForwardGroupByName', 'unconditional')
                 let timeoutGroup = await context.dispatch('getForwardGroupByName', 'timeout');
-
+                if(noSelfNumber){
-                if(!unconditionalGroup){
+                    if(timeoutGroup && !timeoutGroup.id.toString().includes('temp')){
                         await context.dispatch('addForwardGroup', {
                             name: 'unconditional'
                         });
                         await context.dispatch('loadMappings');
                         await context.dispatch('loadForwardGroups');
-                    unconditionalGroup = await context.dispatch('getForwardGroupByName', 'unconditional');
+                        //unconditionalGroup = await context.dispatch('getForwardGroupByName', 'unconditional');
-                }
-                if(!timeoutGroup){
-                    await context.dispatch('addForwardGroup', {
-                        name: 'timeout'
-                    });
-                    await context.dispatch('loadMappings');
-                    await context.dispatch('loadForwardGroups');
-                    timeoutGroup = await context.dispatch('getForwardGroupByName', 'timeout');
-                }
-
-                if(noSelfNumber){
                         await context.dispatch('replaceDestinations', {
                             groupName: 'unconditional',
                             destinations: timeoutGroup.destinations
                         });
                         await context.dispatch('deleteForwardGroup', timeoutGroup);
+
+                    }
+                    else {
+                        await context.dispatch('addTempDestination', 'temp-unconditional')
+                    }
+                    await context.dispatch('loadForwardGroups');
                 }
                 else{
+                    if(unconditionalGroup && !unconditionalGroup.id.toString().includes('temp')){
+                        await context.dispatch('addForwardGroup', {
+                            name: 'timeout'
+                        });
+                        await context.dispatch('loadMappings');
+                        await context.dispatch('loadForwardGroups');
                         await context.dispatch('replaceDestinations', {
                             groupName: 'timeout',
                             destinations: unconditionalGroup.destinations
                         });
                         await context.dispatch('deleteForwardGroup', unconditionalGroup);
-
-
                     }
-                await context.dispatch('loadMappings');
+                    else{
+                        await context.dispatch('addTempDestination', 'temp-timeout')
+                    }
                     await context.dispatch('loadForwardGroups');
                 }
+            }
             catch(err){
                 console.log(err)
             }