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.
440 lines
14 KiB
440 lines
14 KiB
<template>
|
|
<q-item
|
|
:class="itemClasses"
|
|
>
|
|
<q-item-side
|
|
v-show="!expanded"
|
|
>
|
|
<q-icon
|
|
size="24px"
|
|
name="queue_music"
|
|
color="white"
|
|
/>
|
|
</q-item-side>
|
|
<q-item-main>
|
|
<q-item-tile
|
|
v-show="!expanded"
|
|
class="csc-item-title"
|
|
label
|
|
>
|
|
{{ set.name }}
|
|
</q-item-tile>
|
|
<q-item-tile
|
|
v-show="!expanded"
|
|
class="csc-item-subtitle"
|
|
sublabel
|
|
>
|
|
<div>
|
|
<span class="csc-item-label">
|
|
{{ $t('pbxConfig.description') }}:
|
|
</span>
|
|
<span class="csc-item-value">
|
|
{{ setDescription }}
|
|
</span>
|
|
</div>
|
|
</q-item-tile>
|
|
<q-item-tile
|
|
v-show="expanded"
|
|
class="csc-list-item-main"
|
|
>
|
|
<q-field
|
|
class="csc-form-field"
|
|
:label="$t('pbxConfig.name')"
|
|
:error-label="nameErrorMessage"
|
|
>
|
|
<q-input
|
|
dark
|
|
v-model="changes.name"
|
|
:after="nameButtons"
|
|
@keyup.enter="saveName"
|
|
@input="$v.changes.name.$touch"
|
|
@blur="$v.changes.name.$touch"
|
|
:error="$v.changes.name.$error"
|
|
/>
|
|
</q-field>
|
|
<q-field
|
|
class="csc-form-field"
|
|
:label="$t('pbxConfig.description')"
|
|
:error-label="descriptionErrorMessage"
|
|
>
|
|
<q-input
|
|
dark
|
|
v-model="changes.description"
|
|
:after="descriptionButtons"
|
|
@keyup.enter="saveDescription"
|
|
@input="$v.changes.description.$touch"
|
|
@blur="$v.changes.description.$touch"
|
|
:error="$v.changes.description.$error"
|
|
/>
|
|
</q-field>
|
|
<q-field
|
|
dark
|
|
class="csc-form-field"
|
|
:label="$t('pbxConfig.defaultForSubscribers')"
|
|
>
|
|
<q-toggle
|
|
:class="contractDefaultClasses"
|
|
v-model="changes.contract_default"
|
|
@input="toggleContractDefault"
|
|
checked-icon="check_circle"
|
|
unchecked-icon="check_circle"
|
|
/>
|
|
</q-field>
|
|
</q-item-tile>
|
|
<q-item-tile
|
|
class="csc-list-collapsible"
|
|
v-show="expanded"
|
|
>
|
|
<div class="csc-sublabel">
|
|
{{ $t('pbxConfig.groups') }}
|
|
</div>
|
|
<csc-pbx-sound-group
|
|
v-for="(group, index) in set.groups"
|
|
:invalid-group="invalidGroup(group)"
|
|
:group="group"
|
|
:group-label="groupLabel(group.name)"
|
|
:key="index"
|
|
@remove-file="removeFile"
|
|
/>
|
|
</q-item-tile>
|
|
</q-item-main>
|
|
<q-item-side
|
|
right
|
|
class="csc-list-actions-pinned"
|
|
>
|
|
<q-item-tile>
|
|
<q-btn
|
|
v-if="invalid"
|
|
icon="info"
|
|
:big="mobile"
|
|
color="negative"
|
|
flat
|
|
>
|
|
<q-tooltip>
|
|
{{ tooltipLabel }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-show="expanded"
|
|
icon="delete"
|
|
:big="mobile"
|
|
color="negative"
|
|
flat
|
|
@click="remove()"
|
|
/>
|
|
<q-btn
|
|
:icon="titleIcon"
|
|
:big="mobile"
|
|
color="primary"
|
|
flat
|
|
@click="toggleMain()"
|
|
/>
|
|
</q-item-tile>
|
|
</q-item-side>
|
|
<q-inner-loading
|
|
:visible="isLoading"
|
|
>
|
|
<q-spinner-dots
|
|
size="60px"
|
|
color="primary"
|
|
/>
|
|
</q-inner-loading>
|
|
</q-item>
|
|
</template>
|
|
|
|
<script>
|
|
import CscPbxSoundGroup from './CscPbxSoundGroup'
|
|
import {
|
|
QItem,
|
|
QItemSide,
|
|
QItemMain,
|
|
QItemTile,
|
|
QBtn,
|
|
QIcon,
|
|
QField,
|
|
QInput,
|
|
QInnerLoading,
|
|
QSpinnerDots,
|
|
QToggle,
|
|
QTooltip
|
|
} from 'quasar-framework'
|
|
import {
|
|
maxLength
|
|
} from 'vuelidate/lib/validators'
|
|
import {
|
|
mapGetters
|
|
} from 'vuex'
|
|
import {
|
|
showGlobalError
|
|
} from '../../../helpers/ui'
|
|
export default {
|
|
name: 'csc-pbx-sound-set',
|
|
props: {
|
|
set: Object,
|
|
mobile: Boolean,
|
|
loading: Boolean,
|
|
invalid: Boolean,
|
|
invalidCount: Number
|
|
},
|
|
components: {
|
|
CscPbxSoundGroup,
|
|
QItem,
|
|
QItemSide,
|
|
QItemMain,
|
|
QItemTile,
|
|
QBtn,
|
|
QIcon,
|
|
QField,
|
|
QInput,
|
|
QInnerLoading,
|
|
QSpinnerDots,
|
|
QToggle,
|
|
QTooltip
|
|
},
|
|
data () {
|
|
return {
|
|
expanded: false,
|
|
changes: this.getSet()
|
|
}
|
|
},
|
|
validations: {
|
|
changes: {
|
|
name: {
|
|
maxLength: maxLength(64)
|
|
},
|
|
description: {
|
|
maxLength: maxLength(255)
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters('pbxConfig', [
|
|
'groupLabel'
|
|
]),
|
|
itemClasses() {
|
|
let classes = ['csc-list-item'];
|
|
if (this.expanded) {
|
|
classes.push('csc-item-expanded');
|
|
}
|
|
else {
|
|
classes.push('csc-item-collapsed');
|
|
}
|
|
return classes;
|
|
},
|
|
titleIcon() {
|
|
if(!this.expanded) {
|
|
return 'keyboard arrow down';
|
|
}
|
|
else {
|
|
return 'keyboard arrow up';
|
|
}
|
|
},
|
|
name() {
|
|
return this.set.name;
|
|
},
|
|
nameHasChanged() {
|
|
return this.name + "" !== this.changes.name + "";
|
|
},
|
|
description() {
|
|
return this.set.description;
|
|
},
|
|
descriptionHasChanged() {
|
|
return this.description + "" !== this.changes.description + "";
|
|
},
|
|
nameButtons() {
|
|
let buttons = [];
|
|
let self = this;
|
|
if (this.nameHasChanged && this.$v.changes.name.$error) {
|
|
buttons.push({
|
|
icon: 'clear',
|
|
error: true,
|
|
handler (event) {
|
|
event.stopPropagation();
|
|
self.resetName();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
else if (this.nameHasChanged) {
|
|
buttons.push({
|
|
icon: 'check',
|
|
error: false,
|
|
handler (event) {
|
|
event.stopPropagation();
|
|
self.saveName();
|
|
}
|
|
}, {
|
|
icon: 'clear',
|
|
error: false,
|
|
handler (event) {
|
|
event.stopPropagation();
|
|
self.resetName();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
return buttons;
|
|
},
|
|
descriptionButtons() {
|
|
let buttons = [];
|
|
let self = this;
|
|
if (this.descriptionHasChanged && this.$v.changes.description.$error) {
|
|
buttons.push({
|
|
icon: 'clear',
|
|
error: true,
|
|
handler (event) {
|
|
event.stopPropagation();
|
|
self.resetDescription();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
else if (this.descriptionHasChanged) {
|
|
buttons.push({
|
|
icon: 'check',
|
|
error: false,
|
|
handler (event) {
|
|
event.stopPropagation();
|
|
self.saveDescription();
|
|
}
|
|
}, {
|
|
icon: 'clear',
|
|
error: false,
|
|
handler (event) {
|
|
event.stopPropagation();
|
|
self.resetDescription();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
return buttons;
|
|
},
|
|
setModel() {
|
|
return {
|
|
id: this.set.id,
|
|
name: this.changes.name,
|
|
description: this.changes.description,
|
|
contract_default: this.changes.contract_default
|
|
}
|
|
},
|
|
contractDefaultClasses() {
|
|
let classes = [];
|
|
if(this.attach) {
|
|
classes.push('csc-toggle-enabled');
|
|
}
|
|
else {
|
|
classes.push('csc-toggle-disabled');
|
|
}
|
|
return classes;
|
|
},
|
|
nameErrorMessage() {
|
|
if (!this.$v.changes.name.maxLength) {
|
|
return this.$t('validationErrors.maxLength', {
|
|
field: this.$t('pbxConfig.name'),
|
|
maxLength: this.$v.changes.name.$params.maxLength.max
|
|
});
|
|
}
|
|
},
|
|
descriptionErrorMessage() {
|
|
if (!this.$v.changes.description.maxLength) {
|
|
return this.$t('validationErrors.maxLength', {
|
|
field: this.$t('pbxConfig.description'),
|
|
maxLength: this.$v.changes.description.$params.maxLength.max
|
|
});
|
|
}
|
|
},
|
|
isLoading() {
|
|
return this.loading;
|
|
},
|
|
setDescription() {
|
|
let descriptionLength = this.set.description.length;
|
|
if (this.mobile && descriptionLength > 17) {
|
|
return this.set.description.substring(0, 14) + '...';
|
|
}
|
|
else if (!this.mobile && descriptionLength > 67) {
|
|
return this.set.description.substring(0, 64) + '...';
|
|
}
|
|
else {
|
|
return this.set.description;
|
|
}
|
|
},
|
|
tooltipLabel() {
|
|
if (this.invalidCount === 1) {
|
|
return this.$t('pbxConfig.invalidFileTooltip', { amount: this.invalidCount });
|
|
}
|
|
else if (this.invalidCount > 1) {
|
|
return this.$t('pbxConfig.invalidFilesTooltip', { amount: this.invalidCount });
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
toggleMain() {
|
|
this.expanded = !this.expanded;
|
|
},
|
|
remove() {
|
|
this.$emit('remove', this.set);
|
|
},
|
|
getSet() {
|
|
return {
|
|
name: this.set.name,
|
|
description: this.set.description,
|
|
contract_default: this.set.contract_default
|
|
}
|
|
},
|
|
resetName() {
|
|
this.changes.name = this.set.name;
|
|
},
|
|
saveName() {
|
|
if (this.$v.changes.$invalid) {
|
|
showGlobalError(this.$t('validationErrors.generic'));
|
|
}
|
|
else if (this.nameHasChanged) {
|
|
this.$emit('save-name', this.setModel);
|
|
}
|
|
},
|
|
resetDescription() {
|
|
this.changes.description = this.set.description;
|
|
},
|
|
saveDescription() {
|
|
if (this.$v.changes.$invalid) {
|
|
showGlobalError(this.$t('validationErrors.generic'));
|
|
}
|
|
else if (this.descriptionHasChanged) {
|
|
this.$emit('save-description', this.setModel);
|
|
}
|
|
},
|
|
toggleContractDefault() {
|
|
if (this.$v.changes.$invalid) {
|
|
showGlobalError(this.$t('validationErrors.generic'));
|
|
}
|
|
else {
|
|
this.$emit('save-contract-default', this.setModel);
|
|
}
|
|
},
|
|
invalidGroup(group) {
|
|
let count = 0;
|
|
group.handles.forEach((handle) => {
|
|
if (handle.filename.length === 0) {
|
|
count++;
|
|
}
|
|
});
|
|
return count > 0;
|
|
},
|
|
removeFile(item) {
|
|
let options = {
|
|
id: item.id,
|
|
handle: item.handle,
|
|
soundSet: this.setModel
|
|
};
|
|
this.$emit('remove-file', options);
|
|
}
|
|
},
|
|
watch: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" rel="stylesheet/stylus">
|
|
@import '../../../themes/quasar.variables.styl';
|
|
</style>
|