MT#62916 Pbx Devices Bugfix

Listed here the changes:
- change properties accessed directly
  from state with computed properties
  that handles null cases
- Fix typos for subcriberListState
  and subcriberListError
- Improve route watcher in
  CscPagePbxDeviceDetails
- add a method to load only thumbnails
  instead of full set of data for
  the device profiles to improve
  performance.
- removed 1000 rows for loadProfiles()
  as it was too slow. We expect max 150
  devices so it was set to 300 rows.
Note, more refactoring will be needed.

Change-Id: Iefe0328052174f0bb93f8cdbae59f77257592592
(cherry picked from commit d8c1f097cc)
(cherry picked from commit 3665f43ee0)

src/api/common.js

@@ -94,8 +94,8 @@ export async function getList (options) {
     const requestConfig = _.merge({
         all: false,
         params: {
-            page: LIST_DEFAULT_PAGE,
-            rows: LIST_DEFAULT_ROWS
+            page: options.page || LIST_DEFAULT_PAGE,
+            rows: options.rows || LIST_DEFAULT_ROWS
         },
         headers: GET_HEADERS
     }, options)

src/api/pbx-config.js

@@ -48,8 +48,10 @@ export function getProfiles (options) {
 }
 
 export function getAllProfiles () {
+    // Replace 1000 rows with 300 as we expect to have max 150 profiles.
     return getProfiles({
-        all: true
+        page: 1,
+        rows: 300
     })
 }
 

src/components/pages/PbxConfiguration/CscPbxDevice.vue

@@ -9,10 +9,21 @@
             center
             no-wrap
         >
-            <img
-                class="csc-list-item-head-image"
-                :src="imageUrl"
+            <q-icon
+                v-if="!imageUrl"
+                name="fas fa-fax"
+                size="24px"
+            />
+
+            <q-avatar
+                v-else
+                square
             >
+                <q-img
+                    class="csc-list-item-head-image"
+                    :src="imageUrl"
+                />
+            </q-avatar>
         </q-item-section>
         <q-item-section>
             <csc-list-item-title>

src/components/pages/PbxConfiguration/CscPbxDeviceFilters.vue

@@ -89,6 +89,8 @@
 import CscPbxAutoAttendantSelection from 'components/pages/PbxConfiguration/CscPbxAutoAttendantSelection'
 import CscPbxModelSelect from 'components/pages/PbxConfiguration/CscPbxModelSelect'
 import _ from 'lodash'
+import { showGlobalError } from 'src/helpers/ui'
+import { RequestState } from 'src/store/common'
 import { mapActions, mapState } from 'vuex'
 
 export default {
@@ -116,7 +118,9 @@ export default {
         ...mapState('pbx', [
             'deviceProfileMap',
             'deviceProfileList',
-            'subscriberList'
+            'subscriberList',
+            'subscriberListState',
+            'subscriberListError'
         ]),
         subscribersOptions () {
             const options = []
@@ -191,6 +195,11 @@ export default {
     watch: {
         filterTypeModel () {
             this.typedFilter = null
+        },
+        subscriberListState (state) {
+            if (state === RequestState.failed) {
+                showGlobalError(this.subscriberListError)
+            }
         }
     },
     mounted () {

src/components/pages/PbxConfiguration/CscPbxModelSelect.vue

@@ -49,10 +49,11 @@
                 >
                     <q-avatar
                         square
+                        size="32px"
                     >
-                        <img
+                        <q-img
                             :src="deviceModelImageSmallMap[scope.opt.model].url"
-                        >
+                        />
                     </q-avatar>
                 </q-item-section>
                 <q-item-section>
@@ -118,15 +119,11 @@ export default {
             return _.get(this.deviceModelImageSmallMap, `${deviceModelId}.url`, null)
         },
         options () {
-            const options = []
-            this.profiles.forEach((profile) => {
-                options.push({
-                    label: profile.name,
-                    value: profile.id,
-                    model: profile.device_id
-                })
-            })
-            return options
+            return this.profiles.map((profile) => ({
+                label: profile.name,
+                value: profile.id,
+                model: profile.device_id
+            }))
         }
     },
     watch: {

src/pages/CscPagePbxCallQueues.vue

@@ -150,6 +150,10 @@ export default {
             'getCallQueueCreationToastMessage',
             'getCallQueueUpdateToastMessage',
             'getCallQueueRemovalToastMessage'
+        ]),
+        ...mapState('pbx', [
+            'subscriberListState',
+            'subscriberListError'
         ])
     },
     watch: {
@@ -175,6 +179,16 @@ export default {
             } else if (state === RequestState.failed) {
                 showGlobalError(this.callQueueRemovalError)
             }
+        },
+        callQueueListState (state) {
+            if (state === RequestState.failed) {
+                showGlobalError(this.callQueueListError)
+            }
+        },
+        subscriberListState (state) {
+            if (state === RequestState.failed) {
+                showGlobalError(this.subscriberListError)
+            }
         }
     },
     mounted () {

src/pages/CscPagePbxDeviceDetails.vue

@@ -175,10 +175,11 @@
                     v-if="!deviceSelected"
                 />
                 <csc-pbx-device-config
-                    v-if="deviceSelected && hasDeviceModelImage"
+                    v-else
+                    :id="deviceSelected?.id"
                     :device="deviceSelected"
-                    :model="deviceModelMap[deviceProfileMap[deviceSelected.profile_id].device_id]"
-                    :model-image="deviceModelImageMap[deviceProfileMap[deviceSelected.profile_id].device_id]"
+                    :model="deviceModel"
+                    :model-image="deviceModelImage"
                     :loading="isSubscribersRequesting"
                     :subscribers="subscriberList"
                     :subscriber-map="subscriberMap"
@@ -242,20 +243,25 @@ export default {
             'devicePreferencesUpdateError',
             'deviceUpdateState',
             'devicePreferencesUpdateState',
-            'devicePreferencesSelected'
+            'devicePreferencesSelected',
+            'devicePreferencesListState',
+            'devicePreferencesError',
+            'deviceMapById'
         ]),
         ...mapState('pbx', [
             'deviceProfileList',
             'deviceProfileMap',
+            'deviceProfileListState',
             'deviceModelImageMap',
             'deviceModelMap',
             'subscriberList',
-            'subscriberMap'
+            'subscriberMap',
+            'subscriberListState',
+            'subscriberListError'
         ]),
         ...mapGetters('pbx', [
             'getSubscriberOptions',
-            'isSubscribersRequesting',
-            'isDeviceInModelMap'
+            'isSubscribersRequesting'
         ]),
         ...mapGetters('pbxDevices', [
             'getDeviceUpdateToastMessage',
@@ -265,6 +271,55 @@ export default {
             'isDeviceInMapBy',
             'isDeviceInPreferencesMap'
         ]),
+        deviceModel () {
+            if (!this.deviceSelected?.profile_id) {
+                return {}
+            }
+
+            const profileId = this.deviceSelected.profile_id
+            const deviceProfile = this.deviceProfileMap[profileId]
+
+            if (!deviceProfile) {
+                return {}
+            }
+
+            if (!deviceProfile.device_id) {
+                return {}
+            }
+
+            const deviceId = deviceProfile.device_id
+            const deviceModel = this.deviceModelMap[deviceId]
+
+            if (!deviceModel) {
+                return {}
+            }
+
+            return deviceModel
+        },
+        deviceModelImage () {
+            if (!this.deviceSelected?.profile_id) {
+                return null
+            }
+
+            const profileId = this.deviceSelected.profile_id
+            const deviceProfile = this.deviceProfileMap[profileId]
+            if (!deviceProfile) {
+                return null
+            }
+
+            if (!deviceProfile.device_id) {
+                return null
+            }
+
+            const deviceId = deviceProfile.device_id
+            const deviceModelImage = this.deviceModelImageMap[deviceId]
+
+            if (!deviceModelImage) {
+                return null
+            }
+
+            return deviceModelImage
+        },
         tabs () {
             return [
                 {
@@ -275,7 +330,7 @@ export default {
             ]
         },
         isLoading () {
-            return this.isDeviceLoading(this.deviceSelected?.id)
+            return this.isDeviceLoading(this.id)
         },
         isLoadingPreferences () {
             return this.isDevicePreferencesLoading(this.devicePreferencesSelected?.id)
@@ -315,9 +370,11 @@ export default {
         }
     },
     watch: {
-        async $route (to) {
-            this.id = to.params.id
-            await this.getData(this.id)
+        $route: {
+            async handler (to) {
+                this.id = to.params.id
+                await this.getData(this.id)
+            }
         },
         deviceSelected () {
             this.changes = this.getDeviceData()
@@ -335,11 +392,25 @@ export default {
             } else if (state === RequestState.failed) {
                 showGlobalError(this.devicePreferencesUpdateError)
             }
+        },
+        devicePreferencesListState (state) {
+            if (state === RequestState.failed) {
+                showGlobalError(this.devicePreferencesError)
+            }
+        },
+        subscriberListState (state) {
+            if (state === RequestState.failed) {
+                showGlobalError(this.subscriberListError)
+            }
         }
     },
     async created () {
-        const deviceId = this.deviceSelected?.id || this.id
-        await this.getData(deviceId)
+        if (this.deviceProfileList.length === 0) {
+            await this.loadProfiles()
+            await this.loadProfileThumbnails()
+        }
+
+        await this.getData(this.id)
     },
     methods: {
         ...mapMutations('pbxDevices', [
@@ -361,7 +432,9 @@ export default {
         ]),
         ...mapActions('pbx', [
             'loadSubscribers',
-            'loadDeviceModel'
+            'loadDeviceModel',
+            'loadProfiles',
+            'loadProfileThumbnails'
 
         ]),
         async getData (deviceId) {
@@ -369,10 +442,13 @@ export default {
                 await this.loadDevice(deviceId)
             }
 
-            if (!this.isDeviceInModelMap(deviceId)) {
+            const deviceProfileId = this.deviceMapById[deviceId].profile_id
+            const deviceProfile = this.deviceProfileMap[deviceProfileId]
+
+            if (deviceProfile.device_id) {
                 await this.loadDeviceModel({
                     type: 'all',
-                    deviceId
+                    deviceId: deviceProfile.device_id
                 })
             }
 
@@ -447,6 +523,14 @@ export default {
                 this.setDeviceProfile({
                     deviceId: this.deviceSelected?.id,
                     profileId: this.changes.profile_id
+                }).then(() => {
+                    const newProfile = this.deviceProfileMap[this.changes.profile_id]
+                    if (newProfile && newProfile.device_id) {
+                        this.loadDeviceModel({
+                            type: 'all',
+                            deviceId: newProfile.device_id
+                        })
+                    }
                 })
             }
             if (this.hasAdminNameChanged) {

src/pages/CscPagePbxDevices.vue

@@ -3,9 +3,7 @@
         id="csc-page-pbx-devices"
         class="q-pa-lg"
     >
-        <csc-list-actions
-            class="row justify-center q-mb-xs"
-        >
+        <csc-list-actions class="row justify-center q-mb-xs">
             <template
                 v-if="isDeviceAddFormDisabled"
                 #slot1
@@ -18,9 +16,7 @@
                     @click="enableAddForm"
                 />
             </template>
-            <template
-                #slot2
-            >
+            <template #slot2>
                 <csc-list-action-button
                     v-if="!filtersEnabled"
                     icon="filter_alt"
@@ -53,7 +49,7 @@
                     :model-image-map="deviceModelImageMap"
                     @cancel="disableDeviceAddForm"
                     @submit="createDevice"
-                    @model-select-opened="loadDeviceModels('front_thumb')"
+                    @model-select-opened="loadProfileThumbnails()"
                 />
             </div>
         </q-slide-transition>
@@ -63,7 +59,7 @@
                 :loading="isDeviceListRequesting"
                 class="q-pb-md"
                 @filter="applyFilter"
-                @model-select-opened="loadDeviceModels('front_thumb')"
+                @model-select-opened="loadProfileThumbnails()"
             />
         </q-slide-transition>
         <div
@@ -76,11 +72,9 @@
                 @update:model-value="loadDeviceListFiltered"
             />
         </div>
-        <csc-list-spinner
-            v-if="isDeviceListRequesting && !(isDeviceCreating || isDeviceRemoving || isDeviceUpdating)"
-        />
+        <csc-list-spinner v-if="showSpinner" />
         <q-list
-            v-if="!isDeviceListEmpty && deviceListVisibility === 'visible'"
+            v-if="!showSpinner && !isDeviceListEmpty && deviceListVisibility === 'visible'"
             class="row justify-start items-start"
         >
             <csc-fade
@@ -89,15 +83,15 @@
             >
                 <csc-pbx-device
                     :key="device.id"
-                    :loading="isDeviceLoading(device.id) || isDeviceListRequesting"
+                    :loading="isItemLoading(device.id)"
                     :device="device"
                     :class="'col-xs-12 col-md-6 col-lg-4 csc-item-' + ((index % 2 === 0)?'odd':'even')"
-                    :profile="deviceProfileMap[device.profile_id]"
-                    :model="deviceModelMap[deviceProfileMap[device.profile_id].device_id]"
-                    :model-image="deviceModelImageMap[deviceProfileMap[device.profile_id].device_id]"
+                    :profile="getDeviceProfile(device.profile_id)"
+                    :model="getDeviceModel(device.profile_id)"
+                    :model-image="getDeviceModelImage(device.profile_id)"
                     @load-model="loadDeviceModel({
                         type: 'all',
-                        deviceId: deviceProfileMap[device.profile_id].device_id
+                        deviceId: device.profile_id ? getDeviceProfile(device.profile_id).device_id : null
                     })"
                     @remove="openDeviceRemovalDialog(device.id)"
                 />
@@ -169,12 +163,11 @@ export default {
             'deviceModelList',
             'deviceModelMap',
             'deviceModelImageMap',
-            'subscriberList',
-            'subscriberMap'
-        ]),
-        ...mapGetters('pbx', [
-            'getSubscriberOptions',
-            'isSubscribersRequesting'
+            'deviceModelListState',
+            'isDeviceModelListStateRequesting',
+            'deviceModelError',
+            'deviceProfileListState',
+            'deviceProfileListError'
         ]),
         ...mapState('pbxDevices', [
             'deviceRemoving',
@@ -183,12 +176,14 @@ export default {
             'deviceListLastPage',
             'deviceListVisibility',
             'deviceCreationState',
-            'deviceRemovalState'
+            'deviceRemovalState',
+            'deviceListState',
+            'deviceListError',
+            'deviceCreationError'
         ]),
         ...mapGetters('pbxDevices', [
             'isDeviceListEmpty',
             'isDeviceListRequesting',
-            'isDeviceExpanded',
             'isDeviceListPaginationActive',
             'isDeviceAddFormDisabled',
             'isDeviceCreating',
@@ -202,6 +197,75 @@ export default {
         ]),
         hasFilters () {
             return Object.keys(this.filters).length > 0
+        },
+        getDeviceIdFromProfile () {
+            return (profileId) => {
+                const profile = this.getDeviceProfile(profileId)
+                return profile && profile.device_id ? profile.device_id : null
+            }
+        },
+        getDeviceProfile () {
+            return (profileId) => {
+                if (!profileId) {
+                    return {}
+                }
+                return this.deviceProfileMap[profileId] || {}
+            }
+        },
+        getDeviceModel () {
+            return (profileId) => {
+                if (!profileId) {
+                    return {}
+                }
+
+                const deviceProfile = this.deviceProfileMap[profileId]
+                if (!deviceProfile) {
+                    return {}
+                }
+
+                if (!deviceProfile.device_id) {
+                    return {}
+                }
+
+                const deviceModel = this.deviceModelMap[deviceProfile.device_id]
+                if (!deviceModel) {
+                    return {}
+                }
+
+                return deviceModel
+            }
+        },
+        getDeviceModelImage () {
+            return (profileId) => {
+                if (!profileId) {
+                    return null
+                }
+
+                const deviceProfile = this.deviceProfileMap[profileId]
+                if (!deviceProfile) {
+                    return null
+                }
+
+                if (!deviceProfile.device_id) {
+                    return null
+                }
+
+                const deviceModelImage = this.deviceModelImageMap[deviceProfile.device_id]
+                if (!deviceModelImage) {
+                    return null
+                }
+
+                return deviceModelImage
+            }
+        },
+        isItemLoading () {
+            return (deviceId) => this.isDeviceLoading(deviceId) ||
+                this.isDeviceListRequesting ||
+                this.isDeviceModelListStateRequesting
+        },
+        showSpinner () {
+            const deviceListDataIsNotReady = this.isDeviceListRequesting && !(this.isDeviceCreating || this.isDeviceRemoving || this.isDeviceUpdating)
+            return this.deviceProfileListState === RequestState.requesting || deviceListDataIsNotReady
         }
     },
     watch: {
@@ -222,6 +286,9 @@ export default {
             }
         }
     },
+    async created () {
+        await this.loadProfiles()
+    },
     mounted () {
         this.$scrollTo(this.$parent.$el)
         this.loadDeviceListFiltered()
@@ -230,11 +297,10 @@ export default {
     methods: {
         ...mapActions('pbx', [
             'loadDeviceModel',
-            'loadDeviceModels'
+            'loadProfileThumbnails',
+            'loadProfiles'
         ]),
         ...mapMutations('pbxDevices', [
-            'expandDevice',
-            'collapseDevice',
             'enableDeviceAddForm',
             'disableDeviceAddForm',
             'deviceRemovalRequesting',
@@ -244,11 +310,7 @@ export default {
             'loadDeviceList',
             'loadDevicePreferencesList',
             'createDevice',
-            'removeDevice',
-            'setDeviceStationName',
-            'setDeviceIdentifier',
-            'setDeviceProfile',
-            'setDeviceKeys'
+            'removeDevice'
         ]),
         loadDeviceListFiltered (page) {
             this.loadDeviceList({

src/pages/CscPagePbxMsConfigs.vue

@@ -135,7 +135,16 @@ export default {
             'msConfigRemovalState',
             'msConfigCreationError',
             'msConfigUpdateError',
-            'msConfigRemovalError'
+            'msConfigRemovalError',
+            'msConfigListState',
+            'msConfigListError'
+        ]),
+        ...mapState('pbx', [
+            'numberListState',
+            'numberListError',
+            'subscriberListState',
+            'subscriberListError'
+
         ]),
         ...mapGetters('pbxMsConfigs', [
             'isMsConfigListEmpty',
@@ -173,6 +182,21 @@ export default {
             } else if (state === RequestState.failed) {
                 showGlobalError(this.msConfigRemovalError)
             }
+        },
+        msConfigListState (state) {
+            if (state === RequestState.failed) {
+                showGlobalError(this.msConfigListError)
+            }
+        },
+        numberListState (state) {
+            if (state === RequestState.failed) {
+                showGlobalError(this.numberListError)
+            }
+        },
+        subscriberListState (state) {
+            if (state === RequestState.failed) {
+                showGlobalError(this.subscriberListError)
+            }
         }
     },
     mounted () {

src/store/pbx-devices.js

@@ -22,6 +22,7 @@ export default {
         deviceCreationState: CreationState.initiated,
         deviceListCurrentPage: 1,
         deviceList: [],
+        deviceListError: null,
         deviceListLastPage: null,
         deviceListState: RequestState.initiated,
         deviceListVisibility: 'visible',
@@ -298,8 +299,6 @@ export default {
             context.commit('deviceListRequesting', { clearList })
 
             try {
-                // Ensure profiles are loaded before fetching devices
-                await context.dispatch('pbx/loadProfiles', null, { root: true })
                 const devices = await getDeviceList({ page, filters })
                 context.commit('deviceListSucceeded', { devices, page })
             } catch (err) {
@@ -310,7 +309,6 @@ export default {
         async loadDevice (context, deviceId) {
             context.commit('deviceListRequesting', { clearList: false })
             try {
-                // Ensure profiles are loaded before fetching devices
                 await context.dispatch('pbx/loadProfileById', deviceId, { root: true })
                 const device = await getDevice(deviceId)
                 context.commit('deviceSucceeded', device)

src/store/pbx.js

@@ -10,6 +10,7 @@ import {
 import { getSubscribers } from 'src/api/subscriber'
 import { getNumbers } from 'src/api/user'
 import numberFilter from 'src/filters/number'
+import { showGlobalError } from 'src/helpers/ui'
 import { RequestState } from 'src/store/common'
 
 export default {
@@ -25,7 +26,8 @@ export default {
         seatMapById: {},
         soundSetList: [],
         soundSetMapByName: {},
-        deviceProfilesListState: RequestState.initiated,
+        deviceProfileListState: RequestState.initiated,
+        deviceProfileListError: null,
         deviceProfileList: [],
         deviceProfileMap: {},
         deviceModelList: [],
@@ -34,6 +36,7 @@ export default {
         deviceModelImageSmallMap: {},
         subscriberList: [],
         subscriberListState: RequestState.initiated,
+        subscriberListError: null,
         subscriberMap: {},
         ncosMapByName: {}
     },
@@ -155,6 +158,9 @@ export default {
                 return state.deviceModelMap[deviceId] !== undefined
             }
         },
+        isDeviceModelListStateRequesting (state) {
+            return state.deviceModelListState === RequestState.requesting
+        },
         isSubscribersRequesting (state) {
             return state.subscriberListState === RequestState.requesting
         },
@@ -225,30 +231,39 @@ export default {
                 state.soundSetMapByName[soundSet.name] = soundSet
             })
         },
-        deviceProfilesListStateRequesting (state) {
-            state.deviceProfilesListState = RequestState.requesting
+        deviceProfileListStateRequesting (state) {
+            state.deviceProfileListState = RequestState.requesting
         },
-        deviceProfilesListSucceeded (state, deviceProfileList) {
-            state.deviceProfilesListState = RequestState.succeeded
-            state.deviceProfileList = _.get(deviceProfileList, 'items', [])
+        deviceProfileListSucceeded (state, deviceProfileList) {
+            const newList = _.get(deviceProfileList, 'items', [])
+
+            // First remove existing items that we're about to replace with newer versions
+            // and keep only items whoseIds are not in the updated list
+            const existingIds = newList.map((item) => item.id)
+            const filteredExistingList = state.deviceProfileList.filter(
+                (existingItem) => !existingIds.includes(existingItem.id)
+            )
+
+            state.deviceProfileList = [...filteredExistingList, ...newList]
+            state.deviceProfileListState = RequestState.succeeded
             state.deviceProfileMap = {}
             state.deviceProfileList.forEach((deviceProfile) => {
                 state.deviceProfileMap[deviceProfile.id] = deviceProfile
             })
         },
-        deviceProfilesListFailed (state) {
-            state.deviceProfilesListState = RequestState.failed
+        deviceProfileListFailed (state) {
+            state.deviceProfileListState = RequestState.failed
         },
         deviceProfileRequesting (state) {
-            state.deviceProfilesListState = RequestState.requesting
+            state.deviceProfileListState = RequestState.requesting
         },
         deviceProfileSucceeded (state, deviceProfile) {
-            state.deviceProfilesListState = RequestState.succeeded
+            state.deviceProfileListState = RequestState.succeeded
             state.deviceProfileList = [...state.deviceProfileList, deviceProfile]
             state.deviceProfileMap[deviceProfile.id] = deviceProfile
         },
         deviceProfileFailed (state) {
-            state.deviceProfilesListState = RequestState.failed
+            state.deviceProfileListState = RequestState.failed
         },
         deviceModelSucceeded (state, deviceModel) {
             const model = _.get(deviceModel, 'model', null)
@@ -270,7 +285,7 @@ export default {
             delete state.deviceModelImageSmallMap[deviceModelId]
         },
         subscribersRequesting (state) {
-            state.subcriberListState = RequestState.requesting
+            state.subscriberListState = RequestState.requesting
             state.subscriberList = []
         },
         subscribersSucceeded (state, subscribers) {
@@ -279,24 +294,21 @@ export default {
             state.subscriberList.forEach((subscriber) => {
                 state.subscriberMap[subscriber.id] = subscriber
             })
+        },
+        subscribersFailed (state, err) {
+            state.subscriberListState = RequestState.failed
+            state.subscriberListError = err
         }
     },
     actions: {
-        loadProfiles (context) {
-            return new Promise((resolve, reject) => {
-                context.commit('deviceProfilesListStateRequesting')
-                if (context.state.deviceProfileList.length === 0) {
-                    getAllProfiles().then((profiles) => {
-                        context.commit('deviceProfilesListSucceeded', profiles)
-                        resolve(profiles)
-                    }).catch((err) => {
-                        context.commit('deviceProfilesListFailed')
-                        reject(err)
-                    })
-                } else {
-                    resolve()
-                }
-            })
+        async loadProfiles (context) {
+            context.commit('deviceProfileListStateRequesting')
+            try {
+                const profiles = await getAllProfiles()
+                context.commit('deviceProfileListSucceeded', profiles)
+            } catch (err) {
+                context.commit('deviceProfileListFailed', err.message)
+            }
         },
         async loadProfileById (context, deviceId) {
             context.commit('deviceProfileRequesting')
@@ -307,6 +319,47 @@ export default {
                 context.commit('deviceProfileFailed')
             }
         },
+        async loadProfileThumbnails (context) {
+            const requests = []
+
+            context.state.deviceProfileList.forEach((deviceProfile) => {
+                const isFrontThumbnailCached = context.state.deviceModelImageSmallMap[deviceProfile.device_id] !== undefined
+                if (!isFrontThumbnailCached) {
+                    requests.push(
+                        getModelFrontThumbnailImage(deviceProfile.device_id)
+                            .then((thumbnail) => ({
+                                deviceId: deviceProfile.device_id,
+                                thumbnail
+                            }))
+                            .catch((error) => ({
+                                deviceId: deviceProfile.device_id,
+                                error
+                            }))
+                    )
+                }
+            })
+
+            if (requests.length > 0) {
+                try {
+                    const results = await Promise.all(requests)
+
+                    results.forEach((result) => {
+                        if (result.thumbnail) {
+                            context.commit('deviceModelSucceeded', {
+                                modelImageThumbnail: result.thumbnail
+                            })
+                        } else if (result.error) {
+                            // Silent warning as it's not a critical error
+                            // and we can still use the device profile without the thumbnail
+                            // eslint-disable-next-line no-console
+                            console.warn(`Failed to load thumbnail for device ${result.deviceId}:`, result.error)
+                        }
+                    })
+                } catch (error) {
+                    showGlobalError('Failed to load profile thumbnails:', error)
+                }
+            }
+        },
         async loadDeviceModel (context, payload) {
             try {
                 const isFrontCached = context.state.deviceModelImageMap[payload.deviceId] !== undefined
@@ -358,7 +411,14 @@ export default {
                 }
                 context.commit('deviceModelSucceeded', deviceModel)
             } catch (err) {
-                context.commit('deviceModelFailed', payload.deviceId)
+                // Note: the way it is implemented at the moment
+                // if any of the promises fails, the whole action fails
+                // and only the first error is reported. This needs refactoring
+                // to handle each request separately and report errors accordingly.
+                context.commit('deviceModelFailed', {
+                    deviceModelId: payload.deviceId,
+                    error: err.message
+                })
             }
         },
         async loadDeviceModels (context, imageType) {

src/store/user.js

@@ -3,10 +3,7 @@ import { i18n } from 'boot/i18n'
 import _ from 'lodash'
 import QRCode from 'qrcode'
 import { date } from 'quasar'
-import {
-    apiDownloadFile,
-    httpApi
-} from 'src/api/common'
+import { apiDownloadFile, httpApi } from 'src/api/common'
 import { callInitialize } from 'src/api/ngcp-call'
 import {
     changePassword,