UX improvements in table editor

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

@@ -7,45 +7,36 @@
 @endphp
 @extends('table.propose.layout-row-pagination')
 
-@section('header')
-  <div class="form-inline py-2 px-1 border-bottom mb-3">
-    {{-- TODO improve layout --}}
-    <form action="{{$table->draftUpdateRoute}}" method="POST" class="form-inline">
-      @csrf
-      <input type="hidden" name="action" value="rows.add-csv">
-      <input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
-      <label class="pr-2" for="csv-data">Add CSV:</label>
-      <textarea name="data" id="csv-data"
-                title="{{$errors->has('data') ? $errors->first('data') : ''}}"
-                class="form-control mr-1 {{ $errors->has('data')?'is-invalid':'' }}"
-                style="width:30em; height:10em">{{old('data')}}</textarea>
-      <button class="btn btn-outline-success">Append</button>
-    </form>
-
-    <div class="flex-grow-1"></div>
-
-    <form action="{{$table->draftUpdateRoute}}" method="POST">
-      @csrf
-      <input type="hidden" name="action" value="rows.add">
-      <input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
-      <label class="form-inline pr-2" for="newrow-count">Add Empty Rows:</label>
-      <input name="count" id="newrow-count" type="number" min=1 step=1 value=1 class="form-control mr-1" style="width:10em">
-      <button class="btn btn-outline-success">Add</button>
-    </form>
-  </div>
-@stop
-
 @section('rows')
   <div id="rows-editor"></div>
 @stop
 
 @push('scripts')
+  @php
+    $xrows = $rows->map(function($r) {
+                $r['_orig'] = $r;
+                return $r;
+            })->keyBy('_id');
+  @endphp
+
   <script>
     ready(function() {
-      app.RowsEditor('#rows-editor', {
+      var rows_editor = app.RowsEditor('#rows-editor', {
+        hasPages: @json($rows->hasPages()),
+        pager:
+          '<nav class="text-center" aria-label="Table pages">' +
+            @json((string)$rows->links(null, ['ulClass' => 'mb-0'])) +
+          '</nav>',
         route: {!! toJSON($table->draftUpdateRoute) !!},
         columns: {!! toJSON($columns) !!},
-        xRows: {!! toJSON($rows->keyBy('_id'), true) !!},
+        xRows: {!! toJSON($xrows, true) !!},
+        newRows: true, // indicate all are new
+        pageUrl: @json(request()->fullUrl()),
+        csrf: @json(csrf_token()),
+      })
+
+      $('#save-all-rows').on('click', function () {
+        rows_editor.saveAllChanges()
       })
     });
   </script>