From aceb0453fcb769016f521111b7557bca0f79ae58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Fri, 10 Aug 2018 13:11:50 +0200
Subject: [PATCH] Column order saving to Changeset

---
 app/Http/Controllers/TableEditController.php    |  5 +++++
 app/Tables/Changeset.php                        | 16 +++++++++++++++-
 resources/assets/js/components/ColumnEditor.vue | 12 ++++++++++++
 resources/assets/js/udash.js                    |  1 +
 4 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/app/Http/Controllers/TableEditController.php b/app/Http/Controllers/TableEditController.php
index a3d6464..db17c66 100644
--- a/app/Http/Controllers/TableEditController.php
+++ b/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;
diff --git a/app/Tables/Changeset.php b/app/Tables/Changeset.php
index 2b27708..8e260dc 100644
--- a/app/Tables/Changeset.php
+++ b/app/Tables/Changeset.php
@@ -265,7 +265,9 @@ class Changeset
         $colsById = collect($columns)->keyBy('id')->all();
         $newOrder = [];
         foreach ($this->columnOrder as $id) {
-            $newOrder[] = $colsById[$id];
+            if (isset($colsById[$id])) {
+                $newOrder[] = $colsById[$id];
+            }
         }
 
         $leftover_keys = array_diff(array_keys($colsById), $this->columnOrder);
@@ -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);
+    }
 }
diff --git a/resources/assets/js/components/ColumnEditor.vue b/resources/assets/js/components/ColumnEditor.vue
index 6a13171..a54647a 100644
--- a/resources/assets/js/components/ColumnEditor.vue
+++ b/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'
diff --git a/resources/assets/js/udash.js b/resources/assets/js/udash.js
index 04912ec..3859954 100644
--- a/resources/assets/js/udash.js
+++ b/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'