Row edit and delete card working

resources/assets/js/components/RowEditor.vue

@@ -17,7 +17,7 @@
           </a>
         </td>
         <td>
-          <a href="" class="btn btn-outline-secondary"
+          <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'" />
@@ -59,11 +59,43 @@ export default {
     }
   },
   methods: {
+    busy (yes) {
+      $('#draft-busy').css('opacity', yes ? 1 : 0)
+    },
+    query (data, sucfn) {
+      this.busy(true)
+      if (!sucfn) sucfn = ()=>{}
+      window.axios.post(this.route, data).then(sucfn).catch((e) => {
+        console.error(e)
+      }).then(() => {
+        this.busy(false)
+      })
+    },
     toggleRowDelete(_id) {
-      this.$set(this.rows[_id], '_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);
+      })
     },
     toggleRowEditing(_id) {
-      this.$set(this.rows[_id], '_editing', !this.rows[_id]._editing);
+      if (this.rows[_id]._remove) return false; // can't edit row marked for removal
+
+      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);
+        })
+      } else {
+        this.$set(this.rows[_id], '_editing', true);
+      }
     },
     colClasses(col) {
       return [