TT#47388 Remove call queue config item

What has been done:
- TT#47832, Implement UI for removal of CallQueueConfiguration items, incl
  loading spinner and confirm dialog
- TT#47833, Implement state handling for CallQueueConfiguration removal of item
- TT#47834, Create API method for removal of CallQueueConfiguration item

Change-Id: I0a8f7e2a4fa68b13276f5944410982febfc2e333

src/api/pbx-config.js

@@ -20,7 +20,8 @@ import {
     addNewCallQueueConfig,
     setQueueLength,
     setWrapUpTime,
-    getPreferences
+    getPreferences,
+    removeCallQueueConfig
 } from './subscriber';
 import uuid from 'uuid';
 import { getList, get, patchReplace } from './common'
@@ -549,7 +550,7 @@ export function getCallQueueConfigurations() {
 }
 
 export function addCallQueueConfig(id, config) {
-    return new Promise((resolve, reject)=>{
+    return new Promise((resolve, reject) => {
         addNewCallQueueConfig(id, config).then(() => {
             resolve();
         }).catch((err)=>{
@@ -559,9 +560,9 @@ export function addCallQueueConfig(id, config) {
 }
 
 export function getConfig(id) {
-    return new Promise((resolve, reject)=>{
+    return new Promise((resolve, reject) => {
         let $subscriber = {};
-        Promise.resolve().then(()=>{
+        Promise.resolve().then(() => {
             return getSubscriber(id);
         }).then((subscriber) => {
             $subscriber = subscriber;
@@ -580,6 +581,16 @@ export function getConfig(id) {
     });
 }
 
+export function removeCallQueue(subscriberId) {
+    return new Promise((resolve, reject) => {
+        removeCallQueueConfig(subscriberId).then(() => {
+            resolve();
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+
 export function setQueueLengthConfig(id, queueLength) {
     return setQueueLength(id, queueLength);
 }

src/api/subscriber.js

@@ -361,3 +361,8 @@ export function setQueueLength(id, queueLength) {
 export function setWrapUpTime(id, wrapUpTime) {
     return editCallQueuePreference(id, { queue_wrap_up_time: wrapUpTime });
 }
+
+export function removeCallQueueConfig(subscriberId) {
+    let param = { cloud_pbx_callqueue: false };
+    return Vue.http.put('api/subscriberpreferences/' + subscriberId, param);
+}

src/components/pages/PbxConfiguration/CscPbxCallQueue.vue

@@ -98,6 +98,14 @@
             class="csc-list-actions-pinned"
         >
             <q-item-tile>
+                <q-btn
+                    v-if="expanded"
+                    icon="delete"
+                    :big="isMobile"
+                    color="negative"
+                    flat
+                    @click="remove()"
+                />
                 <q-btn
                     :icon="titleIcon"
                     :big="isMobile"
@@ -129,12 +137,12 @@
         QIcon,
         Platform,
         QBtn,
+        QInnerLoading,
+        QSpinnerMat,
         QItem,
         QItemSide,
         QItemMain,
-        QItemTile,
+        QItemTile
-        QInnerLoading,
-        QSpinnerMat
     } from 'quasar-framework'
     export default {
         name: 'csc-pbx-call-queue',
@@ -153,12 +161,12 @@
             QInput,
             QIcon,
             QBtn,
+            QInnerLoading,
+            QSpinnerMat,
             QItem,
             QItemSide,
             QItemMain,
-            QItemTile,
+            QItemTile
-            QInnerLoading,
-            QSpinnerMat
         },
         validations: {
             changes: {
@@ -314,15 +322,15 @@
             queueLengthHasChanged() {
                 return this.queueLength + "" !== this.changes.max_queue_length + "";
             },
+            isLoading() {
+                return this.loading;
+            },
             configModel() {
                 return {
                     id: this.subscriber.id,
                     max_queue_length: this.changes.max_queue_length,
                     queue_wrap_up_time: this.changes.queue_wrap_up_time
                 }
-            },
-            isLoading() {
-                return this.loading;
             }
         },
         methods: {
@@ -356,9 +364,16 @@
                 else {
                     this.$emit('save-queue-length', this.configModel);
                 }
+            },
+            remove() {
+                this.$emit('remove', this.subscriber);
             }
         },
         watch: {
+            subscriber() {
+                this.resetQueueLength();
+                this.resetWrapUpTime();
+            }
         }
     }
 </script>

src/components/pages/PbxConfiguration/CscPbxCallQueues.vue

@@ -52,6 +52,7 @@
                     :loading="isItemLoading(subscriber.id)"
                     @save-queue-length="setQueueLength"
                     @save-wrap-up-time="setWrapUpTime"
+                    @remove="removeConfigDialog"
                 />
             </q-list>
         </div>
@@ -61,6 +62,12 @@
         >
             {{ $t('pbxConfig.noCallQueues') }}
         </div>
+        <csc-remove-dialog
+            ref="removeDialog"
+            :title="$t('pbxConfig.removeConfigTitle')"
+            :message="removeDialogMessage"
+            @remove="removeConfig"
+        />
     </csc-page>
 </template>
 
@@ -68,6 +75,7 @@
     import CscPage from '../../CscPage'
     import CscPbxCallQueue from './CscPbxCallQueue'
     import CscPbxCallQueueAddForm from './CscPbxCallQueueAddForm'
+    import CscRemoveDialog from '../../CscRemoveDialog'
     import { mapGetters } from 'vuex'
     import {
         QField,
@@ -89,6 +97,7 @@
             CscPage,
             CscPbxCallQueue,
             CscPbxCallQueueAddForm,
+            CscRemoveDialog,
             QField,
             QInput,
             QIcon,
@@ -104,7 +113,8 @@
         },
         data () {
             return {
-                addFormEnabled: false
+                addFormEnabled: false,
+                currentRemovingSubscriber: null
             }
         },
         mounted() {
@@ -120,10 +130,19 @@
                 'isAdding',
                 'addState',
                 'isUpdating',
-                'updateItemId'
+                'updateItemId',
+                'removeState',
+                'isRemoving'
             ]),
             isMobile() {
                 return Platform.is.mobile;
+            },
+            removeDialogMessage() {
+                if (this.currentRemovingSubscriber !== null) {
+                    return this.$t('pbxConfig.removeConfigText', {
+                        subscriber: this.currentRemovingSubscriber.display_name
+                    });
+                }
             }
         },
         methods: {
@@ -155,7 +174,15 @@
                 this.$store.dispatch('pbxConfig/setWrapUpTime', subscriber);
             },
             isItemLoading(subscriberId) {
-                return (this.isUpdating && this.updateItemId + "" === subscriberId + "");
+                return (this.isUpdating && this.updateItemId + "" === subscriberId + "") ||
+                    (this.isRemoving && this.currentRemovingSubscriber.id + "" === subscriberId + "");
+            },
+            removeConfigDialog(subscriber) {
+                this.currentRemovingSubscriber = subscriber;
+                this.$refs.removeDialog.open();
+            },
+            removeConfig() {
+                this.$store.dispatch('pbxConfig/removeCallQueue', this.currentRemovingSubscriber)
             }
         },
         watch: {

src/components/pages/PbxConfiguration/CscPbxDevices.vue

@@ -126,7 +126,7 @@
                 :profiles="profiles"
                 :modelImages="modelImages"
                 :loading="createDeviceRequesting"
-                @remove="removeDevice"
+                @remove="removeDeviceDialog"
                 @modelSelectOpened="modelSelectOpened()"
                 @save="saveDevice"
                 @cancelForm="cancelForm"
@@ -170,7 +170,7 @@
                 :subscribers="getGroupOrSeatById"
                 :profiles="profiles"
                 :modelImages="modelImages"
-                @remove="removeDevice"
+                @remove="removeDeviceDialog"
                 @loadGroupsAndSeats="loadGroupsAndSeats()"
                 @deviceKeysChanged="deviceKeysChanged"
                 @save-station-name="setStationName"
@@ -184,6 +184,12 @@
         >
             {{ noDeviceMessage }}
         </div>
+        <csc-remove-dialog
+            ref="removeDialog"
+            :title="$t('pbxConfig.removeDeviceTitle')"
+            :message="removeDialogMessage"
+            @remove="removeDevice"
+        />
     </csc-page>
 </template>
 
@@ -194,12 +200,12 @@
     import CscPbxDevice from './CscPbxDevice'
     import CscPbxDeviceAddForm from './CscPbxDeviceAddForm'
     import CscPbxModelSelect from './CscPbxModelSelect'
+    import CscRemoveDialog from '../../CscRemoveDialog'
     import { showToast, showGlobalError } from '../../../helpers/ui'
     import {
         QSpinnerDots,
         QPagination,
         QList,
-        Dialog,
         QItem,
         QItemMain,
         QBtn,
@@ -217,7 +223,8 @@
                 formEnabled: false,
                 filterEnabled: false,
                 filterStationNameInput: '',
-                filterMacAddressInput: ''
+                filterMacAddressInput: '',
+                currentRemovingDevice: null
             }
         },
         mounted() {
@@ -229,6 +236,7 @@
             CscPbxDevice,
             CscPbxDeviceAddForm,
             CscPbxModelSelect,
+            CscRemoveDialog,
             QSpinnerDots,
             QPagination,
             QList,
@@ -363,6 +371,13 @@
                         }
                     }
                 ];
+            },
+            removeDialogMessage() {
+                if (this.currentRemovingDevice !== null) {
+                    return this.$t('pbxConfig.removeDeviceText', {
+                        device: this.currentRemovingDevice.station_name
+                    });
+                }
             }
         },
         methods: {
@@ -378,23 +393,8 @@
             saveDevice(device) {
                 this.$store.dispatch('pbxConfig/createDevice', device);
             },
-            removeDevice(device) {
+            removeDevice() {
-                var store = this.$store;
+                this.$store.dispatch('pbxConfig/removeDevice', this.currentRemovingDevice);
-                var i18n = this.$i18n;
-                Dialog.create({
-                    title: i18n.t('pbxConfig.removeDeviceTitle'),
-                    message: i18n.t('pbxConfig.removeDeviceText', { device: device.station_name }),
-                    buttons: [
-                        'Cancel',
-                        {
-                            label: i18n.t('pbxConfig.removeDevice'),
-                            color: 'negative',
-                            handler () {
-                                store.dispatch('pbxConfig/removeDevice', device);
-                            }
-                        }
-                    ]
-                });
             },
             loadGroupsAndSeats() {
                 this.$store.dispatch('pbxConfig/getAllGroupsAndSeats');
@@ -466,6 +466,10 @@
             },
             resetFilters() {
                 this.$store.dispatch('pbxConfig/resetDeviceFilters');
+            },
+            removeDeviceDialog(device) {
+                this.currentRemovingDevice = device;
+                this.$refs.removeDialog.open();
             }
         },
         watch: {

src/components/pages/PbxConfiguration/CscPbxGroups.vue

@@ -62,7 +62,7 @@
                 :alias-number-options="aliasNumberOptions"
                 :seat-options="seatOptions"
                 :hunt-policy-options="huntPolicyOptions"
-                @remove="removeGroup"
+                @remove="removeGroupDialog"
                 :loading="isItemLoading(group.id)"
                 @save-name="setGroupName"
                 @save-extension="setGroupExtension"
@@ -78,6 +78,12 @@
         >
             {{ $t('pbxConfig.noGroups') }}
         </div>
+        <csc-remove-dialog
+            ref="removeDialog"
+            :title="$t('pbxConfig.removeGroupTitle')"
+            :message="removeDialogMessage"
+            @remove="removeGroup"
+        />
     </csc-page>
 </template>
 
@@ -86,6 +92,7 @@
     import CscPage from '../../CscPage'
     import CscPbxGroup from './CscPbxGroup'
     import CscPbxGroupAddForm from './CscPbxGroupAddForm'
+    import CscRemoveDialog from '../../CscRemoveDialog'
     import aliasNumberOptions from '../../../mixins/alias-number-options'
     import itemError from '../../../mixins/item-error'
     import { showToast } from '../../../helpers/ui'
@@ -108,7 +115,6 @@
         QInnerLoading,
         QSpinnerDots,
         QSpinnerMat,
-        Dialog,
         QPagination,
         Platform
     } from 'quasar-framework'
@@ -119,6 +125,7 @@
             CscPage,
             CscPbxGroup,
             CscPbxGroupAddForm,
+            CscRemoveDialog,
             QChip,
             QCard,
             QCardSeparator,
@@ -147,7 +154,8 @@
         data () {
             return {
                 addFormEnabled: false,
-                page: 1
+                page: 1,
+                currentRemovingGroup: null
             }
         },
         computed: {
@@ -213,6 +221,13 @@
             isMobile() {
                 return Platform.is.mobile;
             },
+            removeDialogMessage() {
+                if (this.currentRemovingGroup !== null) {
+                    return this.$t('pbxConfig.removeGroupText', {
+                        group: this.currentRemovingGroup.name
+                    });
+                }
+            }
         },
         watch: {
             addState(state) {
@@ -263,23 +278,8 @@
             addGroup(group) {
                 this.$store.dispatch('pbxConfig/addGroup', group);
             },
-            removeGroup(group) {
+            removeGroup() {
-                var store = this.$store;
+                this.$store.dispatch('pbxConfig/removeGroup', this.currentRemovingGroup);
-                var i18n = this.$i18n;
-                Dialog.create({
-                    title: i18n.t('pbxConfig.removeGroupTitle'),
-                    message: i18n.t('pbxConfig.removeGroupText', { group: group.name }),
-                    buttons: [
-                        'Cancel',
-                        {
-                            label: i18n.t('pbxConfig.removeGroup'),
-                            color: 'negative',
-                            handler () {
-                                store.dispatch('pbxConfig/removeGroup', group);
-                            }
-                        }
-                    ]
-                });
             },
             setGroupName(group) {
                 this.$store.dispatch('pbxConfig/setGroupName', group);
@@ -303,6 +303,10 @@
                 this.$store.dispatch('pbxConfig/listGroups', {
                     page: page
                 });
+            },
+            removeGroupDialog(subscriber) {
+                this.currentRemovingGroup = subscriber;
+                this.$refs.removeDialog.open();
             }
         }
     }

src/components/pages/PbxConfiguration/CscPbxSeat.vue

@@ -410,7 +410,7 @@
             },
             saveGroups() {
                 this.$emit('save-groups', this.seatModel);
-            },
+            }
         },
         watch: {
             seat() {

src/components/pages/PbxConfiguration/CscPbxSeats.vue

@@ -61,7 +61,7 @@
                     :seat="seat"
                     :alias-number-options="aliasNumberOptions"
                     :group-options="groupOptions"
-                    @remove="removeSeat"
+                    @remove="removeSeatDialog"
                     :loading="isItemLoading(seat.id)"
                     @save-name="setSeatName"
                     @save-extension="setSeatExtension"
@@ -76,13 +76,20 @@
         >
             {{ $t('pbxConfig.noSeats') }}
         </div>
+        <csc-remove-dialog
+            ref="removeDialog"
+            :title="$t('pbxConfig.removeSeatTitle')"
+            :message="removeDialogMessage"
+            @remove="removeSeat"
+        />
     </csc-page>
 </template>
 
 <script>
-    import CscPage  from '../../CscPage'
+    import CscPage from '../../CscPage'
-    import CscPbxSeatAddForm  from './CscPbxSeatAddForm'
+    import CscPbxSeatAddForm from './CscPbxSeatAddForm'
-    import CscPbxSeat  from './CscPbxSeat'
+    import CscPbxSeat from './CscPbxSeat'
+    import CscRemoveDialog from '../../CscRemoveDialog'
     import aliasNumberOptions from '../../../mixins/alias-number-options'
     import itemError from '../../../mixins/item-error'
     import { mapGetters } from 'vuex'
@@ -106,7 +113,6 @@
         QInnerLoading,
         QSpinnerDots,
         QSpinnerMat,
-        Dialog,
         QPagination,
         Platform
     } from 'quasar-framework'
@@ -120,13 +126,15 @@
         },
         data () {
             return {
-                addFormEnabled: false
+                addFormEnabled: false,
+                currentRemovingSeat: null
             }
         },
         components: {
             CscPage,
             CscPbxSeat,
             CscPbxSeatAddForm,
+            CscRemoveDialog,
             QChip,
             QCard,
             QCardSeparator,
@@ -188,6 +196,13 @@
             },
             isMobile() {
                 return Platform.is.mobile;
+            },
+            removeDialogMessage() {
+                if (this.currentRemovingSeat !== null) {
+                    return this.$t('pbxConfig.removeSeatText', {
+                        seat: this.currentRemovingSeat.name
+                    });
+                }
             }
         },
         watch: {
@@ -239,23 +254,8 @@
             addSeat(seat) {
                 this.$store.dispatch('pbxConfig/addSeat', seat);
             },
-            removeSeat(seat) {
+            removeSeat() {
-                var store = this.$store;
+                this.$store.dispatch('pbxConfig/removeSeat', this.currentRemovingSeat);
-                var i18n = this.$i18n;
-                Dialog.create({
-                    title: i18n.t('pbxConfig.removeSeatTitle'),
-                    message: i18n.t('pbxConfig.removeSeatText', { seat: seat.name }),
-                    buttons: [
-                        'Cancel',
-                        {
-                            label: i18n.t('pbxConfig.removeSeat'),
-                            color: 'negative',
-                            handler () {
-                                store.dispatch('pbxConfig/removeSeat', seat);
-                            }
-                        }
-                    ]
-                });
             },
             setSeatName(seat) {
                 this.$store.dispatch('pbxConfig/setSeatName', seat);
@@ -273,6 +273,10 @@
                 this.$store.dispatch('pbxConfig/listSeats', {
                     page: page
                 });
+            },
+            removeSeatDialog(subscriber) {
+                this.currentRemovingSeat = subscriber;
+                this.$refs.removeDialog.open();
             }
         }
     }

src/locales/en.json

@@ -395,7 +395,9 @@
         "wrapUpTime": "Wrap Up Time",
         "queueExtensionName": "Group/Seat/Pilot",
         "addConfig": "Add Call Queue",
-        "createConfig": "Create Call Queue"
+        "createConfig": "Create Call Queue",
+        "removeConfigTitle": "Remove call queue",
+        "removeConfigText": "You are about to remove call queue for {subscriber}"
     },
     "callBlocking": {
         "privacyEnabledToast": "Your number is hidden to the callee",

src/store/pbx-config/actions.js

@@ -35,7 +35,8 @@ import {
     addCallQueueConfig,
     setQueueLengthConfig,
     setWrapUpTimeConfig,
-    getConfig
+    getConfig,
+    removeCallQueue
 } from '../../api/pbx-config'
 
 export default {
@@ -435,6 +436,12 @@ export default {
         let config = Object.assign(data.config, {
             cloud_pbx_callqueue: true
         });
+        if (!_.isNull(config.max_queue_length) && config.max_queue_length.length === 0) {
+            config.max_queue_length = null;
+        }
+        if (!_.isNull(config.queue_wrap_up_time) && config.queue_wrap_up_time.length === 0) {
+            config.queue_wrap_up_time = null;
+        }
         context.commit('addItemRequesting', config);
         addCallQueueConfig(data.id, config).then(() => {
             return context.dispatch('listCallQueueGroupsAndSeats', true);
@@ -462,9 +469,14 @@ export default {
         });
     },
     setQueueLength(context, subscriber) {
-        context.commit('updateItemRequesting', subscriber);
+        let updateItem = {
-        setQueueLengthConfig(subscriber.id, subscriber.max_queue_length).then(() => {
+            id: subscriber.id,
-            return context.dispatch('reloadConfig', subscriber);
+            max_queue_length: subscriber.max_queue_length || 5,
+            queue_wrap_up_time: subscriber.queue_wrap_up_time || 10
+        };
+        context.commit('updateItemRequesting', updateItem);
+        setQueueLengthConfig(updateItem.id, updateItem.max_queue_length).then(() => {
+            return context.dispatch('reloadConfig', updateItem);
         }).then(()=>{
             context.commit('updateItemSucceeded');
         }).catch((err) => {
@@ -472,13 +484,28 @@ export default {
         });
     },
     setWrapUpTime(context, subscriber) {
-        context.commit('updateItemRequesting', subscriber);
+        let updateItem = {
-        setWrapUpTimeConfig(subscriber.id, subscriber.queue_wrap_up_time).then(() => {
+            id: subscriber.id,
-            return context.dispatch('reloadConfig', subscriber);
+            max_queue_length: subscriber.max_queue_length || 5,
+            queue_wrap_up_time: subscriber.queue_wrap_up_time || 10
+        };
+        context.commit('updateItemRequesting', updateItem);
+        setWrapUpTimeConfig(updateItem.id, updateItem.queue_wrap_up_time).then(() => {
+            return context.dispatch('reloadConfig', updateItem);
         }).then(()=>{
             context.commit('updateItemSucceeded');
         }).catch((err) => {
             context.commit('updateItemFailed', err.message);
         });
+    },
+    removeCallQueue(context, config) {
+        context.commit('removeItemRequesting', config);
+        removeCallQueue(config.id).then(()=>{
+            return context.dispatch('listCallQueueGroupsAndSeats', true);
+        }).then(()=>{
+            context.commit('removeItemSucceeded');
+        }).catch((err)=>{
+            context.commit('removeItemFailed', err.message);
+        });
     }
 }

src/store/pbx-config/mutations.js

@@ -422,7 +422,7 @@ export default {
             state.callQueueGroupsAndSeats[config.id] = config;
             state.callQueueGroupsAndSeatsOrdered.push(config);
         });
-        state.callQueueGroupsAndSeats = _.filter(state.callQueueGroupsAndSeats, (item) => {
+        state.callQueueGroupsAndSeats = state.callQueueGroupsAndSeats.filter((item) => {
             return (item !== (undefined || null || ''));
         });
     },

src/themes/app.common.styl

@@ -184,3 +184,8 @@
         color $dark
     .q-chip-side
         color $dark
+
+
+.q-popover
+    .q-icon
+        color: $primary

t/store/pbx-config.js

@@ -50,31 +50,4 @@ describe('PBX Configuration Store', () => {
         assert.deepEqual(state.numbers, data.numbers);
     });
 
-    it('should list all group/seat/pilot call queue configs', function(){
-        let state = {
-            callQueueGroupsAndSeats: []
-        };
-        let data = {
-            items: [
-                {
-                    display_name: "123",
-                    id: 123,
-                    is_pbx_group: false,
-                    max_queue_length: "10",
-                    queue_wrap_up_time: "5"
-                },
-                {
-                    display_name: "456",
-                    id: 456,
-                    is_pbx_group: false,
-                    max_queue_length: "5",
-                    queue_wrap_up_time: "10"
-                }
-            ]
-        };
-        PbxConfig.mutations.callQueueListSucceeded(state, data);
-        assert.deepEqual(state.callQueueGroupsAndSeats[0], data.items[0]);
-        assert.deepEqual(state.callQueueGroupsAndSeats[1], data.items[1]);
-    });
-
 });