UX improvements in table editor

resources/assets/js/components/ColumnEditor.vue

@@ -5,7 +5,7 @@ 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},'table-narrow','table-sm','table-fixed','td-va-middle']">
+    <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>

resources/assets/js/components/RowsEditor.vue

@@ -10,49 +10,95 @@ Rows are identified by row._id, columns by col.id
 -->
 
 <template>
-  <table class="table table-hover table-sm table-fixed td-va-middle">
-    <thead>
-    <tr>
-      <th style="width:6rem"></th>
-      <th v-for="col in columns" :class="colClasses(col)" :title="col.name">{{col.title}}</th>
-    </tr>
-    </thead>
-    <tbody>
-      <tr v-for="row in rows" :style="rowStyle(row)">
-        <td>
-          <a href="" :class="['mr-1','btn','btn-outline-danger',{'active': row._remove}]"
-             @click.prevent="toggleRowDelete(row._id)">
-            <v-icon :class="row._remove ? 'fa-undo' :  'fa-trash-o'"
-                    :alt="row._remove ? 'Undo Remove' : 'Remove'" />
-          </a><!--
-       --><a href="" :class="['btn','btn-outline-secondary',{'disabled': row._remove}]"
-                 @click.prevent="toggleRowEditing(row._id)">
-            <v-icon :class="row._editing ? 'fa-save' : 'fa-pencil'"
-                    :alt="row._editing ? 'Save' : 'Edit'" />
-          </a>
-        </td>
+  <div>
+    <div class="col-md-12 d-flex mt-3" v-if="newRows || hasPages">
+      <div v-if="hasPages" v-html="pager"></div>
 
-        <template v-if="row._editing">
-          <td v-for="col in columns" class="pr-0">
-            <input v-model="row[col.id]" :class="['form-control', { 'is-invalid': row._errors && row._errors[col.id] }]"
-                   :title="(row._errors && row._errors[col.id]) ? row._errors[col.id][0] : null"
-                   type="text" @keyup.enter="toggleRowEditing(row._id)">
-          </td>
-        </template>
+      <div class="flex-grow-1"></div>
 
-        <template v-else>
-          <td v-for="col in columns">
-            <span class="text-danger strike" title="Original value" v-if="isChanged(row, col.id)">{{row._orig[col.id]}}</span>
-            <span>{{ row[col.id] }}</span>
-            <v-icon v-if="isChanged(row, col.id)"
-                    @click="revertCell(row, col.id)"
-                    class="fa-undo text-danger pointer"
-                    alt="Revert Change" />
-          </td>
-        </template>
-      </tr>
-    </tbody>
-  </table>
+      <form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
+        <input type="hidden" name="_token" :value="csrf">
+        <input type="hidden" name="action" value="rows.add">
+        <input type="hidden" name="redirect" :value="pageUrl">
+        <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 Rows</button>
+      </form>
+
+      <a href="" class="btn btn-outline-success mr-2" v-if="newRows">
+        <v-icon class="fa-file-excel-o fa-pr" alt="CSV"></v-icon><!--
+        -->CSV
+      </a>
+
+      <form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
+        <input type="hidden" name="_token" :value="csrf">
+        <input type="hidden" name="action" value="rows.remove-empty-new">
+        <input type="hidden" name="redirect" :value="pageUrl">
+        <button class="btn btn-outline-danger">Remove Empty</button>
+      </form>
+
+      <button @click="saveAllChanges" type="button" v-if="newRows"
+              :class="['btn', this.dirtyRows ? 'btn-info' : 'btn-outline-secondary']">
+        Save Rows
+      </button>
+    </div>
+
+    <div class="col-md-12 mt-3">
+      <table class="table table-hover table-sm table-fixed td-va-middle">
+        <thead>
+        <tr>
+          <th style="width:6rem"></th>
+          <th v-for="col in columns" :class="colClasses(col)" :title="col.name">{{col.title}}</th>
+        </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :style="rowStyle(row)">
+            <td class="text-nowrap">
+              <button :class="['mr-1', 'btn', 'btn-outline-danger', {'active': row._remove}]"
+                      @click.prevent="toggleRowDelete(row._id)">
+                <v-icon :class="row._remove ? 'fa-undo' :  'fa-trash-o'"
+                        :alt="row._remove ? 'Undo Remove' : 'Remove'" />
+              </button><!--
+           --><button v-if="newRows" :class="['mr-1', 'btn', isRowChanged(row) ? 'btn-info' : 'btn-outline-secondary']"
+                      @click.prevent="submitRowChange(row)">
+                <v-icon class="fa-save" alt="Save" />
+              </button><!--
+           --><button v-else :class="['btn', 'btn-outline-secondary', {'disabled': row._remove}]"
+                      @click.prevent="toggleRowEditing(row._id)">
+                <v-icon :class="row._editing ? 'fa-save' : 'fa-pencil'"
+                        :alt="row._editing ? 'Save' : 'Edit'" />
+              </button>
+            </td>
+
+            <template v-if="row._editing || newRows">
+              <td v-for="col in columns" class="pr-0">
+                <input v-model="row[col.id]" :class="['form-control', { 'is-invalid': row._errors && row._errors[col.id] }]"
+                       :title="(row._errors && row._errors[col.id]) ? row._errors[col.id][0] : null"
+                       type="text"
+                       @input="markRowDirty(row)"
+                       @keyup.enter="toggleRowEditing(row._id)">
+              </td>
+            </template>
+
+            <template v-else>
+              <td v-for="col in columns">
+                <span class="text-danger strike" title="Original value" v-if="isChanged(row, col.id)">{{row._orig[col.id]}}</span>
+                <span>{{ row[col.id] }}</span>
+                <v-icon v-if="isChanged(row, col.id)"
+                        @click="revertCell(row, col.id)"
+                        class="fa-undo text-danger pointer"
+                        alt="Revert Change" />
+              </td>
+            </template>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="col-md-12 d-flex" v-if="hasPages">
+      <div v-if="hasPages" v-html="pager"></div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -61,7 +107,6 @@ Rows are identified by row._id, columns by col.id
   th {
     border-top: 0 none;
   }
-
 </style>
 
 <script>
@@ -69,13 +114,43 @@ Rows are identified by row._id, columns by col.id
 
   export default {
     props: {
+      /** True if pager should be enabled */
+      hasPages: Boolean,
+      /** Pager HTML */
+      pager: String,
+      /** Update route */
       route: String,
+      /** Row objects */
       xRows: Object, // key'd by _id
+      /** Array of columns */
       columns: Array,
+      /** CSRF token */
+      csrf: String,
+      /** Full URL of the current page */
+      pageUrl: String,
+      /** Indicate this is the Add Rows page */
+      newRows: {
+        type: Boolean,
+        default: false,
+      }
     },
     data () {
       return {
+        /** All rows */
         rows: this.xRows,
+        /** Number of dirty rows */
+        dirtyRows: 0,
+      }
+    },
+    watch: {
+      dirtyRows: function (value) {
+        if (value > 0) {
+          $(window).on('beforeunload', function () {
+            return 'Some row changes are not saved.';
+          });
+        } else {
+          $(window).off('beforeunload');
+        }
       }
     },
     methods: {
@@ -86,14 +161,18 @@ Rows are identified by row._id, columns by col.id
 
       /** Toggle row delete status, remove new rows (when using the editor widget for added rows) */
       toggleRowDelete (_id) {
-        if (!_.isDefined(this.rows[_id])) return
+        let row = this.rows[_id]
+        if (!_.isDefined(row)) return
 
-        let remove = !this.rows[_id]._remove
+        let remove = !row._remove
+        let wasDirty = this.isRowChanged(row)
 
         this.query({
           action: remove ? 'row.remove' : 'row.restore',
           id: _id
         }, (resp) => {
+          if (wasDirty) this.dirtyRows--
+
           // if response is null, this was a New row
           // and it was discarded without a way back - hard drop
           if (_.isEmpty(resp.data)) {
@@ -107,11 +186,14 @@ Rows are identified by row._id, columns by col.id
 
       /** Save a change */
       submitRowChange (row) {
+        let wasDirty = this.isRowChanged(row)
+
         this.query({
           action: 'row.update',
           data: row
         }, (resp) => {
           this.$set(this.rows, row._id, resp.data)
+          if (wasDirty) this.dirtyRows--
         }, (er) => {
           if (!_.isUndefined(er.errors)) {
             this.$set(this.rows[row._id], '_errors', er.errors)
@@ -122,9 +204,9 @@ Rows are identified by row._id, columns by col.id
       /** Toggle editing state - edit or save */
       toggleRowEditing (_id) {
         if (this.rows[_id]._remove) return false // can't edit row marked for removal
-        let editing = !this.rows[_id]._editing
+        let wasEditing = this.rows[_id]._editing
 
-        if (!editing) {
+        if (wasEditing || this.newRows) {
           this.submitRowChange(this.rows[_id])
         } else {
           this.$set(this.rows[_id], '_editing', true)
@@ -155,9 +237,55 @@ Rows are identified by row._id, columns by col.id
         return row._changed && row._changed.indexOf(colId) > -1
       },
 
+      /** Test if any field in the row is changed */
+      isRowChanged(row) {
+        return row._changed && row._changed.length
+      },
+
       /** Revert a value cell */
       revertCell (row, colId) {
         this.submitRowChange(_.merge({}, row, {[colId]: row._orig[colId]}))
+      },
+
+      markRowDirty(row) {
+        if (!this.newRows) return
+
+        let wasDirty = this.isRowChanged(row)
+
+        let changes = []
+        _.each(row._orig, (v, k) => {
+          if (row[k] != v) {
+            changes.push(k)
+          }
+        })
+
+        this.rows[row._id]._changed = changes;
+        let isDirty = this.isRowChanged(row)
+
+        if (wasDirty && !isDirty) this.dirtyRows--
+        else if (!wasDirty && isDirty) this.dirtyRows++
+      },
+
+      saveAllChanges() {
+        let toChange = _.filter(this.rows, (r) => {
+          return this.isRowChanged(r)
+        })
+
+        this.query({
+          action: 'row.update-many',
+          data: toChange
+        }, (resp) => {
+          _.each(resp.data, (row) => {
+            this.$set(this.rows, row._id, row)
+          })
+          this.dirtyRows = 0
+        }, (er) => {
+          // TODO
+          console.log(er)
+          // if (!_.isUndefined(er.errors)) {
+          //   this.$set(this.rows[row._id], '_errors', er.errors)
+          // }
+        })
       }
     }
   }