use arrays instead of maps for application devices and instances on t…

…he applications page
FlowFuse · Jul 9, 2024 · e81ed36 · e81ed36
1 parent 8718b1d
commit e81ed36
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 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
@@ -235,6 +235,9 @@ export default {
                     })
                 })
 
+                application.instances = Array.from(application.instances.values())
+                application.devices = Array.from(application.devices.values())
+
                 this.applications.set(applicationData.id, {
                     ...application,
                     ...applicationProps