TT#37653 PBXConfig: As a Customer, I want to change the phone model of a PBXDevice

Change-Id: I54b4ef7898718768362eb28382607ead1115ed76

src/api/pbx-config.js

@@ -471,3 +471,25 @@ export function setIdentifier(deviceId, identifier) {
         value: identifier
     });
 }
+
+export function setProfile(deviceId, profileId) {
+    return new Promise((resolve, reject)=>{
+        Promise.resolve().then(()=>{
+            return patchReplace({
+                path: 'api/pbxdevices/' + deviceId,
+                fieldPath: 'lines',
+                value: []
+            });
+        }).then(()=>{
+            return patchReplace({
+                path: 'api/pbxdevices/' + deviceId,
+                fieldPath: 'profile_id',
+                value: profileId
+            });
+        }).then(()=>{
+            resolve();
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}

src/components/pages/PbxConfiguration/CscPbxDevice.vue

@@ -50,8 +50,19 @@
                         @keyup.enter="saveIdentifier"
                     />
                 </q-field>
-                <q-field :label="$t('pbxConfig.deviceModel')">
+                <q-field
-                    <p>{{ name }}</p>
+                    :label="$t('pbxConfig.deviceModel')"
+                >
+                    <csc-pbx-model-select
+                        :selected-id="profileId"
+                        :preview="false"
+                        :erasable="false"
+                        :readonly="true"
+                        :profiles="profiles"
+                        :modelImages="modelImages"
+                        @opened="modelSelectOpened()"
+                        @select="selectProfile"
+                    />
                 </q-field>
                 <csc-pbx-device-config
                     :device="device"
@@ -104,10 +115,28 @@
 <script>
 
     import _ from 'lodash'
-    import { QCard, QCardTitle, QCardMain, QCollapsible,
+    import {
-        QIcon, QField, QInput, QSelect, QBtn, QInnerLoading, QSpinnerMat, QCardMedia,
+        QCard,
-        QItem, QItemMain, QItemSide, QItemTile, Platform } from 'quasar-framework'
+        QCardTitle,
+        QCardMain,
+        QCollapsible,
+        QIcon,
+        QField,
+        QInput,
+        QSelect,
+        QBtn,
+        QInnerLoading,
+        QSpinnerMat,
+        QCardMedia,
+        QItem,
+        QItemMain,
+        QItemSide,
+        QItemTile,
+        Platform
+    } from 'quasar-framework'
     import CscPbxDeviceConfig from './CscPbxDeviceConfig'
+    import CscPbxModelSelect from './CscPbxModelSelect'
+
     export default {
         name: 'csc-pbx-device',
         props: [
@@ -115,12 +144,30 @@
             'loading',
             'modelOptions',
             'groupsAndSeatsOptions',
-            'subscribers'
+            'subscribers',
+            'profiles',
+            'modelImages'
         ],
         components: {
-            CscPbxDeviceConfig, QCard, QCardTitle, QCardMain, QCollapsible,
+            CscPbxDeviceConfig,
-            QIcon, QField, QInput, QSelect, QBtn, QInnerLoading, QSpinnerMat, QCardMedia,
+            CscPbxModelSelect,
-            QItem, QItemMain, QItemSide, QItemTile, Platform
+            QCard,
+            QCardTitle,
+            QCardMain,
+            QCollapsible,
+            QIcon,
+            QField,
+            QInput,
+            QSelect,
+            QBtn,
+            QInnerLoading,
+            QSpinnerMat,
+            QCardMedia,
+            QItem,
+            QItemMain,
+            QItemSide,
+            QItemTile,
+            Platform
         },
         data () {
             return {
@@ -212,6 +259,9 @@
                 }
                 return buttons;
             },
+            profileId() {
+                return _.get(this.device, 'profile.device_id', null);
+            }
         },
         mounted() {
             this.$emit('loaded');
@@ -250,7 +300,14 @@
             },
             saveIdentifier() {
                 this.$emit('save-identifier', this.deviceModel);
-            }
+            },
+            selectProfile(profile) {
+                this.$emit('update-profile', {
+                    profile: profile,
+                    device: this.device
+                });
+            },
+            modelSelectOpened() {}
         },
         watch: {
             device() {

src/components/pages/PbxConfiguration/CscPbxDeviceAddForm.vue

@@ -71,8 +71,21 @@
 
 <script>
 
-    import { QCard, QCardTitle, QCardMain, QCardActions, QCardSeparator, QBtn,
+    import {
-        QInnerLoading, QSpinnerMat, QField, QInput, QSelect, QIcon, QItem, QItemMain } from 'quasar-framework'
+        QCard,
+        QCardTitle,
+        QCardMain,
+        QCardActions,
+        QCardSeparator,
+        QBtn,
+        QInnerLoading,
+        QSpinnerMat,
+        QField,
+        QInput,
+        QSelect,
+        QIcon,
+        QItem,
+        QItemMain } from 'quasar-framework'
     import CscPbxModelSelect from './CscPbxModelSelect'
 
     export default {

src/components/pages/PbxConfiguration/CscPbxDeviceConfig.vue

@@ -21,11 +21,11 @@
             </q-field>
             <div class="row justify-center actions">
                 <div class="column">
-                    <q-btn icon="clear" :small="!isMobile" @click="closeKeyOverlay()" flat color="negative">Close</q-btn>
+                    <q-btn icon="clear" :big="isMobile" @click="closeKeyOverlay()" flat color="negative">Close</q-btn>
                 </div>
             </div>
-            <q-btn icon="clear" :small="!isMobile" class="absolute-top-right"
+            <q-btn icon="clear" :big="isMobile" class="absolute-top-right"
-                   @click="closeKeyOverlay()" flat round color="primary" />
+                   @click="closeKeyOverlay()" flat color="primary" />
         </div>
         <q-window-resize-observable @resize="windowResize" />
     </div>

src/components/pages/PbxConfiguration/CscPbxDevices.vue

@@ -19,15 +19,20 @@
                         @modelSelectOpened="modelSelectOpened()"
                         @save="saveDevice"
                     />
-                    <csc-pbx-model-select
+                    <div
-                        :erasable="true"
+                        class="row justify-center"
-                        :profiles="profiles"
+                    >
-                        :modelImages="modelImages"
+                        <csc-pbx-model-select
-                        :label="$t('pbxConfig.filterPhoneModel')"
+                            class="col col-md-6 col-sm-12"
-                        @opened="modelSelectOpened()"
+                            :erasable="true"
-                        @select="filterByProfile"
+                            :profiles="profiles"
-                        @reseted="resetFilter"
+                            :modelImages="modelImages"
-                    />
+                            :label="$t('pbxConfig.filterPhoneModel')"
+                            @opened="modelSelectOpened()"
+                            @select="filterByProfile"
+                            @reseted="resetFilter"
+                        />
+                    </div>
                     <div
                         v-if="devices.length > 0 && !isListRequesting && listLastPage > 1"
                         class="row justify-center"
@@ -56,11 +61,14 @@
                 :loading="isDeviceLoading(device.id)"
                 :groupsAndSeatsOptions="groupsAndSeatsOptions"
                 :subscribers="getGroupOrSeatById"
+                :profiles="profiles"
+                :modelImages="modelImages"
                 @remove="removeDevice"
                 @loadGroupsAndSeats="loadGroupsAndSeats()"
                 @deviceKeysChanged="deviceKeysChanged"
                 @save-station-name="setStationName"
                 @save-identifier="setIdentifier"
+                @update-profile="updateProfile"
             />
         </q-list>
         <div
@@ -211,7 +219,10 @@
             },
             setIdentifier(device) {
                 this.$store.dispatch('pbxConfig/setIdentifier', device);
-            }
+            },
+            updateProfile(data) {
+                this.$store.dispatch('pbxConfig/setProfile', data);
+            },
         },
         watch: {
             deviceRemoved(device) {
@@ -249,7 +260,12 @@
             updatedDeviceSucceeded(succeeded) {
                 if(succeeded === true) {
                     switch (this.updatedDeviceProperty) {
-                        case 'staion_name':
+                        case 'profile_id':
+                            showToast(this.$t('pbxConfig.toasts.updatedProfile', {
+                                name: this.updatedDevice.station_name
+                            }));
+                            break;
+                        case 'station_name':
                             showToast(this.$t('pbxConfig.toasts.updatedStationName', {
                                 name: this.updatedDevice.station_name
                             }));

src/components/pages/PbxConfiguration/CscPbxModelSelect.vue

@@ -24,7 +24,7 @@
                 </q-list>
             </q-popover>
         </div>
-        <div v-if="selectedProfile.device_id != null" class="csc-pbx-model-image">
+        <div v-if="selectedProfile.device_id != null && preview" class="csc-pbx-model-image">
             <img :src="frontImageUrl(selectedProfile.device_id)" class="csc-pbx-model-select-preview" />
         </div>
     </div>
@@ -37,13 +37,41 @@
 
     export default {
         name: 'csc-pbx-model-select',
-        props: [
+        props: {
-            'profiles',
+            profiles: {
-            'modelImages',
+                type: Array,
-            'loading',
+                default(){
-            'label',
+                    return [];
-            'erasable'
+                }
-        ],
+            },
+            modelImages: {
+                type: Object,
+                default(){
+                    return {};
+                }
+            },
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            label: String,
+            erasable: {
+                type: Boolean,
+                default: true
+            },
+            readonly: {
+                type: Boolean,
+                default: false
+            },
+            selectedId: {
+                type: Number,
+                default: null
+            },
+            preview: {
+                type: Boolean,
+                default: true
+            }
+        },
         components: {
             QInput, QPopover, QList, QItem, QItemMain, QItemTile, QItemSide
         },
@@ -74,7 +102,9 @@
                 this.$emit('opened');
             },
             selectProfile(profile) {
-                this.selectedProfile = profile;
+                if(this.readonly === false) {
+                    this.selectedProfile = profile;
+                }
                 this.$refs.popover.close();
                 this.$emit("select", profile);
             },
@@ -90,6 +120,21 @@
                     name: '',
                     device_id: null
                 }
+            },
+            selectById(id) {
+                this.profiles.forEach(($profile)=>{
+                    if(id === $profile.id) {
+                        this.selectedProfile = $profile;
+                    }
+                });
+            }
+        },
+        mounted(){
+            this.selectById(this.selectedId);
+        },
+        watch: {
+            selectedId(id) {
+                this.selectedId(id);
             }
         }
     }

src/locales/en.json

@@ -299,6 +299,7 @@
             "removedDeviceToast": "Removed device {name}",
             "updatedDeviceKeys": "Updated keys of device {name}",
             "updatedStationName": "Updated station name to {name}",
+            "updatedProfile": "Updated model of device {name}",
             "updatedIdentifier": "Updated identifier to {identifier}",
             "createdDevice": "Created device {name} successfully"
         },

src/store/pbx-config/actions.js

@@ -27,7 +27,8 @@ import {
     getDevice,
     getAllGroupsAndSeats,
     setStationName,
-    setIdentifier
+    setIdentifier,
+    setProfile
 } from '../../api/pbx-config'
 
 export default {
@@ -320,5 +321,14 @@ export default {
         }).catch((err) => {
             context.commit('updateIdentifierFailed', err.message);
         });
+    },
+    setProfile(context, data) {
+        context.commit('updateProfileRequesting', data.device);
+        setProfile(data.device.id, data.profile.id).then(() => {
+            context.commit('updateProfileSucceeded');
+            context.dispatch('loadDevice', data.device.id);
+        }).catch((err) => {
+            context.commit('updateProfileFailed', err.message);
+        });
     }
 }

src/store/pbx-config/mutations.js

@@ -320,5 +320,14 @@ export default {
     },
     updateIdentifierFailed(state, error) {
         updateDevicePropertyFailed(state, error);
+    },
+    updateProfileRequesting(state, deviceId) {
+        updateDevicePropertyRequesting(state, deviceId, 'profile_id');
+    },
+    updateProfileSucceeded(state) {
+        updateDevicePropertySucceeded(state);
+    },
+    updateProfileFailed(state, error) {
+        updateDevicePropertyFailed(state, error);
     }
 }