You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
335 lines
10 KiB
335 lines
10 KiB
<template>
|
|
<div>
|
|
<div
|
|
class="row justify-center q-gutter-lg q-mb-md"
|
|
>
|
|
<div
|
|
class="col-3"
|
|
>
|
|
<q-input
|
|
v-model="data.name"
|
|
clearable
|
|
autofocus
|
|
hide-bottom-space
|
|
:error="$v.data.name.$error"
|
|
:error-message="groupNameErrorMessage"
|
|
:disable="loading"
|
|
:readonly="loading"
|
|
:label="$t('Group Name')"
|
|
data-cy="group-name"
|
|
@input="$v.data.name.$touch"
|
|
/>
|
|
<q-input
|
|
v-model="data.extension"
|
|
clearable
|
|
hide-bottom-space
|
|
:error="$v.data.extension.$error"
|
|
:error-message="extensionErrorMessage"
|
|
:disable="loading"
|
|
:readonly="loading"
|
|
:label="$t('Extension')"
|
|
:hint="getExtensionHint"
|
|
data-cy="group-extension"
|
|
@input="$v.data.extension.$touch"
|
|
/>
|
|
<q-select
|
|
v-model="data.huntPolicy"
|
|
radio
|
|
emit-value
|
|
map-options
|
|
hide-bottom-space
|
|
:disable="loading"
|
|
:readonly="loading"
|
|
:label="$t('Hunt Policy')"
|
|
:options="huntPolicyOptions"
|
|
data-cy="group-hunt-policy"
|
|
/>
|
|
<q-input
|
|
v-model="data.huntTimeout"
|
|
clearable
|
|
hide-bottom-space
|
|
:error="$v.data.huntTimeout.$error"
|
|
:error-message="huntTimeoutErrorMessage"
|
|
:disable="loading"
|
|
:readonly="loading"
|
|
:label="$t('Hunt Timeout')"
|
|
:suffix="$t('seconds')"
|
|
:min="1"
|
|
:max="3600"
|
|
data-cy="group-hunt-timeout"
|
|
@input="$v.data.huntTimeout.$touch"
|
|
/>
|
|
<q-select
|
|
v-model="data.huntCancelMode"
|
|
radio
|
|
emit-value
|
|
map-options
|
|
hide-bottom-space
|
|
:disable="loading"
|
|
:readonly="loading"
|
|
:label="$t('Cancel Mode')"
|
|
:options="huntCancelModeOptions"
|
|
data-cy="group-hunt-cancel-mode"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-3"
|
|
>
|
|
<q-select
|
|
v-model="data.aliasNumbers"
|
|
multiple
|
|
use-chips
|
|
clearable
|
|
emit-value
|
|
map-options
|
|
hide-bottom-space
|
|
:disable="loading"
|
|
:readonly="loading"
|
|
:label="$t('Alias Numbers')"
|
|
:options="aliasNumberOptions"
|
|
data-cy="group-alias-numbers"
|
|
/>
|
|
<q-select
|
|
v-model="data.seats"
|
|
multiple
|
|
use-chips
|
|
clearable
|
|
emit-value
|
|
map-options
|
|
hide-bottom-space
|
|
:disable="loading"
|
|
:readonly="loading"
|
|
:label="$t('Seats')"
|
|
:options="seatOptions"
|
|
data-cy="group-seats"
|
|
/>
|
|
<q-select
|
|
v-model="data.soundSet"
|
|
radio
|
|
emit-value
|
|
map-options
|
|
hide-bottom-space
|
|
:disable="loading"
|
|
:readonly="loading"
|
|
:label="$t('Sound Set')"
|
|
:options="soundSetOptions"
|
|
data-cy="group-sound-set"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="csc-form-actions row justify-center">
|
|
<q-btn
|
|
v-if="!loading"
|
|
flat
|
|
color="default"
|
|
icon="clear"
|
|
data-cy="group-btn-clear"
|
|
@mousedown.native="cancel()"
|
|
>
|
|
{{ $t('Cancel') }}
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="!loading"
|
|
flat
|
|
color="primary"
|
|
icon="group"
|
|
:disable="$v.data.$invalid"
|
|
data-cy="group-btn-save"
|
|
@click="save()"
|
|
>
|
|
{{ $t('Create group') }}
|
|
</q-btn>
|
|
</div>
|
|
<csc-object-spinner
|
|
v-if="loading"
|
|
:loading="loading"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import {
|
|
required,
|
|
minValue,
|
|
maxValue,
|
|
maxLength,
|
|
numeric,
|
|
between
|
|
} from 'vuelidate/lib/validators'
|
|
import { inRange } from 'src/helpers/validation'
|
|
import CscObjectSpinner from '../../CscObjectSpinner'
|
|
export default {
|
|
name: 'CscPbxGroupAddForm',
|
|
components: {
|
|
CscObjectSpinner
|
|
},
|
|
props: {
|
|
huntPolicyOptions: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
huntCancelModeOptions: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
aliasNumberOptions: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
seatOptions: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
soundSetOptions: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
validations: {
|
|
data: {
|
|
name: {
|
|
required,
|
|
maxLength: maxLength(64)
|
|
},
|
|
extension: {
|
|
required,
|
|
maxLength: maxLength(64),
|
|
numeric,
|
|
isInRange: function (value) {
|
|
return inRange(value, this.getMinAllowedExtension, this.getMaxAllowedExtension, between)
|
|
}
|
|
},
|
|
huntTimeout: {
|
|
required,
|
|
numeric,
|
|
minValue: minValue(1),
|
|
maxValue: maxValue(3600)
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
data: this.getDefaults()
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('pbx', [
|
|
'getExtensionHint',
|
|
'getMinAllowedExtension',
|
|
'getMaxAllowedExtension'
|
|
]),
|
|
groupNameErrorMessage () {
|
|
if (!this.$v.data.name.required) {
|
|
return this.$t('{field} is required', {
|
|
field: this.$t('Group Name')
|
|
})
|
|
} else if (!this.$v.data.name.maxLength) {
|
|
return this.$t('{field} must have at most {maxLength} letters', {
|
|
field: this.$t('Group Name'),
|
|
maxLength: this.$v.data.name.$params.maxLength.max
|
|
})
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
extensionErrorMessage () {
|
|
if (!this.$v.data.extension.required) {
|
|
return this.$t('{field} is required', {
|
|
field: this.$t('Extension')
|
|
})
|
|
} else if (!this.$v.data.extension.maxLength) {
|
|
return this.$t('{field} must have at most {maxLength} letters', {
|
|
field: this.$t('Extension'),
|
|
maxLength: this.$v.data.extension.$params.maxLength.max
|
|
})
|
|
} else if (!this.$v.data.extension.numeric) {
|
|
return this.$t('{field} must consist of numeric characters only', {
|
|
field: this.$t('Extension')
|
|
})
|
|
} else if (!this.$v.data.extension.isInRange) {
|
|
return this.getExtensionHint
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
huntTimeoutErrorMessage () {
|
|
if (!this.$v.data.huntTimeout.required) {
|
|
return this.$t('{field} is required', {
|
|
field: this.$t('Hunt timeout')
|
|
})
|
|
} else if (!this.$v.data.huntTimeout.numeric) {
|
|
return this.$t('{field} must consist of numeric characters only', {
|
|
field: this.$t('Hunt timeout')
|
|
})
|
|
} else if (!this.$v.data.huntTimeout.minValue) {
|
|
return this.$t('{field} must be at least {minValue} second', {
|
|
field: this.$t('Hunt timeout'),
|
|
minValue: this.$v.data.huntTimeout.$params.minValue.min
|
|
})
|
|
} else if (!this.$v.data.huntTimeout.maxValue) {
|
|
return this.$t('{field} must be maximum of {maxValue} seconds', {
|
|
field: this.$t('Hunt timeout'),
|
|
maxValue: this.$v.data.huntTimeout.$params.maxValue.max
|
|
})
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
groupModel () {
|
|
return {
|
|
name: this.data.name,
|
|
extension: this.data.extension,
|
|
huntPolicy: this.data.huntPolicy,
|
|
huntTimeout: this.data.huntTimeout,
|
|
huntCancelMode: this.data.huntCancelMode,
|
|
aliasNumbers: this.data.aliasNumbers,
|
|
seats: this.data.seats,
|
|
soundSet: this.data.soundSet
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
if (this.defaultSoundSet) {
|
|
this.soundSet = this.defaultSoundSet
|
|
}
|
|
},
|
|
methods: {
|
|
getDefaults () {
|
|
return {
|
|
name: '',
|
|
extension: '',
|
|
huntPolicy: 'serial',
|
|
huntTimeout: 10,
|
|
huntCancelMode: 'cancel',
|
|
aliasNumbers: [],
|
|
seats: [],
|
|
soundSet: null
|
|
}
|
|
},
|
|
cancel () {
|
|
this.$emit('cancel')
|
|
},
|
|
save () {
|
|
this.$emit('save', this.groupModel)
|
|
},
|
|
reset () {
|
|
this.data = this.getDefaults()
|
|
this.$v.$reset()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" rel="stylesheet/stylus">
|
|
.csc-pbx-group-add-form
|
|
position: relative
|
|
.csc-pbx-group-add-form
|
|
.q-field:last-child
|
|
margin-bottom: 36px
|
|
</style>
|