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.
420 lines
16 KiB
420 lines
16 KiB
<template>
|
|
<div
|
|
class="csc-cf-group"
|
|
v-if="group.destinations.length > 0"
|
|
>
|
|
<div
|
|
class="row csc-cf-destination-cont"
|
|
>
|
|
<div
|
|
class="col col-xs-12 col-md-4 text-right csc-cf-group-title"
|
|
>
|
|
|
|
{{groupTitle}}
|
|
|
|
<span
|
|
class="csc-cf-destination-add-condition"
|
|
v-if="!groupSourceset && !isTempGroup"
|
|
>
|
|
{{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
|
|
<span class="csc-cf-from-link">
|
|
{{ $t('pages.newCallForward.conditionBtnLabel') }}
|
|
</span>
|
|
<q-popover
|
|
ref="conditions"
|
|
@open="showConditions()"
|
|
@close="showConditionForm()"
|
|
>
|
|
<csc-new-call-forward-condition-type-select
|
|
ref="addCondition"
|
|
:enabled="true"
|
|
:groupName="group.name"
|
|
:groupId="group.id"
|
|
/>
|
|
</q-popover>
|
|
<q-popover
|
|
ref="onlineSourceset"
|
|
class="csc-cf-number-form"
|
|
v-bind:class="{ 'csc-cf-popover-hide': toggleConditionFromForm }"
|
|
@open="showSourcesetForm()"
|
|
@close="resetToggleCondition()"
|
|
>
|
|
<csc-new-call-forward-add-sourceset-form
|
|
ref="addSourceSet"
|
|
:enabled="true"
|
|
:groupName="group.name"
|
|
:groupId="group.id"
|
|
/>
|
|
</q-popover>
|
|
</span>
|
|
|
|
<span
|
|
v-if="groupSourceset"
|
|
>
|
|
{{ $t('pages.newCallForward.conditionBtnLabelPrefix') }}
|
|
<span class="csc-cf-from-link">
|
|
{{ $t('pages.newCallForward.fromLabelShort') +'"'+ groupSourceset +'"'}}
|
|
</span>
|
|
<q-popover
|
|
ref="sourcesList"
|
|
class="csc-cf-number-form"
|
|
@open="showSources()"
|
|
>
|
|
<csc-new-call-forward-edit-sources
|
|
ref="editSources"
|
|
:sourceSetName="groupSourceset"
|
|
:sourceSetId="sourceSet.id"
|
|
:groupName="group.name"
|
|
:groupId="group.id"
|
|
/>
|
|
</q-popover>
|
|
|
|
</span>
|
|
</div>
|
|
<div class="col text-left col-xs-12 col-md-2 csc-cf-dest-number-cont">
|
|
<q-toggle
|
|
v-model="isEnabled"
|
|
@change="toggleGroupChange"
|
|
/>
|
|
</div>
|
|
<div class="col col-xs-12 col-md-5 csc-cf-group-actions">
|
|
<q-icon
|
|
name="delete"
|
|
color="negative"
|
|
size="24px"
|
|
@click="showConfirmDialog"
|
|
/>
|
|
<csc-confirm-dialog
|
|
ref="confirmDialog"
|
|
title-icon="delete"
|
|
:title="$t('pages.newCallForward.cancelGroupDialogTitle', {groupName: this.group.name})"
|
|
:message="$t('pages.newCallForward.cancelGroupDialogText', {groupName: this.group.name})"
|
|
@confirm="confirmDeleteGroup"
|
|
/>
|
|
<q-spinner-dots
|
|
v-if="groupIsLoading"
|
|
class="csc-call-spinner"
|
|
color="primary"
|
|
:size="24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-for="(destination, index) in group.destinations"
|
|
:key="genKey()"
|
|
>
|
|
<csc-new-call-forward-destination
|
|
:destination="getDestination(index)"
|
|
:index="index"
|
|
:groupId="group.id"
|
|
:groupName="group.name"
|
|
:allCallsFwd="(['csc-unconditional', 'csc-busy', 'csc-offline'].includes(group.name) && index === 0)"
|
|
:class="{ 'csc-cf-destination-disabled': !isEnabled }"
|
|
|
|
/>
|
|
</div>
|
|
<div
|
|
class="row csc-cf-destination-cont"
|
|
>
|
|
<div class="col col-xs-12 col-md-4 text-right"></div>
|
|
<div
|
|
class="col col-xs-12 col-md-2 text-left"
|
|
v-if="showAddDestBtn"
|
|
:class="{ 'csc-cf-destination-disabled': !isEnabled }"
|
|
>
|
|
<div
|
|
class='csc-cf-destination-add-destination'
|
|
>
|
|
<q-icon
|
|
name="add"
|
|
color="primary"
|
|
size="24px"
|
|
/>
|
|
|
|
{{ $t('pages.newCallForward.addDestinationLabel') }}
|
|
|
|
</div>
|
|
<q-popover
|
|
ref="destTypeForm"
|
|
@open="showDestTypeForm()"
|
|
@close="showNext()"
|
|
class="csc-cf-group-popover-bottom"
|
|
>
|
|
<csc-new-call-forward-destination-type-form
|
|
ref="selectDestinationType"
|
|
/>
|
|
</q-popover>
|
|
<q-popover
|
|
ref="numberForm"
|
|
class="csc-cf-number-form csc-cf-group-popover-bottom"
|
|
v-bind:class="{ 'csc-cf-popover-hide': toggleNumberForm }"
|
|
@open="showNewDestNumber()"
|
|
>
|
|
<csc-new-call-forward-add-destination-form
|
|
ref="addDestinationForm"
|
|
:groupName="this.group.name"
|
|
:groupId="this.group.id"
|
|
/>
|
|
</q-popover>
|
|
</div>
|
|
<div class="col col-xs-12 col-md-6 "></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapGetters,
|
|
} from 'vuex'
|
|
import {
|
|
QSpinnerDots,
|
|
QToggle,
|
|
QIcon,
|
|
QPopover,
|
|
QList,
|
|
QItem,
|
|
QItemMain,
|
|
QItemSide
|
|
} from 'quasar-framework'
|
|
import CscObjectSpinner from "../../CscObjectSpinner";
|
|
import CscConfirmDialog from "../../CscConfirmationDialog";
|
|
import CscNewCallForwardDestination from './CscNewCallForwardDestination'
|
|
import CscNewCallForwardAddDestinationForm from './CscNewCallForwardAddDestinationForm'
|
|
import CscNewCallForwardEditSources from './CscNewCallForwardEditSources'
|
|
import CscNewCallForwardAddSourcesetForm from './CscNewCallForwardAddSourcesetForm'
|
|
import CscNewCallForwardConditionTypeSelect from './CscNewCallForwardConditionTypeSelect'
|
|
import CscNewCallForwardDestinationTypeForm from './CscNewCallForwardDestinationTypeForm'
|
|
export default {
|
|
name: 'csc-cf-group',
|
|
props: [
|
|
'group'
|
|
],
|
|
components: {
|
|
QSpinnerDots,
|
|
QToggle,
|
|
QIcon,
|
|
QPopover,
|
|
QList,
|
|
QItem,
|
|
QItemMain,
|
|
QItemSide,
|
|
CscConfirmDialog,
|
|
CscObjectSpinner,
|
|
CscNewCallForwardDestination,
|
|
CscNewCallForwardAddDestinationForm,
|
|
CscNewCallForwardEditSources,
|
|
CscNewCallForwardAddSourcesetForm,
|
|
CscNewCallForwardConditionTypeSelect,
|
|
CscNewCallForwardDestinationTypeForm
|
|
},
|
|
data () {
|
|
return {
|
|
toggleGroup: true,
|
|
isEnabled: true,
|
|
toggleNumberForm: true,
|
|
toggleConditionFromForm: true,
|
|
groupIsLoading: false,
|
|
sourceSet: null,
|
|
sources: []
|
|
};
|
|
},
|
|
async mounted(){
|
|
try{
|
|
if(!this.inCreation){
|
|
const isGroupEnabled = await this.$store.dispatch('newCallForward/isGroupEnabled', {groupName: this.group.name, id: this.group.id});
|
|
this.isEnabled = isGroupEnabled;
|
|
}
|
|
await this.updateSourcesetNames()
|
|
}
|
|
catch(err){
|
|
console.log(err)
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('newCallForward', [
|
|
'getGroupsLoaders',
|
|
'getOwnPhoneTimeout',
|
|
'groupsCount',
|
|
'getMappings',
|
|
'getGroupsLoaders'
|
|
]),
|
|
showAddDestBtn(){
|
|
const destinations = this.group.destinations;
|
|
for(let dest of destinations){
|
|
if(dest && (dest.simple_destination && dest.simple_destination.length < 2 || dest.destination.includes('voicebox.local'))){
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
|
|
},
|
|
groupTitle(){
|
|
let title;
|
|
switch(this.group.name){
|
|
case "csc-unconditional":
|
|
case "csc-timeout":
|
|
title = `${this.$t('pages.newCallForward.titles.timeoutGroup')}`;
|
|
break;
|
|
case "csc-unconditional-from":
|
|
case "csc-timeout-from":
|
|
title = `${this.$t('pages.newCallForward.titles.timeoutGroupFromPre')}`;
|
|
break;
|
|
case "csc-offline":
|
|
title = `${this.$t('pages.newCallForward.titles.offlineGroup')}`;
|
|
break;
|
|
case "csc-busy":
|
|
title = `${this.$t('pages.newCallForward.titles.busyGroup')}`;
|
|
break;
|
|
}
|
|
return title;
|
|
},
|
|
groupSourceset(){
|
|
return this.sourceSet ? this.sourceSet.name : false;
|
|
},
|
|
isTempGroup(){
|
|
return this.group.id.toString().includes('temp-');
|
|
}
|
|
},
|
|
watch: {
|
|
group: function () {
|
|
this.updateSourcesetNames();
|
|
},
|
|
getGroupsLoaders: function(){
|
|
const groupLoaders = this.getGroupsLoaders;
|
|
this.groupIsLoading = groupLoaders.includes(this.group.id);
|
|
}
|
|
},
|
|
methods: {
|
|
// we need to generate key because destinations have no id
|
|
genKey(){
|
|
return Math.random();
|
|
},
|
|
showNewDestNumber(){
|
|
this.$refs.addDestinationForm.add();
|
|
},
|
|
async showNext(){
|
|
switch(this.$refs.selectDestinationType.action){
|
|
case 'destination':
|
|
this.toggleNumberForm = false;
|
|
this.$refs.numberForm.open();
|
|
break;
|
|
case 'voicemail':
|
|
await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
|
|
await this.$store.dispatch('newCallForward/addVoiceMail', this.group.id);
|
|
await this.$store.dispatch('newCallForward/loadForwardGroups');
|
|
await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
|
|
break;
|
|
}
|
|
},
|
|
async showConditionForm(){
|
|
switch(this.$refs.addCondition.action){
|
|
case 'addFromCondition':
|
|
this.toggleConditionFromForm = false;
|
|
this.$refs.onlineSourceset.open();
|
|
break;
|
|
}
|
|
},
|
|
showDestTypeForm(){
|
|
this.toggleNumberForm = true;
|
|
this.$refs.selectDestinationType.add();
|
|
},
|
|
getDestination(index){
|
|
let destination = {...this.group.destinations[index]}
|
|
if(index === 0){
|
|
destination.timeout = !isNaN(this.getOwnPhoneTimeout) ? this.getOwnPhoneTimeout : 5;
|
|
}
|
|
else {
|
|
destination.timeout = this.group.destinations[index-1].timeout;
|
|
}
|
|
return destination;
|
|
},
|
|
async toggleGroupChange(){
|
|
await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
|
|
await this.$store.dispatch('newCallForward/enableGroup', {
|
|
groupName: this.group.name,
|
|
id: this.group.id,
|
|
enabled: this.isEnabled
|
|
});
|
|
await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
|
|
},
|
|
showConditions(){
|
|
this.$refs.addCondition.add();
|
|
},
|
|
showSourcesetForm(){
|
|
this.$refs.addSourceSet.add();
|
|
},
|
|
showSources(){
|
|
this.$refs.editSources.add();
|
|
},
|
|
resetToggleCondition(){
|
|
this.toggleConditionFromForm = true;
|
|
},
|
|
|
|
async updateSourcesetNames(){
|
|
const mappings = this.getMappings;
|
|
const groupMappingId = await this.$store.dispatch('newCallForward/getMappingIdByGroupName', this.group.name);
|
|
let groupMapping, sourceSet;
|
|
if(mappings[groupMappingId]){
|
|
groupMapping = mappings[groupMappingId].filter(($mapping)=>{
|
|
return $mapping.destinationset_id == this.group.id;
|
|
});
|
|
sourceSet = groupMapping[0] && groupMapping[0].sourceset_id ? await this.$store.dispatch('newCallForward/getSourcesetById', groupMapping[0].sourceset_id) : null;
|
|
if(sourceSet){
|
|
this.sourceSet = sourceSet;
|
|
this.sources = this.sourceSet.sources;
|
|
}
|
|
}
|
|
},
|
|
showConfirmDialog(){
|
|
this.$refs.confirmDialog.open();
|
|
},
|
|
async confirmDeleteGroup(){
|
|
await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
|
|
await this.$store.dispatch('newCallForward/deleteForwardGroup', this.group);
|
|
await this.$store.dispatch('newCallForward/loadForwardGroups');
|
|
await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" rel="stylesheet/stylus">
|
|
@import '../../../themes/app.common.styl'
|
|
.csc-cf-group
|
|
width 100%
|
|
.csc-cf-group-cont
|
|
position relative
|
|
.csc-cf-destination-label
|
|
text-align right
|
|
.csc-cf-destination-value
|
|
text-align center
|
|
.csc-cf-destination-add-condition
|
|
font-size 16px
|
|
.csc-cf-destination-add-destination
|
|
padding-left 25px
|
|
width 250px
|
|
white-space nowrap
|
|
overflow hidden
|
|
text-overflow ellipsis
|
|
color $primary
|
|
cursor pointer
|
|
.csc-cf-group-popover-bottom
|
|
margin-left 30px
|
|
.csc-cf-from-link
|
|
color $primary
|
|
cursor pointer
|
|
.csc-cf-group-actions
|
|
cursor pointer
|
|
.csc-cf-destination-disabled
|
|
color $cf-disabled-label
|
|
.csc-cf-destination-link
|
|
color $cf-disabled-link
|
|
.csc-cf-destination-actions
|
|
.q-icon
|
|
color $cf-disabled-btn !important
|
|
.csc-cf-destination-add-destination
|
|
color $cf-disabled-link
|
|
.q-icon
|
|
color $cf-disabled-link !important
|
|
</style>
|