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