TT#129220 PBXSettings - CallQueue - As PBX-Attendant (Pilot, Seat, Group), I can change my CallQueue preferences
Change-Id: Ib062007aeaad0e9648850bce872e4ffc519d04cbmr10.1.1
Hugo Zigha
4 years ago
parent
f3865eb04a
commit
b9403d94b0
@ -0,0 +1,221 @@
|
|||||||
|
<template>
|
||||||
|
<csc-page
|
||||||
|
id="csc-page-voicebox"
|
||||||
|
class="row q-pa-lg"
|
||||||
|
>
|
||||||
|
<q-list
|
||||||
|
class="col col-xs-12 col-md-6"
|
||||||
|
>
|
||||||
|
<q-toggle
|
||||||
|
v-model="cloud_pbx_callqueue"
|
||||||
|
:label="$t('Call Queue feature')"
|
||||||
|
:disable="isLoading"
|
||||||
|
@input="addOrRemoveCallQueue()"
|
||||||
|
/>
|
||||||
|
<csc-spinner
|
||||||
|
v-if="isLoading || !callQueue || !changes"
|
||||||
|
class="q-ml-xl"
|
||||||
|
/>
|
||||||
|
<div v-if="changes && callQueue">
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<csc-input-saveable
|
||||||
|
v-model="changes.max_queue_length"
|
||||||
|
:label="$t('Queue Length')"
|
||||||
|
:value-changed="hasMaxQueueLengthChanged"
|
||||||
|
:error="$v.changes.max_queue_length.$error"
|
||||||
|
:error-message="queueMaxLengthErrorMessage"
|
||||||
|
:disable="isLoading || !cloud_pbx_callqueue"
|
||||||
|
@undo="resetMaxQueueLength"
|
||||||
|
@save="save"
|
||||||
|
@input="$v.changes.max_queue_length.$touch"
|
||||||
|
@keypress.space.prevent
|
||||||
|
@keydown.space.prevent
|
||||||
|
@keyup.space.prevent
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section>
|
||||||
|
<csc-input-saveable
|
||||||
|
v-model="changes.queue_wrap_up_time"
|
||||||
|
:label="$t('Wrap up time')"
|
||||||
|
:value-changed="hasQueueWrapUpTimeChanged"
|
||||||
|
:error="$v.changes.queue_wrap_up_time.$error"
|
||||||
|
:error-message="queueWrapUpTimeErrorMessage"
|
||||||
|
:disable="isLoading || !cloud_pbx_callqueue"
|
||||||
|
@undo="resetQueueWrapUpTime"
|
||||||
|
@save="save"
|
||||||
|
@input="$v.changes.queue_wrap_up_time.$touch"
|
||||||
|
@keypress.space.prevent
|
||||||
|
@keydown.space.prevent
|
||||||
|
@keyup.space.prevent
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</div>
|
||||||
|
</q-list>
|
||||||
|
</csc-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
mapGetters,
|
||||||
|
mapState
|
||||||
|
} from 'vuex'
|
||||||
|
import { mapWaitingActions } from 'vue-wait'
|
||||||
|
import CscPage from 'components/CscPage'
|
||||||
|
import CscInputSaveable from 'components/form/CscInputSaveable'
|
||||||
|
import CscSpinner from 'components/CscSpinner'
|
||||||
|
import {
|
||||||
|
maxValue,
|
||||||
|
minValue,
|
||||||
|
numeric
|
||||||
|
} from 'vuelidate/lib/validators'
|
||||||
|
import { getSubscriberId } from 'src/auth'
|
||||||
|
import {
|
||||||
|
showToast
|
||||||
|
} from 'src/helpers/ui'
|
||||||
|
export default {
|
||||||
|
name: 'CscPagePbxSettingsCallQueues',
|
||||||
|
components: {
|
||||||
|
CscPage,
|
||||||
|
CscInputSaveable,
|
||||||
|
CscSpinner
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
callQueue: null,
|
||||||
|
changes: null,
|
||||||
|
cloud_pbx_callqueue: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
validations: {
|
||||||
|
changes: {
|
||||||
|
max_queue_length: {
|
||||||
|
numeric,
|
||||||
|
minValue: minValue(1),
|
||||||
|
maxValue: maxValue(99999)
|
||||||
|
},
|
||||||
|
queue_wrap_up_time: {
|
||||||
|
numeric,
|
||||||
|
minValue: minValue(1),
|
||||||
|
maxValue: maxValue(99999)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('pbxCallQueues', [
|
||||||
|
'defaultMaxQueueLength',
|
||||||
|
'defaultQueueWrapUpTime'
|
||||||
|
]),
|
||||||
|
...mapState('callSettings', [
|
||||||
|
'subscriberPreferences'
|
||||||
|
]),
|
||||||
|
...mapGetters('user', [
|
||||||
|
'getUsername'
|
||||||
|
]),
|
||||||
|
hasMaxQueueLengthChanged () {
|
||||||
|
return this.callQueue.max_queue_length !== this.changes.max_queue_length
|
||||||
|
},
|
||||||
|
hasQueueWrapUpTimeChanged () {
|
||||||
|
return this.callQueue.queue_wrap_up_time !== this.changes.queue_wrap_up_time
|
||||||
|
},
|
||||||
|
queueMaxLengthErrorMessage () {
|
||||||
|
if (!this.$v.changes.max_queue_length.numeric) {
|
||||||
|
return this.$t('{field} must consist of numeric characters only', {
|
||||||
|
field: this.$t('Queue Length')
|
||||||
|
})
|
||||||
|
} else if (!this.$v.changes.max_queue_length.minValue) {
|
||||||
|
return this.$t('{field} must be at least {minValue} second', {
|
||||||
|
field: this.$t('Queue Length'),
|
||||||
|
minValue: this.$v.changes.max_queue_length.$params.minValue.min
|
||||||
|
})
|
||||||
|
} else if (!this.$v.changes.max_queue_length.maxValue) {
|
||||||
|
return this.$t('{field} must be maximum of {maxValue} seconds', {
|
||||||
|
field: this.$t('Queue Length'),
|
||||||
|
maxValue: this.$v.changes.max_queue_length.$params.maxValue.max
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
queueWrapUpTimeErrorMessage () {
|
||||||
|
if (!this.$v.changes.queue_wrap_up_time.numeric) {
|
||||||
|
return this.$t('{field} must consist of numeric characters only', {
|
||||||
|
field: this.$t('Wrap Up Time')
|
||||||
|
})
|
||||||
|
} else if (!this.$v.changes.queue_wrap_up_time.minValue) {
|
||||||
|
return this.$t('{field} must be at least {minValue} second', {
|
||||||
|
field: this.$t('Wrap Up Time'),
|
||||||
|
minValue: this.$v.changes.queue_wrap_up_time.$params.minValue.min
|
||||||
|
})
|
||||||
|
} else if (!this.$v.changes.queue_wrap_up_time.maxValue) {
|
||||||
|
return this.$t('{field} must be maximum of {maxValue} seconds', {
|
||||||
|
field: this.$t('Wrap Up Time'),
|
||||||
|
maxValue: this.$v.changes.queue_wrap_up_time.$params.maxValue.max
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isLoading () {
|
||||||
|
return this.$wait.is('csc-pbx-call-settings-load-preferences') ||
|
||||||
|
this.$wait.is('csc-pbx-call-settings-update-preferences')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted () {
|
||||||
|
await this.loadSubscriberPreferencesAction()
|
||||||
|
this.getCallQueue()
|
||||||
|
this.changes = this.getDefaultData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapWaitingActions('callSettings', {
|
||||||
|
loadSubscriberPreferencesAction: 'csc-pbx-call-settings-load-preferences',
|
||||||
|
fieldUpdateAction: 'csc-pbx-call-settings-update-preferences'
|
||||||
|
}),
|
||||||
|
resetMaxQueueLength () {
|
||||||
|
this.changes.max_queue_length = this.getDefaultData().max_queue_length
|
||||||
|
},
|
||||||
|
resetQueueWrapUpTime () {
|
||||||
|
this.changes.queue_wrap_up_time = this.getDefaultData().queue_wrap_up_time
|
||||||
|
},
|
||||||
|
getDefaultData () {
|
||||||
|
return {
|
||||||
|
max_queue_length: this.callQueue.max_queue_length.toString() || this.defaultMaxQueueLength.toString(),
|
||||||
|
queue_wrap_up_time: this.callQueue.queue_wrap_up_time.toString() || this.defaultQueueWrapUpTime.toString()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async save () {
|
||||||
|
if (this.hasMaxQueueLengthChanged && !this.$v.changes.max_queue_length.$error) {
|
||||||
|
await this.fieldUpdateAction({ field: 'max_queue_length', value: this.changes.max_queue_length || this.defaultMaxQueueLength })
|
||||||
|
showToast(this.$t('Updated {field} for call queue {callQueue} successfully', {
|
||||||
|
callQueue: this.getUsername,
|
||||||
|
field: this.$t('Queue Length')
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
if (this.hasQueueWrapUpTimeChanged && !this.$v.changes.queue_wrap_up_time.$error) {
|
||||||
|
await this.fieldUpdateAction({ field: 'queue_wrap_up_time', value: this.changes.queue_wrap_up_time || this.defaultQueueWrapUpTime })
|
||||||
|
showToast(this.$t('Updated {field} for call queue {callQueue} successfully', {
|
||||||
|
callQueue: this.getUsername,
|
||||||
|
field: this.$t('Wrap up time')
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
this.getCallQueue()
|
||||||
|
this.changes = this.getDefaultData()
|
||||||
|
},
|
||||||
|
getCallQueue () {
|
||||||
|
this.callQueue = {
|
||||||
|
id: this.subscriberPreferences.id,
|
||||||
|
max_queue_length: this.subscriberPreferences.max_queue_length || this.defaultMaxQueueLength.toString(),
|
||||||
|
queue_wrap_up_time: this.subscriberPreferences.queue_wrap_up_time || this.defaultQueueWrapUpTime.toString(),
|
||||||
|
subscriber_id: getSubscriberId()
|
||||||
|
}
|
||||||
|
this.cloud_pbx_callqueue = this.subscriberPreferences.cloud_pbx_callqueue ? this.subscriberPreferences.cloud_pbx_callqueue : this.cloud_pbx_callqueue
|
||||||
|
},
|
||||||
|
addOrRemoveCallQueue () {
|
||||||
|
this.fieldUpdateAction({ field: 'cloud_pbx_callqueue', value: this.cloud_pbx_callqueue })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue