TT#47513 Grouped list of SoundItems

Change-Id: Iea2324bafa0f01100529b611037da9a631ce38f3

src/api/pbx-config.js

@@ -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)=>{

src/components/form/CscSoundFileUpload.vue

@@ -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
 

src/components/layouts/UserMenu.vue

@@ -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>

src/components/pages/PbxConfiguration/CscPbxSoundGroup.vue

@@ -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,
+            group: Object
-            mobile: Boolean
         },
         components: {
             CscPbxSoundItem,
@@ -69,6 +55,11 @@
         mounted() {
         },
         computed: {
+            groupLabel() {
+                let regex = /[-_]/g;
+                let name = _.capitalize(this.group.name.replace(regex, ' '));
+                return name;
+            }
         },
         methods: {
         },

src/components/pages/PbxConfiguration/CscPbxSoundItem.vue

@@ -1,60 +1,34 @@
 <template>
     <q-item
         highlight
+        class="csc-sound-item"
     >
-        <q-item-main
+        <q-item-main>
-            v-if="!mobile"
+            <csc-sound-file-upload
-            class="row"
+                :ref="refName"
-        >
+                icon="music_note"
-
+                file-types=".wav,.mp3"
-            <!--NOTE: Would like some feedback on this, please. Made separate styling-->
+                :label="handleName"
-            <!--for mobile/desktop, as with 60 or more items in some of the groups-->
+                :value="fileLabel"
-            <!--I don't see a better way to display it. Will clean up css once-->
+                :disabled="true"
-            <!--feedback is implemented-->
+                :hide-player="!file"
-            <div class="col">
+            >
-                {{ item.handle }}
+                <div
-            </div>
+                    slot="additional"
-            <div class="col">
+                >
-                {{ item.filename }}
+                    <q-toggle
-            </div>
+                        :class="loopClasses"
-            <div class="col">
+                        :label="$t('pbxConfig.playingInLoop')"
-                <q-checkbox
+                        v-model="loop"
-                    readonly
+                        :disable="true"
-                    :value="loop"
+                        checked-icon="loop"
-                />
+                        unchecked-icon="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"
                     />
-                </span>
+                    <q-tooltip>
-            </div>
+                        {{ loopTooltipLabel }}
+                    </q-tooltip>
+                </div>
+            </csc-sound-file-upload>
         </q-item-main>
     </q-item>
 </template>
@@ -63,43 +37,66 @@
     import {
         QList,
         QItem,
-        QItemSide,
         QItemMain,
-        QItemTile,
+        QToggle,
-        QBtn,
+        QTooltip
-        QIcon,
-        QCollapsible,
-        QCheckbox
     } 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,
+            QToggle,
-            QBtn,
+            QTooltip
-            QIcon,
-            QCollapsible,
-            QCheckbox
         },
         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
+    .csc-sound-item
-            color $white
+        .q-field-icon
+            padding-left 12px
 
-        .item-sublabel
+        .csc-upload-field
-            color $light
+            margin 0 0 10px 0
 
 </style>

src/components/pages/PbxConfiguration/CscPbxSoundSet.vue

@@ -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>

src/components/pages/Voicebox/Voicebox.vue

@@ -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"

src/locales/en.json

@@ -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",

src/themes/app.common.styl

@@ -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
+        top $flex-gutter-sm
-            right $flex-gutter-sm
+        right $flex-gutter-sm
-            margin auto
+        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)