UX improvements in table editor

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

@@ -0,0 +1,27 @@
+@php
+  $tab = 'add-rows';
+  /** @var \App\Tables\Column[] $columns */
+  /** @var \App\Tables\Changeset $changeset */
+  /** @var \App\Models\Row[]|Illuminate\Pagination\Paginator $rows */
+  /** @var \App\Models\Table $table */
+@endphp
+@extends('table.propose.layout')
+
+@section('tab-content')
+  <div class="form-inline py-2 px-1">
+    <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>
+@stop
+
+@push('scripts')
+@endpush

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>

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

@@ -23,6 +23,11 @@
   <script>
     ready(function() {
       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($transformed, true) !!},

resources/views/table/propose/layout-row-pagination.blade.php

@@ -9,23 +9,5 @@
     @yield('header')
   </div>
 
-  @if($rows->hasPages())
-    <div class="col-md-12 d-flex">
-      <nav class="text-center" aria-label="Pages of the table">
-        {{ $rows->links(null, ['ulClass' => 'mb-0']) }}
-      </nav>
-    </div>
-  @endif
-
-  <div class="col-12">
-    @yield('rows')
-  </div>
-
-  @if($rows->hasPages())
-    <div class="col-md-12 d-flex">
-      <nav class="text-center" aria-label="Pages of the table">
-        {{ $rows->links(null, ['ulClass' => 'mb-0']) }}
-      </nav>
-    </div>
-  @endif
+  @yield('rows')
 @stop

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

@@ -20,36 +20,45 @@ if (!isset($tab) || $tab == '') $tab = 'edit-rows';
     <h1 class="mx-3">
       <a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->title }}</a>
     </h1>
-    <a href="{{$table->draftDiscardRoute}}" class="btn btn-outline-danger mr-2" @tooltip(Discard changes)>
-      @icon(fa-trash-o, sr:Discard)
+    <a href="{{$table->draftDiscardRoute}}" class="btn btn-outline-danger mr-2 py-1 btn-sm">
+      @icon(fa-trash-o fa-pr, sr:Discard){{--
+      --}}Discard
+    </a>
+    <a href="{{ $table->viewRoute }}" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Back to Table)>
+      @icon(fa-reply, sr:Back to Table)
     </a>
-    @if(user()->ownsTable($table))
-      <a href="" class="btn btn-outline-success" @tooltip(Save the changes and apply them as a new table revision)>
-        @icon(fa-save fa-pr)Commit
-      </a>
-    @else
-      <a href="" class="btn btn-outline-success" @tooltip(Submit your changes for review by the table owner)>
-        @icon(fa-save fa-pr)Submit
-      </a>
-    @endif
   </div>
 </div>
 
 <ul class="nav nav-tabs">
   <li class="nav-item">
-    <a class="nav-link{{ $tab=='edit-rows'?' active':'' }}" href="{{ $table->getDraftRoute('edit-rows') }}">Edit Rows</a>
+    <a class="nav-link {{ $tab=='edit-rows' ? 'active' : '' }}" href="{{ $table->getDraftRoute('edit-rows') }}">
+      Edit Rows
+    </a>
   </li>
   <li class="nav-item">
-    <a class="nav-link{{ $tab=='add-rows'?' active':'' }}" href="{{ $table->getDraftRoute('add-rows') }}">Add Rows</a>
+    <a class="nav-link {{ $tab=='add-rows' ? 'active' : '' }}" href="{{ $table->getDraftRoute('add-rows') }}">
+      Add Rows
+    </a>
   </li>
   <li class="nav-item">
-    <a class="nav-link{{ $tab=='manage-columns'?' active':'' }}" href="{{ $table->getDraftRoute('manage-columns') }}">Columns</a>
+    <a class="nav-link {{ $tab=='manage-columns' ? 'active' : '' }}" href="{{ $table->getDraftRoute('manage-columns') }}">
+      Change Columns
+    </a>
   </li>
   <li class="nav-item">
-    <a class="nav-link{{ $tab=='review'?' active':'' }}" href="{{ $table->getDraftRoute('review') }}">Note & Review</a>
+    <a class="text-success nav-link {{ $tab=='review' ? 'active' : '' }}" href="{{ $table->getDraftRoute('review') }}">
+      @if(user()->ownsTable($table))
+        @icon(fa-save fa-pr){{--
+        --}}Review & Apply
+      @else
+        @icon(fa-paper-plane-o fa-pr){{--
+        --}}Review & Submit
+      @endif
+    </a>
   </li>
-  <li class="nav-item ml-auto pt-2 pr-2 opacity-fade" style="opacity:0" id="draft-busy">
-    @icon(fa-hourglass, Working...)
+  <li class="nav-item pt-2 pr-2 opacity-fade ml-auto" style="opacity:0" id="draft-busy">
+    @icon(fa-spinner fa-spin, Working...)
   </li>
 </ul>
 

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

@@ -2,5 +2,13 @@
 @extends('table.propose.layout')
 
 @section('tab-content')
-  ...
+  @if(user()->ownsTable($table))
+    <a href="" class="btn btn-outline-success" @tooltip(Save the changes and apply them as a new table revision)>
+      @icon(fa-save fa-pr)Commit
+    </a>
+  @else
+    <a href="" class="btn btn-outline-success" @tooltip(Submit your changes for review by the table owner)>
+      @icon(fa-save fa-pr)Submit
+    </a>
+  @endif
 @stop