reorder children by text type

src/components/nodes/NodeViewChildList.vue

@@ -2,7 +2,7 @@
   <nav class="node-view-child-list" :class="{ 'smartphone': smartphone }">
     <ul>
       <li
-        v-for="(child, i) in children" :key="child.id"
+        v-for="(child, i) in orderedChildren" :key="child.id"
         class="node-view-child-list-item"
       >
         <dot-button
@@ -21,7 +21,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-
+import { orderByVariant } from '@/helpers/common'
 
 export default {
   name: 'NodeViewChildList',
@@ -37,7 +37,11 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['activeNodes'])
+    ...mapGetters(['activeNodes']),
+
+    orderedChildren () {
+      return orderByVariant(this.children)
+    }
   },
 
   methods: {

src/components/nodes/NodeViewChildListGroup.vue

@@ -3,7 +3,7 @@
     <b-collapse :id="'collapse-child-list-' + id" v-model="visible">
       <b-list-group>
         <b-list-group-item
-          v-for="child in children" :key="child.id"
+          v-for="child in orderedChildren" :key="child.id"
           :variant="child.variant"
           href="javascript:;"
           @click="$parent.$emit('open-child', { childId: child.id })"
@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import { orderByVariant } from '@/helpers/common'
+
 export default {
   name: 'NodeViewChildListGroup',
 
@@ -40,6 +42,12 @@ export default {
     return {
       visible: window.innerWidth > 769
     }
+  },
+
+  computed: {
+    orderedChildren () {
+      return orderByVariant(this.children)
+    }
   }
 }
 </script>