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

<!--
Row editor for the edit-rows or add-rows card of table editor

Rows and columns marked for removal have x._remove=true
New columns have col._new=true
Changed rows have r._changed = [ids of changed fields]
  and r._orig = [previous values]

Rows are identified by row._id, columns by col.id
-->

<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>
  import { query } from './table-editor-utils'

  export default {
    props: {
      route: String,
      xRows: Object, // key'd by _id
      columns: Array,
    },
    data: function () {
      return {
        rows: this.xRows,
      }
    },
    methods: {
      /** Send a query to the server */
      query (data, sucfn, erfn) {
        query(this.route, data, sucfn, erfn)
      },

      /** Toggle row delete status, remove new rows (when using the editor widget for added rows) */
      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)
          }
        })
      },

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

      /** Toggle editing state - edit or save */
      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)
        }
      },

      /** Compute classes for a value cell */
      colClasses (col) {
        return [
          'border-top-0',
          {
            'text-danger': col._remove,
            'strike': col._remove,
            'text-success': col._new
          }
        ]
      },

      /** Compute style for a row */
      rowStyle (row) {
        return {
          opacity: row._remove ? .8 : 1,
          backgroundColor:
            row._remove ? '#FFC4CC' :
              'transparent'
        }
      },

      /** Test if a value cell is changed */
      isChanged (row, colId) {
        return row._changed && row._changed.indexOf(colId) > -1
      },

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