diff --git a/src/api/pbx-config.js b/src/api/pbx-config.js index 54017fbc..7e100d8e 100644 --- a/src/api/pbx-config.js +++ b/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); + } + }); + }); +} diff --git a/src/components/pages/PbxConfiguration/CscPbxDevice.vue b/src/components/pages/PbxConfiguration/CscPbxDevice.vue index 4d143ab6..fe96b7d0 100644 --- a/src/components/pages/PbxConfiguration/CscPbxDevice.vue +++ b/src/components/pages/PbxConfiguration/CscPbxDevice.vue @@ -22,9 +22,10 @@ - + + @@ -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; diff --git a/src/components/pages/PbxConfiguration/CscPbxDevices.vue b/src/components/pages/PbxConfiguration/CscPbxDevices.vue index 3e7480d9..8ad1832d 100644 --- a/src/components/pages/PbxConfiguration/CscPbxDevices.vue +++ b/src/components/pages/PbxConfiguration/CscPbxDevices.vue @@ -7,7 +7,7 @@ -
@@ -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 + })); + } } } } diff --git a/src/locales/en.json b/src/locales/en.json index 21498b1c..51e5f815 100644 --- a/src/locales/en.json +++ b/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", diff --git a/src/store/pbx-config/actions.js b/src/store/pbx-config/actions.js index 45bc003c..d09d2536 100644 --- a/src/store/pbx-config/actions.js +++ b/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); + }); } } diff --git a/src/store/pbx-config/getters.js b/src/store/pbx-config/getters.js index 932ad2a2..5e423fb2 100644 --- a/src/store/pbx-config/getters.js +++ b/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; } } diff --git a/src/store/pbx-config/mutations.js b/src/store/pbx-config/mutations.js index 2e3065ae..c4199b61 100644 --- a/src/store/pbx-config/mutations.js +++ b/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; }, diff --git a/src/store/pbx-config/state.js b/src/store/pbx-config/state.js index 8f9e8c94..c8e8e9d9 100644 --- a/src/store/pbx-config/state.js +++ b/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,