Note tab added

app/Http/Controllers/TableEditController.php

@@ -141,6 +141,15 @@ class TableEditController extends Controller
         ]);
     }
 
+    /** @noinspection PhpUnusedPrivateMethodInspection */
+    private function tabReview(Changeset $changeset)
+    {
+        return view('table.propose.review', [
+            'changeset' => $changeset,
+            'table' => $changeset->table,
+        ]);
+    }
+
     #endregion
 
     /**
@@ -255,6 +264,11 @@ class TableEditController extends Controller
                     $changeset->setColOrder($input->order);
                     break;
 
+                case 'col.reset-sort':
+                    $changeset->columnOrder = [];
+                    $resp = $changeset->fetchAndTransformColumns();
+                    break;
+
                 default:
                     $resp = "Bad Action";
                     $code = 400;

app/Tables/Changeset.php

@@ -485,6 +485,8 @@ class Changeset
         else {
             $this->removedColumns[] = $id;
         }
+
+        $this->clearColumnOrderIfUnchanged();
     }
 
     public function columnRestore(string $id)
@@ -610,6 +612,7 @@ class Changeset
         $missing = array_diff($ids, $order);
 
         $this->columnOrder = array_merge($order, $missing);
+        $this->clearColumnOrderIfUnchanged();
     }
 
     public function removeEmptyNewRows()
@@ -634,4 +637,17 @@ class Changeset
             return false;
         });
     }
+
+    public function clearColumnOrderIfUnchanged()
+    {
+        $expected = collect($this->revision->columns)
+            ->pluck('id')
+            ->diff($this->removedColumns)
+            ->merge(collect($this->newColumns)->pluck('id'))
+            ->all();
+
+        if ($expected == $this->columnOrder) {
+            $this->columnOrder = [];
+        }
+    }
 }

app/helpers.php

@@ -9,7 +9,7 @@ const VALI_LINE = 'string|max:255';
 const FEATURE_FORKS = false;
 const FEATURE_FAVES = false;
 const FEATURE_TABLE_COMMENTS = false;
-const FEATURE_PROPOSALS = false;
+const FEATURE_PROPOSALS = true;
 
 // global helpers
 function authed() {

resources/assets/js/components/ColumnEditor.vue

@@ -4,108 +4,117 @@ Complex animated column editor for the table edit page
 
 <template>
   <div>
-    <input type="hidden" :name="name" :value="JSON.stringify(columns)" v-if="newTable">
-    <table :class="[
-      {'table': !newTable},
-      {'new-table': newTable},
-      {'mt-3': !newTable},
-      'table-narrow', 'table-sm', 'table-fixed', 'td-va-middle'
-    ]">
-      <thead>
-        <tr>
-          <th v-if="sortable"></th>
-          <th :style="tdWidthStyle('name')">Name</th>
-          <th :style="tdWidthStyle('type')">Type</th>
-          <th :style="tdWidthStyle('title')">Title</th>
-          <th></th>
-        </tr>
-      </thead>
-      <transition-group name="col-list" tag="tbody" ref="col-list">
-        <tr v-for="(col, i) in columns" :key="col.id" :ref="`col${i}`"
-            :class="{
-              dragging: col._dragging,
-              'text-success': col._new,
-              remove: col._remove
-            }">
-          <td v-if="sortable">
-            <span class="btn-group">
-              <button type="button" class="btn btn-outline-secondary drag-btn"
-                      @keyup.up="move(i, -1)"
-                      @keyup.down="move(i, 1)"
-                      :ref="`col${i}-sort`"
-                      :style="{visibility: (columns.length > 1) ? 'visible' : 'hidden'}"
-                      @mousedown="beginDrag(i, $event)">
-                <v-icon class="fa-bars" alt="Drag" />
-              </button><!--
-           --><button type="button" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" v-if="manualSort"
-                 @click.prevent="move(i, -1)">
-                <v-icon class="fa-chevron-up" alt="Move Up" />
-              </button><!--
-           --><button type="button" :class="['btn', 'btn-outline-secondary', {disabled: i == (columns.length-1)}]"  v-if="manualSort"
-                 @click.prevent="move(i, 1)">
-                <v-icon class="fa-chevron-down" alt="Move Down" />
-              </button>
-            </span>
-          </td>
-
-          <template v-if="col._editing || newTable">
-            <!-- Editable cells -->
-            <td :style="tdWidthStyle('name')">
-              <input v-model="col.name"
-                     class="form-control"
-                     type="text">
-            </td>
-
-            <td :style="tdWidthStyle('type')">
-              <select v-model="col.type"
-                      class="form-control custom-select">
-                <option v-for="t in colTypes" :value="t">{{t}}</option>
-              </select>
+    <input type="hidden" :name="name" :value="JSON.stringify(columns)" v-if="!newTable">
+
+    <div :class="newTable ? ['col-md-12', 'mt-3'] : []">
+      <table :class="[
+        {'table': !newTable},
+        {'new-table': newTable},
+        {'mt-3': !newTable},
+        'table-narrow', 'table-sm', 'table-fixed', 'td-va-middle'
+      ]">
+        <thead>
+          <tr>
+            <th v-if="sortable"></th>
+            <th :style="tdWidthStyle('name')">Name</th>
+            <th :style="tdWidthStyle('type')">Type</th>
+            <th :style="tdWidthStyle('title')">Title</th>
+            <th>
+              <a href="" type="button" v-if="!newTable"
+                 @click.prevent="resetOrder()"
+                 class="text-danger no-decoration">
+                Reset Order
+              </a>
+            </th>
+          </tr>
+        </thead>
+        <transition-group name="col-list" tag="tbody" ref="col-list">
+          <tr v-for="(col, i) in columns" :key="col.id" :ref="`col${i}`"
+              :class="{
+                dragging: col._dragging,
+                'text-success': col._new,
+                remove: col._remove
+              }">
+            <td v-if="sortable">
+              <span class="btn-group">
+                <button type="button" class="btn btn-outline-secondary drag-btn"
+                        @keyup.up="move(i, -1)"
+                        @keyup.down="move(i, 1)"
+                        :ref="`col${i}-sort`"
+                        :style="{visibility: (columns.length > 1) ? 'visible' : 'hidden'}"
+                        @mousedown="beginDrag(i, $event)">
+                  <v-icon class="fa-bars" alt="Drag" />
+                </button><!--
+             --><button type="button" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" v-if="manualSort"
+                   @click.prevent="move(i, -1)">
+                  <v-icon class="fa-chevron-up" alt="Move Up" />
+                </button><!--
+             --><button type="button" :class="['btn', 'btn-outline-secondary', {disabled: i == (columns.length-1)}]"  v-if="manualSort"
+                   @click.prevent="move(i, 1)">
+                  <v-icon class="fa-chevron-down" alt="Move Down" />
+                </button>
+              </span>
             </td>
 
-            <td :style="tdWidthStyle('title')">
-              <input v-model="col.title"
-                     class="form-control"
-                     type="text">
-            </td>
-          </template>
-
-          <template v-else>
-            <!-- Value fields -->
-            <td v-for='cell in ["name", "type", "title"]'>
-              <span class="text-danger strike" title="Original value" v-if="isChanged(col, cell)">{{col._orig[cell]}}</span>
-              <span>{{ col[cell] }}</span>
-              <v-icon v-if="isChanged(col, cell)"
-                      @click="revertCell(col, cell)"
-                      class="fa-undo text-danger pointer"
-                      alt="Revert Change" />
+            <template v-if="col._editing || newTable">
+              <!-- Editable cells -->
+              <td :style="tdWidthStyle('name')">
+                <input v-model="col.name"
+                       class="form-control"
+                       type="text">
+              </td>
+
+              <td :style="tdWidthStyle('type')">
+                <select v-model="col.type"
+                        class="form-control custom-select">
+                  <option v-for="t in colTypes" :value="t">{{t}}</option>
+                </select>
+              </td>
+
+              <td :style="tdWidthStyle('title')">
+                <input v-model="col.title"
+                       class="form-control"
+                       type="text">
+              </td>
+            </template>
+
+            <template v-else>
+              <!-- Value fields -->
+              <td v-for='cell in ["name", "type", "title"]'>
+                <span class="text-danger strike" title="Original value" v-if="isChanged(col, cell)">{{col._orig[cell]}}</span>
+                <span>{{ col[cell] }}</span>
+                <v-icon v-if="isChanged(col, cell)"
+                        @click="revertCell(col, cell)"
+                        class="fa-undo text-danger pointer"
+                        alt="Revert Change" />
+              </td>
+            </template>
+
+            <td class="text-nowrap"><!--
+                Save button
+           --><a href="" :class="['mr-1', 'btn', 'btn-outline-secondary', {'disabled': col._remove}]"
+                 v-if="!newTable"
+                 @click.prevent="toggleColEditing(col)">
+                <v-icon v-if="col._editing" class="fa-save" alt="Save" />
+                <v-icon v-else class="fa-pencil" alt="Edit" />
+              </a><!--
+                Delete button
+           --><button type="button" :class="delBtnClass(col)"
+                 @click.prevent="toggleColDelete(col)">
+                <v-icon v-if="col._remove" class="fa-undo" alt="Undo Remove" />
+                <v-icon v-else class="fa-trash-o" alt="Remove" />
+              </button><!--
+                Add button
+           --><button type="button" :class="['x-add-btn', 'btn', 'btn-outline-secondary']"
+                 v-if="i === columns.length - 1"
+                 @click.prevent="addCol()">
+                <v-icon class="fa-plus" alt="Add Column" />
+              </button>
             </td>
-          </template>
-
-          <td class="text-nowrap"><!--
-              Save button
-         --><a href="" :class="['mr-1', 'btn', 'btn-outline-secondary', {'disabled': col._remove}]"
-               v-if="!newTable"
-               @click.prevent="toggleColEditing(col)">
-              <v-icon v-if="col._editing" class="fa-save" alt="Save" />
-              <v-icon v-else class="fa-pencil" alt="Edit" />
-            </a><!--
-              Delete button
-         --><button type="button" :class="delBtnClass(col)"
-               @click.prevent="toggleColDelete(col)">
-              <v-icon v-if="col._remove" class="fa-undo" alt="Undo Remove" />
-              <v-icon v-else class="fa-trash-o" alt="Remove" />
-            </button><!--
-              Add button
-         --><button type="button" :class="['x-add-btn', 'btn', 'btn-outline-secondary']"
-               v-if="i === columns.length - 1"
-               @click.prevent="addCol()">
-              <v-icon class="fa-plus" alt="Add Column" />
-            </button>
-          </td>
-        </tr>
-      </transition-group>
-    </table>
+          </tr>
+        </transition-group>
+      </table>
+    </div>
   </div>
 </template>
 
@@ -342,13 +351,17 @@ export default {
       let n = this.colPos(col)
 
       if (this.newTable) {
-        if (this.columns.length == 1) return; // can't delete the last col
+        if (this.columns.length == 1) return // can't delete the last col
 
         // hard delete
         this.columns.splice(n, 1)
       } else {
         let remove = !col._remove
 
+        if (col._new) {
+          if (!confirm(`Delete new column "${col.title}"? Any row data for this column will be lost.`)) return;
+        }
+
         this.query({
           action: remove ? 'col.remove' : 'col.restore',
           id: col.id
@@ -398,6 +411,14 @@ export default {
 
       return {width: `${w}rem`};
     },
+
+    resetOrder() {
+      this.query({
+        action: 'col.reset-sort'
+      }, (resp) => {
+        this.columns = resp.data;
+      })
+    }
   }
 }
 </script>

resources/assets/js/components/RowsEditor.vue

@@ -44,7 +44,7 @@ Rows are identified by row._id, columns by col.id
         </form>
 
         <button @click="saveAllChanges" type="button"
-                :class="['btn', this.dirtyRows ? 'btn-info' : 'btn-outline-secondary']">
+                :class="['btn', this.dirtyRows ? 'btn-info' : ['btn-outline-secondary', 'disabled']]">
           Save Rows
         </button>
       </div>

resources/assets/sass/_helpers.scss

@@ -33,3 +33,15 @@
 .noscript-hide {
 	display: none !important;
 }
+
+.bold {
+	font-weight: bold;
+}
+
+.italic {
+	font-style: italic;
+}
+
+.no-decoration {
+	text-decoration: none !important;
+}

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

@@ -48,13 +48,7 @@ if (!isset($tab) || $tab == '') $tab = 'edit-rows';
   </li>
   <li class="nav-item">
     <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
+      @icon(fa-save fa-pr)Review & Confirm
     </a>
   </li>
   <li class="nav-item pt-2 pr-2 opacity-fade ml-auto" style="opacity:0" id="draft-busy">

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

@@ -1,14 +1,111 @@
-@php($tab='review')
+@php
+  $tab = 'review';
+  /** @var \App\Tables\Changeset $changeset */
+  /** @var \App\Models\Table $table */
+
+  $numChangedRows = count($changeset->rowUpdates);
+  $numNewRows = count($changeset->newRows);
+  $numRemovedRows = count($changeset->removedRows);
+
+  $anyRowChanges = $numChangedRows || $numNewRows || $numRemovedRows;
+
+  $numChangedColumns = count($changeset->columnUpdates);
+  $numNewColumns = count($changeset->newColumns);
+  $numRemovedColumns = count($changeset->removedColumns);
+  $colsReordered = !empty($changeset->columnOrder);
+
+  $anyColChanges = $numChangedColumns || $numNewColumns || $numRemovedColumns || $colsReordered;
+
+  $anyChanges = $anyRowChanges || $anyColChanges;
+@endphp
+
 @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
+  <div class="my-3 col-md-12">
+    <div class="mx-3">
+
+      <?php Widget::setLayout(3,7) ?>
+
+      {!! Widget::header(3, 'Change Summary') !!}
+
+      <div class="row border-bottom border-top py-3">
+        <div class="col-md-3 text-right">
+          Rows
+        </div>
+        <div class="col-md-7">
+          @if($anyRowChanges)
+
+            @if($numChangedRows)
+              <div class="text-info"><b>{{ $numChangedRows }}</b> changed</div>
+            @endif
+
+            @if($numNewRows)
+             <div class="text-success"><b>{{ $numNewRows }}</b> new</div>
+            @endif
+
+            @if($numRemovedRows)
+             <div class="text-danger"><b>{{ $numRemovedRows }}</b> removed</div>
+            @endif
+
+          @else
+            <span class="text-muted">No changes</span>
+          @endif
+        </div>
+      </div>
+
+      <div class="row border-bottom py-3 mb-3">
+        <div class="col-md-3 text-right">
+          Columns
+        </div>
+        <div class="col-md-7">
+          @if($anyColChanges)
+
+            @if($numChangedColumns)
+              <div class="text-info"><b>{{ $numChangedColumns }}</b> changed</div>
+            @endif
+
+            @if($numNewColumns)
+              <div class="text-success"><b>{{ $numNewColumns }}</b> new</div>
+            @endif
+
+            @if($numRemovedColumns)
+              <div class="text-danger"><b>{{ $numRemovedColumns }}</b> removed</div>
+            @endif
+
+            @if($colsReordered)
+              <div class="text-info">Order changed</div>
+            @endif
+
+          @else
+            <span class="text-muted">No changes</span>
+          @endif
+        </div>
+      </div>
+
+      {!! Widget::textarea('note', 'Summary')->value($changeset->note)
+            ->help(user()->ownsTable($table) ?
+               "Describe changes you made to the table; this message will annotate the
+               new table revision." :
+               "Describe you suggested changes. The table owner will read this message
+               and review your changes before deciding whether to accept the proposal."
+            )->minHeight('8em')
+       !!}
+
+      <div class="row">
+        <div class="col-md-7 offset-md-3">
+          @if(user()->ownsTable($table))
+            <a href="" class="btn btn-outline-success {{$anyChanges?'':'disabled'}}">
+              @icon(fa-save fa-pr)Save & Apply
+            </a>
+          @else
+            <a href="" class="btn btn-outline-success {{$anyChanges?'':'disabled'}}">
+              @icon(fa-paper-plane-o fa-pr)Submit for review
+            </a>
+          @endif
+        </div>
+      </div>
+
+    </div>
+  </div>
 @stop