Vue Attract: Sort/filterable table based on Vue

Initial commit implementing sortable and filterable tables for attract
using Vue.

src/scripts/js/es6/common/vuecomponents/attracttable/rows/AttractRowBase.js

@@ -0,0 +1,14 @@
+let RowBase = pillar.vuecomponents.table.rows.RowBase;
+
+class AttractRowBase extends RowBase {
+    constructor(underlyingObject) {
+        super(underlyingObject);
+        pillar.events.Nodes.onUpdated(this.getId(), this.onRowUpdated.bind(this));
+    }
+
+    onRowUpdated(event, updatedObj) {
+        this.underlyingObject = updatedObj;
+    }
+}
+
+export { AttractRowBase }

src/scripts/js/es6/common/vuecomponents/attracttable/rows/AttractRowsSourceBase.js

@@ -0,0 +1,38 @@
+let RowObjectsSourceBase = pillar.vuecomponents.table.rows.RowObjectsSourceBase;
+
+class AttractRowsSourceBase extends RowObjectsSourceBase {
+    constructor(projectId, node_type, rowClass) {
+        super(projectId);
+        this.node_type = node_type;
+        this.rowClass = rowClass;
+    }
+
+    createRow(node) {
+        let row = new this.rowClass(node);
+        row.thenInit();
+        this.registerListeners(row);
+        return row;
+    }
+
+    initRowObjects(nodes) {
+        this.rowObjects = nodes.map(this.createRow.bind(this));
+        pillar.events.Nodes.onCreated(this.node_type, this.onNodeCreated.bind(this));
+    }
+
+    registerListeners(rowObject) {
+        pillar.events.Nodes.onDeleted(rowObject.getId(), this.onNodeDeleted.bind(this));
+    }
+
+    onNodeDeleted(event, nodeId) {
+        this.rowObjects = this.rowObjects.filter((rowObj) => {
+            return rowObj.getId() !== nodeId;
+        });
+    }
+
+    onNodeCreated(event, node) {
+        let rowObj = this.createRow(node);
+        this.rowObjects = this.rowObjects.concat(rowObj);
+    }
+}
+
+export { AttractRowsSourceBase }

src/scripts/js/es6/common/vuecomponents/attracttable/rows/TaskEventListener.js

@@ -0,0 +1,37 @@
+/**
+ * Helper class that listens to events triggered when a RowObject task is updated/created/deleted and keep the tasks
+ * array of a RowObject up to date accordingly.
+ */
+
+export class TaskEventListener {
+    constructor(rowWithTasks) {
+        this.rowObject = rowWithTasks;
+    }
+
+    register() {
+        pillar.events.Nodes.onParentCreated(this.rowObject.getId(), 'attract_task', this.onTaskCreated.bind(this));
+        this.rowObject.tasks.forEach(this.registerEventListeners.bind(this));
+    }
+
+    registerEventListeners(task) {
+        pillar.events.Nodes.onUpdated(task._id, this.onTaskUpdated.bind(this));
+        pillar.events.Nodes.onDeleted(task._id, this.onTaskDeleted.bind(this));
+    }
+
+    onTaskCreated(event, newTask) {
+        this.registerEventListeners(newTask);
+        this.rowObject.tasks = this.rowObject.tasks.concat(newTask);
+    }
+
+    onTaskUpdated(event, updatedTask) {
+        this.rowObject.tasks = this.rowObject.tasks.map((t) => {
+            return t._id === updatedTask._id ? updatedTask : t;
+        });
+    }
+
+    onTaskDeleted(event, taskId) {
+        this.rowObject.tasks = this.rowObject.tasks.filter((t) => {
+            return t._id !== taskId;
+        });
+    }
+}