sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#47513 Grouped list of SoundItems

Browse Source 
Change-Id: Iea2324bafa0f01100529b611037da9a631ce38f3
changes/50/27550/8
Robert Axelsen 6 years ago
parent da0da9d755
commit 8d95437a08
9 changed files with 157 additions and 136 deletions
Show Stats Download Patch File Download Diff File

11
src/api/pbx-config.js
Unescape View File

@ -628,7 +628,11 @@ export function getSoundHandles(options) {
options = _.merge(options, {
path: 'api/soundhandles/',
root: '_embedded.ngcp:soundhandles',
all: true
all: true,
params: {
order_by: 'name',
order_by_direction: 'asc'
}
});
getList(options).then((list) => {
// Ngcp-panel only lists three groups ('digits', 'music_on_hold'
@ -697,14 +701,15 @@ export function getSoundFilesGrouped(options) {
return handles;
}).then((merged) => {
let groupedFiles = {
groups: _(merged)
groups: _.sortBy(
_(merged)
.groupBy('group')
.map((items, group) => {
return {
name: group,
handles: items
};
}).value()
}).value(), 'name')
};
resolve(groupedFiles);
}).catch((err)=>{

34
src/components/form/CscSoundFileUpload.vue
Unescape View File

@ -2,12 +2,32 @@
<q-field
class="csc-upload-field"
:icon="icon"
:label="label"
>
<div
v-if="label"
class="row items-end"
>
<slot
class="col-auto"
name="additional"
>
</slot>
<q-input
class="col-xl col-sm-12"
:disable="isPlaying"
dark
readonly
:value="inputValue"
:after="inputButtons"
/>
</div>
<q-input
v-if="floatLabel"
:disable="isPlaying"
dark
readonly
:float-label="label"
:float-label="floatLabel"
:value="inputValue"
:after="inputButtons"
/>
@ -38,6 +58,7 @@
/>
</div>
<csc-audio-player
v-if="!hidePlayer"
ref="audioPlayer"
:file-url="fileUrl"
:loaded="loaded"
@ -48,6 +69,7 @@
@stopped="audioPlayerStopped"
/>
<div
v-if="!hidePlayer"
class="csc-file-upload-actions"
>
<q-btn
@ -110,7 +132,10 @@
'progress',
'fileTypes',
'fileUrl',
'loaded'
'loaded',
'disabled',
'hidePlayer',
'floatLabel'
],
data () {
return {
@ -133,7 +158,7 @@
inputButtons() {
let buttons = [];
let self = this;
if (this.isPlaying) {
if (this.isPlaying || this.disabled) {
buttons.push({
icon: 'folder',
error: false,
@ -209,6 +234,9 @@
.q-field-icon
color $primary
.items-end
margin-left -1.3rem
.csc-upload-field.csc-player-margin
margin-bottom 0

5
src/components/layouts/UserMenu.vue
Unescape View File

@ -15,9 +15,10 @@
highlight
>
<q-item
v-for="language in languages"
v-for="(language, index) in languages"
@click="changeLanguage(language[0])"
class="csc-subitem"
:key="index"
>
<q-item-main
:label="language[1]"
@ -59,7 +60,7 @@
console.log(language);
this.$emit('change-language', language);
this.$refs.languageCollapsible.close();
},
}
}
}
</script>

27
src/components/pages/PbxConfiguration/CscPbxSoundGroup.vue
Unescape View File

@ -1,37 +1,24 @@
<template>
<q-collapsible
:label="group.name"
:label="groupLabel"
>
<q-list
striped-odd
no-border
multiline
:highlight="!mobile"
>
<q-item
v-if="!mobile"
>
<div class="col">
Handle
</div>
<div class="col">
Filename
</div>
<div class="col">
Loopplay
</div>
</q-item>
<csc-pbx-sound-item
v-for="item in group.handles"
:key="item.id"
:item="item"
:mobile="mobile"
:group="groupLabel"
/>
</q-list>
</q-collapsible>
</template>
<script>
import _ from 'lodash'
import CscPbxSoundItem from './CscPbxSoundItem'
import {
QList,
@ -47,8 +34,7 @@
export default {
name: 'csc-pbx-sound-group',
props: {
group: Object,
mobile: Boolean
group: Object
},
components: {
CscPbxSoundItem,
@ -69,6 +55,11 @@
mounted() {
},
computed: {
groupLabel() {
let regex = /[-_]/g;
let name = _.capitalize(this.group.name.replace(regex, ' '));
return name;
}
},
methods: {
},

148
src/components/pages/PbxConfiguration/CscPbxSoundItem.vue
Unescape View File

@ -1,60 +1,34 @@
<template>
<q-item
highlight
class="csc-sound-item"
>
<q-item-main
v-if="!mobile"
class="row"
>
<!--NOTE: Would like some feedback on this, please. Made separate styling-->
<!--for mobile/desktop, as with 60 or more items in some of the groups-->
<!--I don't see a better way to display it. Will clean up css once-->
<!--feedback is implemented-->
<div class="col">
{{ item.handle }}
</div>
<div class="col">
{{ item.filename }}
</div>
<div class="col">
<q-checkbox
readonly
:value="loop"
/>
</div>
</q-item-main>
<q-item-main
v-if="mobile"
class="sound-item-row mobile"
>
<div>
<span class="item-sublabel">
Handle:
</span>
<span class="item-values">
{{ item.handle }}
</span>
</div>
<div>
<span class="item-sublabel">
Filename:
</span>
<span class="item-values">
{{ item.filename }}
</span>
</div>
<div>
<span class="item-sublabel">
Loopplay:
</span>
<span class="item-values">
<q-checkbox
readonly
:value="loop"
<q-item-main>
<csc-sound-file-upload
:ref="refName"
icon="music_note"
file-types=".wav,.mp3"
:label="handleName"
:value="fileLabel"
:disabled="true"
:hide-player="!file"
>
<div
slot="additional"
>
<q-toggle
:class="loopClasses"
:label="$t('pbxConfig.playingInLoop')"
v-model="loop"
:disable="true"
checked-icon="loop"
unchecked-icon="loop"
/>
</span>
</div>
<q-tooltip>
{{ loopTooltipLabel }}
</q-tooltip>
</div>
</csc-sound-file-upload>
</q-item-main>
</q-item>
</template>
@ -63,43 +37,66 @@
import {
QList,
QItem,
QItemSide,
QItemMain,
QItemTile,
QBtn,
QIcon,
QCollapsible,
QCheckbox
QToggle,
QTooltip
} from 'quasar-framework'
import CscSoundFileUpload from '../../form/CscSoundFileUpload'
export default {
name: 'csc-pbx-sound-item',
props: {
item: Object,
mobile: Boolean
group: String
},
components: {
CscSoundFileUpload,
QList,
QItem,
QItemSide,
QItemMain,
QItemTile,
QBtn,
QIcon,
QCollapsible,
QCheckbox
QToggle,
QTooltip
},
data () {
return {
loop: this.hasLoop()
loop: this.hasLoop(),
file: this.hasFile()
}
},
mounted() {
},
computed: {
handleName() {
return `${this.group}: ${this.item.handle}`;
},
refName() {
return `handle-${this.item.handle}`;
},
fileLabel() {
let noSound = this.$t('pbxConfig.noSoundUploaded');
return this.item.filename.length > 0 ? this.item.filename : noSound;
},
loopClasses() {
let classes = ['csc-additional'];
if(this.loop) {
classes.push('csc-toggle-enabled');
}
else {
classes.push('csc-toggle-disabled');
}
return classes;
},
loopTooltipLabel() {
return this.loop ?
this.$t('pbxConfig.dontPlayInLoop') :
this.$t('pbxConfig.playInLoop');
}
},
methods: {
hasLoop() {
return !!this.item.loopplay;
},
hasFile() {
return this.item.filename.length > 0;
}
},
watch: {
@ -109,21 +106,12 @@
<style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/quasar.variables.styl';
@import '../../../themes/quasar.variables.styl';
.sound-item-row.mobile
padding 16px
padding-left 0px
display block
color $white
white-space nowrap
overflow hidden
font-size 16px
.item-values
color $white
.csc-sound-item
.q-field-icon
padding-left 12px
.item-sublabel
color $light
.csc-upload-field
margin 0 0 10px 0
</style>

24
src/components/pages/PbxConfiguration/CscPbxSoundSet.vue
Unescape View File

@ -7,7 +7,7 @@
>
<q-icon
size="24px"
name="music_note"
name="queue_music"
color="white"
/>
</q-item-side>
@ -63,8 +63,6 @@
v-for="(group, index) in set.groups"
:group="group"
:key="index"
:highlight="!mobile"
:mobile="mobile"
/>
</q-item-tile>
</q-item-main>
@ -179,24 +177,4 @@
<style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/quasar.variables.styl';
.csc-list-collapsible
margin-top $flex-gutter-md
.q-item
padding-left 0
.q-item-section
padding-top 0
.q-item-icon
color $primary
.q-collapsible-sub-item
padding 0
.csc-sublabel
color $light
margin-bottom $flex-gutter-sm
</style>

4
src/components/pages/Voicebox/Voicebox.vue
Unescape View File

@ -24,7 +24,7 @@
ref="uploadBusy"
icon="music_note"
file-types=".wav,.mp3"
:label="$t('voicebox.label.busyGreeting')"
:float-label="$t('voicebox.label.busyGreeting')"
:value="busyGreetingLabel"
:progress="uploadBusyProgress"
:uploading="uploadBusyGreetingRequesting"
@ -40,7 +40,7 @@
ref="uploadUnavail"
icon="music_note"
file-types=".wav,.mp3"
:label="$t('voicebox.label.unavailGreeting')"
:float-label="$t('voicebox.label.unavailGreeting')"
:value="unavailGreetingLabel"
:progress="uploadUnavailProgress"
:uploading="uploadUnavailGreetingRequesting"

6
src/locales/en.json
Unescape View File

@ -437,7 +437,11 @@
"callers": "callers",
"description": "Description",
"removeSoundSetTitle": "Remove sound set",
"removeSoundSetText": "You are about to remove the {set} sound set"
"removeSoundSetText": "You are about to remove the {set} sound set",
"noSoundUploaded": "No sound uploaded",
"playingInLoop": "Playing in loop",
"playInLoop": "Play sound in loop",
"dontPlayInLoop": "Don't play sound in loop"
},
"callBlocking": {
"privacyEnabledToast": "Your number is hidden to the callee",

34
src/themes/app.common.styl
Unescape View File

@ -17,7 +17,7 @@
.csc-toggle-disabled
.q-option-label
color: $faded
color $faded
.csc-item-field
.csc-item-value
@ -109,6 +109,7 @@
color $body-color
span
color $body-color
.csc-list-item.csc-item-collapsed.q-item
.q-item-main
margin-left $flex-gutter-sm * 1.4
@ -132,9 +133,9 @@
margin 0
.csc-item-expanded
.csc-list-actions-pinned.q-item-side-right
top $flex-gutter-sm
right $flex-gutter-sm
margin auto
top $flex-gutter-sm
right $flex-gutter-sm
margin auto
.q-item-main
padding-top $flex-gutter-md
@ -188,3 +189,28 @@
.csc-item-highlight,
.csc-item-highlight:hover
background alpha($primary, 0.3) !important
.csc-additional
padding-right $flex-gutter-lg
padding-bottom $flex-gutter-xs
.q-option-label
color $light
.csc-list-collapsible
margin-top $flex-gutter-md
.q-item
padding-left 0
margin-bottom 10px
.q-item-section
padding 10px 0 !important
.q-item-icon
color $primary
.csc-sublabel
color $light
margin-bottom $flex-gutter-sm
.q-item-label
padding-left $flex-gutter-sm
.q-item-link
background alpha(white, 0.04)
.q-item-link:hover
background alpha(white, 0.10)

Write Preview
Loading…
Cancel
Save