TT#55911 Assign SoundSet to PBXGroup or PBXSeat

Change-Id: Ic89de6e03e1ced79c94f5ac107f3ad1560ea8b1d

src/api/common.js

@@ -104,6 +104,30 @@ export function patchReplace(options) {
     });
 }
 
+export function patchAdd(options) {
+    return new Promise((resolve, reject) => {
+        Vue.http.patch(options.path, [{
+            op: 'add',
+            path: '/'+ options.fieldPath,
+            value: options.value
+        }], {
+            headers: {
+                'Content-Type': 'application/json-patch+json',
+                'Prefer': 'return=minimal'
+            }
+        }).then((result) => {
+            resolve(result);
+        }).catch((err) => {
+            if(err.status >= 400) {
+                reject(new Error(err.body.message));
+            }
+            else {
+                reject(err);
+            }
+        });
+    });
+}
+
 export function getFieldList(options) {
     return new Promise((resolve, reject) => {
         options = options || {};

src/api/pbx-config.js

@@ -21,10 +21,16 @@ import {
     setQueueLength,
     setWrapUpTime,
     getPreferences,
-    removeCallQueueConfig
+    removeCallQueueConfig,
+    getAllPreferences
 } from './subscriber';
 import uuid from 'uuid';
-import { getList, get, patchReplace} from './common'
+import {
+    getList,
+    get,
+    patchReplace,
+    patchAdd
+} from './common'
 
 var createId = uuid.v4;
 
@@ -33,14 +39,40 @@ export const PBX_CONFIG_ORDER_DIRECTION = 'desc';
 
 export function getGroups(options) {
     return new Promise((resolve, reject)=>{
+        let subscribers = {
+            items: []
+        };
+        let soundSets = {};
+        let preferences = {};
         options = options || {};
         options = _.merge(options, {
             params: {
                 is_pbx_group: 1
             }
         });
-        getSubscribers(options).then((res)=>{
-            resolve(res);
+        Promise.resolve().then(()=>{
+            return getSubscribers(options);
+        }).then(($subscribers)=> {
+            subscribers = $subscribers;
+            return getAllSoundSets();
+        }).then(($soundSets)=> {
+            soundSets = _.keyBy($soundSets.items, 'name');
+            return getAllPreferences();
+        }).then(($preferences)=>{
+            preferences = _.keyBy($preferences.items, 'id');
+            subscribers.items.forEach((subscriber) => {
+                delete preferences[subscriber.id]._links;
+                delete subscriber._links;
+                Object.assign(subscriber, preferences[subscriber.id]);
+                if (preferences[subscriber.id] && preferences[subscriber.id].contract_sound_set) {
+                    subscriber.contract_sound_set_id = soundSets[preferences[subscriber.id].contract_sound_set].id;
+                }
+                else {
+                    subscriber.contract_sound_set = null;
+                    subscriber.contract_sound_set_id = null;
+                }
+            });
+            resolve(subscribers);
         }).catch((err)=>{
             reject(err);
         });
@@ -48,11 +80,44 @@ export function getGroups(options) {
 }
 
 export function getGroup(groupId) {
-    return getSubscriber(groupId);
+    return new Promise((resolve, reject) => {
+        let subscriber = {};
+        let soundSets = {};
+        let preferences = {};
+        Promise.resolve().then(() => {
+            return getSubscriber(groupId);
+        }).then(($subscriber) => {
+            subscriber = $subscriber;
+            return getAllSoundSets();
+        }).then(($soundSets) => {
+            soundSets = _.keyBy($soundSets.items, 'name');
+            return getPreferences(groupId);
+        }).then(($preferences) => {
+            preferences = $preferences;
+            delete preferences._links;
+            delete subscriber._links;
+            Object.assign(subscriber, preferences);
+            if (preferences && preferences.contract_sound_set) {
+                subscriber.contract_sound_set_id = soundSets[preferences.contract_sound_set].id;
+            }
+            else {
+                subscriber.contract_sound_set = null;
+                subscriber.contract_sound_set_id = null;
+            }
+            resolve(subscriber);
+        }).catch((err) => {
+            reject(err);
+        });
+    });
 }
 
 export function getSeats(options) {
     return new Promise((resolve, reject)=>{
+        let subscribers = {
+            items: []
+        };
+        let soundSets = {};
+        let preferences = {};
         options = options || {};
         options = _.merge(options, {
             params: {
@@ -60,8 +125,29 @@ export function getSeats(options) {
                 is_pbx_pilot: 0
             }
         });
-        getSubscribers(options).then((res)=>{
-            resolve(res);
+        Promise.resolve().then(()=>{
+            return getSubscribers(options);
+        }).then(($subscribers)=> {
+            subscribers = $subscribers;
+            return getAllSoundSets();
+        }).then(($soundSets)=> {
+            soundSets = _.keyBy($soundSets.items, 'name');
+            return getAllPreferences();
+        }).then(($preferences)=>{
+            preferences = _.keyBy($preferences.items, 'id');
+            subscribers.items.forEach((subscriber) => {
+                delete preferences[subscriber.id]._links;
+                delete subscriber._links;
+                Object.assign(subscriber, preferences[subscriber.id]);
+                if (preferences[subscriber.id] && preferences[subscriber.id].contract_sound_set) {
+                    subscriber.contract_sound_set_id = soundSets[preferences[subscriber.id].contract_sound_set].id;
+                }
+                else {
+                    subscriber.contract_sound_set = null;
+                    subscriber.contract_sound_set_id = null;
+                }
+            });
+            resolve(subscribers);
         }).catch((err)=>{
             reject(err);
         });
@@ -69,7 +155,35 @@ export function getSeats(options) {
 }
 
 export function getSeat(seatId) {
-    return getSubscriber(seatId);
+    return new Promise((resolve, reject) => {
+        let subscriber = {};
+        let soundSets = {};
+        let preferences = {};
+        Promise.resolve().then(() => {
+            return getSubscriber(seatId);
+        }).then(($subscriber) => {
+            subscriber = $subscriber;
+            return getAllSoundSets();
+        }).then(($soundSets) => {
+            soundSets = _.keyBy($soundSets.items, 'name');
+            return getPreferences(seatId);
+        }).then(($preferences) => {
+            preferences = $preferences;
+            delete preferences._links;
+            delete subscriber._links;
+            Object.assign(subscriber, preferences);
+            if (preferences && preferences.contract_sound_set) {
+                subscriber.contract_sound_set_id = soundSets[preferences.contract_sound_set].id;
+            }
+            else {
+                subscriber.contract_sound_set = null;
+                subscriber.contract_sound_set_id = null;
+            }
+            resolve(subscriber);
+        }).catch((err) => {
+            reject(err);
+        });
+    });
 }
 
 export function getAllGroupsAndSeats(options) {
@@ -98,7 +212,7 @@ export function getPilot(options) {
             }
         });
         getSubscribers(options).then((subscribers)=>{
-            if(subscribers.items.length === 1) {
+            if (subscribers.items.length === 1) {
                 resolve(subscribers.items[0]);
             }
             else {
@@ -171,19 +285,70 @@ export function getGroupList(page) {
             getPilot(),
             getNumbers()
         ]).then((result)=>{
-            resolve({
-                groups: result[0],
-                seats: result[1],
-                pilot: result[2],
-                numbers: result[3],
-                lastPage: result[0].lastPage
-            });
+            resolve(normalizeSubscribers(
+                {
+                    groups: result[0],
+                    seats: result[1],
+                    pilot: result[2],
+                    numbers: result[3],
+                    lastPage: result[0].lastPage
+                }
+            ));
         }).catch((err)=>{
             reject(err);
         });
     });
 }
 
+export function normalizeSubscribers(all) {
+    let pilot = all.pilot;
+    let groups = {};
+    let seats = {};
+    let numbersMap = {};
+    let numbers= [];
+    all.groups.items.forEach((group)=>{
+        groups[group.id] = group;
+    });
+    all.seats.items.forEach((seat)=>{
+        seat.pbx_group_ids.forEach((groupId)=>{
+            let group = groups[groupId];
+            let $seats = _.get(group, 'seats', []);
+            $seats.push(seat);
+            _.set(group, 'seats', $seats);
+            let $groups = _.get(seat, 'groups', []);
+            $groups.push(group);
+            _.set(seat, 'groups', $groups);
+        });
+        seats[seat.id] = seat;
+    });
+    if (_.isArray(all.numbers) && all.numbers.length > 0) {
+        all.numbers.forEach((number)=>{
+            if (_.has(groups, number.subscriber_id)) {
+                number.subscriber = groups[number.subscriber_id];
+            }
+            else if (_.has(seats, number.subscriber_id)) {
+                number.subscriber = seats[number.subscriber_id];
+            }
+            else if (pilot.id === number.subscriber_id) {
+                number.subscriber = pilot;
+            }
+            else {
+                number.subscriber = null;
+            }
+            numbersMap[number.id] = number;
+        });
+        numbers = all.numbers;
+    }
+    return {
+        seats: seats,
+        groups: groups,
+        pilot: pilot,
+        numbers: numbers,
+        numbersMap: numbersMap,
+        lastPage: all.lastPage
+    };
+}
+
 export function getSeatList(page) {
     return new Promise((resolve, reject)=>{
         Promise.all([
@@ -199,15 +364,17 @@ export function getSeatList(page) {
             }),
             getPilot(),
             getNumbers()
-        ]).then((result)=>{
-            resolve({
-                seats: result[0],
-                groups: result[1],
-                pilot: result[2],
-                numbers: result[3],
-                lastPage: result[0].lastPage
-            });
-        }).catch((err)=>{
+        ]).then((result) => {
+            resolve(normalizeSubscribers(
+                {
+                    seats: result[0],
+                    groups: result[1],
+                    pilot: result[2],
+                    numbers: result[3],
+                    lastPage: result[0].lastPage
+                }
+            ));
+        }).catch((err) => {
             reject(err);
         });
     });
@@ -223,13 +390,13 @@ export function getDeviceList(options) {
             order_by: PBX_CONFIG_ORDER_BY,
             order_by_direction: PBX_CONFIG_ORDER_DIRECTION
         };
-        if(params.profile_id === null) {
+        if (params.profile_id === null) {
             delete params['profile_id'];
         }
-        if(params.identifier === null) {
+        if (params.identifier === null) {
             delete params['identifier'];
         }
-        if(params.station_name === null) {
+        if (params.station_name === null) {
             delete params['station_name'];
         }
         return getDevices({
@@ -259,6 +426,12 @@ export function addGroup(group) {
             });
         }).then((subscriberId)=>{
             assignNumbers(group.aliasNumbers, subscriberId);
+            return subscriberId;
+        }).then((subscriberId)=>{
+            if (group.soundSet) {
+                setSubscriberSoundSet(subscriberId, group.soundSet);
+            }
+            return;
         }).then(()=>{
             resolve();
         }).catch((err)=>{
@@ -286,6 +459,12 @@ export function addSeat(seat) {
             });
         }).then((subscriberId)=>{
             assignNumbers(seat.aliasNumbers, subscriberId);
+            return subscriberId;
+        }).then((subscriberId)=>{
+            if (seat.soundSet) {
+                setSubscriberSoundSet(subscriberId, seat.soundSet);
+            }
+            return;
         }).then(()=>{
             resolve();
         }).catch((err)=>{
@@ -349,11 +528,11 @@ export function getDevice(id, options) {
             });
         }).then(($device)=> {
             device = $device;
-            if(join === true) {
+            if (join === true) {
                 let requests = [
                     getProfile(device.profile_id, join)
                 ];
-                if(joinLines === true && _.isArray(device.lines) && device.lines.length > 0) {
+                if (joinLines === true && _.isArray(device.lines) && device.lines.length > 0) {
                     device.lines.forEach((line)=>{
                         requests.push(getSubscriber(line.subscriber_id));
                     });
@@ -365,7 +544,7 @@ export function getDevice(id, options) {
             }
         }).then((results)=>{
             device.profile = results[0];
-            if(results.length > 1) {
+            if (results.length > 1) {
                 for(let i = 1; i < results.length; i++) {
                     device.lines[i - 1].subscriber = results[i];
                 }
@@ -386,7 +565,7 @@ export function getProfile(id, join) {
             });
         }).then(($profile)=> {
             profile = $profile;
-            if(join === true) {
+            if (join === true) {
                 return getModelFull(profile.device_id);
             }
             else {
@@ -457,7 +636,7 @@ export function createDevice(device) {
         Vue.http.post('api/pbxdevices/', device).then((res)=>{
             resolve(res);
         }).catch((err)=>{
-            if(err.status >= 400) {
+            if (err.status >= 400) {
                 reject(new Error(err.body.message));
             }
             else {
@@ -472,7 +651,7 @@ export function removeDevice(id) {
         Vue.http.delete('api/pbxdevices/' + id).then(()=>{
             resolve();
         }).catch((err)=>{
-            if(err.status >= 400) {
+            if (err.status >= 400) {
                 reject(new Error(err.body.message));
             }
             else {
@@ -599,10 +778,6 @@ export function setWrapUpTimeConfig(id, wrapUpTime) {
     return setWrapUpTime(id, wrapUpTime);
 }
 
-export function getPrefs(id) {
-    return getPreferences(id);
-}
-
 export function getAllSoundSets(options) {
     return new Promise((resolve, reject)=>{
         options = options || {};
@@ -852,3 +1027,25 @@ export function setSoundSetItemLoopplay(id, loopplay) {
         value: loopflag
     });
 }
+
+export function setSubscriberSoundSet(id, soundSet) {
+    return patchAdd({
+        path: 'api/subscriberpreferences/' + id,
+        fieldPath: 'contract_sound_set',
+        value: soundSet
+    });
+}
+
+export function getDefaultSoundSet() {
+    return new Promise((resolve, reject) => {
+        getAllSoundSets().then((result) => {
+            let defaultSoundSets = result.items.filter((soundSet) => {
+                return _.get(soundSet, 'contract_default', false);
+            })
+            let defaultSoundSet = defaultSoundSets[0] ? defaultSoundSets[0].id : null;
+            resolve(defaultSoundSet);
+        }).catch((err) => {
+            reject(err);
+        });
+    });
+}

src/api/subscriber.js

@@ -366,3 +366,19 @@ export function removeCallQueueConfig(subscriberId) {
     let param = { cloud_pbx_callqueue: false };
     return Vue.http.put('api/subscriberpreferences/' + subscriberId, param);
 }
+
+export function getAllPreferences(options) {
+    return new Promise((resolve, reject)=>{
+        options = options || {};
+        options = _.merge(options, {
+            path: 'api/subscriberpreferences/',
+            root: '_embedded.ngcp:subscriberpreferences'
+        });
+        getList(options).then((list)=>{
+            resolve(list);
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+

src/components/CscObjectSpinner.vue

@@ -1,9 +1,11 @@
 <template>
     <q-inner-loading
-        :visible="loading">
+        :visible="loading"
+        :style="{zIndex: 12}"
+    >
         <q-spinner-dots
             size="32px"
-            color="white"
+            color="primary"
         />
     </q-inner-loading>
 </template>

src/components/CscSpinner.vue

@@ -4,7 +4,7 @@
     >
         <q-spinner-dots
             size="32px"
-            color="white"
+            color="primary"
         />
     </div>
 </template>

src/components/pages/PbxConfiguration/CscPbxCallQueue.vue

@@ -115,17 +115,17 @@
                 />
             </q-item-tile>
         </q-item-side>
-        <q-inner-loading :visible="isLoading">
-            <q-spinner-mat
-                size="60px"
-                color="primary"
-            />
-        </q-inner-loading>
+        <csc-object-spinner
+            v-if="loading"
+            :loading="loading"
+        />
     </q-item>
 </template>
 
 <script>
-    import { showGlobalError } from '../../../helpers/ui'
+    import {
+        showGlobalError
+    } from '../../../helpers/ui'
     import {
         minValue,
         maxValue,
@@ -144,6 +144,7 @@
         QItemMain,
         QItemTile
     } from 'quasar-framework'
+    import CscObjectSpinner from "../../CscObjectSpinner";
     export default {
         name: 'csc-pbx-call-queue',
         props: [
@@ -159,6 +160,7 @@
             }
         },
         components: {
+            CscObjectSpinner,
             QField,
             QInput,
             QIcon,

src/components/pages/PbxConfiguration/CscPbxCallQueueAddForm.vue

@@ -1,4 +1,3 @@
-
 <template>
     <div class="csc-form csc-pbx-call-queue-add-form">
         <q-field>
@@ -63,9 +62,10 @@
                 {{ $t('pbxConfig.createConfig') }}
             </q-btn>
         </div>
-        <q-inner-loading :visible="loading">
-            <q-spinner-mat size="60px" color="primary" />
-        </q-inner-loading>
+        <csc-object-spinner
+            v-if="loading"
+            :loading="loading"
+        />
     </div>
 </template>
 
@@ -90,7 +90,7 @@
         QSelect,
         QIcon
     } from 'quasar-framework'
-
+    import CscObjectSpinner from "../../CscObjectSpinner"
     export default {
         name: 'csc-pbx-call-queue-add-form',
         props: [
@@ -98,6 +98,7 @@
             'loading'
         ],
         components: {
+            CscObjectSpinner,
             QCard,
             QCardTitle,
             QCardMain,

src/components/pages/PbxConfiguration/CscPbxCallQueues.vue

@@ -33,10 +33,7 @@
             v-if="isListLoadingVisible"
             class="row justify-center"
         >
-            <q-spinner-dots
-                color="primary"
-                :size="40"
-            />
+            <csc-spinner />
         </div>
         <div>
             <q-list
@@ -102,9 +99,14 @@
     import {
         scroll
     } from 'quasar-framework'
-    const { getScrollTarget, setScrollPosition } = scroll
+    import CscSpinner from "../../CscSpinner";
+    const {
+        getScrollTarget,
+        setScrollPosition
+    } = scroll
     export default {
         components: {
+            CscSpinner,
             CscPage,
             CscPbxCallQueue,
             CscPbxCallQueueAddForm,

src/components/pages/PbxConfiguration/CscPbxDevice.vue

@@ -115,24 +115,24 @@
                 />
             </q-item-tile>
         </q-item-side>
-        <q-inner-loading
+        <csc-object-spinner
             v-if="loading"
-            :visible="loading"
-            :style="{zIndex: 12}"
-        >
-            <q-spinner-mat
-                size="60px"
-                color="primary"
-            />
-        </q-inner-loading>
+            :loading="loading"
+        />
     </q-item>
 </template>
 
 
 <script>
-    import { showGlobalError } from '../../../helpers/ui'
-    import { required } from 'vuelidate/lib/validators'
-    import { customMacAddress } from '../../../helpers/validation'
+    import {
+        showGlobalError
+    } from '../../../helpers/ui'
+    import {
+        required
+    } from 'vuelidate/lib/validators'
+    import {
+        customMacAddress
+    } from '../../../helpers/validation'
     import _ from 'lodash'
     import {
         QCard,
@@ -155,7 +155,7 @@
     } from 'quasar-framework'
     import CscPbxDeviceConfig from './CscPbxDeviceConfig'
     import CscPbxModelSelect from './CscPbxModelSelect'
-
+    import CscObjectSpinner from "../../CscObjectSpinner";
     export default {
         name: 'csc-pbx-device',
         props: [
@@ -168,6 +168,7 @@
             'modelImages'
         ],
         components: {
+            CscObjectSpinner,
             CscPbxDeviceConfig,
             CscPbxModelSelect,
             QCard,

src/components/pages/PbxConfiguration/CscPbxDeviceAddForm.vue

@@ -60,15 +60,10 @@
                 {{ $t('buttons.save') }}
             </q-btn>
         </div>
-        <q-inner-loading
-            v-show="loading"
-            :visible="loading"
-        >
-            <q-spinner-mat
-                size="60px"
-                color="primary"
-            />
-        </q-inner-loading>
+        <csc-object-spinner
+            v-if="loading"
+            :loading="loading"
+        />
     </div>
 </template>
 
@@ -94,7 +89,7 @@
         QItem,
         QItemMain } from 'quasar-framework'
     import CscPbxModelSelect from './CscPbxModelSelect'
-
+    import CscObjectSpinner from "../../CscObjectSpinner";
     export default {
         name: 'csc-pbx-device-add-form',
         props: [
@@ -103,6 +98,7 @@
             'loading'
         ],
         components: {
+            CscObjectSpinner,
             CscPbxModelSelect,
             QCard,
             QCardTitle,

src/components/pages/PbxConfiguration/CscPbxDevices.vue

@@ -148,10 +148,7 @@
             v-if="isListLoadingVisible"
             class="row justify-center"
         >
-            <q-spinner-dots
-                color="primary"
-                :size="40"
-            />
+            <csc-spinner />
         </div>
 
         <q-list
@@ -216,6 +213,7 @@
         QIcon,
         Platform
     } from 'quasar-framework'
+    import CscSpinner from "../../CscSpinner";
 
     export default {
         data () {
@@ -232,6 +230,7 @@
             this.$store.dispatch('pbxConfig/loadProfiles');
         },
         components: {
+            CscSpinner,
             CscPage,
             CscPbxDevice,
             CscPbxDeviceAddForm,

src/components/pages/PbxConfiguration/CscPbxGroup.vue

@@ -126,6 +126,21 @@
                         :after="seatButtons"
                     />
                 </q-field>
+                <q-field :label="$t('pbxConfig.soundSet')">
+                    <q-select
+                        dark
+                        v-model="changes.soundSet"
+                        :disable="!defaultSoundSet"
+                        :readonly="loading"
+                        :options="soundSetOptions"
+                        :after="soundSetButtons"
+                    />
+                    <q-tooltip
+                        v-if="!defaultSoundSet"
+                    >
+                        {{ $t('pbxConfig.defaultNotSet') }}
+                    </q-tooltip>
+                </q-field>
             </q-item-tile>
         </q-item-main>
         <q-item-side
@@ -185,12 +200,10 @@
                 />
             </q-item-tile>
         </q-item-side>
-        <q-inner-loading :visible="isLoading">
-            <q-spinner-mat
-                size="60px"
-                color="primary"
-            />
-        </q-inner-loading>
+        <csc-object-spinner
+            v-if="loading"
+            :loading="loading"
+        />
     </q-item>
 </template>
 
@@ -209,7 +222,7 @@
         QChip,
         QBtn,
         QInnerLoading,
-        QSpinnerMat,
+        QSpinnerDots,
         QTransition,
         Platform,
         QItem,
@@ -218,8 +231,10 @@
         QItemTile,
         QAlert,
         QList,
-        QPopover
+        QPopover,
+        QTooltip
     } from 'quasar-framework'
+    import CscObjectSpinner from "../../CscObjectSpinner";
     export default {
         name: 'csc-pbx-group',
         props: [
@@ -229,7 +244,10 @@
             'seatOptions',
             'loading',
             'groupName',
-            'seatName'
+            'seatName',
+            'defaultSoundSet',
+            'soundSetOptions',
+            'soundSetLabel'
         ],
         data () {
             return {
@@ -238,6 +256,7 @@
             }
         },
         components: {
+            CscObjectSpinner,
             QCard,
             QCardTitle,
             QCardMain,
@@ -249,7 +268,7 @@
             QChip,
             QBtn,
             QInnerLoading,
-            QSpinnerMat,
+            QSpinnerDots,
             QTransition,
             QItem,
             QItemSide,
@@ -257,7 +276,8 @@
             QItemTile,
             QAlert,
             QList,
-            QPopover
+            QPopover,
+            QTooltip
         },
         computed: {
             callQueueRouteWithId() {
@@ -295,6 +315,9 @@
             huntTimeout() {
                 return this.group.pbx_hunt_timeout;
             },
+            soundSet() {
+                return this.group.contract_sound_set_id;
+            },
             primaryNumber() {
                 return numberFilter(this.group.primary_number);
             },
@@ -307,7 +330,8 @@
                     huntTimeout: this.changes.huntTimeout,
                     primaryNumber: this.primaryNumber,
                     aliasNumbers: this.changes.aliasNumbers,
-                    seats: this.changes.seats
+                    seats: this.changes.seats,
+                    soundSet: this.soundSetLabel(this.changes.soundSet)
                 }
             },
             isLoading() {
@@ -484,6 +508,32 @@
             },
             hasSeats() {
                 return _.isArray(_.get(this.group, 'seats')) && this.group.seats.length > 0;
+            },
+            soundSetChanges() {
+                return this.soundSet + "" !== this.changes.soundSet + "";
+            },
+            soundSetButtons() {
+                let buttons = [];
+                let self = this;
+                if(this.soundSetChanges) {
+                    buttons.push({
+                            icon: 'check',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.saveSoundSet();
+                            }
+                        }, {
+                            icon: 'clear',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.resetSoundSet();
+                            }
+                        }
+                    );
+                }
+                return buttons;
             }
         },
         methods: {
@@ -549,7 +599,8 @@
                     huntPolicy: this.group.pbx_hunt_policy,
                     huntTimeout: this.group.pbx_hunt_timeout,
                     aliasNumbers: this.numbersToIds(this.group.alias_numbers),
-                    seats: this.seatsToIds(this.group.seats)
+                    seats: this.seatsToIds(this.group.seats),
+                    soundSet: this.group.contract_sound_set_id
                 }
             },
             seatsToIds(seats) {
@@ -567,6 +618,12 @@
             saveSeats() {
                 this.$emit('save-seats', this.groupModel);
             },
+            resetSoundSet() {
+                this.changes.soundSet = this.group.contract_sound_set_id;
+            },
+            saveSoundSet() {
+                this.$emit('save-sound-set', this.groupModel);
+            }
         },
         watch: {
             group() {

src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue

@@ -79,6 +79,22 @@
                 :options="seatOptions"
             />
         </q-field>
+        <q-field>
+            <q-select
+                dark
+                clearable
+                v-model="data.soundSet"
+                :disable="loading || !defaultSoundSet"
+                :readonly="loading"
+                :float-label="$t('pbxConfig.soundSet')"
+                :options="soundSetOptions"
+            />
+            <q-tooltip
+                v-if="!defaultSoundSet"
+            >
+                {{ $t('pbxConfig.defaultNotSet') }}
+            </q-tooltip>
+        </q-field>
         <div class="csc-form-actions row justify-center">
             <q-btn
                 flat
@@ -100,9 +116,10 @@
                 {{ $t('pbxConfig.createGroup') }}
             </q-btn>
         </div>
-        <q-inner-loading :visible="loading">
-            <q-spinner-mat size="60px" color="primary" />
-        </q-inner-loading>
+        <csc-object-spinner
+            v-if="loading"
+            :loading="loading"
+        />
     </div>
 </template>
 
@@ -117,13 +134,14 @@
     import {
         QBtn,
         QInnerLoading,
-        QSpinnerMat,
+        QSpinnerDots,
         QField,
         QInput,
         QSelect,
-        QIcon
+        QIcon,
+        QTooltip
     } from 'quasar-framework'
-
+    import CscObjectSpinner from "../../CscObjectSpinner";
     export default {
         name: 'csc-pbx-group-add-form',
         props: [
@@ -131,15 +149,20 @@
             'aliasNumberOptions',
             'seatOptions',
             'loading',
+            'soundSetOptions',
+            'soundSetLabel',
+            'defaultSoundSet'
         ],
         components: {
+            CscObjectSpinner,
             QBtn,
             QInnerLoading,
-            QSpinnerMat,
+            QSpinnerDots,
             QField,
             QInput,
             QSelect,
-            QIcon
+            QIcon,
+            QTooltip
         },
         validations: {
             data: {
@@ -165,6 +188,11 @@
                 data: this.getDefaults()
             }
         },
+        created() {
+            if (this.defaultSoundSet) {
+                this.soundSet = this.defaultSoundSet;
+            }
+        },
         computed: {
             groupNameErrorMessage() {
                 if (!this.$v.data.name.required) {
@@ -220,6 +248,17 @@
                         maxValue: this.$v.data.huntTimeout.$params.maxValue.max
                     });
                 }
+            },
+            groupModel() {
+                return {
+                    name: this.data.name,
+                    extension: this.data.extension,
+                    huntPolicy: this.data.huntPolicy,
+                    huntTimeout: this.data.huntTimeout,
+                    aliasNumbers: this.data.aliasNumbers,
+                    seats: this.data.seats,
+                    soundSet: this.soundSetLabel(this.data.soundSet)
+                }
             }
         },
         methods: {
@@ -230,14 +269,15 @@
                     huntPolicy: 'serial',
                     huntTimeout: 10,
                     aliasNumbers: [],
-                    seats: []
+                    seats: [],
+                    soundSet: null
                 }
             },
             cancel() {
                 this.$emit('cancel');
             },
             save() {
-                this.$emit('save', this.data);
+                this.$emit('save', this.groupModel);
             },
             reset() {
                 this.data = this.getDefaults();

src/components/pages/PbxConfiguration/CscPbxGroups.vue

@@ -7,14 +7,17 @@
             class="row justify-center"
         >
             <csc-pbx-group-add-form
-                class="col-xs-12 col-md-6 csc-list-form"
                 ref="addForm"
-                @save="addGroup"
-                @cancel="disableAddForm"
-                :loading="isAdding"
+                class="col-xs-12 col-md-6 csc-list-form"
                 :alias-number-options="aliasNumberOptions"
                 :seat-options="seatOptions"
                 :hunt-policy-options="huntPolicyOptions"
+                :sound-set-options="soundSetOptions"
+                :sound-set-label="soundSetLabel"
+                :loading="isAdding"
+                :default-sound-set="!!defaultSoundSet"
+                @save="addGroup"
+                @cancel="disableAddForm"
             />
         </div>
         <div
@@ -34,10 +37,7 @@
             v-if="isListLoadingVisible"
             class="row justify-center"
         >
-            <q-spinner-dots
-                color="primary"
-                :size="40"
-            />
+            <csc-spinner />
         </div>
         <div
             v-if="groups.length > 0 && !isListRequesting && listLastPage > 1"
@@ -65,6 +65,9 @@
                 :loading="isItemLoading(group.id)"
                 :group-name="groupName"
                 :seat-name="seatName"
+                :sound-set-options="soundSetOptions"
+                :sound-set-label="soundSetLabel"
+                :default-sound-set="!!defaultSoundSet"
                 @remove="removeGroupDialog"
                 @save-name="setGroupName"
                 @save-extension="setGroupExtension"
@@ -72,10 +75,11 @@
                 @save-hunt-timeout="setGroupHuntTimeout"
                 @save-alias-numbers="updateAliasNumbers"
                 @save-seats="updateSeats"
+                @save-sound-set="updateSoundSet"
             />
         </q-list>
         <div
-            v-if="groups.length === 0 && !isListRequesting"
+            v-if="isGroupsEmpty && !isListRequesting"
             class="row justify-center csc-no-entities"
         >
             {{ $t('pbxConfig.noGroups') }}
@@ -124,10 +128,12 @@
         QPagination,
         Platform
     } from 'quasar-framework'
+    import CscSpinner from "../../CscSpinner";
 
     export default {
         mixins: [aliasNumberOptions, itemError],
         components: {
+            CscSpinner,
             CscPage,
             CscPbxGroup,
             CscPbxGroupAddForm,
@@ -152,7 +158,9 @@
             QSpinnerMat,
             QPagination
         },
-        mounted() {
+        created() {
+            this.$store.dispatch('pbxConfig/listSoundSets');
+            this.$store.dispatch('pbxConfig/getDefaultSoundSet');
             this.$store.dispatch('pbxConfig/listGroups', {
                 page: 1
             });
@@ -160,7 +168,6 @@
         data () {
             return {
                 addFormEnabled: false,
-                page: 1,
                 currentRemovingGroup: null
             }
         },
@@ -185,17 +192,6 @@
                     }
                 ];
             },
-            seatOptions() {
-                let seats = [];
-                this.seats.forEach((seat) => {
-                    seats.push({
-                        label: seat.display_name ? seat.display_name : seat.username,
-                        sublabel: this.$t('pbxConfig.extension') + ': ' + seat.pbx_extension,
-                        value: seat.id
-                    });
-                });
-                return seats;
-            },
             ...mapGetters('pbxConfig', [
                 'groups',
                 'seats',
@@ -224,7 +220,11 @@
                 'updateAliasNumbersState',
                 'updateGroupsAndSeatsState',
                 'groupName',
-                'seatName'
+                'seatName',
+                'seatOptions',
+                'soundSetOptions',
+                'soundSetLabel',
+                'defaultSoundSet'
             ]),
             isMobile() {
                 return Platform.is.mobile;
@@ -235,6 +235,9 @@
                         group: this.currentRemovingGroup.name
                     });
                 }
+            },
+            isGroupsEmpty() {
+                return Object.entries(this.groups).length === 0;
             }
         },
         watch: {
@@ -307,6 +310,9 @@
             updateSeats(data) {
                 this.$store.dispatch('pbxConfig/updateSeats', data);
             },
+            updateSoundSet(data) {
+                this.$store.dispatch('pbxConfig/setGroupSoundSet', data);
+            },
             changePage(page) {
                 this.$store.dispatch('pbxConfig/listGroups', {
                     page: page

src/components/pages/PbxConfiguration/CscPbxSeat.vue

@@ -105,6 +105,21 @@
                         :after="groupButtons"
                     />
                 </q-field>
+                <q-field :label="$t('pbxConfig.soundSet')">
+                    <q-select
+                        dark
+                        v-model="changes.soundSet"
+                        :disable="!defaultSoundSet"
+                        :readonly="loading"
+                        :options="soundSetOptions"
+                        :after="soundSetButtons"
+                    />
+                    <q-tooltip
+                        v-if="!defaultSoundSet"
+                    >
+                        {{ $t('pbxConfig.defaultNotSet') }}
+                    </q-tooltip>
+                </q-field>
             </q-item-tile>
         </q-item-main>
         <q-item-side
@@ -164,12 +179,10 @@
                 />
             </q-item-tile>
         </q-item-side>
-        <q-inner-loading :visible="isLoading">
-            <q-spinner-mat
-                size="60px"
-                color="primary"
-            />
-        </q-inner-loading>
+        <csc-object-spinner
+            v-if="loading"
+            :loading="loading"
+        />
     </q-item>
 </template>
 
@@ -184,7 +197,7 @@
         QChip,
         QBtn,
         QInnerLoading,
-        QSpinnerMat,
+        QSpinnerDots,
         Platform,
         QItem,
         QItemSide,
@@ -192,8 +205,10 @@
         QItemTile,
         QAlert,
         QList,
-        QPopover
+        QPopover,
+        QTooltip
     } from 'quasar-framework'
+    import CscObjectSpinner from "../../CscObjectSpinner";
     export default {
         name: 'csc-pbx-seat',
         props: [
@@ -203,7 +218,10 @@
             'loading',
             'callQueue',
             'seatName',
-            'groupName'
+            'groupName',
+            'defaultSoundSet',
+            'soundSetOptions',
+            'soundSetLabel'
         ],
         data () {
             return {
@@ -212,6 +230,7 @@
             }
         },
         components: {
+            CscObjectSpinner,
             QField,
             QInput,
             QIcon,
@@ -219,14 +238,15 @@
             QChip,
             QBtn,
             QInnerLoading,
-            QSpinnerMat,
+            QSpinnerDots,
             QItem,
             QItemSide,
             QItemMain,
             QItemTile,
             QAlert,
             QList,
-            QPopover
+            QPopover,
+            QTooltip
         },
         computed: {
             callQueueRouteWithId() {
@@ -258,6 +278,9 @@
             extension() {
                 return this.seat.pbx_extension;
             },
+            soundSet() {
+                return this.seat.contract_sound_set_id;
+            },
             primaryNumber() {
                 return numberFilter(this.seat.primary_number);
             },
@@ -268,7 +291,8 @@
                     extension: this.changes.extension,
                     primaryNumber: this.primaryNumber,
                     aliasNumbers: this.changes.aliasNumbers,
-                    groups: this.changes.groups
+                    groups: this.changes.groups,
+                    soundSet: this.soundSetLabel(this.changes.soundSet)
                 }
             },
             isLoading() {
@@ -393,6 +417,32 @@
             },
             hasGroups() {
                 return _.isArray(_.get(this.seat, 'groups')) && this.seat.groups.length > 0;
+            },
+            soundSetChanges() {
+                return this.soundSet + "" !== this.changes.soundSet + "";
+            },
+            soundSetButtons() {
+                let buttons = [];
+                let self = this;
+                if(this.soundSetChanges) {
+                    buttons.push({
+                            icon: 'check',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.saveSoundSet();
+                            }
+                        }, {
+                            icon: 'clear',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.resetSoundSet();
+                            }
+                        }
+                    );
+                }
+                return buttons;
             }
         },
         methods: {
@@ -441,7 +491,8 @@
                     name: this.seat.display_name,
                     extension: this.seat.pbx_extension,
                     aliasNumbers: this.numbersToIds(this.seat.alias_numbers),
-                    groups: this.groupsToIds(this.seat.groups)
+                    groups: this.groupsToIds(this.seat.groups),
+                    soundSet: this.seat.contract_sound_set_id
                 }
             },
             groupsToIds(groups) {
@@ -458,6 +509,12 @@
             },
             saveGroups() {
                 this.$emit('save-groups', this.seatModel);
+            },
+            resetSoundSet() {
+                this.changes.soundSet = this.seat.contract_sound_set_id;
+            },
+            saveSoundSet() {
+                this.$emit('save-sound-set', this.seatModel);
             }
         },
         watch: {

src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue

@@ -30,9 +30,9 @@
         <q-field>
             <q-select
                 dark
-                multiple
                 chips
                 clearable
+                multiple
                 v-model="data.aliasNumbers"
                 :disable="loading"
                 :readonly="loading"
@@ -43,9 +43,9 @@
         <q-field>
             <q-select
                 dark
-                multiple
                 chips
                 clearable
+                multiple
                 v-model="data.groups"
                 :disable="loading"
                 :readonly="loading"
@@ -53,6 +53,22 @@
                 :options="groupOptions"
             />
         </q-field>
+        <q-field>
+            <q-select
+                dark
+                clearable
+                v-model="data.soundSet"
+                :disable="loading || !defaultSoundSet"
+                :readonly="loading"
+                :float-label="$t('pbxConfig.soundSet')"
+                :options="soundSetOptions"
+            />
+            <q-tooltip
+                v-if="!defaultSoundSet"
+            >
+                {{ $t('pbxConfig.defaultNotSet') }}
+            </q-tooltip>
+        </q-field>
         <div class="csc-form-actions row justify-center">
             <q-btn
                 flat
@@ -74,9 +90,10 @@
                 {{ $t('pbxConfig.createSeat') }}
             </q-btn>
         </div>
-        <q-inner-loading :visible="loading">
-            <q-spinner-mat size="60px" color="primary" />
-        </q-inner-loading>
+        <csc-object-spinner
+            v-if="loading"
+            :loading="loading"
+        />
     </div>
 </template>
 
@@ -89,28 +106,34 @@
     import {
         QBtn,
         QInnerLoading,
-        QSpinnerMat,
+        QSpinnerDots,
         QField,
         QInput,
         QSelect,
-        QIcon
+        QIcon,
+        QTooltip
     } from 'quasar-framework'
-
+    import CscObjectSpinner from "../../CscObjectSpinner";
     export default {
         name: 'csc-pbx-seat-add-form',
         props: [
             'aliasNumberOptions',
             'groupOptions',
-            'loading'
+            'loading',
+            'soundSetOptions',
+            'soundSetLabel',
+            'defaultSoundSet'
         ],
         components: {
+            CscObjectSpinner,
             QBtn,
             QInnerLoading,
-            QSpinnerMat,
+            QSpinnerDots,
             QField,
             QInput,
             QSelect,
-            QIcon
+            QIcon,
+            QTooltip
         },
         validations: {
             data: {
@@ -130,6 +153,11 @@
                 data: this.getDefaults()
             }
         },
+        created() {
+            if (this.defaultSoundSet) {
+                this.soundSet = this.defaultSoundSet;
+            }
+        },
         computed: {
             seatNameErrorMessage() {
                 if (!this.$v.data.name.required) {
@@ -161,6 +189,15 @@
                         field: this.$t('pbxConfig.extension'),
                     });
                 }
+            },
+            seatModel() {
+                return {
+                    name: this.data.name,
+                    extension: this.data.extension,
+                    aliasNumbers: this.data.aliasNumbers,
+                    groups: this.data.groups,
+                    soundSet: this.soundSetLabel(this.data.soundSet)
+                }
             }
         },
         methods: {
@@ -169,14 +206,15 @@
                     name: '',
                     extension: '',
                     aliasNumbers: [],
-                    groups: []
+                    groups: [],
+                    soundSet: null
                 }
             },
             cancel() {
                 this.$emit('cancel');
             },
             save() {
-                this.$emit('save', this.data);
+                this.$emit('save', this.seatModel);
             },
             reset() {
                 this.data = this.getDefaults();

src/components/pages/PbxConfiguration/CscPbxSeats.vue

@@ -24,7 +24,10 @@
                 class="col-xs-12 col-md-6 csc-list-form"
                 :alias-number-options="aliasNumberOptions"
                 :group-options="groupOptions"
+                :sound-set-options="soundSetOptions"
+                :sound-set-label="soundSetLabel"
                 :loading="isAdding"
+                :default-sound-set="!!defaultSoundSet"
                 @save="addSeat"
                 @cancel="disableAddForm"
             />
@@ -33,10 +36,7 @@
             v-if="isListLoadingVisible"
             class="row justify-center"
         >
-            <q-spinner-dots
-                color="primary"
-                :size="40"
-            />
+            <csc-spinner />
         </div>
         <div
             v-if="seats.length > 0 && !isListRequesting && listLastPage > 1"
@@ -61,19 +61,23 @@
                     :seat="seat"
                     :alias-number-options="aliasNumberOptions"
                     :group-options="groupOptions"
-                    @remove="removeSeatDialog"
                     :loading="isItemLoading(seat.id)"
                     :seat-name="seatName"
                     :group-name="groupName"
+                    :sound-set-options="soundSetOptions"
+                    :sound-set-label="soundSetLabel"
+                    :default-sound-set="!!defaultSoundSet"
+                    @remove="removeSeatDialog"
                     @save-name="setSeatName"
                     @save-extension="setSeatExtension"
                     @save-alias-numbers="updateAliasNumbers"
                     @save-groups="updateGroups"
+                    @save-sound-set="updateSoundSet"
                 />
             </q-list>
         </div>
         <div
-            v-if="seats.length === 0 && !isListRequesting"
+            v-if="isSeatsEmpty && !isListRequesting"
             class="row justify-center csc-no-entities"
         >
             {{ $t('pbxConfig.noSeats') }}
@@ -122,10 +126,13 @@
         QPagination,
         Platform
     } from 'quasar-framework'
+    import CscSpinner from "../../CscSpinner";
 
     export default {
         mixins: [aliasNumberOptions, itemError],
-        mounted() {
+        created() {
+            this.$store.dispatch('pbxConfig/listSoundSets');
+            this.$store.dispatch('pbxConfig/getDefaultSoundSet');
             this.$store.dispatch('pbxConfig/listSeats', {
                 page: 1
             });
@@ -137,6 +144,7 @@
             }
         },
         components: {
+            CscSpinner,
             CscPage,
             CscPbxSeat,
             CscPbxSeatAddForm,
@@ -189,19 +197,12 @@
                 'updateGroupsAndSeatsState',
                 'updateState',
                 'seatName',
-                'groupName'
+                'groupName',
+                'soundSetOptions',
+                'soundSetLabel',
+                'defaultSoundSet',
+                'groupOptions'
             ]),
-            groupOptions() {
-                let groups = [];
-                this.groups.forEach((group)=>{
-                    groups.push({
-                        label: group.display_name ? group.display_name : group.username,
-                        sublabel: this.$t('pbxConfig.extension') + ': ' + group.pbx_extension,
-                        value: group.id
-                    });
-                });
-                return groups;
-            },
             isMobile() {
                 return Platform.is.mobile;
             },
@@ -211,6 +212,9 @@
                         seat: this.currentRemovingSeat.name
                     });
                 }
+            },
+            isSeatsEmpty() {
+                return Object.entries(this.seats).length === 0;
             }
         },
         watch: {
@@ -277,6 +281,9 @@
             updateGroups(data) {
                 this.$store.dispatch('pbxConfig/updateGroups', data);
             },
+            updateSoundSet(data) {
+                this.$store.dispatch('pbxConfig/setSeatSoundSet', data);
+            },
             changePage(page) {
                 this.$store.dispatch('pbxConfig/listSeats', {
                     page: page

src/components/pages/PbxConfiguration/CscPbxSoundSet.vue

@@ -118,17 +118,6 @@
             class="csc-list-actions-pinned"
         >
             <q-item-tile>
-                <q-btn
-                    v-if="invalid && !mobile && !expanded"
-                    icon="info"
-                    :big="mobile"
-                    color="negative"
-                    flat
-                >
-                    <q-tooltip>
-                        {{ tooltipLabel }}
-                    </q-tooltip>
-                </q-btn>
                 <q-btn
                     v-show="expanded"
                     icon="delete"
@@ -146,14 +135,10 @@
                 />
             </q-item-tile>
         </q-item-side>
-        <q-inner-loading
-            :visible="isLoading"
-        >
-            <q-spinner-dots
-                size="60px"
-                color="primary"
-            />
-        </q-inner-loading>
+        <csc-object-spinner
+            v-if="loading"
+            :loading="loading"
+        />
     </q-item>
 </template>
 
@@ -182,6 +167,7 @@
     import {
         showGlobalError
     } from '../../../helpers/ui'
+    import CscObjectSpinner from "../../CscObjectSpinner";
     export default {
         name: 'csc-pbx-sound-set',
         props: {
@@ -192,6 +178,7 @@
             invalidCount: Number
         },
         components: {
+            CscObjectSpinner,
             CscPbxSoundGroup,
             QItem,
             QItemSide,

src/components/pages/PbxConfiguration/CscPbxSoundSetAddForm.vue

@@ -59,6 +59,7 @@
             />
         </q-field>
         <q-field
+            v-if="data.copy_from_default"
             class="csc-form-field"
         >
             <q-toggle
@@ -71,6 +72,7 @@
             />
         </q-field>
         <q-field
+            v-if="data.copy_from_default"
             class="csc-form-field"
         >
             <q-select
@@ -105,9 +107,10 @@
                 {{ $t('pbxConfig.createSoundSet') }}
             </q-btn>
         </div>
-        <q-inner-loading :visible="loading">
-            <q-spinner-dots size="60px" color="primary" />
-        </q-inner-loading>
+        <csc-object-spinner
+            v-if="loading"
+            :loading="loading"
+        />
     </div>
 </template>
 
@@ -126,12 +129,14 @@
         QIcon,
         QToggle
     } from 'quasar-framework'
+    import CscObjectSpinner from "../../CscObjectSpinner";
     export default {
         name: 'csc-pbx-sound-set-add-form',
         props: [
             'loading'
         ],
         components: {
+            CscObjectSpinner,
             QBtn,
             QInnerLoading,
             QSpinnerDots,

src/components/pages/PbxConfiguration/CscPbxSoundSets.vue

@@ -2,15 +2,6 @@
     <csc-page
         :is-list="true"
     >
-        <div
-            v-if="isListLoadingVisible"
-            class="row justify-center"
-        >
-            <q-spinner-dots
-                color="primary"
-                :size="40"
-            />
-        </div>
         <div
             v-show="addFormEnabled"
             class="row justify-center"
@@ -36,6 +27,12 @@
                 {{ $t('pbxConfig.addSoundSet') }}
             </q-btn>
         </div>
+        <div
+            v-if="isListLoadingVisible"
+            class="row justify-center"
+        >
+            <csc-spinner />
+        </div>
         <q-list
             striped-odd
             no-border
@@ -97,8 +94,10 @@
         QInnerLoading,
         QSpinnerDots
     } from 'quasar-framework'
+    import CscSpinner from "../../CscSpinner";
     export default {
         components: {
+            CscSpinner,
             CscPage,
             CscPbxSoundSet,
             CscRemoveDialog,
@@ -116,7 +115,7 @@
             }
         },
         mounted() {
-            this.$store.dispatch('pbxConfig/listSoundSets');
+            this.$store.dispatch('pbxConfig/listSoundSetsWithFiles');
         },
         computed: {
             ...mapGetters('pbxConfig', [

src/locales/en.json

@@ -459,7 +459,9 @@
         "invalidFilesText": "This sound set is incomplete ({amount} files are missing)",
         "invalidTextMobile": "Sound set is incomplete ({amount})",
         "removeSoundFileTitle": "Remove sound file",
-        "removeSoundFileText": "You are about to remove the sound file for {handle}"
+        "removeSoundFileText": "You are about to remove the sound file for {handle}",
+        "soundSet": "Sound Set",
+        "defaultNotSet": "A default subscriber sound set to be set before being able to select, in the Sound Sets page."
     },
     "callBlocking": {
         "privacyEnabledToast": "Your number is hidden to the callee",

src/store/pbx-config/actions.js

@@ -36,7 +36,6 @@ import {
     setQueueLengthConfig,
     setWrapUpTimeConfig,
     getConfig,
-    getPrefs,
     removeCallQueue,
     getAllSoundSets,
     getSoundFilesGrouped,
@@ -50,7 +49,9 @@ import {
     removeSoundFile,
     uploadSoundFile,
     abortPreviousSoundFileUpload,
-    setSoundSetItemLoopplay
+    setSoundSetItemLoopplay,
+    getDefaultSoundSet,
+    setSubscriberSoundSet
 } from '../../api/pbx-config'
 
 export default {
@@ -63,11 +64,6 @@ export default {
         });
         getGroupList(page).then((data) => {
             context.commit('listSucceeded', data);
-            return data;
-        }).then((groups) => {
-            groups.groups.items.forEach((group) => {
-                context.dispatch('loadCallQueueForGroup', group.id);
-            });
         }).catch((err) => {
             context.commit('listFailed', err.message);
         });
@@ -90,9 +86,6 @@ export default {
             context.commit('groupReloading', group);
             getGroup(group.id).then(($group) => {
                 context.commit('groupReloaded', $group);
-                return $group;
-            }).then((data) => {
-                context.dispatch('loadCallQueueForGroup', data.id);
             }).catch((err)=>{
                 context.commit('groupReloadingFailed', {
                     group: group,
@@ -191,7 +184,6 @@ export default {
         removeGroup(group.id).then(() => {
             return context.dispatch('listGroups', true);
         }).then(() => {
-            context.commit('removeGroup', group);
             context.commit('removeItemSucceeded');
         }).catch((err) => {
             context.commit('removeItemFailed', err.message);
@@ -206,11 +198,6 @@ export default {
         });
         getSeatList(page).then((data) => {
             context.commit('listSucceeded', data);
-            return data;
-        }).then((seats) => {
-            seats.seats.items.forEach((seat) => {
-                context.dispatch('loadCallQueueForSeat', seat.id);
-            });
         }).catch((err) => {
             context.commit('listFailed', err.message);
         });
@@ -233,9 +220,6 @@ export default {
             context.commit('seatReloading', seat);
             getSeat(seat.id).then(($seat) => {
                 context.commit('seatReloaded', $seat);
-                return $seat;
-            }).then((data) => {
-                context.dispatch('loadCallQueueForSeat', data.id);
             }).catch((err)=>{
                 context.commit('seatReloadingFailed', {
                     seat: seat,
@@ -528,32 +512,6 @@ export default {
             context.commit('updateItemFailed', err.message);
         });
     },
-    loadCallQueueForGroup(context, subscriberId) {
-        context.commit('preferenceRequesting', 'group', subscriberId);
-        getPrefs(subscriberId).then(($preferences) => {
-            let preferences = $preferences;
-            delete preferences._link;
-            context.commit('preferenceSucceeded', {
-                type: 'group',
-                preferences: preferences
-            });
-        }).catch((err) => {
-            context.commit('preferenceFailed', 'group', subscriberId, err.message);
-        })
-    },
-    loadCallQueueForSeat(context, subscriberId) {
-        context.commit('preferenceRequesting', 'seat', subscriberId);
-        getPrefs(subscriberId).then(($preferences) => {
-            let preferences = $preferences;
-            delete preferences._link;
-            context.commit('preferenceSucceeded', {
-                type: 'seat',
-                preferences: preferences
-            });
-        }).catch((err) => {
-            context.commit('preferenceFailed', 'seat', subscriberId, err.message);
-        })
-    },
     removeCallQueue(context, config) {
         context.commit('removeItemRequesting', config);
         removeCallQueue(config.id).then(() => {
@@ -564,7 +522,7 @@ export default {
             context.commit('removeItemFailed', err.message);
         });
     },
-    listSoundSets(context) {
+    listSoundSetsWithFiles(context) {
         context.commit('listSoundSetsRequesting');
         getAllSoundSets().then((data) => {
             context.commit('listSoundSetsSucceeded', data);
@@ -597,7 +555,7 @@ export default {
     removeSoundSet(context, soundSet) {
         context.commit('removeItemRequesting', soundSet);
         removeSoundSet(soundSet.id).then(() => {
-            return context.dispatch('listSoundSets');
+            return context.dispatch('listSoundSetsWithFiles');
         }).then(() => {
             context.commit('removeItemSucceeded');
         }).catch((err) => {
@@ -669,7 +627,7 @@ export default {
     createSoundSet(context, soundSet) {
         context.commit('addItemRequesting', soundSet);
         createSoundSet(soundSet).then(() => {
-            return context.dispatch('listSoundSets');
+            return context.dispatch('listSoundSetsWithFiles');
         }).then(() => {
             context.commit('addItemSucceeded');
         }).catch((err) => {
@@ -710,6 +668,40 @@ export default {
         context.commit('lastUpdatedField', {name: loopName, type: 'playing in loop'});
         setSoundSetItemLoopplay(options.id, options.loopplay).then(() => {
             return context.dispatch('reloadSoundSet', options.soundSet);
+        });
+    },
+    listSoundSets(context) {
+        context.commit('listSoundSetsRequesting');
+        getAllSoundSets().then((data) => {
+            context.commit('listSoundSetsSucceeded', data);
+        }).catch((err) => {
+            context.commit('listSoundSetsFailed', err.message)
+        });
+    },
+    getDefaultSoundSet(context) {
+        context.commit('defaultSoundSetRequesting');
+        getDefaultSoundSet().then((soundSet) => {
+            context.commit('defaultSoundSetSucceeded', soundSet);
+        }).catch((err) => {
+            context.commit('defaultSoundSetFailed', err.message);
+        });
+    },
+    setSeatSoundSet(context, seat) {
+        context.commit('updateItemRequesting', seat);
+        context.commit('lastUpdatedField', {name: seat.soundSet, type: 'seat sound set'});
+        setSubscriberSoundSet(seat.id, seat.soundSet).then(() => {
+            return context.dispatch('reloadSeat', seat);
+        }).then(() => {
+            context.commit('updateItemSucceeded');
+        }).catch((err) => {
+            context.commit('updateItemFailed', err.message);
+        });
+    },
+    setGroupSoundSet(context, group) {
+        context.commit('updateItemRequesting', group);
+        context.commit('lastUpdatedField', {name: group.soundSet, type: 'group sound set'});
+        setSubscriberSoundSet(group.id, group.soundSet).then(() => {
+            return context.dispatch('reloadGroup', group);
         }).then(() => {
             context.commit('updateItemSucceeded');
         }).catch((err) => {

src/store/pbx-config/getters.js

@@ -6,10 +6,14 @@ import { i18n } from '../../i18n';
 
 export default {
     groups(state) {
-        return state.groupsOrdered;
+        return state.groupsList.map((groupId) => {
+            return state.groups[groupId];
+        });
     },
     seats(state) {
-        return state.seatsOrdered;
+        return state.seatsList.map((seatId) => {
+            return state.seats[seatId];
+        });
     },
     numbers(state) {
         return _.get(state, 'numbers', []);
@@ -426,5 +430,51 @@ export default {
             let webusername = state.groups[id].webusername;
             return display_name ? display_name : webusername;
         }
+    },
+    soundSetOptions(state) {
+        let options = [];
+        Object.entries(state.soundSets).forEach((item)=>{
+            options.push({
+                label: item[1].name,
+                value: item[1].id
+            });
+        });
+        return options;
+    },
+    defaultSoundSet(state) {
+        return state.defaultSoundSet;
+    },
+    seatOptions(state) {
+        let options = [];
+        Object.values(state.seats).forEach((seat) => {
+            options.push({
+                label: seat.display_name ? seat.display_name : seat.username,
+                sublabel: i18n.t('pbxConfig.extension') + ': ' + seat.pbx_extension,
+                value: seat.id
+            });
+        });
+        return options;
+    },
+    soundSetLabel(state, getters) {
+        return (id) => {
+            let label = null;
+            getters.soundSetOptions.forEach((soundSet) => {
+                if (soundSet.value === id) {
+                    label = soundSet.label;
+                }
+            });
+            return label;
+        }
+    },
+    groupOptions(state) {
+        let options = [];
+        Object.values(state.groups).forEach((group) => {
+            options.push({
+                label: group.display_name ? group.display_name : group.username,
+                sublabel: i18n.t('pbxConfig.extension') + ': ' + group.pbx_extension,
+                value: group.id
+            });
+        });
+        return options;
     }
 }

src/store/pbx-config/mutations.js

@@ -30,57 +30,18 @@ export default {
         state.listLoadingSilently = _.get(options, 'silent', false);
         state.listState = RequestState.requesting;
         state.listError = null;
-        state.groups = {};
-        state.groupsOrdered = [];
-        state.seats = {};
-        state.seatsOrdered = [];
-        state.numbersMap = {};
     },
     listSucceeded(state, all) {
         state.listState = RequestState.succeeded;
         state.listError = null;
         state.listLastPage = all.lastPage;
         state.pilot = all.pilot;
-        state.groups = {};
-        state.groupsOrdered = [];
-        state.seats = {};
-        state.seatsOrdered = [];
-        state.numbersMap = {};
-        all.groups.items.forEach((group)=>{
-            state.groups[group.id] = group;
-            state.groupsOrdered.push(group);
-        });
-        all.seats.items.forEach((seat)=>{
-            seat.pbx_group_ids.forEach((groupId)=>{
-                let group = state.groups[groupId];
-                let seats = _.get(group, 'seats', []);
-                seats.push(seat);
-                _.set(group, 'seats', seats);
-                let groups = _.get(seat, 'groups', []);
-                groups.push(group);
-                _.set(seat, 'groups', groups);
-            });
-            state.seats[seat.id] = seat;
-            state.seatsOrdered.push(seat);
-        });
-        if(_.isArray(all.numbers) && all.numbers.length > 0) {
-            all.numbers.forEach((number)=>{
-                if(_.has(state.groups, number.subscriber_id)) {
-                    number.subscriber = state.groups[number.subscriber_id];
-                }
-                else if (_.has(state.seats, number.subscriber_id)) {
-                    number.subscriber = state.seats[number.subscriber_id];
-                }
-                else if (state.pilot.id === number.subscriber_id) {
-                    number.subscriber = state.pilot;
-                }
-                else {
-                    number.subscriber = null;
-                }
-                state.numbersMap[number.id] = number;
-            });
-            state.numbers = all.numbers;
-        }
+        state.groups = all.groups;
+        state.seats = all.seats;
+        state.numbersMap = all.numbersMap;
+        state.numbers = all.numbers;
+        state.seatsList = Object.keys(state.seats);
+        state.groupsList = Object.keys(state.groups);
     },
     listFailed(state, error) {
         state.listState = RequestState.failed;
@@ -151,14 +112,6 @@ export default {
         state.removeState = RequestState.failed;
         state.removeError = error;
     },
-    removeGroup(state, group) {
-        delete state.groups[group.id];
-        state.groupsOrdered.forEach(($group, index)=>{
-            if(group.id === $group.id) {
-                delete state.groupsOrdered[index];
-            }
-        });
-    },
     deviceListRequesting(state, options) {
         options = options || {};
         state.listLastPage = null;
@@ -363,15 +316,11 @@ export default {
         state.groupReloading = group;
     },
     groupReloaded(state, group) {
+        let seatIds = _.get(group, 'pbx_groupmember_ids', []);
         state.groupReloadingState = RequestState.succeeded;
         state.groupReloadingError = null;
         Vue.set(state.groups, group.id, group);
-        for(let i = 0; i < state.groupsOrdered.length; i++) {
-            if(state.groupsOrdered[i].id === group.id) {
-                state.groupsOrdered[i] = group;
-            }
-        }
-        let seatIds = _.get(group, 'pbx_groupmember_ids', []);
+        state.groupsList = Object.keys(state.groups);
         group.seats = [];
         seatIds.forEach((seatId)=>{
             group.seats.push(state.seats[seatId]);
@@ -387,17 +336,13 @@ export default {
         state.seatReloading = seat;
     },
     seatReloaded(state, seat) {
+        let groupIds = _.get(seat, 'pbx_group_ids', []);
         state.seatReloadingState = RequestState.succeeded;
         state.seatReloadingError = null;
         Vue.set(state.seats, seat.id, seat);
-        for(let i = 0; i < state.seatsOrdered.length; i++) {
-            if(state.seatsOrdered[i].id === seat.id) {
-                state.seatsOrdered[i] = seat;
-            }
-        }
-        let groupIds = _.get(seat, 'pbx_group_ids', []);
+        state.seatsList = Object.keys(state.seats);
         seat.groups = [];
-        groupIds.forEach((groupId)=>{
+        groupIds.forEach((groupId) => {
             seat.groups.push(state.groups[groupId]);
         });
     },
@@ -452,26 +397,6 @@ export default {
         state.configReloadingState = RequestState.failed;
         state.configReloadingError = err;
     },
-    preferenceRequesting(state, type, id) {
-        reactiveSet(state[type + 'States'], id + "", RequestState.requesting);
-    },
-    preferenceSucceeded(state, data) {
-        let id = data.preferences.id + "";
-        reactiveSet(state[data.type + 'States'], id, RequestState.succeeded);
-        reactiveSet(state[data.type + 'Errors'], id, null);
-        Vue.set(state[data.type + 's'], id, Object.assign(state[data.type + 's'][id], data.preferences));
-        for (let i = 0; i <= state[data.type + 'sOrdered'].length; i++) {
-            let subscriberState = state[data.type + 'sOrdered'][i];
-            if (subscriberState && (state[data.type + 'sOrdered'][i].id === data.preferences.id)) {
-                state[data.type + 'sOrdered'][i] = Object.assign(state[data.type + 'sOrdered'][i], data.preferences);
-            }
-        }
-    },
-    preferenceFailed(state, type, id, error) {
-        id = id + "";
-        reactiveSet(state[type + 'States'], id, RequestState.failed);
-        reactiveSet(state[type + 'Errors'], id, error);
-    },
     listSoundSetsRequesting(state) {
         state.listState = RequestState.requesting;
         state.listSoundSetsState = RequestState.requesting;
@@ -567,5 +492,18 @@ export default {
     },
     resetSoundFileProgress(state, handle) {
         reactiveSet(state.uploadSoundFileProgresses, handle, 0);
+    },
+    defaultSoundSetRequesting(state) {
+        state.defaultSoundSetState = RequestState.requesting;
+        state.defaultSoundSetError = null;
+    },
+    defaultSoundSetSucceeded(state, soundSet) {
+        state.defaultSoundSet = soundSet;
+        state.defaultSoundSetState = RequestState.succeeded;
+        state.defaultSoundSetError = null;
+    },
+    defaultSoundSetFailed(state, error) {
+        state.defaultSoundSetState = RequestState.failed;
+        state.defaultSoundSetError = error;
     }
 }

src/store/pbx-config/state.js

@@ -5,9 +5,9 @@ import { RequestState } from '../common'
 export default {
     pilot: null,
     groups: {},
-    groupsOrdered: [],
+    groupsList: [],
     seats: {},
-    seatsOrdered: [],
+    seatsList: [],
     numbers: [],
     numbersMap : {},
     devicesOrdered: [],
@@ -98,5 +98,8 @@ export default {
     lastAddedCallQueue: null,
     uploadSoundFileStates: {},
     uploadSoundFileErrors: {},
-    uploadSoundFileProgresses: {}
+    uploadSoundFileProgresses: {},
+    defaultSoundSetState : RequestState.initiated,
+    defaultSoundSetError: null,
+    defaultSoundSet: null
 }

t/store/pbx-config.js

@@ -10,28 +10,22 @@ describe('PBX Configuration Store', () => {
         let data = {
             pilot: {},
             seats: {
-                items: [
-                    {
+                2:  {
                         id: 2,
                         pbx_group_ids: []
                     },
+                3:
                     {
                         id: 3,
                         pbx_group_ids: []
                     }
-                ],
-                lastPage: 1
             },
+            lastPage: 1,
             groups: {
-                items: [
-                    {
-                        id: 4
-                    },
-                    {
-                        id: 5
+                4:  {
+                        id: 4,
+                        display_name: 'Marketing'
                     }
-                ],
-                lastPage: 1
             },
             numbers: [
                 {
@@ -43,10 +37,8 @@ describe('PBX Configuration Store', () => {
             ]
         };
         PbxConfig.mutations.listSucceeded(state, data);
-        assert.equal(state.seats[2], data.seats.items[0]);
-        assert.equal(state.seats[3], data.seats.items[1]);
-        assert.equal(state.groups[4], data.groups.items[0]);
-        assert.equal(state.groups[5], data.groups.items[1]);
+        assert.equal(state.seats, data.seats);
+        assert.equal(state.groups, data.groups);
         assert.deepEqual(state.numbers, data.numbers);
     });