From 803128ea227b2a010170f5f750ff7fa47a548320 Mon Sep 17 00:00:00 2001 From: Tijana Maksimovic Date: Fri, 18 May 2018 16:03:21 +0200 Subject: [PATCH] TT#36010 PBXConfig: As a Customer, I want to see a toast after each successful action Change-Id: I223e92cfd47358ab4c9fb0df065cc29de616fb05 --- .../pages/CallBlocking/CscCallBlocking.vue | 2 +- .../pages/PbxConfiguration/CscPbxGroups.vue | 39 +++++++++++++++- .../pages/PbxConfiguration/CscPbxSeats.vue | 38 +++++++++++++++- src/locales/en.json | 16 +++++-- src/store/pbx-config/actions.js | 28 ++++++++---- src/store/pbx-config/getters.js | 45 +++++++++++++++++++ src/store/pbx-config/mutations.js | 41 +++++++++++++++++ src/store/pbx-config/state.js | 11 ++++- 8 files changed, 202 insertions(+), 18 deletions(-) diff --git a/src/components/pages/CallBlocking/CscCallBlocking.vue b/src/components/pages/CallBlocking/CscCallBlocking.vue index c2c5ad8b..323d17aa 100644 --- a/src/components/pages/CallBlocking/CscCallBlocking.vue +++ b/src/components/pages/CallBlocking/CscCallBlocking.vue @@ -37,7 +37,7 @@
- + diff --git a/src/components/pages/PbxConfiguration/CscPbxGroups.vue b/src/components/pages/PbxConfiguration/CscPbxGroups.vue index 139874e3..1c15d17a 100644 --- a/src/components/pages/PbxConfiguration/CscPbxGroups.vue +++ b/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(); diff --git a/src/components/pages/PbxConfiguration/CscPbxSeats.vue b/src/components/pages/PbxConfiguration/CscPbxSeats.vue index 3ae4305a..88816699 100644 --- a/src/components/pages/PbxConfiguration/CscPbxSeats.vue +++ b/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(); diff --git a/src/locales/en.json b/src/locales/en.json index bdc624fb..21498b1c 100644 --- a/src/locales/en.json +++ b/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", diff --git a/src/store/pbx-config/actions.js b/src/store/pbx-config/actions.js index 881b0ffe..45bc003c 100644 --- a/src/store/pbx-config/actions.js +++ b/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(()=>{ diff --git a/src/store/pbx-config/getters.js b/src/store/pbx-config/getters.js index 892e455c..932ad2a2 100644 --- a/src/store/pbx-config/getters.js +++ b/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; } } diff --git a/src/store/pbx-config/mutations.js b/src/store/pbx-config/mutations.js index f2a30b76..769c7ae6 100644 --- a/src/store/pbx-config/mutations.js +++ b/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; } } diff --git a/src/store/pbx-config/state.js b/src/store/pbx-config/state.js index 5d5f5038..8f9e8c94 100644 --- a/src/store/pbx-config/state.js +++ b/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 }