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.
311 lines
10 KiB
311 lines
10 KiB
<template>
|
|
<q-tabs
|
|
v-model="tab"
|
|
no-pane-border
|
|
inverted
|
|
class="sourceset-tabs"
|
|
>
|
|
<q-tab
|
|
v-for="(sourceset, index) in destinations"
|
|
:default="index === 0"
|
|
:count="destinationsCount(sourceset.destinationGroups)"
|
|
:key="sourceset.sourcesetId || 0"
|
|
:name="sourceset.sourcesetName || 'Everybody'"
|
|
:label="sourceset.sourcesetName || 'Everybody'"
|
|
icon="people"
|
|
slot="title"
|
|
/>
|
|
<q-tab
|
|
slot="title"
|
|
label="Add new"
|
|
name="addnew"
|
|
icon="fa-plus"
|
|
/>
|
|
<q-tab-pane
|
|
v-for="sourceset in destinations"
|
|
:key="sourceset.sourcesetId || 0"
|
|
:name="sourceset.sourcesetName || 'Everybody'"
|
|
class="sourceset-pane"
|
|
>
|
|
<div
|
|
class="sources-section"
|
|
v-if="sourceset.sourcesetId"
|
|
>
|
|
<div class="sources-title">
|
|
<q-icon
|
|
name="contact_phone"
|
|
class="sources-icon"
|
|
/>
|
|
{{ $t('pages.callForward.sources.sourcesTitleMode',
|
|
{ mode: capitalizedMode(sourceset.sourcesetMode) }) }}
|
|
</div>
|
|
<q-list no-border>
|
|
<q-item
|
|
v-for="source in sourcesetSources(sourceset.sourcesetId)"
|
|
class="source-item"
|
|
highlight
|
|
separator
|
|
>
|
|
{{ source.source }}
|
|
</q-item>
|
|
</q-list>
|
|
<q-btn
|
|
v-if="!sourcesetsFormEnabled"
|
|
flat
|
|
color="primary"
|
|
icon="fa-plus"
|
|
@click="openForm()"
|
|
>
|
|
{{ $t('pages.callForward.sources.addSourceButton') }}
|
|
</q-btn>
|
|
<csc-sourcesets-form
|
|
v-if="sourcesetsFormEnabled"
|
|
:sourceset-id="sourceset.sourcesetId"
|
|
:form-enabled="addSourceFormEnabled"
|
|
@add-source="addSource"
|
|
@source-form-close="closeForm"
|
|
ref="sourcesetsForm"
|
|
/>
|
|
</div>
|
|
<csc-call-forward-destinations
|
|
:sourceset="sourceset.sourcesetId"
|
|
:timeset="timesetName"
|
|
:destinations="sourceset.destinationGroups"
|
|
/>
|
|
</q-tab-pane>
|
|
<q-tab-pane name="addnew">
|
|
<q-list no-border>
|
|
<q-item>
|
|
<q-item-main>
|
|
<q-item-tile class="row no-wrap">
|
|
<q-input
|
|
autofocus
|
|
class="col"
|
|
v-model="sourcesetName"
|
|
:float-label="$t('pages.callForward.sources.sourceset')"
|
|
color="primary"
|
|
@keyup.enter="addSourceset()" />
|
|
<q-input
|
|
class="col"
|
|
v-model="source"
|
|
:float-label="$t('pages.callForward.sources.source')"
|
|
color="primary"
|
|
@keyup.enter="addSourceset()" />
|
|
<q-select
|
|
v-model="mode"
|
|
:options="modes"
|
|
color="primary"
|
|
class="col"
|
|
align="right" />
|
|
</q-item-tile>
|
|
<q-item-tile>
|
|
<q-btn
|
|
flat
|
|
color="primary"
|
|
icon-right="fa-save"
|
|
@click="addSourceset()"
|
|
:disable="!isValid"
|
|
class="sourceset-add-button">
|
|
{{ $t('buttons.save') }}
|
|
</q-btn>
|
|
</q-item-tile>
|
|
</q-item-main>
|
|
</q-item>
|
|
</q-list>
|
|
</q-tab-pane>
|
|
</q-tabs>
|
|
</template>
|
|
|
|
<script>
|
|
import CscCallForwardDestinations from './CscCallForwardDestinations'
|
|
import CscSourcesetsForm from './CscSourcesetsForm'
|
|
import { mapGetters } from 'vuex'
|
|
import {
|
|
startLoading,
|
|
stopLoading,
|
|
showGlobalError,
|
|
showToast
|
|
} from '../../../helpers/ui'
|
|
import {
|
|
QTabs,
|
|
QTab,
|
|
QTabPane,
|
|
QList,
|
|
QItem,
|
|
QItemMain,
|
|
QItemTile,
|
|
QInput,
|
|
QIcon,
|
|
QSelect,
|
|
QBtn
|
|
} from 'quasar-framework'
|
|
export default {
|
|
name: 'csc-sourcesets',
|
|
props: {
|
|
destinations: Object,
|
|
sourcesets: Object,
|
|
timesetName: [String, Object]
|
|
},
|
|
data() {
|
|
return {
|
|
sourcesetName: '',
|
|
source: '',
|
|
mode: 'whitelist',
|
|
modes: [
|
|
{
|
|
label: 'Whitelist',
|
|
value: 'whitelist'
|
|
},
|
|
{
|
|
label: 'Blacklist',
|
|
value: 'blacklist'
|
|
}
|
|
],
|
|
tab: 'Everybody',
|
|
sourcesetsFormEnabled: false
|
|
}
|
|
},
|
|
components: {
|
|
CscCallForwardDestinations,
|
|
CscSourcesetsForm,
|
|
QTabs,
|
|
QTab,
|
|
QTabPane,
|
|
QList,
|
|
QItem,
|
|
QItemMain,
|
|
QItemTile,
|
|
QInput,
|
|
QIcon,
|
|
QSelect,
|
|
QBtn
|
|
},
|
|
computed: {
|
|
...mapGetters('callForward', [
|
|
'addSourceState',
|
|
'addSourceError',
|
|
'lastAddedSource',
|
|
'addSourceFormEnabled'
|
|
]),
|
|
isValid() {
|
|
return this.source.length > 0 && this.sourcesetName.length > 0;
|
|
}
|
|
},
|
|
methods: {
|
|
capitalizedMode(mode) {
|
|
return `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`;
|
|
},
|
|
resetForm() {
|
|
this.source = '';
|
|
this.sourcesetName = '';
|
|
this.mode = 'whitelist';
|
|
this.tab = 'Everybody';
|
|
},
|
|
sourcesetSources(id) {
|
|
return this.sourcesets.filter((sourceset) => {
|
|
return sourceset.id === id;
|
|
})[0].sources;
|
|
},
|
|
destinationsCount(groups) {
|
|
let groupCollection = [
|
|
{ name: 'busy', length: 0 },
|
|
{ name: 'offline', length: 0 },
|
|
{ name: 'online', length: 0 }
|
|
];
|
|
groupCollection.forEach((group) => {
|
|
if (groups[group.name].length > 0) {
|
|
let count = 0;
|
|
groups[group.name].forEach((destinationSet) => {
|
|
count += destinationSet.destinations.length;
|
|
});
|
|
group.length = count;
|
|
}
|
|
});
|
|
return groupCollection[0].length + groupCollection[1].length + groupCollection[2].length;
|
|
},
|
|
tabId(id) {
|
|
return id === null ? 0 : id;
|
|
},
|
|
tabName(name) {
|
|
return name === null ? 'Everybody' : name;
|
|
},
|
|
addSourceset() {
|
|
if (this.isValid) {
|
|
this.$store.dispatch('callForward/createSourcesetWithSource', {
|
|
sourcesetName: this.sourcesetName,
|
|
source: this.source,
|
|
mode: this.mode
|
|
});
|
|
}
|
|
else {
|
|
showGlobalError(this.$t('pages.callForward.sources.fieldMissing'));
|
|
}
|
|
},
|
|
openForm() {
|
|
this.sourcesetsFormEnabled = true;
|
|
},
|
|
closeForm() {
|
|
this.$refs.sourcesetsForm[0].resetForm();
|
|
this.sourcesetsFormEnabled = false;
|
|
},
|
|
addSource(options) {
|
|
this.$store.dispatch('callForward/appendSourceToSourceset', options);
|
|
}
|
|
},
|
|
watch: {
|
|
addSourceState(state) {
|
|
if (state === 'requesting') {
|
|
startLoading();
|
|
}
|
|
else if (state === 'failed') {
|
|
stopLoading();
|
|
showGlobalError(this.addSourceError);
|
|
}
|
|
else if (state === 'succeeded') {
|
|
stopLoading();
|
|
showToast(this.$t('pages.callForward.sources.addSourceSuccessMessage', {
|
|
source: this.lastAddedSource
|
|
}));
|
|
this.$store.dispatch('callForward/loadSourcesets');
|
|
this.$store.dispatch('callForward/loadDestinations', {
|
|
timeset: this.timesetName
|
|
});
|
|
this.closeForm();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" rel="stylesheet/stylus">
|
|
@import '../../../themes/quasar.variables.styl'
|
|
|
|
.q-item-highlight.source-item:hover
|
|
background-color lighten($primary, 70%)
|
|
|
|
.q-item.source-item
|
|
padding 0
|
|
|
|
.sourceset-tabs
|
|
|
|
.q-tab-pane
|
|
padding 12px 0 0 0
|
|
|
|
.q-item
|
|
padding 8px 0 0 0
|
|
|
|
.sourceset-add-button
|
|
margin-top 8px
|
|
|
|
.sources-section
|
|
padding 30px 0 20px 0
|
|
|
|
.sources-title
|
|
color $secondary
|
|
font-size 16px
|
|
|
|
.sources-icon
|
|
margin-right 5px
|
|
|
|
</style>
|