Change-Id: Iad49631cbed6b231847af6cefa22ea2a2d4c29a0changes/42/28242/9
Robert Axelsen
6 years ago
parent
81dcafe8e4
commit
fa7f91faab
@ -0,0 +1,277 @@
|
|||||||
|
<template>
|
||||||
|
<div class="csc-form csc-pbx-seat-add-form">
|
||||||
|
<q-field
|
||||||
|
:error-label="nameErrorMessage"
|
||||||
|
class="csc-form-field"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
dark
|
||||||
|
autofocus
|
||||||
|
v-model="data.name"
|
||||||
|
:error="$v.data.name.$error"
|
||||||
|
:disable="loading"
|
||||||
|
:readonly="loading"
|
||||||
|
:float-label="$t('pbxConfig.name')"
|
||||||
|
@input="$v.data.name.$touch"
|
||||||
|
@blur="$v.data.name.$touch"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</q-field>
|
||||||
|
<q-field
|
||||||
|
:error-label="descriptionErrorMessage"
|
||||||
|
class="csc-form-field"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
dark
|
||||||
|
clearable
|
||||||
|
v-model="data.description"
|
||||||
|
:error="$v.data.description.$error"
|
||||||
|
:disable="loading"
|
||||||
|
:readonly="loading"
|
||||||
|
:float-label="$t('pbxConfig.description')"
|
||||||
|
@input="$v.data.description.$touch"
|
||||||
|
@blur="$v.data.description.$touch"
|
||||||
|
/>
|
||||||
|
</q-field>
|
||||||
|
<q-field
|
||||||
|
class="csc-form-field"
|
||||||
|
>
|
||||||
|
<q-toggle
|
||||||
|
v-model="data.contract_default"
|
||||||
|
checked-icon="check_circle"
|
||||||
|
unchecked-icon="check_circle"
|
||||||
|
:class="contractDefaultClasses"
|
||||||
|
:disable="loading"
|
||||||
|
:label="$t('pbxConfig.defaultForSubscribers')"
|
||||||
|
/>
|
||||||
|
</q-field>
|
||||||
|
<q-field
|
||||||
|
class="csc-form-field"
|
||||||
|
>
|
||||||
|
<q-toggle
|
||||||
|
v-model="data.copy_from_default"
|
||||||
|
checked-icon="move_to_inbox"
|
||||||
|
unchecked-icon="move_to_inbox"
|
||||||
|
:class="loadFilesClasses"
|
||||||
|
:disable="loading"
|
||||||
|
:label="$t('pbxConfig.loadFiles')"
|
||||||
|
@input="toggleLoadFiles"
|
||||||
|
/>
|
||||||
|
</q-field>
|
||||||
|
<q-field
|
||||||
|
class="csc-form-field"
|
||||||
|
>
|
||||||
|
<q-toggle
|
||||||
|
v-model="data.loopplay"
|
||||||
|
checked-icon="loop"
|
||||||
|
unchecked-icon="loop"
|
||||||
|
:class="loopplayClasses"
|
||||||
|
:disable="loading || !data.copy_from_default"
|
||||||
|
:label="$t('pbxConfig.playingInLoop')"
|
||||||
|
/>
|
||||||
|
</q-field>
|
||||||
|
<q-field
|
||||||
|
class="csc-form-field"
|
||||||
|
>
|
||||||
|
<q-select
|
||||||
|
dark
|
||||||
|
chips
|
||||||
|
clearable
|
||||||
|
v-model="data.language"
|
||||||
|
:disable="loading || !data.copy_from_default"
|
||||||
|
:readonly="loading"
|
||||||
|
:float-label="$t('pbxConfig.language')"
|
||||||
|
:options="languageOptions"
|
||||||
|
/>
|
||||||
|
</q-field>
|
||||||
|
<div class="csc-form-actions row justify-center">
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
v-if="!loading"
|
||||||
|
color="default"
|
||||||
|
icon="clear"
|
||||||
|
@mousedown.native="cancel()"
|
||||||
|
>
|
||||||
|
{{ $t('buttons.cancel') }}
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
v-if="!loading"
|
||||||
|
color="primary"
|
||||||
|
icon="group"
|
||||||
|
:disable="$v.data.$invalid || !data.language"
|
||||||
|
@click="save()"
|
||||||
|
>
|
||||||
|
{{ $t('pbxConfig.createSoundSet') }}
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<q-inner-loading :visible="loading">
|
||||||
|
<q-spinner-mat size="60px" color="primary" />
|
||||||
|
</q-inner-loading>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
required,
|
||||||
|
maxLength
|
||||||
|
} from 'vuelidate/lib/validators'
|
||||||
|
import {
|
||||||
|
QBtn,
|
||||||
|
QInnerLoading,
|
||||||
|
QSpinnerMat,
|
||||||
|
QField,
|
||||||
|
QInput,
|
||||||
|
QSelect,
|
||||||
|
QIcon,
|
||||||
|
QToggle
|
||||||
|
} from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-pbx-sound-set-add-form',
|
||||||
|
props: [
|
||||||
|
'loading'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
QBtn,
|
||||||
|
QInnerLoading,
|
||||||
|
QSpinnerMat,
|
||||||
|
QField,
|
||||||
|
QInput,
|
||||||
|
QSelect,
|
||||||
|
QIcon,
|
||||||
|
QToggle
|
||||||
|
},
|
||||||
|
validations: {
|
||||||
|
data: {
|
||||||
|
name: {
|
||||||
|
required,
|
||||||
|
maxLength: maxLength(64)
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
required,
|
||||||
|
maxLength: maxLength(255)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
data: this.getDefaults(),
|
||||||
|
languageOptions: [
|
||||||
|
{
|
||||||
|
value: 'en',
|
||||||
|
label: 'English'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'es',
|
||||||
|
label: 'Spanish'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'ru',
|
||||||
|
label: 'Russian'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'it',
|
||||||
|
label: 'Italian'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'ro',
|
||||||
|
label: 'Romanian'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'de',
|
||||||
|
label: 'German'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
nameErrorMessage() {
|
||||||
|
if (!this.$v.data.name.required) {
|
||||||
|
return this.$t('validationErrors.fieldRequired', {
|
||||||
|
field: this.$t('pbxConfig.name')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (!this.$v.data.name.maxLength) {
|
||||||
|
return this.$t('validationErrors.maxLength', {
|
||||||
|
field: this.$t('pbxConfig.name'),
|
||||||
|
maxLength: this.$v.data.name.$params.maxLength.max
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
descriptionErrorMessage() {
|
||||||
|
if (!this.$v.data.description.required) {
|
||||||
|
return this.$t('validationErrors.fieldRequired', {
|
||||||
|
field: this.$t('pbxConfig.description')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (!this.$v.data.description.maxLength) {
|
||||||
|
return this.$t('validationErrors.maxLength', {
|
||||||
|
field: this.$t('pbxConfig.description'),
|
||||||
|
maxLength: this.$v.data.description.$params.maxLength.max
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
contractDefaultClasses() {
|
||||||
|
let classes = [];
|
||||||
|
if (this.contract_default) {
|
||||||
|
classes.push('csc-toggle-enabled');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
classes.push('csc-toggle-disabled');
|
||||||
|
}
|
||||||
|
return classes;
|
||||||
|
},
|
||||||
|
loadFilesClasses() {
|
||||||
|
let classes = [];
|
||||||
|
if (this.copy_from_default) {
|
||||||
|
classes.push('csc-toggle-enabled');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
classes.push('csc-toggle-disabled');
|
||||||
|
}
|
||||||
|
return classes;
|
||||||
|
},
|
||||||
|
loopplayClasses() {
|
||||||
|
let classes = [];
|
||||||
|
if (this.loopplay) {
|
||||||
|
classes.push('csc-toggle-enabled');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
classes.push('csc-toggle-disabled');
|
||||||
|
}
|
||||||
|
return classes;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDefaults() {
|
||||||
|
return {
|
||||||
|
name: '',
|
||||||
|
loopplay: false,
|
||||||
|
replace_existing: false,
|
||||||
|
language: 'en',
|
||||||
|
contract_default: false,
|
||||||
|
copy_from_default: false,
|
||||||
|
description: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
this.$emit('cancel');
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
this.$emit('save', this.data);
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.data = this.getDefaults();
|
||||||
|
this.$v.$reset();
|
||||||
|
},
|
||||||
|
toggleLoadFiles() {
|
||||||
|
this.data.language = 'en';
|
||||||
|
this.data.loopplay = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
@import '../../../themes/quasar.variables.styl';
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue