Merge pull request #4148 from FlowFuse/use-arrays-instead-of-maps-for…

…-application-devices-and-instances Swap maps with arrays on the applications page
FlowFuse · Jul 10, 2024 · 3dc892a · 3dc892a
2 parents 7064937 + 9432591
commit 3dc892a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue b/frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue
@@ -17,7 +17,7 @@
         </label>
         <div class="items-wrapper" :class="{one: singleDevice, two: twoDevices, three: threeDevices}">
             <div
-                v-for="device in Array.from(application.devices.values())"
+                v-for="device in devices"
                 :key="device.id"
                 class="item-wrapper"
                 @click.stop="openDevice(device)"
@@ -91,14 +91,14 @@ export default {
     emits: ['delete-device'],
     computed: {
         hasMoreDevices () {
-            return this.application.deviceCount > this.application.devices.size
+            return this.application.deviceCount > this.application.devices.length
         },
         hasNoDevices () {
-            return this.application.devices.size === 0
+            return this.application.devices.length === 0
         },
         remainingDevices () {
             if (this.hasNoDevices || this.hasMoreDevices) {
-                return this.application.deviceCount - this.application.devices.size
+                return this.application.deviceCount - this.application.devices.length
             } else return 0
         },
         singleDevice () {

diff --git a/frontend/src/pages/team/Applications/components/compact/InstancesWrapper.vue b/frontend/src/pages/team/Applications/components/compact/InstancesWrapper.vue
@@ -57,17 +57,17 @@ export default {
     emits: ['delete-instance'],
     computed: {
         instances () {
-            return Array.from(this.application.instances.values())
+            return this.application.instances
         },
         hasMoreInstances () {
-            return this.application.instanceCount > this.application.instances.size
+            return this.application.instanceCount > this.application.instances.length
         },
         hasNoInstances () {
-            return this.application.instances.size === 0
+            return this.application.instances.length === 0
         },
         remainingInstances () {
             if (this.hasNoInstances || this.hasMoreInstances) {
-                return this.application.instanceCount - this.application.instances.size
+                return this.application.instanceCount - this.application.instances.length
             } else return 0
         },
         singleInstance () {

diff --git a/frontend/src/pages/team/Applications/index.vue b/frontend/src/pages/team/Applications/index.vue
@@ -129,7 +129,13 @@ export default {
     },
     computed: {
         applicationsList () {
-            return Array.from(this.applications.values())
+            return Array.from(this.applications.values()).map(app => {
+                return {
+                    ...app,
+                    instances: Array.from(app.instances.values()),
+                    devices: Array.from(app.devices.values())
+                }
+            })
         },
         filteredApplications () {
             if (this.filterTerm) {