displayed like Seats Change-Id: I19324c34d904b48c823de9689bb6ea93df701335pull/20/head
CORP\franci11
3 years ago
committed by
Hugo Zigha
parent
9d84761548
commit
8030e05ed1
@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<csc-page-sticky
|
||||
v-if="groupSelected"
|
||||
id="csc-page-pbx-group-details"
|
||||
class="row q-pa-lg"
|
||||
>
|
||||
<template
|
||||
v-slot:header-align-left
|
||||
>
|
||||
<q-breadcrumbs
|
||||
class="text-weight-light q-mr-md"
|
||||
active-color="primary"
|
||||
separator-color="primary"
|
||||
>
|
||||
<q-breadcrumbs-el
|
||||
key="groups"
|
||||
class="cursor-pointer"
|
||||
to="/user/pbx-configuration/groups"
|
||||
:label="$t('Groups')"
|
||||
icon="group"
|
||||
/>
|
||||
<q-breadcrumbs-el
|
||||
key="group"
|
||||
:label="groupSelected.display_name"
|
||||
/>
|
||||
</q-breadcrumbs>
|
||||
</template>
|
||||
<q-item
|
||||
class="col col-xs-12 col-md-6"
|
||||
>
|
||||
<q-list
|
||||
v-if="changes"
|
||||
class="col"
|
||||
side
|
||||
top
|
||||
no-wrap
|
||||
>
|
||||
<q-input
|
||||
v-model="changes.name"
|
||||
:label="$t('Name')"
|
||||
:disable="isLoading"
|
||||
@keyup.enter="save"
|
||||
>
|
||||
<template
|
||||
v-if="hasNameChanged"
|
||||
v-slot:append
|
||||
>
|
||||
<csc-input-button-save
|
||||
@click.stop="save"
|
||||
/>
|
||||
<csc-input-button-reset
|
||||
@click.stop="resetName"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
v-model="changes.extension"
|
||||
hide-hint
|
||||
:error="$v.changes.extension.$error"
|
||||
:error-message="extensionErrorMessage"
|
||||
:label="$t('Extension')"
|
||||
:hint="getExtensionHint"
|
||||
:disable="isLoading"
|
||||
@keyup.enter="save"
|
||||
@input="$v.changes.extension.$touch"
|
||||
>
|
||||
<template
|
||||
v-if="hasExtensionChanged"
|
||||
v-slot:append
|
||||
>
|
||||
<csc-input-button-save
|
||||
@click.stop="save"
|
||||
/>
|
||||
<csc-input-button-reset
|
||||
@click.stop="resetExtension"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
readonly
|
||||
disable
|
||||
:value="getPrimaryNumber"
|
||||
:label="$t('Primary Number')"
|
||||
/>
|
||||
<q-select
|
||||
v-model="changes.huntPolicy"
|
||||
emit-value
|
||||
map-options
|
||||
radio
|
||||
:label="$t('Hunt Policy')"
|
||||
:disable="isLoading"
|
||||
:options="getHuntPolicyOptions"
|
||||
>
|
||||
<template
|
||||
v-if="hasHuntPolicyChanged"
|
||||
v-slot:append
|
||||
>
|
||||
<csc-input-button-save
|
||||
@click.stop="save"
|
||||
/>
|
||||
<csc-input-button-reset
|
||||
@click.stop="resetHuntPolicy"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
v-model="changes.huntTimeout"
|
||||
:label="$t('Hunt Timeout')"
|
||||
:disable="isLoading"
|
||||
@keyup.enter="save"
|
||||
>
|
||||
<template
|
||||
v-if="hasHuntTimeoutChanged"
|
||||
v-slot:append
|
||||
>
|
||||
<csc-input-button-save
|
||||
@click.stop="save"
|
||||
/>
|
||||
<csc-input-button-reset
|
||||
@click.stop="resetHuntTimeout"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="changes.aliasNumbers"
|
||||
emit-value
|
||||
map-options
|
||||
use-chips
|
||||
multiple
|
||||
:disable="isLoading"
|
||||
:label="$t('Alias Numbers')"
|
||||
:options="getNumberOptions"
|
||||
>
|
||||
<template
|
||||
v-if="hasAliasNumbersChanged"
|
||||
v-slot:append
|
||||
>
|
||||
<csc-input-button-save
|
||||
@click.stop="save"
|
||||
/>
|
||||
<csc-input-button-reset
|
||||
@click.stop="resetAliasNumbers"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-model="changes.seats"
|
||||
emit-value
|
||||
map-options
|
||||
use-chips
|
||||
multiple
|
||||
:disable="isLoading"
|
||||
:label="$t('Seats')"
|
||||
:options="getSeatOptions"
|
||||
>
|
||||
<template
|
||||
v-if="hasSeatsChanged"
|
||||
v-slot:append
|
||||
>
|
||||
<csc-input-button-save
|
||||
@click.stop="save"
|
||||
/>
|
||||
<csc-input-button-reset
|
||||
@click.stop="resetSeats"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-model="changes.soundSet"
|
||||
emit-value
|
||||
map-options
|
||||
radio
|
||||
:disable="isLoading"
|
||||
:label="$t('Sound Set')"
|
||||
:options="getSoundSetOptions"
|
||||
>
|
||||
<template
|
||||
v-if="hasSoundSetChanged"
|
||||
v-slot:append
|
||||
>
|
||||
<csc-input-button-save
|
||||
@click.stop="save"
|
||||
/>
|
||||
<csc-input-button-reset
|
||||
@click.stop="resetSoundSet"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-btn
|
||||
v-if="hasCallQueue(id)"
|
||||
icon="filter_none"
|
||||
flat
|
||||
color="primary"
|
||||
:label="$t('Call Queue')"
|
||||
:disable="isLoading"
|
||||
@click="jumpToCallQueueInternal"
|
||||
/>
|
||||
</q-list>
|
||||
</q-item>
|
||||
</csc-page-sticky>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { between } from 'vuelidate/lib/validators'
|
||||
import { inRange } from 'src/helpers/validation'
|
||||
import {
|
||||
mapState,
|
||||
mapMutations,
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import {
|
||||
RequestState
|
||||
} from 'src/store/common'
|
||||
import {
|
||||
showGlobalError,
|
||||
showToast
|
||||
} from 'src/helpers/ui'
|
||||
import numberFilter from 'src/filters/number'
|
||||
import CscPageSticky from 'src/components/CscPageSticky'
|
||||
import CscInputButtonSave from 'components/form/CscInputButtonSave'
|
||||
import CscInputButtonReset from 'components/form/CscInputButtonReset'
|
||||
export default {
|
||||
name: 'CscPbxGroupDetails',
|
||||
components: {
|
||||
CscInputButtonReset,
|
||||
CscInputButtonSave,
|
||||
CscPageSticky
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
changes: null,
|
||||
id: this.$route.params.id,
|
||||
soundSet: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('pbxGroups', [
|
||||
'groupSelected',
|
||||
'groupUpdateState',
|
||||
'groupUpdateError'
|
||||
]),
|
||||
...mapGetters('pbx', [
|
||||
'getSeatOptions',
|
||||
'getExtensionHint',
|
||||
'getMinAllowedExtension',
|
||||
'getMaxAllowedExtension',
|
||||
'getNumberOptions',
|
||||
'getSoundSetOptions'
|
||||
]),
|
||||
...mapGetters('pbxGroups', [
|
||||
'getHuntPolicyOptions',
|
||||
'hasCallQueue',
|
||||
'getGroupUpdateToastMessage',
|
||||
'getSoundSetByGroupId',
|
||||
'isGroupLoading'
|
||||
]),
|
||||
hasNameChanged () {
|
||||
return this.changes.name !== this.groupSelected.display_name
|
||||
},
|
||||
hasExtensionChanged () {
|
||||
return this.changes.extension !== this.groupSelected.pbx_extension
|
||||
},
|
||||
hasHuntPolicyChanged () {
|
||||
return this.changes.huntPolicy !== this.groupSelected.pbx_hunt_policy
|
||||
},
|
||||
hasHuntTimeoutChanged () {
|
||||
return this.changes.huntTimeout !== this.groupSelected.pbx_hunt_timeout
|
||||
},
|
||||
hasAliasNumbersChanged () {
|
||||
const aliasNumbers = _.clone(this.changes.aliasNumbers)
|
||||
return !_.isEqual(aliasNumbers.sort(), this.getAliasNumberIds().sort())
|
||||
},
|
||||
hasSeatsChanged () {
|
||||
const seatIds1 = _.clone(this.changes.seats)
|
||||
const seatIds2 = _.clone(this.groupSelected.pbx_groupmember_ids)
|
||||
return !_.isEqual(seatIds1.sort(), seatIds2.sort())
|
||||
},
|
||||
hasSoundSetChanged () {
|
||||
return this.changes.soundSet !== this.getSoundSetId()
|
||||
},
|
||||
getPrimaryNumber () {
|
||||
return numberFilter(this.groupSelected.primary_number)
|
||||
},
|
||||
extensionErrorMessage () {
|
||||
if (!this.$v.changes.extension.isInRange) {
|
||||
return this.getExtensionHint
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
isLoading () {
|
||||
return this.isGroupLoading(this.groupSelected.id)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
groupSelected () {
|
||||
this.changes = this.getGroupData()
|
||||
this.soundSet = this.getSoundSetByGroupId(this.groupSelected.id)
|
||||
},
|
||||
groupUpdateState (state) {
|
||||
if (state === RequestState.succeeded) {
|
||||
showToast(this.getGroupUpdateToastMessage)
|
||||
} else if (state === RequestState.failed) {
|
||||
showGlobalError(this.groupUpdateError)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.selectGroup(this.id)
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.resetSelectedGroup()
|
||||
},
|
||||
validations: {
|
||||
changes: {
|
||||
extension: {
|
||||
isInRange: function (value) {
|
||||
return inRange(value, this.getMinAllowedExtension, this.getMaxAllowedExtension, between)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('pbxGroups', [
|
||||
'setGroupName',
|
||||
'setGroupExtension',
|
||||
'setGroupHuntPolicy',
|
||||
'setGroupHuntTimeout',
|
||||
'setGroupSeats',
|
||||
'setGroupNumbers',
|
||||
'setGroupSoundSet'
|
||||
]),
|
||||
...mapActions('pbxCallQueues', [
|
||||
'jumpToCallQueue'
|
||||
]),
|
||||
...mapMutations('pbxGroups', [
|
||||
'selectGroup',
|
||||
'resetSelectedGroup'
|
||||
]),
|
||||
getGroupData () {
|
||||
return (this.groupSelected) ? {
|
||||
name: this.groupSelected.display_name,
|
||||
extension: this.groupSelected.pbx_extension,
|
||||
huntPolicy: this.groupSelected.pbx_hunt_policy,
|
||||
huntTimeout: this.groupSelected.pbx_hunt_timeout,
|
||||
aliasNumbers: this.getAliasNumberIds(),
|
||||
seats: this.getSeatIds(),
|
||||
soundSet: this.getSoundSetId()
|
||||
} : null
|
||||
},
|
||||
getAliasNumberIds () {
|
||||
const numberIds = []
|
||||
this.groupSelected.alias_numbers.forEach((number) => {
|
||||
numberIds.push(number.number_id)
|
||||
})
|
||||
return numberIds
|
||||
},
|
||||
getSeatIds () {
|
||||
return _.clone(this.groupSelected.pbx_groupmember_ids)
|
||||
},
|
||||
getSoundSetId () {
|
||||
const soundSet = this.getSoundSetByGroupId(this.groupSelected.id)
|
||||
if (soundSet !== null) {
|
||||
return soundSet.id
|
||||
}
|
||||
return null
|
||||
},
|
||||
resetName () {
|
||||
this.changes.name = this.groupSelected.display_name
|
||||
},
|
||||
resetExtension () {
|
||||
this.changes.extension = this.groupSelected.pbx_extension
|
||||
},
|
||||
resetHuntPolicy () {
|
||||
this.changes.huntPolicy = this.groupSelected.pbx_hunt_policy
|
||||
},
|
||||
resetHuntTimeout () {
|
||||
this.changes.huntTimeout = this.groupSelected.pbx_hunt_timeout
|
||||
},
|
||||
resetAliasNumbers () {
|
||||
this.changes.aliasNumbers = this.getAliasNumberIds()
|
||||
},
|
||||
resetSeats () {
|
||||
this.changes.seats = this.getSeatIds()
|
||||
},
|
||||
resetSoundSet () {
|
||||
this.changes.soundSet = this.getSoundSetId()
|
||||
},
|
||||
jumpToCallQueueInternal () {
|
||||
this.jumpToCallQueue(this.groupSelected)
|
||||
},
|
||||
save () {
|
||||
if (this.hasNameChanged) {
|
||||
this.setGroupName({
|
||||
groupId: this.groupSelected.id,
|
||||
groupName: this.changes.name
|
||||
})
|
||||
}
|
||||
if (this.hasExtensionChanged) {
|
||||
this.setGroupExtension({
|
||||
groupId: this.groupSelected.id,
|
||||
groupExtension: this.changes.extension
|
||||
})
|
||||
}
|
||||
if (this.hasHuntPolicyChanged) {
|
||||
this.setGroupHuntPolicy({
|
||||
groupId: this.groupSelected.id,
|
||||
groupHuntPolicy: this.changes.huntPolicy
|
||||
})
|
||||
}
|
||||
if (this.hasHuntTimeoutChanged) {
|
||||
this.setGroupHuntTimeout({
|
||||
groupId: this.groupSelected.id,
|
||||
groupHuntTimeout: this.changes.huntTimeout
|
||||
})
|
||||
}
|
||||
if (this.hasAliasNumbersChanged) {
|
||||
this.setGroupNumbers({
|
||||
groupId: this.groupSelected.id,
|
||||
assignedNumbers: _.difference(this.changes.aliasNumbers, this.getAliasNumberIds()),
|
||||
unassignedNumbers: _.difference(this.getAliasNumberIds(), this.changes.aliasNumbers)
|
||||
})
|
||||
}
|
||||
if (this.hasSeatsChanged) {
|
||||
this.setGroupSeats({
|
||||
groupId: this.groupSelected.id,
|
||||
seatIds: this.changes.seats
|
||||
})
|
||||
}
|
||||
if (this.hasSoundSetChanged) {
|
||||
this.setGroupSoundSet({
|
||||
groupId: this.groupSelected.id,
|
||||
soundSetId: this.changes.soundSet
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue