row undos

resources/assets/js/base-setup.js

@@ -1,4 +1,4 @@
-// window._ = require('lodash');
+//window._ = require('lodash');
 window.Popper = require('popper.js').default
 
 /**

resources/assets/js/components/Icon.vue

@@ -1,12 +1,11 @@
 <template>
-  <i :title="tooltipText">
+  <i :title="tooltipText" @click="$emit('click')">
     <span class="sr-only" v-html=srHtml></span>
   </i>
 </template>
 
 <script>
 export default {
-  inheritAttrs: false,
   props: {
     alt: String,
     srOnly: Boolean

resources/assets/js/components/RowEditor.vue

@@ -32,7 +32,12 @@
 
         <template v-else>
           <td v-for="col in columns">
-            {{ row[col.id] || '' }}
+            <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>
 
@@ -47,6 +52,8 @@
 </style>
 
 <script>
+import { merge } from 'lodash';
+
 export default {
   props: {
     route: String,
@@ -72,27 +79,30 @@ export default {
       })
     },
     toggleRowDelete(_id) {
-      let remove = !this.rows[_id]._remove;
+      let remove = !this.rows[_id]._remove
 
       this.query({
         action: remove ? 'row.remove' : 'row.restore',
         id: _id
       }, (resp) => {
-        this.$set(this.rows, _id, resp.data);
+        this.$set(this.rows, _id, resp.data)
+      })
+    },
+    submitRowChange(row) {
+      this.query({
+        action: 'row.update',
+        data: row
+      }, (resp) => {
+        this.$set(this.rows, resp.data._id, resp.data);
       })
     },
     toggleRowEditing(_id) {
       if (this.rows[_id]._remove) return false; // can't edit row marked for removal
 
-      let editing = !this.rows[_id]._editing;
+      let editing = !this.rows[_id]._editing
 
       if (!editing) {
-        this.query({
-          action: 'row.update',
-          data: this.rows[_id]
-        }, (resp) => {
-          this.$set(this.rows, _id, resp.data);
-        })
+        this.submitRowChange(this.rows[_id])
       } else {
         this.$set(this.rows[_id], '_editing', true);
       }
@@ -113,6 +123,12 @@ export default {
         backgroundColor: row._remove? '#FFC4CC': 'transparent'
       }
     },
+    isChanged (row, colId) {
+      return row._changed.indexOf(colId) > -1
+    },
+    revertCell(row, colId) {
+      this.submitRowChange(merge({}, row, { [colId]: row._orig[colId] }))
+    }
   }
 }
 </script>

resources/assets/sass/_helpers.scss

@@ -25,3 +25,7 @@
 .opacity-fade {
 	transition: opacity .3s ease-in-out;
 }
+
+.pointer {
+	cursor: pointer;
+}