correctly sort by numeric columns

resources/assets/js/components/RowsEditor.vue

@@ -68,7 +68,7 @@ Rows are identified by row._id, columns by col.id
         </tr>
         </thead>
         <tbody>
-          <tr v-for="row in rows" :class="row._remove ? 'remove' : ''">
+          <tr v-for="row in orderedRows" :class="row._remove ? 'remove' : ''">
             <td class="text-nowrap">
               <button :class="[
                         'mr-1', 'btn', 'btn-outline-danger',
@@ -164,6 +164,7 @@ Rows are identified by row._id, columns by col.id
       route: String,
       /** Row objects */
       xRows: Object, // key'd by _id
+      xRowOrder: Array,
       /** Array of columns */
       columns: Array,
       /** CSRF token */
@@ -182,6 +183,7 @@ Rows are identified by row._id, columns by col.id
       return {
         /** All rows */
         rows: this.xRows,
+        rowOrder: this.xRowOrder,
         /** Number of dirty rows */
         dirtyRows: 0,
       }
@@ -199,6 +201,17 @@ Rows are identified by row._id, columns by col.id
         }
       }
     },
+    computed: {
+      // JS does not respect object keys order, so we have to fix it up a little
+      orderedRows: function () {
+        if (this.newRows) return Object.values(this.rows);
+        let arr = []
+        for(let id of this.rowOrder) {
+          arr.push(this.rows[id])
+        }
+        return arr;
+      }
+    },
     methods: {
       /** Send a query to the server */
       query (data, sucfn, erfn) {
@@ -247,6 +260,35 @@ Rows are identified by row._id, columns by col.id
         })
       },
 
+      /** Save all changed rows */
+      saveAllChanges () {
+        let toChange = _.filter(this.rows, (r) => {
+          let changed = this.isRowChanged(r)
+          if (!changed && r._editing) {
+            this.rows[r._id]._editing = false
+          }
+          return changed;
+        })
+
+        if (toChange.length === 0) return;
+
+        this.query({
+          action: 'row.update-many',
+          data: toChange
+        }, (resp) => {
+          _.each(resp.data, (row) => {
+            this.$set(this.rows, row._id, row)
+          })
+          this.dirtyRows = 0
+        }, (er) => {
+          // TODO - also need to improve backend to properly report which row was bad
+          console.log(er)
+          // if (!_.isUndefined(er.errors)) {
+          //   this.$set(this.rows[row._id], '_errors', er.errors)
+          // }
+        })
+      },
+
       /** Toggle editing state - edit or save */
       toggleRowEditing (_id) {
         if (this.rows[_id]._remove) return false // can't edit row marked for removal
@@ -321,35 +363,6 @@ Rows are identified by row._id, columns by col.id
         row._dirty = isDirty
       },
 
-      /** Save all changed rows */
-      saveAllChanges () {
-        let toChange = _.filter(this.rows, (r) => {
-          let changed = this.isRowChanged(r)
-          if (!changed && r._editing) {
-            this.rows[r._id]._editing = false
-          }
-          return changed;
-        })
-
-        if (toChange.length === 0) return;
-
-        this.query({
-          action: 'row.update-many',
-          data: toChange
-        }, (resp) => {
-          _.each(resp.data, (row) => {
-            this.$set(this.rows, row._id, row)
-          })
-          this.dirtyRows = 0
-        }, (er) => {
-          // TODO
-          console.log(er)
-          // if (!_.isUndefined(er.errors)) {
-          //   this.$set(this.rows[row._id], '_errors', er.errors)
-          // }
-        })
-      },
-
       discardEdit (row) {
         let wasDirty = this.isRowChanged(row)
 
@@ -382,7 +395,7 @@ Rows are identified by row._id, columns by col.id
         if (dir == -1) {
           // up
           let last_editable_row = null
-          for (let row of Object.values(this.rows)) {
+          for (let row of this.orderedRows) {
             if (row._id === row_id) {
               break
             }
@@ -398,7 +411,7 @@ Rows are identified by row._id, columns by col.id
           // down
           let first_editable_row = null
           let foundself = false
-          for (let row of Object.values(this.rows)) {
+          for (let row of this.orderedRows) {
             if (row._id === row_id) {
               foundself = true
               continue

resources/views/table/propose/edit-rows.blade.php

@@ -31,6 +31,7 @@
         route: {!! toJSON($table->draftUpdateRoute) !!},
         columns: {!! toJSON($columns) !!},
         xRows: {!! toJSON($transformed, true) !!},
+        xRowOrder: @json($transformed->keys()),
       })
     });
   </script>