Column order saving to Changeset

app/Http/Controllers/TableEditController.php

@@ -188,6 +188,11 @@ class TableEditController extends Controller
                     $resp = $changeset->addBlankCol();
                     break;
 
+                case 'col.sort':
+                    $changeset->setColOrder($input->order);
+                    $resp = null;
+                    break;
+
                 default:
                     $resp = "Bad Action";
                     $code = 400;

app/Tables/Changeset.php

@@ -265,8 +265,10 @@ class Changeset
         $colsById = collect($columns)->keyBy('id')->all();
         $newOrder = [];
         foreach ($this->columnOrder as $id) {
+            if (isset($colsById[$id])) {
                 $newOrder[] = $colsById[$id];
             }
+        }
 
         $leftover_keys = array_diff(array_keys($colsById), $this->columnOrder);
         foreach ($leftover_keys as $id) {
@@ -455,6 +457,8 @@ class Changeset
     {
         if ($this->isNewColumn($id)) {
             unset($this->newColumns[$id]);
+            // remove it from order
+            $this->columnOrder = array_diff($this->columnOrder, [$id]);
         }
         else {
             $this->removedColumns[] = $id;
@@ -573,4 +577,14 @@ class Changeset
         $this->newColumns[$cid] = $col;
         return $col;
     }
+
+    public function setColOrder(array $order)
+    {
+        $allCols = $this->fetchAndTransformColumns();
+        $ids = collect($allCols)->pluck('id')->all();
+        $order = array_intersect($order, $ids);
+        $missing = array_diff($ids, $order);
+
+        $this->columnOrder = array_merge($order, $missing);
+    }
 }

resources/assets/js/components/ColumnEditor.vue

@@ -192,6 +192,7 @@ export default {
       newColNum: 0,
       columns: this.xColumns,
       colTypes: ['string', 'int', 'float', 'bool'],
+      debouncedSortUpdate: _.debounce(() => this.submitColOrder(), 350)
     }
   },
   methods: {
@@ -200,6 +201,14 @@ export default {
       query(this.route, data, sucfn, erfn)
     },
 
+    submitColOrder() {
+      let ids = this.columns.map((c) => c.id)
+      this.query ({
+        action: 'col.sort',
+        order: ids,
+      })
+    },
+
     colPos(col) {
       for (let n = 0; n < this.columns.length; n++) {
         if (this.columns[n].id == col.id) return n;
@@ -261,6 +270,8 @@ export default {
       // Put focus on the new field
       // For some reason, it loses it when moving down
       setTimeout(() => this.$refs[`col${pos2}-sort`][0].focus(), 0)
+
+      this.debouncedSortUpdate();
     },
 
     /** User started dragging a column */
@@ -368,6 +379,7 @@ export default {
       this.submitColChange(_.merge({}, col, {[cell]: col._orig[cell]}))
     },
 
+    /** compute styles for a field cell */
     tdWidthStyle(cell) {
       let w = 10;
       if (cell == 'name') w = '14'

resources/assets/js/udash.js

@@ -5,6 +5,7 @@ export { default as isUndefined } from 'lodash/isUndefined'
 export { default as merge } from 'lodash/merge'
 export { default as unset } from 'lodash/unset'
 export { default as isEmpty } from 'lodash/isEmpty'
+export { default as debounce } from 'lodash/debounce'
 
 function isDefined (x) {
   return typeof x !== 'undefined'