implement column edit api, except sort

resources/assets/js/components/ColumnEditor.vue

@@ -16,7 +16,7 @@ Complex animated column editor for the table edit page
         </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}">
+        <tr v-for="(col, i) in columns" :key="col.id" :ref="`col${i}`" :class="{dragging: col._dragging, 'text-success': col._new}">
           <td v-if="sortable">
             <span class="btn-group">
               <button type="button" class="btn btn-outline-secondary drag-btn"
@@ -187,7 +187,7 @@ export default {
     name:       { type: String,  required: true },
     xColumns:   { type: Array,   required: true },
   },
-  data: function () {
+  data () {
     return {
       newColNum: 0,
       columns: this.xColumns,
@@ -335,7 +335,7 @@ export default {
           // if response is null, this was a New col
           // and it was discarded without a way back - hard drop
           if (_.isEmpty(resp.data)) {
-            this.$delete(this.col, n)
+            this.$delete(this.columns, n)
           }
           else {
             this.$set(this.columns, n, resp.data)
@@ -369,7 +369,7 @@ export default {
     },
 
     tdWidthStyle(cell) {
-      let w = 100;
+      let w = 10;
       if (cell == 'name') w = '14'
       if (cell == 'type') w = '12'
       if (cell == 'title') w = '14'

resources/assets/js/components/RowsEditor.vue

@@ -73,7 +73,7 @@ Rows are identified by row._id, columns by col.id
       xRows: Object, // key'd by _id
       columns: Array,
     },
-    data: function () {
+    data () {
       return {
         rows: this.xRows,
       }