Change-Id: I88b0f3fff5396f7b4ec93bfda9efd1143742131dpull/27/merge
Hugo Zigha
3 years ago
parent
4c80215e00
commit
0308c9ee95
@ -0,0 +1,370 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="csc-device-key-title row justify-center items-center"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
class="csc-device-key-title-icon"
|
||||||
|
name="touch_app"
|
||||||
|
size="24px"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="column"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="csc-device-key-title-main"
|
||||||
|
>
|
||||||
|
{{ selectedKeySetName }}: {{ $t('Lamp/Key') }} {{ selectedKeyNumber }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-select
|
||||||
|
ref="selectType"
|
||||||
|
v-if="changes"
|
||||||
|
v-model="changes.type"
|
||||||
|
:disable="loading"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:label="$t('Lamp/Key')"
|
||||||
|
:options="typeOptions"
|
||||||
|
@input="keyTypeChanged"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-slot:prepend
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
name="radio_button_checked"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
<q-toggle
|
||||||
|
v-if="showCustomNumberToggle"
|
||||||
|
class="q-pt-md"
|
||||||
|
v-model="hasTargetNumber"
|
||||||
|
:label="$t('Use custom number')"
|
||||||
|
:disable="loading"
|
||||||
|
data-cy="pbxdevices-target_number"
|
||||||
|
@input="targetNumberToggleChanged()"
|
||||||
|
|
||||||
|
/>
|
||||||
|
<csc-pbx-auto-attendant-selection
|
||||||
|
v-if="changes.type && !hasTargetNumber"
|
||||||
|
:value="selectedKeySubscriber"
|
||||||
|
:options="subscriberOptions"
|
||||||
|
:disable="loading"
|
||||||
|
@input="keySubscriberChanged"
|
||||||
|
/>
|
||||||
|
<csc-input
|
||||||
|
v-if="showCustomNumberToggle && hasTargetNumber"
|
||||||
|
v-model="changes.target_number"
|
||||||
|
:disable="loading"
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
hide-hint
|
||||||
|
:error="$v.changes.target_number.$error"
|
||||||
|
:error-message="targetNumberErrorMessage"
|
||||||
|
:label="$t('Number')"
|
||||||
|
@input="$v.changes.target_number.$touch"
|
||||||
|
/>
|
||||||
|
<csc-list-spinner
|
||||||
|
v-if="loading"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="row justify-center actions"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="row"
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
icon="clear"
|
||||||
|
color="white"
|
||||||
|
:big="isMobile"
|
||||||
|
:disable="loading"
|
||||||
|
@click="closeKeyOverlay()"
|
||||||
|
>
|
||||||
|
{{ $t('Close') }}
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="hasTypeChanged || hasSubscriberChanged || hasTargetNumberChanged"
|
||||||
|
flat
|
||||||
|
icon="undo"
|
||||||
|
color="white"
|
||||||
|
:disable="loading"
|
||||||
|
@click="resetData()"
|
||||||
|
>
|
||||||
|
{{ $t('Reset') }}
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="hasTypeChanged || hasSubscriberChanged || hasTargetNumberChanged"
|
||||||
|
:label="$t('Save')"
|
||||||
|
:disable="($v.changes.$invalid && hasTargetNumber) || loading"
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
icon="check"
|
||||||
|
@click="onSave"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
|
import CscPbxAutoAttendantSelection from './CscPbxAutoAttendantSelection'
|
||||||
|
import CscInput from 'components/form/CscInput'
|
||||||
|
import CscListSpinner from 'components/CscListSpinner'
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
import {
|
||||||
|
Platform
|
||||||
|
} from 'quasar'
|
||||||
|
import {
|
||||||
|
required
|
||||||
|
} from 'vuelidate/lib/validators'
|
||||||
|
export default {
|
||||||
|
name: 'CscPbxDeviceConfigKeyForm',
|
||||||
|
components: {
|
||||||
|
CscPbxAutoAttendantSelection,
|
||||||
|
CscInput,
|
||||||
|
CscListSpinner
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
selectedLine: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
selectedKey: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
subscriberMap: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
validations: {
|
||||||
|
changes: {
|
||||||
|
target_number: {
|
||||||
|
required,
|
||||||
|
onlyChars: function (value) {
|
||||||
|
const regExpTargetNumber = new RegExp("^[*#0-9]*$");
|
||||||
|
return regExpTargetNumber.test(value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
keyData: this.getKeyData(),
|
||||||
|
changes: this.getKeyData(),
|
||||||
|
hasTargetNumber: this.selectedLine?.target_number ? true : false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
selectedLine () {
|
||||||
|
this.changes = this.getKeyData()
|
||||||
|
this.keyData = this.getKeyData()
|
||||||
|
this.hasTargetNumber = this.selectedLine?.target_number ? true : false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('pbx', [
|
||||||
|
'subscriberList'
|
||||||
|
]),
|
||||||
|
hasSubscriberChanged () {
|
||||||
|
return this.keyData.subscriber_id !== this.changes.subscriber_id
|
||||||
|
},
|
||||||
|
hasTypeChanged () {
|
||||||
|
return this.keyData.type !== this.changes.type
|
||||||
|
},
|
||||||
|
hasTargetNumberChanged () {
|
||||||
|
return this.keyData.target_number !== this.changes.target_number
|
||||||
|
},
|
||||||
|
subscriberOptions () {
|
||||||
|
const options = []
|
||||||
|
this.subscriberList.forEach((subscriber) => {
|
||||||
|
let icon = 'person'
|
||||||
|
let subscriberTypeTitle = this.$t('Seat')
|
||||||
|
if (subscriber.is_pbx_group) {
|
||||||
|
icon = 'group'
|
||||||
|
subscriberTypeTitle = this.$t('Group')
|
||||||
|
} else if (subscriber.is_pbx_pilot) {
|
||||||
|
icon = 'person_outline'
|
||||||
|
subscriberTypeTitle = this.$t('Pilot')
|
||||||
|
}
|
||||||
|
options.push({
|
||||||
|
label: subscriber.display_name || subscriber.webusername,
|
||||||
|
icon: icon,
|
||||||
|
value: subscriber.id,
|
||||||
|
subscriberTypeTitle
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return options
|
||||||
|
},
|
||||||
|
selectedKeyIcon () {
|
||||||
|
if (this.selectedLine !== null) {
|
||||||
|
const subscriber = this.subscriberMap[this.selectedLine.subscriber_id]
|
||||||
|
if (subscriber !== null && subscriber.is_pbx_pilot === true) {
|
||||||
|
return 'person_outline'
|
||||||
|
} else if (subscriber !== null && subscriber.is_pbx_group === true) {
|
||||||
|
return 'group'
|
||||||
|
} else if (subscriber !== null) {
|
||||||
|
return 'person'
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
selectedKeySubscriber () {
|
||||||
|
const unassignedItem = this.subscriberOptions[0]
|
||||||
|
if (this.changes) {
|
||||||
|
const selectedOption = this.subscriberOptions.find(opt => opt?.value === this.changes.subscriber_id)
|
||||||
|
return selectedOption || unassignedItem
|
||||||
|
}
|
||||||
|
return unassignedItem
|
||||||
|
},
|
||||||
|
selectedKeySetName () {
|
||||||
|
if (this.selectedLine !== null) {
|
||||||
|
return this.selectedLine.linerange
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
selectedKeyNumber () {
|
||||||
|
if (this.selectedLine !== null) {
|
||||||
|
return (this.selectedLine.key_num + 1)
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
typeOptions () {
|
||||||
|
const options = []
|
||||||
|
options.push({
|
||||||
|
label: this.$t('N/A'),
|
||||||
|
value: null
|
||||||
|
})
|
||||||
|
if (this.selectedKey !== null && this.selectedKey.keySet.can_blf) {
|
||||||
|
options.push({
|
||||||
|
label: this.$t('Busy Lamp Field'),
|
||||||
|
value: 'blf'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.selectedKey !== null && this.selectedKey.keySet.can_private) {
|
||||||
|
options.push({
|
||||||
|
label: this.$t('Private'),
|
||||||
|
value: 'private'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.selectedKey !== null && this.selectedKey.keySet.can_shared) {
|
||||||
|
options.push({
|
||||||
|
label: this.$t('Shared'),
|
||||||
|
value: 'shared'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.selectedKey !== null && this.selectedKey.keySet.can_speeddial) {
|
||||||
|
options.push({
|
||||||
|
label: this.$t('Speed Dial'),
|
||||||
|
value: 'speeddial'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.selectedKey !== null && this.selectedKey.keySet.can_forward) {
|
||||||
|
options.push({
|
||||||
|
label: this.$t('Forward'),
|
||||||
|
value: 'forward'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.selectedKey !== null && this.selectedKey.keySet.can_transfer) {
|
||||||
|
options.push({
|
||||||
|
label: this.$t('Transfer'),
|
||||||
|
value: 'transfer'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return options
|
||||||
|
},
|
||||||
|
isMobile () {
|
||||||
|
return Platform.is.mobile
|
||||||
|
},
|
||||||
|
showCustomNumberToggle () {
|
||||||
|
return this.changes.type === 'transfer' || this.changes.type === 'speeddial' || this.changes.type === 'forward'
|
||||||
|
},
|
||||||
|
targetNumberErrorMessage () {
|
||||||
|
if (!this.$v.changes.target_number.required) {
|
||||||
|
return this.$t('{field} is required', {
|
||||||
|
field: this.$t('Target number')
|
||||||
|
})
|
||||||
|
} else if (!this.$v.changes.target_number.onlyChars) {
|
||||||
|
return this.$t('{field} must consist only of numeric characters or the symbols * or #.', {
|
||||||
|
field: this.$t('Target number')
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getKeyData () {
|
||||||
|
if (this.selectedLine) {
|
||||||
|
this.hasTargetNumber = this.selectedLine.target_number ? true : false
|
||||||
|
return {
|
||||||
|
extension_unit: this.selectedLine.extension_unit,
|
||||||
|
key_num: this.selectedLine.key_num,
|
||||||
|
subscriber_id: this.selectedLine.subscriber_id,
|
||||||
|
linerange: this.selectedLine.linerange,
|
||||||
|
type: this.selectedLine.type,
|
||||||
|
target_number: this.selectedLine.target_number
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
extension_unit: 0,
|
||||||
|
key_num: this.selectedKey.index,
|
||||||
|
subscriber_id: null,
|
||||||
|
linerange: this.selectedKey.keySet.name,
|
||||||
|
type: null,
|
||||||
|
target_number: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
closeKeyOverlay () {
|
||||||
|
this.$emit('closeKeyOverlay')
|
||||||
|
},
|
||||||
|
keyTypeChanged () {
|
||||||
|
if (this.changes.type !== null && this.changes.subscriber_id === null) {
|
||||||
|
const pbxPilot = this.subscriberList.find((subscriber) => subscriber.is_pbx_pilot)
|
||||||
|
this.changes.subscriber_id = pbxPilot ? pbxPilot.id : this.subscriberList[0].id
|
||||||
|
}
|
||||||
|
if (this.changes.type === null) {
|
||||||
|
this.changes.subscriber_id = null
|
||||||
|
this.changes.target_number = null
|
||||||
|
this.hasTargetNumber = false
|
||||||
|
}
|
||||||
|
if (!this.showCustomNumberToggle) {
|
||||||
|
this.changes.target_number = null
|
||||||
|
this.hasTargetNumber = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
keySubscriberChanged ({ value: subscriberId}) {
|
||||||
|
this.changes.subscriber_id = subscriberId
|
||||||
|
},
|
||||||
|
targetNumberToggleChanged () {
|
||||||
|
if (!this.hasTargetNumber) {
|
||||||
|
this.changes.target_number = null
|
||||||
|
} else {
|
||||||
|
const pbxPilot = this.subscriberList.find((subscriber) => subscriber.is_pbx_pilot)
|
||||||
|
this.changes.subscriber_id = pbxPilot ? pbxPilot.id : this.subscriberList[0].id
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetData () {
|
||||||
|
this.changes = _.clone(this.keyData)
|
||||||
|
this.hasTargetNumber = this.selectedLine?.target_number ? true : false
|
||||||
|
},
|
||||||
|
onSave () {
|
||||||
|
this.$emit('onSave', this.changes)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue