datatable.directory/resources/assets/js/components/RowsEditor.vue

<template>
  <table class="table table-hover table-sm table-fixed td-va-middle">
    <thead>
    <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)" :title="col.name">{{col.title}}</th>
    </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :style="rowStyle(row)">
        <td>
          <a href="" :class="['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>
        </td>
        <td>
          <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>

        <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>

        <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>
</template>

<style lang="scss" scoped>
  @import "base";

</style>

<script>
export default {
  props: {
    route: String,
    xRows: Object, // key'd by _id
    columns: Array,
    lastPage: Boolean,
  },
  data: function() {
    return {
      rows: this.xRows,
    }
  },
  methods: {
    busy (yes) {
      $('#draft-busy').css('opacity', yes ? 1 : 0)
    },

    query (data, sucfn, erfn) {
      this.busy(true)
      if (!sucfn) sucfn = ()=>{}
      if (!sucfn) erfn = ()=>{}
      window.axios.post(this.route, data).then(sucfn).catch((error) => {
        console.error(error.message)
        erfn(error.response.data)
      }).then(() => {
        this.busy(false)
      })
    },

    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) => {
        // 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)
        }
      })
    },

    submitRowChange(row) {
      this.query({
        action: 'row.update',
        data: row
      }, (resp) => {
        this.$set(this.rows, resp.data._id, resp.data);
      }, (er) => {
        if (!_.isUndefined(er.errors)) {
          this.$set(this.rows[row._id], '_errors', er.errors);
        }
      })
    },

    toggleRowEditing(_id) {
      if (this.rows[_id]._remove) return false; // can't edit row marked for removal

      let editing = !this.rows[_id]._editing

      if (!editing) {
        this.submitRowChange(this.rows[_id])
      } else {
        this.$set(this.rows[_id], '_editing', true);
      }
    },

    colClasses(col) {
      return [
        'border-top-0',
        {
          'text-danger': col._remove,
          'strike': col._remove,
          'text-success': col._new
        }
      ]
    },

    rowStyle(row) {
      return {
        opacity: row._remove ? .8 : 1,
        backgroundColor:
          row._remove ? '#FFC4CC':
          'transparent'
      }
    },

    isChanged (row, colId) {
      return row._changed && row._changed.indexOf(colId) > -1
    },

    revertCell(row, colId) {
      this.submitRowChange(_.merge({}, row, { [colId]: row._orig[colId] }))
    }
  }
}
</script>