What has been done: - TT#47384, CallQueueConfig: As a PBXAdmin, I want to have a separate page to be able to manage CallQueueConfigurations - TT#47385, CallQueueConfig: As a PBXAdmin, I want to see a list of all active CallQueueConfigurations Change-Id: I6ed9b1ee4a1a8518b8124a4dc22fac1988b0bc11changes/63/24763/8
raxelsen
7 years ago
committed by
Hans-Peter Herzog
parent
b346008d75
commit
26224ec89d
@ -0,0 +1,166 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<q-item
|
||||||
|
:class="itemClasses"
|
||||||
|
>
|
||||||
|
<q-item-side
|
||||||
|
v-if="!expanded"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
size="24px"
|
||||||
|
name="queue"
|
||||||
|
color="white"
|
||||||
|
/>
|
||||||
|
</q-item-side>
|
||||||
|
<q-item-main>
|
||||||
|
<q-item-tile
|
||||||
|
v-if="!expanded"
|
||||||
|
class="csc-item-title"
|
||||||
|
label
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
v-if="subscriber.is_pbx_group"
|
||||||
|
size="24px"
|
||||||
|
name="group"
|
||||||
|
color="white"
|
||||||
|
/>
|
||||||
|
<q-icon
|
||||||
|
v-else
|
||||||
|
size="24px"
|
||||||
|
name="person"
|
||||||
|
color="white"
|
||||||
|
/>
|
||||||
|
<span class="csc-item-label">{{ subscriber.display_name }}</span>
|
||||||
|
</q-item-tile>
|
||||||
|
<q-item-tile
|
||||||
|
v-if="!expanded"
|
||||||
|
class="csc-item-subtitle"
|
||||||
|
sublabel
|
||||||
|
>
|
||||||
|
<span class="csc-item-label">{{ $t('pbxConfig.queueLength') }}:</span>
|
||||||
|
<span class="csc-item-value">{{ subscriber.max_queue_length }}</span>
|
||||||
|
</q-item-tile>
|
||||||
|
<q-item-tile
|
||||||
|
v-if="!expanded"
|
||||||
|
class="csc-item-subtitle"
|
||||||
|
sublabel
|
||||||
|
>
|
||||||
|
<span class="csc-item-label">{{ $t('pbxConfig.wrapUpTime') }}:</span>
|
||||||
|
<span class="csc-item-value">{{ subscriber.queue_wrap_up_time }}</span>
|
||||||
|
</q-item-tile>
|
||||||
|
<q-item-tile
|
||||||
|
class="csc-list-item-main"
|
||||||
|
v-if="expanded"
|
||||||
|
>
|
||||||
|
<q-field
|
||||||
|
:label="$t('pbxConfig.queueExtensionName')">
|
||||||
|
<q-input
|
||||||
|
dark
|
||||||
|
readonly
|
||||||
|
:value="subscriber.display_name"
|
||||||
|
/>
|
||||||
|
</q-field>
|
||||||
|
<q-field
|
||||||
|
:label="$t('pbxConfig.queueLength')">
|
||||||
|
<q-input
|
||||||
|
dark
|
||||||
|
readonly
|
||||||
|
:value="subscriber.max_queue_length"
|
||||||
|
/>
|
||||||
|
</q-field>
|
||||||
|
<q-field
|
||||||
|
:label="$t('pbxConfig.wrapUpTime')">
|
||||||
|
<q-input
|
||||||
|
dark
|
||||||
|
readonly
|
||||||
|
:value="subscriber.queue_wrap_up_time"
|
||||||
|
suffix="seconds"
|
||||||
|
/>
|
||||||
|
</q-field>
|
||||||
|
</q-item-tile>
|
||||||
|
</q-item-main>
|
||||||
|
<q-item-side
|
||||||
|
right
|
||||||
|
class="csc-list-actions-pinned"
|
||||||
|
>
|
||||||
|
<q-item-tile>
|
||||||
|
<q-btn
|
||||||
|
:icon="titleIcon"
|
||||||
|
:big="isMobile"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
@click="toggleMain()"
|
||||||
|
/>
|
||||||
|
</q-item-tile>
|
||||||
|
</q-item-side>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
QField,
|
||||||
|
QInput,
|
||||||
|
QIcon,
|
||||||
|
Platform,
|
||||||
|
QBtn,
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile
|
||||||
|
} from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
name: 'csc-pbx-call-queue',
|
||||||
|
props: [
|
||||||
|
'subscriber'
|
||||||
|
],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
expanded: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
QField,
|
||||||
|
QInput,
|
||||||
|
QIcon,
|
||||||
|
QBtn,
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
itemClasses() {
|
||||||
|
let classes = ['csc-list-item', 'csc-pbx-call-queue'];
|
||||||
|
if (this.expanded) {
|
||||||
|
classes.push('csc-item-expanded');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
classes.push('csc-item-collapsed');
|
||||||
|
}
|
||||||
|
return classes;
|
||||||
|
},
|
||||||
|
isMobile() {
|
||||||
|
return Platform.is.mobile;
|
||||||
|
},
|
||||||
|
titleIcon() {
|
||||||
|
if(!this.expanded) {
|
||||||
|
return 'keyboard arrow down';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 'keyboard arrow up';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleMain() {
|
||||||
|
this.expanded = !this.expanded;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
@import '../../../themes/quasar.variables';
|
||||||
|
</style>
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<csc-page
|
||||||
|
:is-list="true"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="isListLoadingVisible"
|
||||||
|
class="row justify-center"
|
||||||
|
>
|
||||||
|
<q-spinner-dots
|
||||||
|
color="primary"
|
||||||
|
:size="40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<q-list
|
||||||
|
striped-odd
|
||||||
|
no-border
|
||||||
|
multiline
|
||||||
|
:highlight="!isMobile"
|
||||||
|
>
|
||||||
|
<csc-pbx-call-queue
|
||||||
|
v-for="(subscriber, index) in callQueueGroupsAndSeats"
|
||||||
|
:key="index"
|
||||||
|
:subscriber="subscriber"
|
||||||
|
/>
|
||||||
|
</q-list>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="callQueueGroupsAndSeats.length === 0 && !isListRequesting"
|
||||||
|
class="row justify-center csc-no-entities"
|
||||||
|
>
|
||||||
|
{{ $t('pbxConfig.noCallQueues') }}
|
||||||
|
</div>
|
||||||
|
</csc-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CscPage from '../../CscPage'
|
||||||
|
import CscPbxCallQueue from './CscPbxCallQueue'
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import {
|
||||||
|
QField,
|
||||||
|
QInput,
|
||||||
|
QIcon,
|
||||||
|
QSelect,
|
||||||
|
QChip,
|
||||||
|
QList,
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile,
|
||||||
|
Platform,
|
||||||
|
QSpinnerDots
|
||||||
|
} from 'quasar-framework'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CscPbxCallQueue,
|
||||||
|
CscPage,
|
||||||
|
QField,
|
||||||
|
QInput,
|
||||||
|
QIcon,
|
||||||
|
QSelect,
|
||||||
|
QChip,
|
||||||
|
QList,
|
||||||
|
QItem,
|
||||||
|
QItemSide,
|
||||||
|
QItemMain,
|
||||||
|
QItemTile,
|
||||||
|
QSpinnerDots
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$store.dispatch('pbxConfig/listCallQueueGroupsAndSeats');
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters('pbxConfig', [
|
||||||
|
'callQueueGroupsAndSeats',
|
||||||
|
'isListLoadingVisible',
|
||||||
|
'isListRequesting'
|
||||||
|
]),
|
||||||
|
isMobile() {
|
||||||
|
return Platform.is.mobile;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
@import '../../../themes/quasar.variables.styl';
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue