Row adding, some webpack tweaks

resources/assets/js/components/RowsEditor.vue

@@ -4,7 +4,7 @@
     <tr>
       <th style="width:3rem" class="border-top-0"></th>
       <th style="width:3rem" class="border-top-0"></th>
-      <th v-for="col in columns" :class="colClasses(col)">{{col.title}}</th>
+      <th v-for="col in columns" :class="colClasses(col)" :title="col.name">{{col.title}}</th>
     </tr>
     </thead>
     <tbody>
@@ -59,6 +59,7 @@ export default {
     route: String,
     xRows: Object, // key'd by _id
     columns: Array,
+    lastPage: Boolean,
   },
   data: function() {
     return {
@@ -83,13 +84,22 @@ export default {
     },
 
     toggleRowDelete(_id) {
+      if (!_.isDefined(this.rows[_id])) return;
+
       let remove = !this.rows[_id]._remove
 
       this.query({
         action: remove ? 'row.remove' : 'row.restore',
         id: _id
       }, (resp) => {
-        this.$set(this.rows, _id, resp.data)
+        // if response is null, this was a New row
+        // and it was discarded without a way back - hard drop
+        if (_.isEmpty(resp.data)) {
+          this.$delete(this.rows, _id)
+        }
+        else {
+          this.$set(this.rows, _id, resp.data)
+        }
       })
     },
 
@@ -131,13 +141,15 @@ export default {
 
     rowStyle(row) {
       return {
-        opacity: row._remove? .8 : 1,
-        backgroundColor: row._remove? '#FFC4CC': 'transparent'
+        opacity: row._remove ? .8 : 1,
+        backgroundColor:
+          row._remove ? '#FFC4CC':
+          'transparent'
       }
     },
 
     isChanged (row, colId) {
-      return row._changed.indexOf(colId) > -1
+      return row._changed && row._changed.indexOf(colId) > -1
     },
 
     revertCell(row, colId) {

resources/assets/js/udash.js

@@ -1,5 +1,12 @@
 // subset of used lodash modules
 
-export { default as each } from 'lodash/each';
-export { default as isUndefined } from 'lodash/isUndefined';
-export { default as merge } from 'lodash/merge';
+export { default as each } from 'lodash/each'
+export { default as isUndefined } from 'lodash/isUndefined'
+export { default as merge } from 'lodash/merge'
+export { default as unset } from 'lodash/unset'
+export { default as isEmpty } from 'lodash/isEmpty'
+
+function isDefined(x) {
+  return typeof(x) !== 'undefined';
+}
+export { isDefined }

resources/assets/js/vue-init.js

@@ -1,9 +1,27 @@
 window.Vue = require('vue');
 
-Vue.component('column-editor', require('./components/ColumnEditor.vue'));
-Vue.component('row-editor', require('./components/RowEditor.vue'));
-Vue.component('v-icon', require('./components/Icon.vue'));
+const ColumnEditorCtor = Vue.component('column-editor', require('./components/ColumnEditor.vue'));
+const RowsEditorCtor = Vue.component('rows-editor', require('./components/RowsEditor.vue'));
+const IconCtor = Vue.component('v-icon', require('./components/Icon.vue'));
 
-const app = new Vue({
-  el: '#app'
-});
+// const app = new Vue({
+//   el: '#app'
+// });
+
+window.app = {
+  ColumnEditor: function(selector, data) {
+    new ColumnEditorCtor({
+      propsData: data
+    }).$mount(selector);
+  },
+  RowsEditor: function(selector, data) {
+    new RowsEditorCtor({
+      propsData: data
+    }).$mount(selector);
+  },
+  Icon: function(selector, data) {
+    new IconCtor({
+      propsData: data
+    }).$mount(selector);
+  }
+}