sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#61810 Activate toasts and error messages for crud operations on call queues

Browse Source 
Change-Id: Iec9ce36e5b6183b2a35dd2053b0317fa09a1f61c
changes/64/31864/1
Hans-Peter Herzog 6 years ago
parent 5a153817ea
commit 83771d7d56
3 changed files with 107 additions and 180 deletions
Show Stats Download Patch File Download Diff File

216
src/components/pages/PbxConfiguration/CscPbxCallQueues.vue
Unescape View File

@ -65,74 +65,6 @@
@cancel="closeCallQueueRemovalDialog" @cancel="closeCallQueueRemovalDialog"
/> />
</csc-page> </csc-page>
<!--<csc-page-->
<!--:is-list="true"-->
<!--&gt;-->
<!--<div-->
<!--v-show="!addFormEnabled"-->
<!--class="row justify-center"-->
<!--&gt;-->
<!--<q-btn-->
<!--color="primary"-->
<!--icon="add"-->
<!--flat-->
<!--@click="enableAddForm"-->
<!--&gt;-->
<!--{{ $t('pbxConfig.addConfig') }}-->
<!--</q-btn>-->
<!--</div>-->
<!--<div-->
<!--class="row justify-center"-->
<!--v-show="addFormEnabled"-->
<!--&gt;-->
<!--<csc-pbx-call-queue-add-form-->
<!--class="col-xs-12 col-md-6 csc-list-form"-->
<!--ref="addForm"-->
<!--:options="callQueueGroupsAndSeatsOptions"-->
<!--:loading="isAdding"-->
<!--@save="addConfig"-->
<!--@cancel="disableAddForm"-->
<!--/>-->
<!--</div>-->
<!--<div-->
<!--v-if="isListLoadingVisible"-->
<!--class="row justify-center"-->
<!--&gt;-->
<!--<csc-spinner />-->
<!--</div>-->
<!--<div>-->
<!--<q-list-->
<!--striped-odd-->
<!--no-border-->
<!--multiline-->
<!--:highlight="!isMobile"-->
<!--&gt;-->
<!--<csc-pbx-call-queue-->
<!--v-for="(subscriber, index) in callQueueGroupsAndSeats"-->
<!--:id="`queue-${subscriber.id}`"-->
<!--:key="index"-->
<!--:subscriber="subscriber"-->
<!--:loading="isItemLoading(subscriber.id)"-->
<!--@save-queue-length="setQueueLength"-->
<!--@save-wrap-up-time="setWrapUpTime"-->
<!--:highlight="highlight(subscriber)"-->
<!--@remove="removeConfigDialog"-->
<!--/>-->
<!--</q-list>-->
<!--</div>-->
<!--<div-->
<!--v-if="callQueueGroupsAndSeats.length === 0 && !isListRequesting"-->
<!--class="row justify-center csc-no-entities"-->
<!--&gt;-->
<!--{{ $t('pbxConfig.noCallQueues') }}-->
<!--</div>-->
<!--<csc-remove-dialog-->
<!--ref="removeDialog"-->
<!--:title="$t('pbxConfig.removeConfigTitle')"-->
<!--:message="removeDialogMessage"-->
<!--@remove="removeConfig"-->
<!--/>-->
<!--</csc-page>-->
</template> </template>
<script> <script>
@ -148,6 +80,14 @@
mapGetters, mapGetters,
mapMutations mapMutations
} from 'vuex' } from 'vuex'
import {
CreationState,
RequestState
} from "../../../store/common"
import {
showGlobalError,
showToast
} from '../../../helpers/ui'
import { import {
QField, QField,
QInput, QInput,
@ -159,25 +99,14 @@
QItemSide, QItemSide,
QItemMain, QItemMain,
QItemTile, QItemTile,
// Platform,
QSpinnerDots, QSpinnerDots,
QBtn, QBtn,
QSlideTransition QSlideTransition
} from 'quasar-framework' } from 'quasar-framework'
// import {
// showToast
// } from '../../../helpers/ui'
// import {
// scroll
// } from 'quasar-framework'
import CscSpinner from "../../CscSpinner"; import CscSpinner from "../../CscSpinner";
import CscList from "../../CscList"; import CscList from "../../CscList";
import CscFade from "../../transitions/CscFade"; import CscFade from "../../transitions/CscFade";
import CscListActionButton from "../../CscListActionButton"; import CscListActionButton from "../../CscListActionButton";
// const {
// getScrollTarget,
// setScrollPosition
// } = scroll
export default { export default {
components: { components: {
CscListActionButton, CscListActionButton,
@ -206,8 +135,6 @@
}, },
data () { data () {
return { return {
// addFormEnabled: false,
// currentRemovingSubscriber: null
} }
}, },
mounted() { mounted() {
@ -224,6 +151,12 @@
'subscriberMap', 'subscriberMap',
'defaultMaxQueueLength', 'defaultMaxQueueLength',
'defaultQueueWrapUpTime', 'defaultQueueWrapUpTime',
'callQueueCreationState',
'callQueueUpdateState',
'callQueueRemovalState',
'callQueueCreationError',
'callQueueUpdateError',
'callQueueRemovalError'
]), ]),
...mapGetters('pbxCallQueues', [ ...mapGetters('pbxCallQueues', [
'isCallQueueListRequesting', 'isCallQueueListRequesting',
@ -231,43 +164,11 @@
'isCallQueueCreating', 'isCallQueueCreating',
'getCallQueueRemoveDialogMessage', 'getCallQueueRemoveDialogMessage',
'isCallQueueLoading', 'isCallQueueLoading',
'isCallQueueExpanded' 'isCallQueueExpanded',
'getCallQueueCreationToastMessage',
'getCallQueueUpdateToastMessage',
'getCallQueueRemovalToastMessage'
]) ])
// ...mapGetters('pbxConfig', [
// 'callQueueGroupsAndSeats',
// 'isListLoadingVisible',
// 'isListRequesting',
// 'callQueueGroupsAndSeatsOptions',
// 'isAdding',
// 'addState',
// 'isUpdating',
// 'updateItemId',
// 'removeState',
// 'isRemoving',
// 'lastAddedCallQueue'
// ]),
// isMobile() {
// return Platform.is.mobile;
// },
// callQueueItem() {
// return this.$route.query.item;
// },
// handleScroll () {
// const el = document.getElementById(`queue-${this.callQueueItem}`)
// const target = el ? getScrollTarget(el) : null;
// const offset = el ? el.offsetTop - el.scrollHeight : null;
// const duration = 200
// if (this.callQueueItem && target) {
// setScrollPosition(target, offset, duration)
// }
// },
// removeDialogMessage() {
// if (this.currentRemovingSubscriber !== null) {
// return this.$t('pbxConfig.removeConfigText', {
// subscriber: this.currentRemovingSubscriber.display_name
// });
// }
// }
}, },
methods: { methods: {
...mapActions('pbx', [ ...mapActions('pbx', [
@ -300,63 +201,34 @@
} }
this.callQueueRemovalCanceled(); this.callQueueRemovalCanceled();
} }
// addConfig(data) {
// let config = {
// max_queue_length: data.max_queue_length,
// queue_wrap_up_time: data.queue_wrap_up_time
// };
// this.$store.dispatch('pbxConfig/addCallQueueConfig', {
// id: data.subscriber_id,
// config: config
// });
// },
// enableAddForm() {
// this.resetAddForm();
// this.addFormEnabled = true;
// },
// disableAddForm() {
// this.resetAddForm();
// this.addFormEnabled = false;
// },
// resetAddForm() {
// this.$refs.addForm.reset();
// },
// setQueueLength(subscriber) {
// this.$store.dispatch('pbxConfig/setQueueLength', subscriber);
// },
// setWrapUpTime(subscriber) {
// this.$store.dispatch('pbxConfig/setWrapUpTime', subscriber);
// },
// isItemLoading(subscriberId) {
// return (this.isUpdating && this.updateItemId + "" === subscriberId + "") ||
// (this.isRemoving && this.currentRemovingSubscriber.id + "" === subscriberId + "");
// },
// highlight(subscriber) {
// return subscriber.id == this.$route.query.item;
// },
// removeConfigDialog(subscriber) {
// this.currentRemovingSubscriber = subscriber;
// this.$refs.removeDialog.open();
// },
// removeConfig() {
// this.$store.dispatch('pbxConfig/removeCallQueue', this.currentRemovingSubscriber)
// }
}, },
watch: { watch: {
// addState(state) { callQueueCreationState(state) {
// if (state === 'succeeded') { if(state === CreationState.created) {
// this.disableAddForm(); this.$scrollTo(this.$parent.$el);
// showToast(this.$t('pbxConfig.toasts.addedCallQueueToast', showToast(this.getCallQueueCreationToastMessage);
// { name: this.lastAddedCallQueue })); }
// } else if(state === CreationState.error) {
// }, showGlobalError(this.callQueueCreationError);
// callQueueGroupsAndSeats(state) { }
// if (state.length > 0) { },
// setTimeout(() => { callQueueUpdateState(state) {
// this.handleScroll; if(state === RequestState.succeeded) {
// }, 500); showToast(this.getCallQueueUpdateToastMessage);
// } }
// } else if(state === RequestState.failed) {
showGlobalError(this.callQueueUpdateError);
}
},
callQueueRemovalState(state) {
if(state === RequestState.succeeded) {
this.$scrollTo(this.$parent.$el);
showToast(this.getCallQueueRemovalToastMessage);
}
else if(state === RequestState.failed) {
showGlobalError(this.callQueueRemovalError);
}
}
} }
} }
</script> </script>

3
src/locales/en.json
Unescape View File

@ -471,6 +471,9 @@
"addCallQueue": "Add call queue", "addCallQueue": "Add call queue",
"callQueueRemovalDialogTitle": "Remove call queue", "callQueueRemovalDialogTitle": "Remove call queue",
"callQueueRemovalDialogText": "You are about to remove call queue for {subscriber}", "callQueueRemovalDialogText": "You are about to remove call queue for {subscriber}",
"callQueueCreationToast": "Created call queue for {callQueue} successfully",
"callQueueUpdateToast": "Updated {field} for call queue {callQueue} successfully",
"callQueueRemovalToast": "Removed call queue for {callQueue} successfully",
"soundSetName": "Name", "soundSetName": "Name",
"soundSetDescription": "Description", "soundSetDescription": "Description",
"soundSetDefault": "Default sound set for all seats and groups", "soundSetDefault": "Default sound set for all seats and groups",

68
src/store/pbx-callqueues.js
Unescape View File

@ -28,10 +28,14 @@ export default {
callQueueSelected: null, callQueueSelected: null,
callQueueCreationState: CreationState.initiated, callQueueCreationState: CreationState.initiated,
callQueueCreationData: null, callQueueCreationData: null,
callQueueCreationError: null,
callQueueUpdateState: RequestState.initiated, callQueueUpdateState: RequestState.initiated,
callQueueUpdating: null, callQueueUpdating: null,
callQueueUpdatingField: null,
callQueueUpdateError: null,
callQueueRemovalState: RequestState.initiated, callQueueRemovalState: RequestState.initiated,
callQueueRemoving: null, callQueueRemoving: null,
callQueueRemovalError: null,
subscriberMap: {}, subscriberMap: {},
defaultMaxQueueLength: 5, defaultMaxQueueLength: 5,
defaultQueueWrapUpTime: 10 defaultQueueWrapUpTime: 10
@ -73,6 +77,45 @@ export default {
}); });
} }
return ''; return '';
},
getCallQueueRemovingName(state) {
let subscriber = state.subscriberMap[state.callQueueRemoving.id];
return _.get(subscriber, 'display_name', '');
},
getCallQueueCreatingName(state) {
let subscriber = state.subscriberMap[state.callQueueCreationData.subscriber_id];
return _.get(subscriber, 'display_name', '');
},
getCallQueueUpdatingName(state) {
let subscriber = state.subscriberMap[state.callQueueUpdating.id];
return _.get(subscriber, 'display_name', '');
},
getCallQueueUpdatingField(state) {
return state.callQueueUpdatingField;
},
getCallQueueRemovalDialogMessage(state, getters) {
if(getters.isCallQueueRemoving) {
return i18n.t('pbxConfig.callQueueRemovalDialogMessage', {
callQueue: getters.getCallQueueRemovingName
});
}
return '';
},
getCallQueueCreationToastMessage(state, getters) {
return i18n.t('pbxConfig.callQueueCreationToast', {
callQueue: getters.getCallQueueCreatingName
});
},
getCallQueueUpdateToastMessage(state, getters) {
return i18n.t('pbxConfig.callQueueUpdateToast', {
callQueue: getters.getCallQueueUpdatingName,
field: getters.getCallQueueUpdatingField
});
},
getCallQueueRemovalToastMessage(state, getters) {
return i18n.t('pbxConfig.callQueueRemovalToast', {
callQueue: getters.getCallQueueRemovingName
});
} }
}, },
mutations: { mutations: {
@ -98,14 +141,16 @@ export default {
}); });
state.callQueueListVisible = true; state.callQueueListVisible = true;
}, },
callQueueCreationRequesting(state) { callQueueCreationRequesting(state, data) {
state.callQueueCreationState = CreationState.creating; state.callQueueCreationState = CreationState.creating;
state.callQueueCreationData = data;
}, },
callQueueCreationSucceeded(state) { callQueueCreationSucceeded(state) {
state.callQueueCreationState = CreationState.created; state.callQueueCreationState = CreationState.created;
}, },
callQueueCreationFailed(state) { callQueueCreationFailed(state, err) {
state.callQueueCreationState = CreationState.error; state.callQueueCreationState = CreationState.error;
state.callQueueCreationError = err;
}, },
callQueueRemovalRequesting(state, callQueueId) { callQueueRemovalRequesting(state, callQueueId) {
state.callQueueRemovalState = RequestState.requesting; state.callQueueRemovalState = RequestState.requesting;
@ -120,12 +165,14 @@ export default {
callQueueRemovalSucceeded(state) { callQueueRemovalSucceeded(state) {
state.callQueueRemovalState = RequestState.succeeded; state.callQueueRemovalState = RequestState.succeeded;
}, },
callQueueRemovalFailed(state) { callQueueRemovalFailed(state, err) {
state.callQueueRemovalState = RequestState.failed; state.callQueueRemovalState = RequestState.failed;
state.callQueueRemovalError = err;
}, },
callQueueUpdateRequesting(state, options) { callQueueUpdateRequesting(state, options) {
state.callQueueUpdateState = RequestState.requesting; state.callQueueUpdateState = RequestState.requesting;
state.callQueueUpdating = state.callQueueMap[options.callQueueId]; state.callQueueUpdating = state.callQueueMap[options.callQueueId];
state.callQueueUpdatingField = options.field;
}, },
callQueueUpdateSucceeded(state, preferences) { callQueueUpdateSucceeded(state, preferences) {
state.callQueueUpdateState = RequestState.succeeded; state.callQueueUpdateState = RequestState.succeeded;
@ -139,8 +186,9 @@ export default {
Vue.set(state.callQueueMap, preferences.id, preferences); Vue.set(state.callQueueMap, preferences.id, preferences);
} }
}, },
callQueueUpdateFailed(state) { callQueueUpdateFailed(state, err) {
state.callQueueUpdateState = RequestState.failed; state.callQueueUpdateState = RequestState.failed;
state.callQueueUpdateError = err;
}, },
enableCallQueueAddForm(state) { enableCallQueueAddForm(state) {
state.callQueueCreationState = CreationState.input; state.callQueueCreationState = CreationState.input;
@ -184,8 +232,9 @@ export default {
}); });
}).then(()=>{ }).then(()=>{
context.commit('callQueueCreationSucceeded'); context.commit('callQueueCreationSucceeded');
}).catch(()=>{ }).catch((err)=>{
context.commit('callQueueCreationFailed'); console.debug(err);
context.commit('callQueueCreationFailed', err.message);
}); });
}, },
removeCallQueue(context) { removeCallQueue(context) {
@ -197,28 +246,31 @@ export default {
}).then(()=>{ }).then(()=>{
context.commit('callQueueRemovalSucceeded'); context.commit('callQueueRemovalSucceeded');
}).catch((err)=>{ }).catch((err)=>{
console.debug(err);
context.commit('callQueueRemovalFailed', err.message); context.commit('callQueueRemovalFailed', err.message);
}); });
}, },
setCallQueueMaxLength(context, options) { setCallQueueMaxLength(context, options) {
context.commit('callQueueUpdateRequesting', { context.commit('callQueueUpdateRequesting', {
callQueueId: options.callQueueId, callQueueId: options.callQueueId,
callQueueUpdatingField: 'maxLength' field: 'maxLength'
}); });
setCallQueueMaxLength(options).then((preferences)=>{ setCallQueueMaxLength(options).then((preferences)=>{
context.commit('callQueueUpdateSucceeded', preferences); context.commit('callQueueUpdateSucceeded', preferences);
}).catch((err)=>{ }).catch((err)=>{
console.debug(err);
context.commit('callQueueUpdateFailed', err.message); context.commit('callQueueUpdateFailed', err.message);
}); });
}, },
setCallQueueWrapUpTime(context, options) { setCallQueueWrapUpTime(context, options) {
context.commit('callQueueUpdateRequesting', { context.commit('callQueueUpdateRequesting', {
callQueueId: options.callQueueId, callQueueId: options.callQueueId,
callQueueUpdatingField: 'wrapUpTime' field: 'wrapUpTime'
}); });
setCallQueueWrapUpTime(options).then((preferences)=>{ setCallQueueWrapUpTime(options).then((preferences)=>{
context.commit('callQueueUpdateSucceeded', preferences); context.commit('callQueueUpdateSucceeded', preferences);
}).catch((err)=>{ }).catch((err)=>{
console.debug(err);
context.commit('callQueueUpdateFailed', err.message); context.commit('callQueueUpdateFailed', err.message);
}); });
}, },

Write Preview
Loading…
Cancel
Save