TT#76155 CF: As a Customer, I want to remove phone numbers

Change-Id: Ie2bb101b5fac95244984098b54fcc2dcfaddd1e5

src/components/CscConfirmationDialog.vue

@@ -12,7 +12,7 @@
         </div>
         <q-btn
             slot="actions"
-            icon="exit_to_app"
+            :icon="titleIcon"
             color="primary"
             flat
             @click="confirm"

src/components/pages/NewCallForward/CscCallForwardGroup.vue

@@ -8,7 +8,6 @@
         >
             {{ group.title }}
         </div>
-
         <div
             v-for="(destination, index) in group.destinations"
             :key="genKey()"
@@ -17,9 +16,9 @@
                 :destination="destination"
                 :index="index"
                 :groupId="group.id"
+                :groupName="group.name"
             />
         </div>
-
         <div class="row csc-cf-destination-cont">
                 <div class="col col-xs-12 col-md-4 text-right"></div>
                 <div
@@ -98,7 +97,6 @@
     </div>
 </template>
 
-
 <script>
 
     import {
@@ -174,8 +172,6 @@
         text-align right
     .csc-cf-destination-value
         text-align center
-    .csc-cf-destination-actions
-        text-align left
     .csc-cf-destination-add-destination
         padding-left 25px
         width 250px

src/components/pages/NewCallForward/CscNewCallForward.vue

@@ -74,9 +74,7 @@
 
 <script>
     import {
-        // mapState,
         mapGetters,
-        // mapMutations
     } from 'vuex'
     import {
         QSpinnerDots,
@@ -122,9 +120,6 @@
 
         },
         computed: {
-            // ...mapState('newCallForward', [
-            //     'forwardGroups'
-            // ]),
             ...mapGetters('newCallForward', [
                 'primaryNumber',
                 'subscriberDisplayName',

src/components/pages/NewCallForward/CscNewCallForwardDestination.vue

@@ -1,5 +1,8 @@
 <template>
-		<div class="row csc-cf-destination-cont">
+		<div
+			class="row csc-cf-destination-cont"
+			:class="removed"
+		>
 			<div class="col col-xs-12 col-md-4 text-right">
 				{{ $t('pages.newCallForward.destinationTimeoutLabel') }}
 				<span class='csc-cf-timeout'>
@@ -23,7 +26,7 @@
 				</span>
 				{{ $t('pages.newCallForward.destinationNumberLabel') }}
 			</div>
-			<div class="col text-left csc-cf-dest-number-cont">
+			<div class="col text-left col-xs-12 col-md-2 csc-cf-dest-number-cont">
 
 				<div class='csc-cf-destination'>
 					{{ !this.destinationNumber || this.destinationNumber.length < 2
@@ -43,8 +46,20 @@
 					</q-popover>
 				</div>
 			</div>
-			<div class="col col-xs-12 col-md-5 ">
-				<!-- TODO add remove btn -->
+			<div class="col col-xs-12 col-md-5 csc-cf-destination-actions">
+				<q-icon
+					name="delete"
+					color="negative"
+					size="24px"
+					@click="showConfirmDialog"
+				/>
+				<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})"
+					@confirm="deleteDestination"
+				/>
 			</div>
 	</div>
 
@@ -52,8 +67,6 @@
 
 <script>
 	import {
-		// QField,
-		// QToggle,
 		QIcon,
 		QBtn,
 		QPopover,
@@ -62,7 +75,7 @@
 		QItem,
 		QItemMain
 	} from 'quasar-framework'
-	// import { mapGetters } from 'vuex'
+	import CscConfirmDialog from "../../CscConfirmationDialog";
 	import CscNewCallForwardAddDestinationForm from './CscNewCallForwardAddDestinationForm'
     export default {
         name: 'csc-new-call-forward-destination',
@@ -74,10 +87,12 @@
 			QList,
 			QItem,
 			QItemMain,
+			CscConfirmDialog,
 			CscNewCallForwardAddDestinationForm
 		},
         props: [
 			'groupId',
+			'groupName',
             'destination',
 			'index'
         ],
@@ -88,7 +103,13 @@
 			return {
 				destinationTimeout: 0,
 				destinationNumber: null,
-				destinationIndex: null
+				destinationIndex: null,
+				isRemoved: false
+			}
+		},
+		computed: {
+			removed(){
+				return this.isRemoved ? "csc-cf-removed-destination" : "";
 			}
 		},
         methods: {
@@ -106,6 +127,19 @@
 					timeout: this.destinationTimeout,
 					forwardGroupId: this.groupId
 				});
+			},
+			showConfirmDialog(){
+				this.$refs.confirmDialog.open();
+			},
+			deleteDestination(){
+				this.isRemoved = true;
+				setTimeout(async ()=>{
+					await this.$store.dispatch('newCallForward/removeDestination', {
+						destination: this.destination,
+						forwardGroupId: this.groupId
+					});
+					await this.$store.dispatch('newCallForward/loadForwardGroups');
+				}, 1200);
 			}
 		}
     }
@@ -130,7 +164,11 @@
 		padding 0 20px 0 20px
 	.csc-cf-dest-number-cont
 		padding-left 30px
-
-
-
+	.csc-cf-destination-actions
+		text-align left
+		cursor pointer
+	.csc-cf-removed-destination
+		visibility hidden
+		opacity 0
+		transition visibility 0s 1s, opacity 1s linear
 </style>

src/locales/en.json

@@ -219,7 +219,9 @@
             "destinationNumberLabel": "seconds forwarded to",
             "destinationLabel": "Destination",
             "addDestinationLabel": "Add destination",
-            "allCallsForwardedTo": "All calls forwarded to"
+            "allCallsForwardedTo": "All calls forwarded to",
+            "cancelDialogTitle": "Delete from {groupName} forwarding",
+            "cancelDialogText": "You are about to delete {destination} from {groupName} call forwarding"
         },
         "callForward": {
             "titles": {

src/store/new-call-forward.js

@@ -86,15 +86,9 @@ export default {
             destination.timeout =  data.timeout;
             Vue.set(group.destinations, data.index, destination)
         },
-        // loadDestinationsets(state, destinationsets){
-        //     state.destinationsets = destinationsets;
-        // },
         loadForwardGroups(state, forwardGroups){
             state.forwardGroups = forwardGroups;
         },
-        // loadDestinations(state, destinations){
-        //     state.destinations = destinations;
-        // },
     },
     actions: {
         async loadForwardGroups(context) {
@@ -106,9 +100,6 @@ export default {
                 console.log(err)
             }
         },
-        // loadDestinations(context, destinations){
-        //     context.commit('loadDestinations', destinations);
-        // },
         async addForwardGroup(context, name) {
             try{
                 const destination = {
@@ -152,8 +143,25 @@ export default {
                     id: data.forwardGroupId,
                     data: [...group.destinations, destination]
                 });
+            }
+            catch(err){
+                console.log(err);
+            }
+        },
+        async removeDestination(context, data){
+            try{
+
+                let group = context.state.forwardGroups.find((group)=>{
+                    return group.id === data.forwardGroupId;
+                });
 
-                // context.commit('addDestination', group.id, destination);
+                group.destinations = group.destinations.filter(($destination) => {
+                    return $destination.destination !== data.destination.destination;
+                });
+                await addDestinationToDestinationset({
+                    id: group.id,
+                    data: group.destinations
+                });
             }
             catch(err){
                 console.log(err);