TT#124272 AutoAttendant - As PBX-Attendant (Pilot, Seat, Group), I can change my AutoAttendant configuration
Change-Id: If6238f053f44e4b880dfbbe03d8b44e5e65ce8d9mr10.0
CORP\hzigha
4 years ago
committed by
hzigha
parent
a282cd29ae
commit
17f2345b30
@ -0,0 +1,162 @@
|
|||||||
|
<template>
|
||||||
|
<csc-list-item
|
||||||
|
ref="listItem"
|
||||||
|
icon="dialpad"
|
||||||
|
:expanded="expanded"
|
||||||
|
@toggle="toggle"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
slot="title"
|
||||||
|
>
|
||||||
|
<csc-list-item-title>
|
||||||
|
{{ $t('Slot') }}: {{ personalSlot.slot }}
|
||||||
|
</csc-list-item-title>
|
||||||
|
<q-slide-transition>
|
||||||
|
<csc-list-item-subtitle
|
||||||
|
v-if="!expanded"
|
||||||
|
>
|
||||||
|
{{ $t('Destination') }}: {{ personalSlot.destination }}
|
||||||
|
</csc-list-item-subtitle>
|
||||||
|
</q-slide-transition>
|
||||||
|
</template>
|
||||||
|
<template slot="menu">
|
||||||
|
<csc-list-menu-item
|
||||||
|
icon="delete"
|
||||||
|
icon-color="negative"
|
||||||
|
@click="confirmRowDeletion"
|
||||||
|
>
|
||||||
|
{{ $t('Remove') }}
|
||||||
|
</csc-list-menu-item>
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
slot="body"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
v-model="newDestination"
|
||||||
|
:label="$t('Destination')"
|
||||||
|
:error="$v.newDestination.$error"
|
||||||
|
:error-message="errorMessage"
|
||||||
|
@keyup.enter="save"
|
||||||
|
@input="valueChanged"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-if="hasDestinationChanged"
|
||||||
|
v-slot:append
|
||||||
|
>
|
||||||
|
<csc-input-button-save
|
||||||
|
v-if="newDestination !== '' && newDestination !== null"
|
||||||
|
@click.stop="save"
|
||||||
|
/>
|
||||||
|
<csc-input-button-reset
|
||||||
|
v-if="!addNewSlot"
|
||||||
|
@click.stop="resetSlotDestination"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</csc-list-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CscListItem from '../../CscListItem'
|
||||||
|
import CscListItemTitle from '../../CscListItemTitle'
|
||||||
|
import CscListItemSubtitle from '../../CscListItemSubtitle'
|
||||||
|
import CscListMenuItem from '../../CscListMenuItem'
|
||||||
|
import CscInputButtonSave from 'components/form/CscInputButtonSave'
|
||||||
|
import CscInputButtonReset from 'components/form/CscInputButtonReset'
|
||||||
|
import CscRemoveDialog from 'components/CscRemoveDialog'
|
||||||
|
import {
|
||||||
|
required
|
||||||
|
} from 'vuelidate/lib/validators'
|
||||||
|
export default {
|
||||||
|
name: 'CscPbxSettingsAutoAttendant',
|
||||||
|
components: {
|
||||||
|
CscInputButtonSave,
|
||||||
|
CscInputButtonReset,
|
||||||
|
CscListItem,
|
||||||
|
CscListItemTitle,
|
||||||
|
CscListItemSubtitle,
|
||||||
|
CscListMenuItem
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
personalSlot: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
addNewSlot: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
expanded: this.addNewSlot,
|
||||||
|
hasDestinationChanged: false,
|
||||||
|
newDestination: this.personalSlot.destination,
|
||||||
|
currentDestination: this.personalSlot.destination
|
||||||
|
}
|
||||||
|
},
|
||||||
|
validations: {
|
||||||
|
newDestination: {
|
||||||
|
required
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
errorMessage () {
|
||||||
|
if (!this.$v.newDestination.required) {
|
||||||
|
return this.$t('Destination must not be empty')
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$root.$on('all-slots-saved', () => {
|
||||||
|
if (this.expanded) {
|
||||||
|
this.toggle()
|
||||||
|
}
|
||||||
|
this.newDestination = this.personalSlot.destination
|
||||||
|
this.currentDestination = this.personalSlot.destination
|
||||||
|
this.hasDestinationChanged = this.newDestination !== this.currentDestination
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
confirmRowDeletion () {
|
||||||
|
if (!this.addNewSlot) {
|
||||||
|
this.$q.dialog({
|
||||||
|
component: CscRemoveDialog,
|
||||||
|
parent: this,
|
||||||
|
title: this.$t('Delete slot?'),
|
||||||
|
message: this.$t('You are about to delete slot {slot}', { slot: this.personalSlot.slot })
|
||||||
|
}).onOk(() => {
|
||||||
|
this.remove()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.remove()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
remove () {
|
||||||
|
this.$emit('remove', this.personalSlot.slot)
|
||||||
|
},
|
||||||
|
save () {
|
||||||
|
if (this.personalSlot.destination !== '') {
|
||||||
|
this.$emit('save')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggle () {
|
||||||
|
this.expanded = !this.expanded
|
||||||
|
this.newDestination = this.personalSlot.destination
|
||||||
|
},
|
||||||
|
valueChanged () {
|
||||||
|
this.$v.newDestination.$touch()
|
||||||
|
this.hasDestinationChanged = this.newDestination !== this.currentDestination
|
||||||
|
this.$emit('edit', this.newDestination, this.personalSlot.slot)
|
||||||
|
},
|
||||||
|
resetSlotDestination () {
|
||||||
|
this.$emit('reset', this.personalSlot.slot)
|
||||||
|
this.newDestination = this.personalSlot.destination
|
||||||
|
this.hasDestinationChanged = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,215 @@
|
|||||||
|
<template>
|
||||||
|
<csc-page-sticky
|
||||||
|
id="csc-page-call-forwarding"
|
||||||
|
class="q-pa-lg"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-slot:header
|
||||||
|
>
|
||||||
|
<q-btn-dropdown
|
||||||
|
size="md"
|
||||||
|
color="primary"
|
||||||
|
:label="$t('Add slot')"
|
||||||
|
:disabled="getAvailableSlots().length === 0"
|
||||||
|
icon="add"
|
||||||
|
dropdown-icon=" "
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-list
|
||||||
|
v-for="availableSlot in getAvailableSlots()"
|
||||||
|
:key="availableSlot"
|
||||||
|
>
|
||||||
|
<csc-popup-menu-item
|
||||||
|
:label="availableSlot"
|
||||||
|
@click="addSlot(availableSlot)"
|
||||||
|
/>
|
||||||
|
</q-list>
|
||||||
|
</q-btn-dropdown>
|
||||||
|
</template>
|
||||||
|
<div
|
||||||
|
class="text-center"
|
||||||
|
>
|
||||||
|
<csc-spinner
|
||||||
|
v-if="$wait.is('csc-pbx-auto-attendant') || $wait.is('csc-pbx-autoattendant-slots-table')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<csc-list
|
||||||
|
v-if="newPersonalSlots && newPersonalSlots.length > 0 && !$wait.is('csc-pbx-auto-attendant')
|
||||||
|
&& !$wait.is('csc-pbx-autoattendant-slots-table')"
|
||||||
|
>
|
||||||
|
<csc-fade
|
||||||
|
v-for="newSlot in newPersonalSlots"
|
||||||
|
:key="'csc-pbx-settings-fade-'+ newSlot.slot "
|
||||||
|
>
|
||||||
|
<csc-pbx-settings-auto-attendant
|
||||||
|
:add-new-slot="true"
|
||||||
|
:personal-slot="newSlot"
|
||||||
|
@save="saveSlot"
|
||||||
|
@remove="removeSlot"
|
||||||
|
@edit="editNewSlotDestination"
|
||||||
|
/>
|
||||||
|
</csc-fade>
|
||||||
|
</csc-list>
|
||||||
|
<csc-list
|
||||||
|
v-if="personalSlots.length > 0 && !$wait.is('csc-pbx-auto-attendant') && !$wait.is('csc-pbx-autoattendant-slots-table')"
|
||||||
|
>
|
||||||
|
<csc-fade
|
||||||
|
v-for="(personalSlot, index) in personalSlots"
|
||||||
|
:key="'csc-pbx-settings-fade-'+ personalSlot.slot "
|
||||||
|
>
|
||||||
|
<csc-pbx-settings-auto-attendant
|
||||||
|
v-model="personalSlots[index].destination"
|
||||||
|
:personal-slot="personalSlot"
|
||||||
|
@save="saveSlot"
|
||||||
|
@remove="removeSlot"
|
||||||
|
@edit="editNewSlotDestination"
|
||||||
|
@reset="resetPersonalSlot"
|
||||||
|
/>
|
||||||
|
</csc-fade>
|
||||||
|
</csc-list>
|
||||||
|
</csc-page-sticky>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
|
import CscPopupMenuItem from 'components/CscPopupMenuItem'
|
||||||
|
import CscPageSticky from 'components/CscPageSticky'
|
||||||
|
import CscPbxSettingsAutoAttendant from 'components/pages/PbxSettings/CscPbxSettingsAutoAttendant'
|
||||||
|
import CscList from 'components/CscList'
|
||||||
|
import CscFade from 'components/transitions/CscFade'
|
||||||
|
import CscSpinner from 'components/CscSpinner'
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import { mapWaitingActions } from 'vue-wait'
|
||||||
|
import { getSubscriberId } from 'src/auth'
|
||||||
|
import { showGlobalError, showToast } from 'src/helpers/ui'
|
||||||
|
export default {
|
||||||
|
name: 'CscPagePbxSettingsAutoAttendant',
|
||||||
|
components: {
|
||||||
|
CscPageSticky,
|
||||||
|
CscPopupMenuItem,
|
||||||
|
CscPbxSettingsAutoAttendant,
|
||||||
|
CscList,
|
||||||
|
CscFade,
|
||||||
|
CscSpinner
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
data: [],
|
||||||
|
subscriberId: parseInt(getSubscriberId()),
|
||||||
|
personalSlots: [],
|
||||||
|
newPersonalSlots: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters('pbxAutoAttendants', [
|
||||||
|
'slots',
|
||||||
|
'slotsNumbers',
|
||||||
|
'newSlots'
|
||||||
|
])
|
||||||
|
},
|
||||||
|
async mounted () {
|
||||||
|
await this.fetchAutoAttendants()
|
||||||
|
this.personalSlots = _.cloneDeep(this.slots.filter(slot => slot.subscriber_id === this.subscriberId)[0]?.slots)
|
||||||
|
this.newPersonalSlots = _.cloneDeep(this.newSlots.filter(slot => slot.subscriber_id === this.subscriberId)[0].slots)
|
||||||
|
this.sortArrays()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapWaitingActions('pbxAutoAttendants', {
|
||||||
|
updateSubscriberSlots: 'csc-pbx-autoattendant-slots-table',
|
||||||
|
resetAllNewSlots: 'csc-pbx-autoattendant-slots-table',
|
||||||
|
fetchAutoAttendants: 'csc-pbx-auto-attendant',
|
||||||
|
createNewSlot: 'csc-pbx-auto-attendant',
|
||||||
|
deleteNewSlot: 'csc-pbx-autoattendant-slots-table'
|
||||||
|
}),
|
||||||
|
getAvailableSlots () {
|
||||||
|
let subscriberSlots = this.slots.filter(slot => slot.subscriber_id === this.subscriberId)[0]?.slots
|
||||||
|
const subscriberSavedSlots = subscriberSlots?.map(item => item.slot)
|
||||||
|
const subscriberNewSlots = this.newSlots.filter(item => item.subscriber_id === this.subscriberId)
|
||||||
|
subscriberSlots = subscriberNewSlots.length > 0
|
||||||
|
? [...subscriberSavedSlots, ...subscriberNewSlots[0].slots.map(item => item.slot)]
|
||||||
|
: subscriberSavedSlots
|
||||||
|
const availableSlots = this.slotsNumbers.filter(slot => !subscriberSlots?.includes(slot))
|
||||||
|
return availableSlots
|
||||||
|
},
|
||||||
|
async saveSlot (isARemoval = false) {
|
||||||
|
for (const newSlot of this.newPersonalSlots) {
|
||||||
|
if (!newSlot.destination && !isARemoval) {
|
||||||
|
showGlobalError(this.$t('Please fill or remove the empty slots'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!isARemoval) {
|
||||||
|
for (const newSlot of this.newPersonalSlots) {
|
||||||
|
this.updateLocalDestination(newSlot.slot, newSlot.destination)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await this.updateSubscriberSlots({
|
||||||
|
subscriberId: this.subscriberId,
|
||||||
|
slots: [...this.newPersonalSlots, ...this.personalSlots]
|
||||||
|
})
|
||||||
|
this.resetAllNewSlots(this.subscriberId)
|
||||||
|
this.personalSlots = _.cloneDeep(this.slots.filter(slot => slot.subscriber_id === this.subscriberId)[0]?.slots)
|
||||||
|
this.newPersonalSlots = _.cloneDeep(this.newSlots.filter(slot => slot.subscriber_id === this.subscriberId)[0].slots)
|
||||||
|
this.sortArrays()
|
||||||
|
showToast(this.$t('Slots saved successfully'))
|
||||||
|
this.$root.$emit('all-slots-saved')
|
||||||
|
},
|
||||||
|
removeSlot (slotToRemove) {
|
||||||
|
const foundIndex = this.newPersonalSlots.findIndex(item => item.slot === slotToRemove)
|
||||||
|
if (foundIndex === -1) {
|
||||||
|
this.personalSlots = this.personalSlots.filter((item) => item.slot !== slotToRemove)
|
||||||
|
this.saveSlot(true)
|
||||||
|
} else {
|
||||||
|
this.deleteNewSlot({
|
||||||
|
subscriberId: this.subscriberId,
|
||||||
|
index: foundIndex
|
||||||
|
})
|
||||||
|
this.newPersonalSlots.splice(foundIndex, 1)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addSlot (availableSlot) {
|
||||||
|
this.createNewSlot({
|
||||||
|
subscriberId: this.subscriberId,
|
||||||
|
slot: availableSlot
|
||||||
|
})
|
||||||
|
this.newPersonalSlots = _.cloneDeep(this.newSlots.filter(slot => slot.subscriber_id === this.subscriberId)[0].slots)
|
||||||
|
this.sortArrays()
|
||||||
|
},
|
||||||
|
updateLocalDestination (newPersonalSlot, newDestination) {
|
||||||
|
this.personalSlots.forEach((item) => {
|
||||||
|
if (item.slot === newPersonalSlot) {
|
||||||
|
item.destination = newDestination
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (this.newPersonalSlots) {
|
||||||
|
this.newPersonalSlots.forEach((item) => {
|
||||||
|
if (item.slot === newPersonalSlot) {
|
||||||
|
item.destination = newDestination
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
editNewSlotDestination (newDestination, newPersonalSlot) {
|
||||||
|
const foundIndexNewSlots = this.newPersonalSlots.findIndex(item => item.slot === newPersonalSlot)
|
||||||
|
if (foundIndexNewSlots !== -1) {
|
||||||
|
this.newPersonalSlots[foundIndexNewSlots].destination = newDestination
|
||||||
|
} else {
|
||||||
|
const foundIndexExistingSlots = this.personalSlots.findIndex(item => item.slot === newPersonalSlot)
|
||||||
|
this.personalSlots[foundIndexExistingSlots].destination = newDestination
|
||||||
|
if (foundIndexNewSlots !== -1) {
|
||||||
|
this.personalSlots[foundIndexExistingSlots].destination = newDestination
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetPersonalSlot (personalSlot) {
|
||||||
|
const slotsFiltered = this.slots.filter(slot => slot.subscriber_id === this.subscriberId)[0]?.slots
|
||||||
|
const foundIndex = slotsFiltered.findIndex(item => item.slot === personalSlot)
|
||||||
|
this.personalSlots[foundIndex].destination = slotsFiltered[foundIndex].destination
|
||||||
|
},
|
||||||
|
sortArrays () {
|
||||||
|
this.personalSlots.sort((a, b) => (a.slot > b.slot) ? 1 : ((b.slot > a.slot) ? -1 : 0))
|
||||||
|
this.newPersonalSlots.sort((a, b) => (a.slot > b.slot) ? 1 : ((b.slot > a.slot) ? -1 : 0))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue