improve interactivity in Review page

resources/assets/js/components/ColumnEditor.vue

@@ -19,6 +19,7 @@ Complex animated column editor for the table edit page
             <th :style="tdWidthStyle('name')">Name</th>
             <th :style="tdWidthStyle('type')">Type</th>
             <th :style="tdWidthStyle('title')">Title</th>
+            <th style="width:2rem" v-if="!newTable"><!-- revert icon --></th>
             <th>
               <a href="" type="button" v-if="!newTable && orderChanged"
                  @click.prevent="resetOrder()"
@@ -90,9 +91,20 @@ Complex animated column editor for the table edit page
               </td>
             </template>
 
+            <td style="text-align: center;" v-if="!newTable">
+              <v-icon @click="discardEdit(col)"
+                      v-if="col._editing && colNeedsSave(col)"
+                      class="fa-undo text-danger pointer"
+                      alt="Revert Change" />
+            </td>
+
             <td class="text-nowrap"><!--
                 Save button
-           --><a href="" :class="['mr-1', 'btn', 'btn-outline-secondary', {'disabled': col._remove}]"
+           --><a href="" :class="[
+                'mr-1', 'btn',
+                col._editing && colNeedsSave(col) ? 'btn-info' : 'btn-outline-secondary',
+                {'disabled': col._remove}
+              ]"
                  v-if="!newTable"
                  @click.prevent="toggleColEditing(col)">
                 <v-icon v-if="col._editing" class="fa-save" alt="Save" />
@@ -210,7 +222,7 @@ export default {
   data () {
     return {
       newColNum: 0,
-      orderChanged: this.orderChanged,
+      //orderChanged: this.orderChanged,
       columns: this.xColumns,
       colTypes: ['string', 'int', 'float', 'bool'],
       debouncedSortUpdate: _.debounce(() => this.submitColOrder(), 350)
@@ -393,6 +405,11 @@ export default {
       if (!editing) {
         this.submitColChange(col)
       } else {
+        let origvals = {};
+        _.each(col, (v, k) => {
+          if (k[0] != '_') origvals[k] = v
+        })
+        this.$set(this.columns[n], '_loadvals', origvals)
         this.$set(this.columns[n], '_editing', true)
       }
     },
@@ -424,6 +441,22 @@ export default {
         this.columns = resp.data
         this.orderChanged = false
       })
+    },
+
+    colNeedsSave(col) {
+      if (!col._loadvals) return false;
+      for (const [key, value] of Object.entries(col._loadvals)) {
+        // changed if differs from orig value and also from previous value from revision
+        if (col[key] != value) return true
+      }
+      return false
+    },
+
+    discardEdit(col) {
+      col._editing = false;
+      for (const [key, value] of Object.entries(col._loadvals)) {
+        col[key] = value
+      }
     }
   }
 }

resources/assets/js/components/DraftNotePage.js

@@ -1,21 +1,38 @@
 import { query } from './table-editor-utils'
 
-export default function (dataRoute) {
+export default function (opts) {
   let $note = $('#field-note')
-  let lastText = $note.val()
+  let $submit = $('#submit-button')
+  let $emptyPrompt = $('#empty-note-prompt')
+  let lastText = $note.val().trim()
 
   let handler = _.debounce(function () {
-    query(dataRoute, {
+    query(opts.route, {
       action: 'note.set',
       text: lastText
     })
   }, 350)
 
   $note.on('input', () => {
-    let text = $note.val()
+    let text = $note.val().trim()
     if (text !== lastText) {
       lastText = text
       handler()
+
+      let empty = text.length === 0
+      if (opts.anyChanges) {
+        $submit.toggleClass('disabled', empty)
+      }
+
+      // Hide prompt text if anything is written
+      $emptyPrompt.toggleClass('hidden', !empty)
+    }
+  })
+
+  // prevent submit with empty note
+  $submit.on('click', (e) => {
+    if ($note.val().trim().length === 0) {
+      e.preventDefault()
     }
   })
 }

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

@@ -16,7 +16,7 @@
 
   $anyColChanges = $numChangedColumns || $numNewColumns || $numRemovedColumns || $colsReordered;
 
-  $anyChanges = $anyRowChanges || $anyColChanges;
+  $anyChanges = ($anyRowChanges || $anyColChanges) && strlen(trim($changeset->note)) > 0;
 @endphp
 
 @extends('table.propose.layout')
@@ -123,14 +123,20 @@
       <div class="row">
         <div class="col-md-7 offset-md-3">
           @if(user()->ownsTable($table))
-            <a href="" class="btn btn-outline-success {{$anyChanges?'':'disabled'}}">
+            <a href="" id="submit-button" 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'}}">
+            <a href="" id="submit-button" class="btn btn-outline-success {{$anyChanges?'':'disabled'}}">
               @icon(fa-paper-plane-o fa-pr)Submit for review
             </a>
           @endif
+
+          @if($anyRowChanges || $anyColChanges)
+            <span class="text-muted ml-3" id="empty-note-prompt">Write a summary to submit your changes.</span>
+          @else
+            <span class="text-danger ml-3">No changes to submit.</span>
+          @endif
         </div>
       </div>
 
@@ -141,7 +147,10 @@
 @push('scripts')
   <script>
     ready(function () {
-      app.DraftNotePage(@json($table->draftUpdateRoute))
+      app.DraftNotePage({
+        route: @json($table->draftUpdateRoute),
+        anyChanges: @json($anyRowChanges || $anyColChanges)
+      })
     })
   </script>
 @endpush