Resolve "Ordering nodes in data explorer"

web-frontend/modules/builder/dataProviderTypes.js

@@ -380,11 +380,16 @@ export class FormDataProviderType extends DataProviderType {
           )
           const elementType = this.app.$registry.get('element', element.type)
           const name = elementType.getFormDataName(element, applicationContext)
+          const order = elementType.getElementPosition(
+            element,
+            applicationContext
+          )
           return [
             elementId,
             {
               title: name,
               type,
+              order,
             },
           ]
         })

web-frontend/modules/builder/elementTypes.js

@@ -268,16 +268,21 @@ export class FormElementType extends ElementType {
   }
 
   generateFromDataName(element, applicationContext) {
+    return `${this.name} ${this.getElementPosition(
+      element,
+      applicationContext
+    )}`
+  }
+
+  getElementPosition(element, applicationContext) {
     const elements = this.app.store.getters['element/getElementsOrdered'](
       applicationContext.page
     )
     const elementsOfSameType = elements.filter(
       ({ type }) => type === element.type
     )
-    const position =
-      elementsOfSameType.findIndex(({ id }) => id === element.id) + 1
 
-    return `${this.name} ${position}`
+    return elementsOfSameType.findIndex(({ id }) => id === element.id) + 1
   }
 
   afterCreate(element, page) {

web-frontend/modules/core/components/dataExplorer/Node.vue

@@ -89,7 +89,7 @@ export default {
       return isOpen ? 'iconoir-nav-arrow-down' : 'iconoir-nav-arrow-right'
     },
     sortNodes(nodes) {
-      return nodes.sort((a, b) => (a.name > b.name ? 1 : -1))
+      return nodes.sort((a, b) => a.order - b.order)
     },
   },
 }

web-frontend/modules/core/components/dataExplorer/RootNode.vue

@@ -92,7 +92,7 @@ export default {
       )
     },
     sortNodes(nodes) {
-      return nodes.sort((a, b) => (a.name > b.name ? 1 : -1))
+      return nodes.sort((a, b) => a.order - b.order)
     },
   },
 }

web-frontend/modules/core/dataProviderTypes.js

@@ -137,10 +137,12 @@ export class DataProviderType extends Registerable {
   _toNode(applicationContext, pathParts, content, schema) {
     const identifier = pathParts.at(-1)
     const name = this.getPathTitle(applicationContext, pathParts)
+    const order = schema?.order || null
 
     if (schema === null) {
       return {
         name,
+        order,
         type: null,
         icon: this.UNKNOWN_DATA_TYPE_ICON,
         identifier,
@@ -167,6 +169,7 @@ export class DataProviderType extends Registerable {
       return {
         name,
         identifier,
+        order,
         icon: this.getIconForType(schema.type),
         nodes: Object.entries(schema.properties).map(
           ([identifier, subSchema]) =>
@@ -182,6 +185,7 @@ export class DataProviderType extends Registerable {
 
     return {
       name,
+      order,
       type: schema.type,
       icon: this.getIconForType(schema.type),
       value: content,