MT#65163 Improve device page performance and handle missing preferences

* Fix device detail form not rendering on page 2+ by
  adding a watcher for reactive data updates
* Add loading spinner while device preferences are loading
* Remove unused loadDevicePreferencesList call from list page mount

Change-Id: Icc0318126303763d5eab3a39568817a2c41e88e8

src/pages/CscPagePbxDeviceDetails.vue

@@ -42,9 +42,12 @@
             v-if="selectedTab === 'preferences'"
             class="col-12 column"
         >
+            <div class="col-12 col-md-6 q-pa-lg">
+                <csc-list-spinner
+                    v-if="!deviceSelected || !changes"
+                />
                 <div
-                v-if="changes"
-                class="col-12 col-md-6 q-pa-lg"
+                    v-else
                     side
                     top
                 >
@@ -169,6 +172,7 @@
                         </q-item>
                     </q-list>
                 </div>
+            </div>
 
             <div class="col-12 col-md-6 q-pa-lg">
                 <csc-list-spinner
@@ -374,12 +378,17 @@ export default {
         $route: {
             async handler (to) {
                 this.id = to.params.id
+                this.changes = null
+                this.collapseDevice()
                 await this.getData(this.id)
             }
         },
         deviceSelected () {
             this.changes = this.getDeviceData()
         },
+        devicePreferencesSelected () {
+            this.changes = this.getDeviceData()
+        },
         deviceUpdateState (state) {
             if (state === RequestState.succeeded) {
                 showToast(this.getDeviceUpdateToastMessage)
@@ -416,7 +425,8 @@ export default {
     methods: {
         ...mapMutations('pbxDevices', [
             'expandDevice',
-            'expandDevicePreferences'
+            'expandDevicePreferences',
+            'collapseDevice'
         ]),
         ...mapActions('pbxDevices', [
             'setDeviceKeys',
@@ -443,10 +453,15 @@ export default {
                 await this.loadDevice(deviceId)
             }
 
-            const deviceProfileId = this.deviceMapById[deviceId].profile_id
+            const device = this.deviceMapById[deviceId]
+            if (!device) {
+                return
+            }
+
+            const deviceProfileId = device.profile_id
             const deviceProfile = this.deviceProfileMap[deviceProfileId]
 
-            if (deviceProfile.device_id) {
+            if (deviceProfile && deviceProfile.device_id) {
                 await this.loadDeviceModel({
                     type: 'all',
                     deviceId: deviceProfile.device_id
@@ -462,18 +477,20 @@ export default {
             this.loadSubscribers()
         },
         getDeviceData () {
-            return (this.deviceSelected && this.devicePreferencesSelected)
-                ? {
+            if (!this.deviceSelected) {
+                return null
+            }
+
+            return {
                 station_name: this.deviceSelected.station_name,
                 identifier: this.deviceSelected.identifier,
                 profile_id: this.deviceSelected.profile_id,
-                    admin_name: this.devicePreferencesSelected.admin_name ? this.devicePreferencesSelected.admin_name : undefined,
-                    admin_pass: this.devicePreferencesSelected.admin_pass ? this.devicePreferencesSelected.admin_pass : undefined,
-                    web_gui_dis: this.devicePreferencesSelected.web_gui_dis ? this.devicePreferencesSelected.web_gui_dis : false,
-                    user_conf_priority: this.devicePreferencesSelected.user_conf_priority ? this.devicePreferencesSelected.user_conf_priority : false,
-                    FW_upg_dis: this.devicePreferencesSelected.FW_upg_dis ? this.devicePreferencesSelected.FW_upg_dis : false
+                admin_name: this.devicePreferencesSelected?.admin_name || undefined,
+                admin_pass: this.devicePreferencesSelected?.admin_pass || undefined,
+                web_gui_dis: this.devicePreferencesSelected?.web_gui_dis || false,
+                user_conf_priority: this.devicePreferencesSelected?.user_conf_priority || false,
+                FW_upg_dis: this.devicePreferencesSelected?.FW_upg_dis || false
             }
-                : null
         },
         resetStationName () {
             this.changes.station_name = this.deviceSelected?.station_name

src/pages/CscPagePbxDevices.vue

@@ -302,12 +302,13 @@ export default {
         }
     },
     async created () {
+        if (this.deviceProfileList.length === 0) {
             await this.loadProfiles()
+        }
     },
     mounted () {
         this.$scrollTo(this.$parent.$el)
-        this.loadDeviceListFiltered()
-        this.loadDevicePreferencesList()
+        this.loadDeviceListFiltered(this.deviceListCurrentPage || 1)
     },
     methods: {
         ...mapActions('pbx', [
@@ -323,7 +324,6 @@ export default {
         ]),
         ...mapActions('pbxDevices', [
             'loadDeviceList',
-            'loadDevicePreferencesList',
             'createDevice',
             'removeDevice'
         ]),