stub of the row editor

resources/assets/js/app.js

@@ -68,6 +68,7 @@ $(document).on('input keypress paste keyup', 'input[data-autoalias]', function (
 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 app = new Vue({

resources/assets/js/components/RowEditor.vue

@@ -0,0 +1,86 @@
+<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)">{{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"
+             @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" type="text">
+          </td>
+        </template>
+
+        <template v-else>
+          <td v-for="col in columns">
+            {{ row[col.id] || '' }}
+          </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,
+  },
+  data: function() {
+    return {
+      rows: this.xRows,
+    }
+  },
+  methods: {
+    toggleRowDelete(_id) {
+      this.$set(this.rows[_id], '_remove', !this.rows[_id]._remove);
+    },
+    toggleRowEditing(_id) {
+      this.$set(this.rows[_id], '_editing', !this.rows[_id]._editing);
+    },
+    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'
+      }
+    },
+  }
+}
+</script>

resources/assets/sass/_helpers.scss

@@ -16,3 +16,12 @@
 .box-shadow {
 	box-shadow: 0 2px 3px rgba(black, .3);
 }
+
+.strike {
+	text-decoration: line-through;
+}
+
+// for busy loaders etc
+.opacity-fade {
+	transition: opacity .3s ease-in-out;
+}

resources/assets/sass/app.scss

@@ -20,6 +20,8 @@ html {
 @import "bootstrap-customizations/button";
 @import "bootstrap-customizations/responsive";
 @import "bootstrap-customizations/typography";
+@import "bootstrap-customizations/nav";
+@import "bootstrap-customizations/table";
 
 .bio-table {
 	td {

resources/assets/sass/bootstrap-customizations/_border.scss

@@ -15,3 +15,23 @@
 .border-2 {
 	border-width: 2px !important;
 }
+
+.rounded-top-0 {
+	border-top-left-radius: 0 !important;
+	border-top-right-radius: 0 !important;
+}
+
+.rounded-left-0 {
+	border-top-left-radius: 0 !important;
+	border-bottom-left-radius: 0 !important;
+}
+
+.rounded-right-0 {
+	border-top-right-radius: 0 !important;
+	border-bottom-right-radius: 0 !important;
+}
+
+.rounded-bottom-0 {
+	border-bottom-left-radius: 0 !important;
+	border-bottom-right-radius: 0 !important;
+}

resources/assets/sass/bootstrap-customizations/_table.scss

@@ -0,0 +1,9 @@
+.table-fixed {
+	table-layout: fixed;
+}
+
+.td-va-middle {
+	td, th {
+		vertical-align: middle !important;
+	}
+}