TT#36010 PBXConfig: As a Customer, I want to see a toast after each successful action

Change-Id: I223e92cfd47358ab4c9fb0df065cc29de616fb05

src/components/pages/CallBlocking/CscCallBlocking.vue

@@ -37,7 +37,7 @@
             </div>
         </div>
         <div>
-            <q-card class="blocked-number" v-for="(number, index) in numbers">
+            <q-card class="blocked-number" :key="index" v-for="(number, index) in numbers">
                 <q-card-title>
                     <q-icon v-if="!(editing && editingIndex == index) && enabled == 'blacklist'" name="fa-ban" color="negative" size="22px"/>
                     <q-icon v-if="!(editing && editingIndex == index) && enabled == 'whitelist'" name="check" color="primary" size="22px"/>

src/components/pages/PbxConfiguration/CscPbxGroups.vue

@@ -35,6 +35,7 @@
     } from 'quasar-framework'
     import aliasNumberOptions from '../../../mixins/alias-number-options'
     import itemError from '../../../mixins/item-error'
+    import { showToast } from '../../../helpers/ui'
 
     export default {
         mixins: [aliasNumberOptions, itemError],
@@ -93,9 +94,15 @@
                 'seats',
                 'aliasNumbers',
                 'addState',
+                'removeState',
                 'isAdding',
                 'isUpdating',
                 'updateItemId',
+                'isUpdatingAliasNumbers',
+                'updateAliasNumbersItemId',
+                'isUpdatingGroupsAndSeats',
+                'updateGroupsAndSeatsItemId',
+                'updateState',
                 'isRemoving',
                 'removeItemId',
                 'listState',
@@ -103,20 +110,48 @@
                 'isListRequesting',
                 'isListLoadingVisible',
                 'listCurrentPage',
-                'listLastPage'
+                'listLastPage',
+                'lastAddedGroup',
+                'lastRemovedGroup',
+                'lastUpdatedField',
+                'updateAliasNumbersState',
+                'updateGroupsAndSeatsState'
             ])
         },
         watch: {
             addState(state) {
                 if(state === 'succeeded') {
                     this.disableAddForm();
+                    showToast(this.$t('pbxConfig.toasts.addedGroupToast', { group: this.lastAddedGroup }));
+                }
+            },
+            removeState(state) {
+                if(state === 'succeeded') {
+                    showToast(this.$t('pbxConfig.toasts.removedGroupToast', { group: this.lastRemovedGroup }));
+                }
+            },
+            updateState(state) {
+                if(state === 'succeeded') {
+                    showToast(this.$t('pbxConfig.toasts.changedFieldToast', this.lastUpdatedField));
+                }
+            },
+            updateAliasNumbersState(state) {
+                if(state === 'succeeded') {
+                    showToast(this.$t('pbxConfig.toasts.updatedAliasNumbersToast'));
+                }
+            },
+            updateGroupsAndSeatsState(state) {
+                if(state === 'succeeded') {
+                    showToast(this.$t('pbxConfig.toasts.updatedSeatsInGroupToast', {group: this.seat}));
                 }
             }
         },
         methods: {
             isItemLoading(groupId) {
                 return (this.isUpdating && this.updateItemId + "" === groupId + "") ||
-                    (this.isRemoving && this.removeItemId + "" === groupId + "");
+                    (this.isRemoving && this.removeItemId + "" === groupId + "") ||
+                    (this.isUpdatingAliasNumbers && this.updateAliasNumbersItemId + "" === groupId + "") ||
+                    (this.isUpdatingGroupsAndSeats && this.updateGroupsAndSeatsItemId + "" === groupId + "");
             },
             resetAddForm() {
                 this.$refs.addForm.reset();

src/components/pages/PbxConfiguration/CscPbxSeats.vue

@@ -33,6 +33,7 @@
     import aliasNumberOptions from '../../../mixins/alias-number-options'
     import itemError from '../../../mixins/item-error'
     import { mapGetters } from 'vuex'
+    import { showToast } from '../../../helpers/ui'
 
     export default {
         mixins: [aliasNumberOptions, itemError],
@@ -58,9 +59,14 @@
                 'seats',
                 'groups',
                 'addState',
+                'removeState',
                 'isAdding',
                 'isUpdating',
                 'updateItemId',
+                'isUpdatingAliasNumbers',
+                'updateAliasNumbersItemId',
+                'isUpdatingGroupsAndSeats',
+                'updateGroupsAndSeatsItemId',
                 'isRemoving',
                 'removeItemId',
                 'listState',
@@ -68,7 +74,12 @@
                 'isListRequesting',
                 'isListLoadingVisible',
                 'listCurrentPage',
-                'listLastPage'
+                'listLastPage',
+                'lastAddedSeat',
+                'lastRemovedSeat',
+                'lastUpdatedField',
+                'updateAliasNumbersState',
+                'updateGroupsAndSeatsState'
             ]),
             groupOptions() {
                 let groups = [];
@@ -86,13 +97,36 @@
             addState(state) {
                 if(state === 'succeeded') {
                     this.disableAddForm();
+                    showToast(this.$t('pbxConfig.toasts.addedSeatToast', { seat: this.lastAddedSeat }));
+                }
+            },
+            removeState(state) {
+                if(state === 'succeeded') {
+                    showToast(this.$t('pbxConfig.toasts.removedSeatToast', { seat: this.lastRemovedSeat }));
+                }
+            },
+            updateState(state) {
+                if(state === 'succeeded') {
+                    showToast(this.$t('pbxConfig.toasts.changedFieldToast', this.lastUpdatedField));
+                }
+            },
+            updateAliasNumbersState(state) {
+                if(state === 'succeeded') {
+                    showToast(this.$t('pbxConfig.toasts.updatedAliasNumbersToast'));
+                }
+            },
+            updateGroupsAndSeatsState(state) {
+                if(state === 'succeeded') {
+                    showToast(this.$t('pbxConfig.toasts.updatedGroupsInSeatToast', {seat: this.group}));
                 }
             }
         },
         methods: {
             isItemLoading(seatId) {
                 return (this.isUpdating && this.updateItemId + "" === seatId + "") ||
-                    (this.isRemoving && this.removeItemId + "" === seatId + "");
+                    (this.isRemoving && this.removeItemId + "" === seatId + "") ||
+                    (this.isUpdatingAliasNumbers && this.updateAliasNumbersItemId + "" === seatId + "") ||
+                    (this.isUpdatingGroupsAndSeats && this.updateGroupsAndSeatsItemId + "" === seatId + "");
             },
             resetAddForm() {
                 this.$refs.addForm.reset();

src/locales/en.json

@@ -268,12 +268,12 @@
         "addGroup": "Add Group",
         "removeGroup": "Remove group",
         "removeGroupTitle": "Remove group",
-        "removeGroupText": "You are about to remove group \"{group}\"",
+        "removeGroupText": "You are about to remove group {group}",
         "seatName": "Seat Name",
         "addSeat": "Add Seat",
         "removeSeat": "Remove seat",
         "removeSeatTitle": "Remove seat",
-        "removeSeatText": "You are about to remove seat \"{seat}\"",
+        "removeSeatText": "You are about to remove seat {seat}",
         "devicesTitle": "Devices",
         "deviceStationName": "Station name",
         "deviceIdentifier": "MAC address",
@@ -282,7 +282,17 @@
         "seatsTitle": "Seats",
         "noDevices": "No devices created yet",
         "noGroups": "No groups created yet",
-        "noSeats": "No seats created yet"
+        "noSeats": "No seats created yet",
+        "toasts": {
+            "changedFieldToast": "Changed {type} to {name}",
+            "updatedAliasNumbersToast": "Alias numbers field updated!",
+            "updatedSeatsInGroupToast": "Group seat field updated!",
+            "updatedGroupsInSeatToast": "Seat group field updated!",
+            "addedGroupToast": "Added group {group}",
+            "removedGroupToast": "Removed group {group}",
+            "addedSeatToast": "Added seat {seat}",
+            "removedSeatToast": "Removed seat {seat}"
+        }
     },
     "communication": {
         "sendFax": "Send Fax",

src/store/pbx-config/actions.js

@@ -25,6 +25,7 @@ export default {
         group.customerId = context.state.pilot.customer_id;
         group.domainId = context.state.pilot.domain_id;
         context.commit('addItemRequesting', group);
+        context.commit('lastAddedGroup', group.name);
         addGroup(group).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(()=>{
@@ -35,6 +36,7 @@ export default {
     },
     setGroupName(context, group) {
         context.commit('updateItemRequesting', group);
+        context.commit('lastUpdatedField', {name: group.name, type: 'group name'});
         setGroupName(group.id, group.name).then(() => {
             return context.dispatch('listGroups', true);
         }).then(()=>{
@@ -45,6 +47,7 @@ export default {
     },
     setGroupExtension(context, group) {
         context.commit('updateItemRequesting', group);
+        context.commit('lastUpdatedField', {name: group.extension, type: 'group extension'});
         setGroupExtension(group.id, group.extension).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(() => {
@@ -55,6 +58,7 @@ export default {
     },
     setGroupHuntPolicy(context, group) {
         context.commit('updateItemRequesting', group);
+        context.commit('lastUpdatedField', {name: group.huntPolicy + " ringing", type: 'group hunt policy'});
         setGroupHuntPolicy(group.id, group.huntPolicy).then(() => {
             return context.dispatch('listGroups', true);
         }).then(()=>{
@@ -65,6 +69,7 @@ export default {
     },
     setGroupHuntTimeout(context, group) {
         context.commit('updateItemRequesting', group);
+        context.commit('lastUpdatedField', {name: group.huntTimeout + " seconds", type: 'group hunt timeout'});
         setGroupHuntTimeout(group.id, group.huntTimeout).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(() => {
@@ -74,30 +79,31 @@ export default {
         });
     },
     updateAliasNumbers(context, data) {
-        context.commit('updateItemRequesting', data.item);
+        context.commit('updateAliasNumbersRequesting', data.item);
         Promise.all([
             assignNumbers(data.add, data.item.id),
             assignNumbers(data.remove, context.getters.pilotId)
         ]).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(()=>{
-            context.commit('updateItemSucceeded');
+            context.commit('updateAliasNumbersSucceeded');
         }).catch((err)=>{
-            context.commit('updateItemFailed', err.message);
+            context.commit('updateAliasNumbersFailed', err.message);
         });
     },
     updateSeats(context, group) {
-        context.commit('updateItemRequesting', group);
+        context.commit('updateGroupsAndSeatsRequesting', group);
         updateGroupSeats(group.id, group.seats).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(() => {
-            context.commit('updateItemSucceeded');
+            context.commit('updateGroupsAndSeatsSucceeded');
         }).catch((err) => {
-            context.commit('updateItemFailed', err.message);
+            context.commit('updateGroupsAndSeatsFailed', err.message);
         });
     },
     removeGroup(context, group) {
         context.commit('removeItemRequesting', group);
+        context.commit('lastRemovedGroup', group.name);
         removeGroup(group.id).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(()=>{
@@ -124,6 +130,7 @@ export default {
         seat.customerId = context.state.pilot.customer_id;
         seat.domainId = context.state.pilot.domain_id;
         context.commit('addItemRequesting', seat);
+        context.commit('lastAddedSeat', seat.name);
         addSeat(seat).then(()=>{
             return context.dispatch('listSeats', true);
         }).then(()=>{
@@ -134,6 +141,7 @@ export default {
     },
     setSeatName(context, seat) {
         context.commit('updateItemRequesting', seat);
+        context.commit('lastUpdatedField', {name: seat.name, type: 'seat name'});
         setSeatName(seat.id, seat.name).then(() => {
             return context.dispatch('listSeats', true);
         }).then(()=>{
@@ -144,6 +152,7 @@ export default {
     },
     setSeatExtension(context, seat) {
         context.commit('updateItemRequesting', seat);
+        context.commit('lastUpdatedField', {name: seat.extension, type: 'seat extension'});
         setSeatExtension(seat.id, seat.extension).then(()=>{
             return context.dispatch('listSeats', true);
         }).then(() => {
@@ -153,17 +162,18 @@ export default {
         });
     },
     updateGroups(context, seat) {
-        context.commit('updateItemRequesting', seat);
+        context.commit('updateGroupsAndSeatsRequesting', seat);
         updateSeatGroups(seat.id, seat.groups).then(()=>{
             return context.dispatch('listSeats', true);
         }).then(() => {
-            context.commit('updateItemSucceeded');
+            context.commit('updateGroupsAndSeatsSucceeded');
         }).catch((err) => {
-            context.commit('updateItemFailed', err.message);
+            context.commit('updateGroupsAndSeatsFailed', err.message);
         });
     },
     removeSeat(context, seat) {
         context.commit('removeItemRequesting', seat);
+        context.commit('lastRemovedSeat', seat.name);
         removeSeat(seat.id).then(()=>{
             return context.dispatch('listSeats', true);
         }).then(()=>{

src/store/pbx-config/getters.js

@@ -73,18 +73,42 @@ export default {
     isUpdating(state) {
         return state.updateState === RequestState.requesting;
     },
+    isUpdatingAliasNumbers(state) {
+        return state.updateAliasNumbersState === RequestState.requesting;
+    },
+    isUpdatingGroupsAndSeats(state) {
+        return state.updateGroupsAndSeatsState === RequestState.requesting;
+    },
     updateState(state) {
         return state.updateState;
     },
     updateItem(state) {
         return state.updateItem;
     },
+    updateGroupsAndSeatsItem(state) {
+        return state.updateGroupsAndSeatsItem;
+    },
+    updateAliasNumbersItem(state) {
+        return state.updateAliasNumbersItem;
+    },
     updateItemId(state, getters) {
         if(_.isObject(getters.updateItem)) {
             return getters.updateItem.id;
         }
         return null;
     },
+    updateGroupsAndSeatsItemId(state, getters) {
+        if(_.isObject(getters.updateGroupsAndSeatsItem)) {
+            return getters.updateGroupsAndSeatsItem.id;
+        }
+        return null;
+    },
+    updateAliasNumbersItemId(state, getters) {
+        if(_.isObject(getters.updateAliasNumbersItem)) {
+            return getters.updateAliasNumbersItem.id;
+        }
+        return null;
+    },
     updateError(state) {
         return state.updateError;
     },
@@ -129,5 +153,26 @@ export default {
         return (id)=>{
             return state.deviceLoadingStates[id + ""] === true;
         }
+    },
+    lastAddedGroup(state) {
+        return state.lastAddedGroup;
+    },
+    lastRemovedGroup(state) {
+        return state.lastRemovedGroup;
+    },
+    lastUpdatedField(state) {
+        return state.lastUpdatedField;
+    },
+    updateAliasNumbersState(state) {
+        return state.updateAliasNumbersState;
+    },
+    updateGroupsAndSeatsState(state) {
+        return state.updateGroupsAndSeatsState;
+    },
+    lastAddedSeat(state) {
+        return state.lastAddedSeat;
+    },
+    lastRemovedSeat(state) {
+        return state.lastRemovedSeat;
     }
 }

src/store/pbx-config/mutations.js

@@ -93,6 +93,32 @@ export default {
         state.updateState = RequestState.failed;
         state.updateError = error;
     },
+    updateAliasNumbersRequesting(state, item) {
+        state.updateAliasNumbersState = RequestState.requesting;
+        state.updateAliasNumbersError = null;
+        state.updateAliasNumbersItem = item;
+    },
+    updateAliasNumbersSucceeded(state) {
+        state.updateAliasNumbersState = RequestState.succeeded;
+        state.updateAliasNumbersError = null;
+    },
+    updateAliasNumbersFailed(state, error) {
+        state.updateAliasNumbersState = RequestState.failed;
+        state.updateAliasNumbersError = error;
+    },
+    updateGroupsAndSeatsRequesting(state, item) {
+        state.updateGroupsAndSeatsState = RequestState.requesting;
+        state.updateGroupsAndSeatsError = null;
+        state.updateGroupsAndSeatsItem = item;
+    },
+    updateGroupsAndSeatsSucceeded(state) {
+        state.updateGroupsAndSeatsState = RequestState.succeeded;
+        state.updateGroupsAndSeatsError = null;
+    },
+    updateGroupsAndSeatsFailed(state, error) {
+        state.updateGroupsAndSeatsState = RequestState.failed;
+        state.updateGroupsAndSeatsError = error;
+    },
     removeItemRequesting(state, item) {
         state.removeState = RequestState.requesting;
         state.removeError = null;
@@ -154,5 +180,20 @@ export default {
         let deviceLoadingErrors = _.clone(state.deviceLoadingErrors);
         deviceLoadingErrors[deviceId + ""] = errorMessage;
         state.deviceLoadingErrors = deviceLoadingErrors;
+    },   
+    lastAddedGroup(state, group) {
+        state.lastAddedGroup = group;
+    },
+    lastRemovedGroup(state, group) {
+        state.lastRemovedGroup = group;
+    },
+    lastAddedSeat(state, seat) {
+        state.lastAddedSeat = seat;
+    },
+    lastRemovedSeat(state, seat) {
+        state.lastRemovedSeat = seat;
+    },
+    lastUpdatedField(state, group) {
+        state.lastUpdatedField = group;
     }
 }

src/store/pbx-config/state.js

@@ -31,5 +31,14 @@ export default {
     removeError: null,
     removeItem: null,
     deviceLoadingStates: {},
-    deviceLoadingErrors: {}
+    deviceLoadingErrors: {},
+    lastAddedGroup: null,
+    lastRemovedGroup: null,
+    lastAddedSeat: null,
+    lastRemovedSeat: null,
+    lastUpdatedField: null,
+    updateAliasNumbersState: RequestState.initiated,
+    updateAliasNumbersItem: null,
+    updateGroupsAndSeatsState: RequestState.initiated,
+    updateGroupsAndSeatsItem: null
 }