feat: all row events added (#8)

* feat: all row events added

* chore: event refactor and event factory

* chore: add tests and refactor events

* chore: fix merge no return

* chore: fix linting issues

* chore: fixed lint and test issues for events

* chore: fixing travis CI build errors

* chore: fix  App.vue for cypress tests

package.json

@@ -51,7 +51,11 @@
     "url": "https://github.com/angeliski/vue-tabulator/issues"
   },
   "dependencies": {
+    "@types/dashify": "^1.0.0",
+    "@types/lodash.mergewith": "^4.6.6",
     "@types/tabulator-tables": "^4.2.4",
+    "dashify": "^2.0.0",
+    "lodash.mergewith": "^4.6.2",
     "tabulator-tables": "^4.2.2",
     "vue-class-component": "^7.1.0",
     "vue-property-decorator": "^8.2.1"

src/App.vue

@@ -48,17 +48,25 @@ import VueTabulator from './components/TabulatorComponent.vue';
 })
 export default class App extends Vue {
   public data = [{ name: 'Teste', age: 13 }];
+  public columns = [
+        {
+          title: 'Name',
+          field: 'name',
+          sorter: 'string',
+          width: 200,
+          editor: true,
+        },
+      ]
 
-  public options = {
-    columns: [
-      {
-        title: 'Name',
-        field: 'name',
-        sorter: 'string',
-        width: 200,
-        editor: true,
-      },
-    ],
+  get options() {
+    const vm = this
+    return {
+      columns: this.columns,
+      rowClick: function(e: Event, row: Tabulator.RowComponent) {
+        console.log('I clicked a row',vm,e,row)
+        vm.newRow()
+      }
+    }
   };
 
   updateRow() {

src/components/TabulatorComponent.vue

@@ -11,8 +11,12 @@ import {
   Component, Prop, Vue, Watch, Model,
 } from 'vue-property-decorator';
 import { IntegrationOptions, UpdateStrategy } from '@/types';
-
+import mergeWith from 'lodash.mergewith'
+import merge from '../utilities/merge'
 const Tabulator = require('tabulator-tables');
+import eventFactory from '../feature/event-factory'
+import cellEvents from '../feature/events/cell-events'
+import rowEvents from '../feature/events/row-events'
 
 @Component({
   name: 'TabulatorComponent',
@@ -23,6 +27,11 @@ export default class TabulatorComponent extends Vue {
 
   private tabulatorInstance: Tabulator | null = null;
 
+  get eventOptions(): Object {
+    const events = eventFactory.bind(this)
+    return {...events(rowEvents), ...events(cellEvents)}
+  }
+
   @Prop({ default: () => ({}) })
   private options?: Tabulator.Options;
 
@@ -44,8 +53,9 @@ export default class TabulatorComponent extends Vue {
 
   @Watch('options', { deep: true })
   private updateOptions() {
+    
     this.resolvedOptions = {
-      ...this.options,
+      ...mergeWith(this.eventOptions, this.options, merge),
       data: this.tableData,
     };
 

src/feature/event-factory.ts

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import dashify from 'dashify';
+
+export default function (this: Vue, events: string[]): Object {
+  const vm = this;
+  const obj: {[index:string] : {}} = {};
+  events.forEach((event) => {
+    obj[event] = (...args: any[]) => {
+      vm.$emit(dashify(event), ...args);
+    };
+  });
+  return obj;
+}

src/feature/events/cell-events.ts

@@ -0,0 +1,18 @@
+const cellEvents: string[] = [
+  'cellClick',
+  'cellDblClick',
+  'cellContext',
+  'cellTap',
+  'cellDblTap',
+  'cellTapHOld',
+  'cellMouseEnter',
+  'cellMouseLeave',
+  'cellMouseOver',
+  'cellMouseOut',
+  'cellMouseMove',
+  'cellEditing',
+  'cellEditCancelled',
+  'cellEdited',
+]
+
+export default cellEvents

src/feature/events/row-events.ts

@@ -0,0 +1,20 @@
+const rowEvents: string[] = [
+  'rowClick',
+  'rowDblClick',
+  'rowContext',
+  'rowTap',
+  'rowDblTap',
+  'rowTapHold',
+  'rowMouseEnter',
+  'rowMouseLeave',
+  'rowMouseOver',
+  'rowMouseOut',
+  'rowMouseMove',
+  'rowAdded',
+  'rowUpdated',
+  'rowDeleted',
+  'rowMoved',
+  'rowResized',
+]
+
+export default rowEvents

src/utilities/joint.ts

@@ -0,0 +1,28 @@
+// ----------------------------------------//
+// Just pick the most appropriate version //
+// ----------------------------------------//
+// Attribution: https://github.com/Dayjo/joint
+/**
+ * Joint for joining more than 2 functions.
+ * Joins an array of functions together to return a single function
+ * @param  {array} a An array of functions
+ * @return {function} Returns a function which is an accumilation of functions in 'a'
+ */
+export default function joint(a: Function[]): Function {
+  // const b: Function;
+  let C: any;
+
+  const b = a[(a.length - 1)];
+
+  a.pop();
+
+  if (a.length > 1) {
+    C = joint(a);
+  } else {
+    [C] = a;
+  }
+
+  return function joined(...args: any[]) {
+    b.apply(new C(...args), args);
+  };
+}

src/utilities/merge.ts

@@ -0,0 +1,8 @@
+import joint from './joint';
+
+export default function merge(objValue: any, srcValue: any, key: string): any | undefined {
+  if (typeof objValue === 'function' && typeof srcValue === 'function') {
+    return joint([objValue, srcValue]);
+  }
+  return undefined;
+}

tests/e2e/specs/vue-tabulator-spec-e2e.js

@@ -11,10 +11,16 @@ describe('VueTabulator', () => {
     cy.get('#row').click();
     cy.contains('.tabulator-cell', 'Teste 2');
   });
-
+  
   it('Bind options to tabulator', () => {
     cy.visit('/');
     cy.get('#column').click();
     cy.contains('.tabulator-col-title', 'age');
   });
+
+  it('Fires events on row click', () => {
+    cy.visit('/')
+    cy.get('.tabulator-cell').click()
+    cy.contains('.tabulator-cell', 'Teste 2');
+  })
 });

tests/unit/joint.spec.ts

@@ -0,0 +1,34 @@
+import joint from '@/utilities/joint'
+
+describe('joint.ts', () => {
+  test('joins 2 functions with no params', () => {
+    const mock1 = jest.fn(() => 0)
+    const mock2 = jest.fn(() => 2)
+    const fn3 = joint([mock1,mock2])
+    fn3()
+    expect(mock1.mock.calls.length).toEqual(1);
+    expect(mock2.mock.calls.length).toEqual(1);
+  });
+  test('join 2 functions with same params', () => {
+    const mock1 = jest.fn((a,b) => a * b)
+    const mock2 = jest.fn((a,b) => a + b)
+    const fn3 = joint([mock1,mock2])
+    fn3(1,2)
+    expect(mock1.mock.calls.length).toEqual(1);
+    expect(mock2.mock.calls.length).toEqual(1);
+    expect(mock1.mock.calls[0][0]).toEqual(1);
+    expect(mock1.mock.calls[0][1]).toEqual(2);
+    expect(mock2.mock.calls[0][0]).toEqual(1);
+    expect(mock2.mock.calls[0][1]).toEqual(2);
+  });
+  test('joins more than 2 functions', () => {
+    const mock1 = jest.fn((a,b) => a * b)
+    const mock2 = jest.fn((a,b) => a + b)
+    const mock3 = jest.fn((a,b) => a + b)
+    const fn3 = joint([mock1,mock2,mock3])
+    fn3(1,2)
+    expect(mock1.mock.calls.length).toEqual(1)
+    expect(mock2.mock.calls.length).toEqual(1)
+    expect(mock3.mock.calls.length).toEqual(1)
+  })
+});

tests/unit/merge.spec.ts

@@ -0,0 +1,18 @@
+import merge from '@/utilities/merge'
+
+describe('merge.ts', () => {
+  test('merges 2 functions together', () => {
+    const mock1 = jest.fn(() => 0)
+    const mock2 = jest.fn(() => 1 + 1)
+    const merged = merge(mock1, mock2, 'key')
+    merged()
+    expect(mock1.mock.calls.length).toEqual(1);
+    expect(mock2.mock.calls.length).toEqual(1);
+  });
+  test('if params are not functions no return value', () => {
+    const mock1 = jest.fn(() => 0)
+    const mock2 = 'should not return function'
+    const merged = merge(mock1, mock2, 'key')
+    expect(merged).toEqual(undefined);
+  });
+});