node_sort

this is now saved to pouchdb in the positions doc but I cant work out yet how to assign this to the initial order of the draggable itenms

app/src/components/CardsLayer.vue

 <template>
-  <div class="grid">
+  <div>
     <draggable
+      id="dragger"
       class="grid"
       name="grid"
       @start="drag = true"
@@ -196,6 +197,7 @@ export default {
       update: false,
       input: '',
       search: '',
+      orders: this.configPositions,
     }
   },
 
@@ -258,31 +260,25 @@ export default {
   },
 
   methods: {
-    save() {
-      this.$options.myArray.forEach((node, key) => {
-        console.log('key' + key, ':' + node.node_text)
-      })
-    },
-    nodePositionIndex(e) {
-      // var items = this.configPositions.map((node_sort, index) => {
-      //   console.log(items)
-      //   console.log(node_sort)
-      //   console.log(index)
-      // })
-      // this.$options.myArray.forEach((node, key) => {
-      //   console.log(node.node_text, key)
-      // })
-      // var items = this.items.map(function (item, index) {
-      //   console.log(items)
-      //   return { item: item, order: index }
-      // })
-      // console.log(e)
-      // console.log(e.newIndex)
-      // this index is where came from
-      // console.log(e.oldIndex)
-      nodeid = e.item.firstChild.firstChild.id
-      nodesort = e.newIndex
-      this.$store.dispatch('sortNode', { nodeid, nodesort })
+    nodePositionIndex() {
+      var i
+      var j
+      var dragger = document.getElementById('dragger')
+
+      for (i = 0; i < dragger.childNodes.length; i++) {
+        var count = i
+
+        for (j = 0; j < Object.keys(this.configPositions).length; j++) {
+          if (
+            dragger.childNodes[i].firstChild[0].id ==
+            this.configPositions[j].node_id
+          ) {
+            nodeid = this.configPositions[j].node_id
+            nodesort = count
+            this.$store.dispatch('sortNode', { nodeid, nodesort })
+          }
+        }
+      }
     },
     chooseColor(color, nodeid) {
       this.$store.dispatch('colorNode', { nodeid, color })
@@ -308,7 +304,6 @@ export default {
     },
     loadData() {
       this.$options.myArray = this.nodes_filtered
-
       this.$forceUpdate()
     },
     editNode(e) {

app/src/components/ListLayer.vue

 <template>
   <div>
     <div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
-      <form class="nodes">
+      <form
+        class="nodes"
+        :style="{
+          backgroundColor: nodes.color,
+        }"
+      >
         <template v-if="nodes.read_mode == false">
           <textarea
             @focus="editTrue(true)"
@@ -32,6 +37,17 @@
               readFlag(nodes.node_id, nodes.read_mode), updateNodes()
             "
           />
+          <v-swatches
+            v-model="color"
+            @input="chooseColor(color, nodes.node_id)"
+            :swatches="swatches"
+            :shapes="shapes"
+            show-border
+            show-fallback
+            fallback-input-type="color"
+          >
+            <SvgButton3 buttonClass="nodes" @click.prevent slot="trigger" />
+          </v-swatches>
         </div>
 
         <div class="allemoji">
@@ -55,6 +71,9 @@ import { mapState } from 'vuex'
 import marked from 'marked'
 import SvgButton from '@/components/SvgButton'
 import SvgButton2 from '@/components/SvgButton2'
+import SvgButton3 from '@/components/SvgButton3'
+import VSwatches from 'vue-swatches'
+import 'vue-swatches/dist/vue-swatches.css'
 
 var readmode
 export default {
@@ -66,6 +85,15 @@ export default {
 
   data: function () {
     return {
+      color: '#9bc2d8',
+      shapes: 'circles',
+      // swatches: [{ color: '#F493A7', showBorder: true }],
+      swatches: [
+        ['#EB5757', '#F2994A', '#F2C94C'],
+        ['#219653', '#27AE60', '#6FCF97'],
+        ['#2F80ED', '#2D9CDB', '#56CCF2'],
+        ['#9B51E0', '#BB6BD9', '#E9B7FC'],
+      ],
       localreadmode: false,
       myArray: null,
       update: false,
@@ -125,6 +153,10 @@ export default {
   },
 
   methods: {
+    chooseColor(color, nodeid) {
+      this.$store.dispatch('colorNode', { nodeid, color })
+      this.$options.myArray = this.nodes_filtered
+    },
     updateNodes() {
       this.update = !this.update
     },
@@ -164,6 +196,8 @@ export default {
   components: {
     SvgButton,
     SvgButton2,
+    SvgButton3,
+    VSwatches,
   },
 }
 </script>

app/src/components/NodesLayer.vue

@@ -230,7 +230,6 @@ export default {
     ...mapState({
       scale: (state) => state.ui.scale,
       myNodes: (state) => state.myNodes,
-
       configPositions: (state) => state.configPositions,
       configConnections: (state) => state.configConnections,
       configEmoji: (state) => state.configEmoji,

app/src/views/Collect.vue

@@ -116,6 +116,7 @@ export default {
     addNode() {
       this.$store.dispatch('addNode')
       this.added = !this.added
+      this.$forceUpdate()
     },
 
     editTrue(e) {