TT#36009 PBXConfig: As a Customer, I want to see the model image for a pbx device item

Change-Id: I32c7e02f2541067393006a9e32d96bdee8954916

src/api/common.js

@@ -51,3 +51,18 @@ export function getList(options) {
         });
     });
 }
+
+export function get(options) {
+    return new Promise((resolve, reject)=>{
+        return Vue.http.get(options.path).then((result)=>{
+            resolve(getJsonBody(result.body));
+        }).catch((err)=>{
+            if(err.status && err.status >= 400) {
+                reject(new Error(err.body.message));
+            }
+            else {
+                reject(err);
+            }
+        });
+    });
+}

src/api/pbx-config.js

@@ -1,11 +1,12 @@
 
 import _ from 'lodash';
+import Vue from 'vue';
 import { getNumbers, assignNumbers } from './user';
 import { createSubscriber, deleteSubscriber, setDisplayName,
     setPbxExtension, setPbxHuntPolicy, setPbxHuntTimeout,
     setPbxGroupMemberIds, setPbxGroupIds, getSubscribers } from './subscriber';
 import uuid from 'uuid';
-import { getList } from './common'
+import { getList, get } from './common'
 
 var createId = uuid.v4;
 
@@ -171,31 +172,12 @@ export function getSeatList(page) {
 }
 
 export function getDeviceList(page) {
-    return new Promise((resolve, reject)=>{
+    return getDevices({
-        Promise.all([
+        params: {
-            getDevices({
+            page: page,
-                params: {
+            order_by: PBX_CONFIG_ORDER_BY,
-                    page: page,
+            order_by_direction: PBX_CONFIG_ORDER_DIRECTION
-                    order_by: PBX_CONFIG_ORDER_BY,
+        }
-                    order_by_direction: PBX_CONFIG_ORDER_DIRECTION
-                }
-            }),
-            getProfiles({
-                all: true
-            }),
-            getModels({
-                all: true
-            })
-        ]).then((result)=>{
-            resolve({
-                devices: result[0],
-                profiles: result[1],
-                models: result[2],
-                lastPage: result[0].lastPage
-            });
-        }).catch((err)=>{
-            reject(err);
-        });
     });
 }
 
@@ -286,3 +268,89 @@ export function setSeatExtension(id, seatExtension) {
 export function updateSeatGroups(id, seatIds) {
     return setPbxGroupIds(id, seatIds);
 }
+
+export function getDeviceFull(id) {
+    return getDevice(id, true);
+}
+
+export function getDevice(id, join) {
+    return new Promise((resolve, reject)=>{
+        let device;
+        Promise.resolve().then(()=>{
+            return get({
+                path: '/api/pbxdevices/' + id
+            });
+        }).then(($device)=> {
+            device = $device;
+            if(join === true) {
+                return getProfile(device.profile_id, join);
+            }
+            else {
+                resolve(device);
+            }
+        }).then((profile)=>{
+            device.profile = profile;
+            resolve(device);
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+
+export function getProfile(id, join) {
+    return new Promise((resolve, reject)=>{
+        let profile;
+        Promise.resolve().then(()=>{
+            return get({
+                path: '/api/pbxdeviceprofiles/' + id
+            });
+        }).then(($profile)=> {
+            profile = $profile;
+            if(join === true) {
+                return Promise.all([
+                    // getModel(profile.device_id),
+                    getModelFrontImage(profile.device_id)
+                ]);
+            }
+            else {
+                resolve(profile);
+            }
+        }).then((res)=>{
+            // profile.model = res[0];
+            profile.modelFrontImage = res[0];
+            profile.modelFrontImageUrl = URL.createObjectURL(profile.modelFrontImage);
+            resolve(profile);
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+
+export function getModel(id) {
+    return new Promise((resolve, reject)=>{
+        Promise.resolve().then(()=>{
+            return get({
+                path: '/api/pbxdevicemodels/' + id
+            });
+        }).then((model)=> {
+            resolve(model);
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+
+export function getModelFrontImage(id) {
+    return new Promise((resolve, reject)=>{
+        Vue.http.get('/api/pbxdevicemodelimages/' + id, {
+            responseType: 'blob',
+            params: {
+                type: 'front'
+            }
+        }).then((res)=>{
+            resolve(res.body);
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}

src/components/pages/PbxConfiguration/CscPbxDevice.vue

@@ -13,35 +13,34 @@
                 <q-input v-model="device.identifier" readonly />
             </q-field>
             <q-field :label="$t('pbxConfig.deviceModel')">
-                <q-select v-model="device.model.id" :options="modelOptions" clearable disable />
+                <!--<q-select v-model="device.model.id" :options="modelOptions" clearable disable />-->
+                <p>{{ name }}</p>
+                <div class="csc-pbx-device-image">
+                    <img v-show="hasFrontImage" ref="modelImage" :src="frontImageUrl" />
+                </div>
             </q-field>
         </q-card-main>
+        <q-inner-loading :visible="loading">
+            <q-spinner-mat size="60px" color="primary"></q-spinner-mat>
+        </q-inner-loading>
     </q-card>
 </template>
 
 <script>
 
+    import _ from 'lodash'
     import { QCard, QCardTitle, QCardMain, QCollapsible,
-        QIcon, QField, QInput, QSelect, QBtn } from 'quasar-framework'
+        QIcon, QField, QInput, QSelect, QBtn, QInnerLoading, QSpinnerMat } from 'quasar-framework'
     export default {
         name: 'csc-pbx-device',
-        props: {
+        props: [
-            device: {
+            'device',
-                type: Object,
+            'loading',
-                required: true
+            'modelOptions'
-            },
+        ],
-            modelOptions: {
-                type: Object,
-                required: true
-            },
-            loading: {
-                type: Boolean,
-                default: false
-            }
-        },
         components: {
             QCard, QCardTitle, QCardMain, QCollapsible,
-            QIcon, QField, QInput, QSelect, QBtn
+            QIcon, QField, QInput, QSelect, QBtn, QInnerLoading, QSpinnerMat
         },
         data () {
             return {
@@ -56,8 +55,20 @@
                 else {
                     return 'keyboard arrow up';
                 }
+            },
+            frontImageUrl() {
+                return _.get(this.device, 'profile.modelFrontImageUrl');
+            },
+            hasFrontImage() {
+                return _.isString(this.frontImageUrl);
+            },
+            name() {
+                return _.get(this.device, 'profile.name', '...');
             }
         },
+        mounted() {
+            this.$emit('loaded');
+        },
         methods: {
             toggleMain() {
                 this.expanded = !this.expanded;
@@ -68,4 +79,9 @@
 
 <style lang="stylus" rel="stylesheet/stylus">
     @import '../../../themes/app.common'
+
+    .csc-pbx-device-image
+        width 100%
+        img
+            width 100%
 </style>

src/components/pages/PbxConfiguration/CscPbxDevices.vue

@@ -6,8 +6,8 @@
         <div v-if="devices.length > 0 && !isListRequesting && listLastPage > 1" class="row justify-center">
             <q-pagination :value="listCurrentPage" :max="listLastPage" @change="changePage" />
         </div>
-        <csc-pbx-device v-for="device in devices" :key="device.id"
+        <csc-pbx-device v-for="device in devices" :key="device.id" :device="device"
-                        :device="device" :modelOptions="modelOptions" />
+                        :modelOptions="modelOptions" :loading="isDeviceLoading(device.id)" />
         <div v-if="devices.length === 0 && !isListRequesting" class="row justify-center csc-no-entities">
             {{ $t('pbxConfig.noDevices') }}
         </div>
@@ -42,7 +42,8 @@
                 'isListRequesting',
                 'isListLoadingVisible',
                 'listCurrentPage',
-                'listLastPage'
+                'listLastPage',
+                'isDeviceLoading'
             ])
         },
         methods: {
@@ -50,10 +51,14 @@
                 this.$store.dispatch('pbxConfig/listDevices', {
                     page: page
                 });
+            },
+            loadDevice(id) {
+                this.$store.dispatch('pbxConfig/loadDevice', id);
             }
         }
     }
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
+    @import '../../../themes/app.common'
 </style>

src/store/pbx-config/actions.js

@@ -5,7 +5,7 @@ import { assignNumbers } from '../../api/user';
 import { addGroup, removeGroup, addSeat, removeSeat, setGroupName,
     setGroupExtension, setGroupHuntPolicy, setGroupHuntTimeout,
     updateGroupSeats, setSeatName, setSeatExtension,
-    updateSeatGroups, getGroupList, getSeatList, getDeviceList } from '../../api/pbx-config'
+    updateSeatGroups, getGroupList, getSeatList, getDeviceList, getDeviceFull } from '../../api/pbx-config'
 
 export default {
     listGroups(context, options) {
@@ -182,11 +182,22 @@ export default {
             });
             getDeviceList(page).then((devices)=>{
                 context.commit('deviceListSucceeded', devices);
+                devices.items.forEach((device)=>{
+                    context.dispatch('loadDevice', device.id);
+                });
                 resolve();
             }).catch((err)=>{
                 context.commit('deviceListFailed', err.message);
                 reject(err);
             });
         });
+    },
+    loadDevice(context, deviceId) {
+        context.commit('deviceRequesting', deviceId);
+        getDeviceFull(deviceId).then((device)=>{
+            context.commit('deviceSucceeded', device);
+        }).catch((err)=>{
+            context.commit('deviceFailed', deviceId, err.message);
+        });
     }
 }

src/store/pbx-config/getters.js

@@ -124,5 +124,10 @@ export default {
     },
     listLastPage(state) {
         return state.listLastPage;
+    },
+    isDeviceLoading(state) {
+        return (id)=>{
+            return state.deviceLoadingStates[id + ""] === true;
+        }
     }
 }

src/store/pbx-config/mutations.js

@@ -126,26 +126,33 @@ export default {
         state.listState = RequestState.succeeded;
         state.listError = null;
         state.listLastPage = data.lastPage;
-        state.devicesOrdered = data.devices.items;
+        state.devices = {};
-        state.profilesOrdered = data.profiles.items;
+        state.devicesOrdered = data.items;
-        state.modelsOrdered = data.models.items;
         state.devicesOrdered.forEach((device)=>{
-            state.profilesOrdered.forEach((profile)=>{
+            state.devices[device.id + ""] = device;
-                if(device.profile_id === profile.id) {
-                    device.profile = profile;
-                }
-            });
-        });
-        state.devicesOrdered.forEach((device)=>{
-            state.modelsOrdered.forEach((model)=>{
-                if(device.profile.device_id === model.id) {
-                    device.model = model;
-                }
-            });
         });
     },
     deviceListFailed(state, error) {
         state.listState = RequestState.failed;
         state.listError = error;
+    },
+    deviceRequesting(state, deviceId) {
+        let deviceLoadingStates = _.clone(state.deviceLoadingStates);
+        deviceLoadingStates[deviceId + ""] = true;
+        state.deviceLoadingStates = deviceLoadingStates;
+    },
+    deviceSucceeded(state, device) {
+        let deviceLoadingStates = _.clone(state.deviceLoadingStates);
+        deviceLoadingStates[device.id + ""] = false;
+        state.deviceLoadingStates = deviceLoadingStates;
+        state.devices[device.id + ""].profile = device.profile;
+    },
+    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;
     }
 }

src/store/pbx-config/state.js

@@ -29,5 +29,7 @@ export default {
     updateItem: null,
     removeState: RequestState.initiated,
     removeError: null,
-    removeItem: null
+    removeItem: null,
+    deviceLoadingStates: {},
+    deviceLoadingErrors: {}
 }