Note saving, revert buttons in review page

app/Http/Controllers/TableEditController.php

@@ -264,9 +264,36 @@ class TableEditController extends Controller
                     $changeset->setColOrder($input->order);
                     break;
 
-                case 'col.reset-sort':
-                    $changeset->columnOrder = [];
-                    $resp = $changeset->fetchAndTransformColumns();
+                case 'note.set':
+                    $changeset->note = $input->text;
+                    break;
+
+                case 'reset.col-order': // called via POST or GET
+                    $changeset->resetColumnOrder();
+                    break;
+
+                case 'reset.col-remove': // called via GET
+                    $changeset->resetRemovedColumns();
+                    break;
+
+                case 'reset.col-add': // called via GET
+                    $changeset->resetAddedColumns();
+                    break;
+
+                case 'reset.col-update': // called via GET
+                    $changeset->resetUpdatedColumns();
+                    break;
+
+                case 'reset.row-remove': // called via GET
+                    $changeset->resetRemovedRows();
+                    break;
+
+                case 'reset.row-add': // called via GET
+                    $changeset->resetAddedRows();
+                    break;
+
+                case 'reset.row-update': // called via GET
+                    $changeset->resetUpdatedRows();
                     break;
 
                 default:
@@ -280,6 +307,10 @@ class TableEditController extends Controller
 
         $this->storeChangeset($changeset);
 
+        if ($request->method() == 'GET') {
+            return back();
+        }
+
         // Redirect requested via form
         if ($code == 200 && $input->has('redirect')) {
             return redirect($input->redirect);

app/Tables/Changeset.php

@@ -480,7 +480,7 @@ class Changeset
         if ($this->isNewColumn($id)) {
             unset($this->newColumns[$id]);
             // remove it from order
-            $this->columnOrder = array_diff($this->columnOrder, [$id]);
+            $this->columnOrder = array_values(array_diff($this->columnOrder, [$id]));
         }
         else {
             $this->removedColumns[] = $id;
@@ -611,7 +611,7 @@ class Changeset
         $order = array_intersect($order, $ids);
         $missing = array_diff($ids, $order);
 
-        $this->columnOrder = array_merge($order, $missing);
+        $this->columnOrder = array_values(array_merge($order, $missing));
         $this->clearColumnOrderIfUnchanged();
     }
 
@@ -644,10 +644,54 @@ class Changeset
             ->pluck('id')
             ->diff($this->removedColumns)
             ->merge(collect($this->newColumns)->pluck('id'))
-            ->all();
+            ->values()->all();
+
+        $this->columnOrder = array_values($this->columnOrder);
 
         if ($expected == $this->columnOrder) {
             $this->columnOrder = [];
         }
     }
+
+    public function resetColumnOrder()
+    {
+        $this->columnOrder = [];
+    }
+
+    public function resetRemovedColumns()
+    {
+        $this->removedColumns = [];
+    }
+
+    public function resetAddedColumns()
+    {
+        $this->columnOrder = array_values(
+            array_diff($this->columnOrder,
+                collect($this->newColumns)->pluck('id')->all()
+            )
+        );
+
+        $this->newColumns = [];
+        $this->clearColumnOrderIfUnchanged();
+    }
+
+    public function resetUpdatedColumns()
+    {
+        $this->columnUpdates = [];
+    }
+
+    public function resetRemovedRows()
+    {
+        $this->removedRows = [];
+    }
+
+    public function resetAddedRows()
+    {
+        $this->newRows = [];
+    }
+
+    public function resetUpdatedRows()
+    {
+        $this->rowUpdates = [];
+    }
 }

package-lock.json

@@ -4895,14 +4895,12 @@
                 "balanced-match": {
                     "version": "1.0.0",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "brace-expansion": {
                     "version": "1.1.11",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "balanced-match": "^1.0.0",
                         "concat-map": "0.0.1"
@@ -4917,20 +4915,17 @@
                 "code-point-at": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "concat-map": {
                     "version": "0.0.1",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "console-control-strings": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "core-util-is": {
                     "version": "1.0.2",
@@ -5047,8 +5042,7 @@
                 "inherits": {
                     "version": "2.0.3",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "ini": {
                     "version": "1.3.5",
@@ -5060,7 +5054,6 @@
                     "version": "1.0.0",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "number-is-nan": "^1.0.0"
                     }
@@ -5075,7 +5068,6 @@
                     "version": "3.0.4",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "brace-expansion": "^1.1.7"
                     }
@@ -5083,14 +5075,12 @@
                 "minimist": {
                     "version": "0.0.8",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "minipass": {
                     "version": "2.2.4",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "safe-buffer": "^5.1.1",
                         "yallist": "^3.0.0"
@@ -5109,7 +5099,6 @@
                     "version": "0.5.1",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "minimist": "0.0.8"
                     }
@@ -5190,8 +5179,7 @@
                 "number-is-nan": {
                     "version": "1.0.1",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "object-assign": {
                     "version": "4.1.1",
@@ -5203,7 +5191,6 @@
                     "version": "1.4.0",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "wrappy": "1"
                     }
@@ -5325,7 +5312,6 @@
                     "version": "1.0.2",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "code-point-at": "^1.0.0",
                         "is-fullwidth-code-point": "^1.0.0",

resources/assets/js/app.js

@@ -12,4 +12,10 @@ $(function () {
   $('[data-toggle="tooltip"]').tooltip({
     container: 'body'
   })
+
+  $(document).on('click', 'a[data-confirm]', function (e) {
+    if (!window.confirm(this.dataset.confirm)) {
+      e.preventDefault()
+    }
+  })
 })

resources/assets/js/components/ColumnEditor.vue

@@ -265,6 +265,7 @@ export default {
         this.query({
           action: 'col.add',
         }, (resp) => {
+          resp.data._editing = true;
           this.columns.push(resp.data)
         })
       }
@@ -414,7 +415,7 @@ export default {
 
     resetOrder() {
       this.query({
-        action: 'col.reset-sort'
+        action: 'reset.col-order'
       }, (resp) => {
         this.columns = resp.data;
       })

resources/assets/js/components/DraftNotePage.js

@@ -0,0 +1,21 @@
+import { query } from './table-editor-utils'
+
+export default function (dataRoute) {
+  let $note = $('#field-note')
+  let lastText = $note.val()
+
+  let handler = _.debounce(function () {
+    query(dataRoute, {
+      action: 'note.set',
+      text: lastText
+    })
+  }, 350)
+
+  $note.on('input', () => {
+    let text = $note.val()
+    if (text !== lastText) {
+      lastText = text
+      handler()
+    }
+  })
+}

resources/assets/js/components/table-editor-utils.js

@@ -2,16 +2,21 @@ function busy (yes) {
   $('#draft-busy').css('opacity', yes ? 1 : 0)
 }
 
+let loaderHideTimeout;
+
 function query (route, data, sucfn, erfn) {
-  busy(true)
   if (!sucfn) sucfn = () => {}
   if (!erfn) erfn = () => {}
-
-  window.axios.post(route, data).then(sucfn).catch((error) => {
+  clearTimeout(loaderHideTimeout)
+  busy(true)
+  window.axios.post(route, data)
+    .then(sucfn)
+    .catch((error) => {
       console.error(error.message)
       erfn(error.response.data)
-  }).then(() => {
-    busy(false)
+    })
+    .finally(() => {
+      loaderHideTimeout = setTimeout(() => busy(false), 50)
     })
 }
 

resources/assets/js/vue-init.js

@@ -1,21 +1,23 @@
+import DraftNotePage from './components/DraftNotePage'
+
 window.Vue = require('vue')
 
 const ColumnEditor = Vue.component('column-editor', require('./components/ColumnEditor.vue'))
 const RowsEditor = Vue.component('rows-editor', require('./components/RowsEditor.vue'))
 const Icon = Vue.component('v-icon', require('./components/Icon.vue'))
 
-// const app = new Vue({
-//   el: '#app'
-// });
-
 window.app = {
-  ColumnEditor: function (selector, data) {
+  ColumnEditor (selector, data) {
     return new ColumnEditor({ propsData: data }).$mount(selector)
   },
-  RowsEditor: function (selector, data) {
+
+  RowsEditor (selector, data) {
     return new RowsEditor({ propsData: data }).$mount(selector)
   },
-  Icon: function (selector, data) {
+
+  Icon (selector, data) {
     return new Icon({ propsData: data }).$mount(selector)
-  }
+  },
+
+  DraftNotePage
 }

resources/views/table/propose/review.blade.php

@@ -37,15 +37,27 @@
           @if($anyRowChanges)
 
             @if($numChangedRows)
-              <div class="text-info"><b>{{ $numChangedRows }}</b> changed</div>
+              <div class="text-info">
+                <b>{{ $numChangedRows }}</b> changed
+                <a href="{{$table->draftUpdateRoute}}?action=reset.row-update" class="ml-2"
+                   data-confirm="Revert all row changes?">Reset</a>
+              </div>
             @endif
 
             @if($numNewRows)
-             <div class="text-success"><b>{{ $numNewRows }}</b> new</div>
+             <div class="text-success">
+               <b>{{ $numNewRows }}</b> new
+               <a href="{{$table->draftUpdateRoute}}?action=reset.row-add" class="ml-2"
+                  data-confirm="Discard all added rows?">Reset</a>
+             </div>
             @endif
 
             @if($numRemovedRows)
-             <div class="text-danger"><b>{{ $numRemovedRows }}</b> removed</div>
+             <div class="text-danger">
+               <b>{{ $numRemovedRows }}</b> removed
+               <a href="{{$table->draftUpdateRoute}}?action=reset.row-remove" class="ml-2"
+                  data-confirm="Undo row removals?">Reset</a>
+             </div>
             @endif
 
           @else
@@ -62,19 +74,35 @@
           @if($anyColChanges)
 
             @if($numChangedColumns)
-              <div class="text-info"><b>{{ $numChangedColumns }}</b> changed</div>
+              <div class="text-info">
+                <b>{{ $numChangedColumns }}</b> changed
+                <a href="{{$table->draftUpdateRoute}}?action=reset.col-update" class="ml-2"
+                   data-confirm="Revert all column changes?">Reset</a>
+              </div>
             @endif
 
             @if($numNewColumns)
-              <div class="text-success"><b>{{ $numNewColumns }}</b> new</div>
+              <div class="text-success">
+                <b>{{ $numNewColumns }}</b> new
+                <a href="{{$table->draftUpdateRoute}}?action=reset.col-add" class="ml-2"
+                   data-confirm="Discard all added columns?">Reset</a>
+              </div>
             @endif
 
             @if($numRemovedColumns)
-              <div class="text-danger"><b>{{ $numRemovedColumns }}</b> removed</div>
+              <div class="text-danger">
+                <b>{{ $numRemovedColumns }}</b> removed
+                <a href="{{$table->draftUpdateRoute}}?action=reset.col-remove" class="ml-2"
+                   data-confirm="Undo column removals?">Reset</a>
+              </div>
             @endif
 
             @if($colsReordered)
-              <div class="text-info">Order changed</div>
+              <div class="text-info">
+                Order changed
+                <a href="{{$table->draftUpdateRoute}}?action=reset.col-order" class="ml-2"
+                   data-confirm="Reset column order changes?">Reset</a>
+              </div>
             @endif
 
           @else
@@ -109,3 +137,11 @@
     </div>
   </div>
 @stop
+
+@push('scripts')
+  <script>
+    ready(function () {
+      app.DraftNotePage(@json($table->draftUpdateRoute))
+    })
+  </script>
+@endpush

routes/web.php

@@ -51,6 +51,7 @@ Route::group(['middleware' => ['auth', 'activated']], function () {
     Route::post('@{user}/{table}/delete', 'TableController@delete')->name('table.delete');
 
     Route::post('@{user}/{table}/draft/update', 'TableEditController@draftUpdate')->name('table.draft-update');
+    Route::get('@{user}/{table}/draft/update', 'TableEditController@draftUpdate');
     Route::get('@{user}/{table}/draft/discard', 'TableEditController@discard')->name('table.draft-discard');
     Route::get('@{user}/{table}/draft/{tab?}', 'TableEditController@draft')->name('table.draft');
 });