TT#20520 PBXConfig: As a Customer, I want to remove PBX Devices

Change-Id: If44a106416eebc55420100eaf76133241408f766

src/api/pbx-config.js

@@ -367,3 +367,18 @@ export function getModelFrontImage(id) {
         });
     });
 }
+
+export function removeDevice(id) {
+    return new Promise((resolve, reject)=>{
+        Vue.http.delete('api/pbxdevices/' + id).then(()=>{
+            resolve();
+        }).catch((err)=>{
+            if(err.status >= 400) {
+                reject(new Error(err.body.message));
+            }
+            else {
+                reject(err);
+            }
+        });
+    });
+}

src/components/pages/PbxConfiguration/CscPbxDevice.vue

@@ -22,9 +22,10 @@
                 <csc-pbx-device-config :device="device" />
             </q-item-tile>
         </q-item-main>
-        <q-item-side right>
+        <q-item-side right class="csc-item-buttons">
             <q-item-tile>
                 <q-btn :icon="titleIcon" :big="isMobile" color="primary" slot="right" flat @click="toggleMain()" />
+                <q-btn icon="delete" :big="isMobile" color="negative" slot="right" flat @click="remove()" />
             </q-item-tile>
         </q-item-side>
         <q-inner-loading :visible="loading">
@@ -87,6 +88,9 @@
         methods: {
             toggleMain() {
                 this.expanded = !this.expanded;
+            },
+            remove() {
+                this.$emit('remove', this.device);
             }
         }
     }
@@ -113,4 +117,9 @@
             font-weight 400
             letter-spacing normal
             line-height 1.8rem
+
+    .csc-item-buttons
+        .q-btn
+            padding-left 8px;
+            padding-right 8px;
 </style>

src/components/pages/PbxConfiguration/CscPbxDevices.vue

@@ -7,7 +7,7 @@
             <q-pagination :value="listCurrentPage" :max="listLastPage" @change="changePage" />
         </div>
         <q-list no-border separator sparse multiline>
-            <csc-pbx-device v-for="device in devices" :key="device.id" :device="device"
+            <csc-pbx-device v-for="device in devices" :key="device.id" :device="device" @remove="removeDevice"
                             :modelOptions="modelOptions" :loading="isDeviceLoading(device.id)" />
         </q-list>
         <div v-if="devices.length === 0 && !isListRequesting" class="row justify-center csc-no-entities">
@@ -20,7 +20,9 @@
     import { mapGetters } from 'vuex'
     import CscPage  from '../../CscPage'
     import CscPbxDevice from './CscPbxDevice'
-    import { QSpinnerDots, QPagination, QList } from 'quasar-framework'
+    import { QSpinnerDots, QPagination, QList, Dialog } from 'quasar-framework'
+    import { showToast } from '../../../helpers/ui'
+
     export default {
         data () {
             return {
@@ -36,7 +38,8 @@
             CscPbxDevice,
             QSpinnerDots,
             QPagination,
-            QList
+            QList,
+            Dialog
         },
         computed: {
             ...mapGetters('pbxConfig', [
@@ -46,7 +49,8 @@
                 'isListLoadingVisible',
                 'listCurrentPage',
                 'listLastPage',
-                'isDeviceLoading'
+                'isDeviceLoading',
+                'deviceRemoved'
             ])
         },
         methods: {
@@ -57,6 +61,33 @@
             },
             loadDevice(id) {
                 this.$store.dispatch('pbxConfig/loadDevice', id);
+            },
+            removeDevice(device) {
+                var store = this.$store;
+                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);
+                            }
+                        }
+                    ]
+                });
+            }
+        },
+        watch: {
+            deviceRemoved(device) {
+                if(device !== null) {
+                    showToast(this.$t('pbxConfig.toasts.removedDeviceToast', {
+                        name: device.station_name
+                    }));
+                }
             }
         }
     }

src/locales/en.json

@@ -291,8 +291,12 @@
             "addedGroupToast": "Added group {group}",
             "removedGroupToast": "Removed group {group}",
             "addedSeatToast": "Added seat {seat}",
-            "removedSeatToast": "Removed seat {seat}"
-        }
+            "removedSeatToast": "Removed seat {seat}",
+            "removedDeviceToast": "Removed device {name}"
+        },
+        "removeDevice": "Remove device",
+        "removeDeviceTitle": "Remove device",
+        "removeDeviceText": "You are about to remove device {device}"
     },
     "communication": {
         "sendFax": "Send Fax",

src/store/pbx-config/actions.js

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import { assignNumbers } from '../../api/user';
 import { addGroup, removeGroup, addSeat, removeSeat, setGroupName,
     setGroupExtension, setGroupHuntPolicy, setGroupHuntTimeout,
-    updateGroupSeats, setSeatName, setSeatExtension,
+    updateGroupSeats, setSeatName, setSeatExtension, removeDevice,
     updateSeatGroups, getGroupList, getSeatList, getDeviceList, getDeviceFull } from '../../api/pbx-config'
 
 export default {
@@ -209,5 +209,14 @@ export default {
         }).catch((err)=>{
             context.commit('deviceFailed', deviceId, err.message);
         });
+    },
+    removeDevice(context, device) {
+        context.commit('deviceRequesting', device.id);
+        removeDevice(device.id).then(()=>{
+            context.commit('deviceRemoved', device);
+            context.dispatch('listDevices');
+        }).catch((err)=>{
+            context.commit('deviceFailed', device.id, err.message);
+        });
     }
 }

src/store/pbx-config/getters.js

@@ -151,7 +151,7 @@ export default {
     },
     isDeviceLoading(state) {
         return (id)=>{
-            return state.deviceLoadingStates[id + ""] === true;
+            return state.deviceStates[id + ""] === RequestState.requesting;
         }
     },
     lastAddedGroup(state) {
@@ -174,5 +174,8 @@ export default {
     },
     lastRemovedSeat(state) {
         return state.lastRemovedSeat;
+    },
+    deviceRemoved(state) {
+        return state.deviceRemoved;
     }
 }

src/store/pbx-config/mutations.js

@@ -1,5 +1,6 @@
 'use strict';
 
+import Vue from 'vue'
 import _ from 'lodash'
 import { RequestState } from '../common'
 
@@ -154,6 +155,7 @@ export default {
         state.listState = RequestState.succeeded;
         state.listError = null;
         state.listLastPage = data.lastPage;
+        state.deviceRemoved = null;
         state.devicesOrdered = data.items;
         state.devicesOrdered.forEach((device)=>{
             state.devices[device.id + ""] = device;
@@ -164,31 +166,27 @@ export default {
         state.listError = error;
     },
     deviceRequesting(state, deviceId) {
-        let deviceLoadingStates = _.clone(state.deviceLoadingStates);
-        deviceLoadingStates[deviceId + ""] = true;
-        state.deviceLoadingStates = deviceLoadingStates;
+        Vue.set(state.deviceStates, deviceId + "", RequestState.requesting);
     },
     deviceSucceeded(state, device) {
-        let deviceLoadingStates = _.clone(state.deviceLoadingStates);
-        deviceLoadingStates[device.id + ""] = false;
-        state.deviceLoadingStates = deviceLoadingStates;
+        Vue.set(state.deviceStates, device.id + "", RequestState.succeeded);
+        Vue.set(state.deviceErrors, device.id + "", null);
+        Vue.set(state.devices, device.id + "", device);
         for(let i = 0; i <= state.devicesOrdered.length; i++) {
             if(state.devicesOrdered[i].id === device.id) {
                 state.devicesOrdered[i] = device;
             }
         }
-        delete state.devices[device.id + ""];
-        state.devices[device.id + ""] = device;
-
     },
-    deviceFailed(state, deviceId, errorMessage) {
-        let deviceLoadingStates = _.clone(state.deviceLoadingStates);
-        deviceLoadingStates[deviceId + ""] = false;
-        state.deviceLoadingStates = deviceLoadingStates;
-        let deviceLoadingErrors = _.clone(state.deviceLoadingErrors);
-        deviceLoadingErrors[deviceId + ""] = errorMessage;
-        state.deviceLoadingErrors = deviceLoadingErrors;
-    },   
+    deviceFailed(state, deviceId, error) {
+        Vue.set(state.deviceStates, deviceId + "", RequestState.failed);
+        Vue.set(state.deviceErrors, deviceId + "", error);
+    },
+    deviceRemoved(state, device) {
+        Vue.set(state.deviceStates, device.id + "", 'deleted');
+        Vue.set(state.deviceErrors, device.id + "", null);
+        state.deviceRemoved = device;
+    },
     lastAddedGroup(state, group) {
         state.lastAddedGroup = group;
     },

src/store/pbx-config/state.js

@@ -30,8 +30,9 @@ export default {
     removeState: RequestState.initiated,
     removeError: null,
     removeItem: null,
-    deviceLoadingStates: {},
-    deviceLoadingErrors: {},
+    deviceStates: {},
+    deviceErrors: {},
+    deviceRemoved: null,
     lastAddedGroup: null,
     lastRemovedGroup: null,
     lastAddedSeat: null,