[Feature] Derived columns

Author: Andrea

LICENCE LICENSELICENCE renamed to LICENSE

@@ -10,7 +10,10 @@
     body-field="results"
     id-col="id.value"
     endpoint="http://api.randomuser.me/?page=1&results=20&seed=abc"
-    :header="{'name.first': 'name', 'name.last': 'surname', gender: 'gender', phone: 'phone', 'picture.thumbnail': 'avatar', nat: 'nationality'}"
+    :header="{'name.first': 'name', 'name.last': 'surname', 'gender+phone': 'gender+', 'picture.thumbnail': 'avatar', nat: 'nationality'}"
+    :actions="{'_delete': 'Delete'}"
+    :delete="true"
+    :add-row="true"
     >
       <src2img slot="picture.thumbnail"></src2img>
     </smart-table>

index.html

@@ -14,6 +14,7 @@
           <input type="text" v-model="filters[column].model"/>
         </div>
       </th>
+      <th v-if="delete">
       </thead>
       <thead class="regular-header" :class="{ transparent: scrolledPast }">
       <tr>
@@ -27,6 +28,8 @@
             <input type="text" v-model="filters[column].model"/>
           </div>
         </th>
+        <th v-if="delete">
+        </th>
       </tr>
       </thead>
       <tfoot>
@@ -41,6 +44,7 @@
         <td v-for="footerCell in footerRow" track-by="$index">
           {{footerCell}}
         </td>
+        <td v-if="delete"></td>
       </tr>
       <tr v-if="actionsArePresent" class="action-row">
         <td class="smart-control-bar" colspan="{{span}}">
@@ -70,6 +74,9 @@
             </slot>
           </div>
         </td>
+        <td v-if="delete">
+          <button id="delete-{{key}}" @click="remove(key)">Delete</button>
+        </td>
       </tr>
       <tr v-if="addRow" class="row-new">
         <td v-if="actionsArePresent"><!-- to match the toggle checkboxes --></td>
@@ -82,6 +89,7 @@
             <option v-for="(value, label) in inputList[col]" value="{{value}}" class="input-label">{{label}}</option>
           </select>
         </td>
+        <td v-if="delete"></td>
       </tr>
       </tbody>
     </table>
@@ -121,6 +129,10 @@
         required: false,
         default: '_id'
       },
+      'delete': {
+        type: Boolean,
+        default: false
+      },
       footer: {
         required: false
       },
@@ -141,7 +153,7 @@
       actions: [Object, Array],
       endpoint: {
         type: String,
-        default: 'http://api.randomuser.me/?results=2&seed=abc'
+        default: 'http://localhost:8080'
       },
       labelCol: {
         type: String,
@@ -218,10 +230,11 @@
         return false
       },
       tableHeader () {
+        // WARNING: must not (and cannot) depend on processedSmartBody!
+
         if (this.body === undefined) {
           this.body = []
         }
-        // must not depend on processedSmartBody
         // if object return object
         if (this.header !== undefined && !Array.isArray(this.header)) {
           return this.header
@@ -248,11 +261,8 @@
       },
       mainCol () {
         // choose an appropriate default label column
-        var bodyKeys = Object.keys(this.processedSmartBody)
-        const firstEntry = this.processedSmartBody[bodyKeys[0]]
-        const firstEntryKeys = Object.keys(firstEntry)
-        if (firstEntryKeys.indexOf(this.labelCol) === -1) {
-          return firstEntryKeys[0]
+        if (Object.keys(this.tableHeader).indexOf(this.labelCol) === -1) {
+          return Object.keys(this.tableHeader)[0]
         } else {
           return this.labelCol
         }
@@ -285,7 +295,15 @@
             // filter unwanted columns
             let finalRow = {}
             Object.keys(this.tableHeader).forEach(col => {
-              let realColValue = col.split('.').reduce((o,i)=>o[i], row)
+              let realColValue = {}
+              if (/\+/.test(col)) {
+                // it's a composite column will return an object
+                col.split('+').forEach(d=>{
+                  realColValue[d] = d.split('.').reduce((o,i)=>o[i], row)
+                })
+              } else {
+                realColValue = col.split('.').reduce((o,i)=>o[i], row)
+              }
               finalRow[col] = realColValue
             })
             let idValue = this.idCol.split('.').reduce((o,i)=>o[i], row)
@@ -310,7 +328,7 @@
         return smartBody
       },
       span () {
-        return Object.keys(this.tableHeader).length + 1
+        return Object.keys(this.tableHeader).length + 1 + (this.delete ? 1 : 0)
       }
     },
     beforeCompile () {
@@ -369,7 +387,7 @@
       saveNewRow () {
         if (this.canSaveNewRow) {
           this.$dispatch('before-request')
-          this.$http.get(this.endpoint, {action: 'addRow', resource: this.newRow}).then((response) => {
+          this.$http.post(this.endpoint, {action: 'addRow', resource: this.newRow}).then((response) => {
             this.$set('error', false)
             this.$set('body', response.data.body)
             this.$dispatch('successful-request')
@@ -442,7 +460,7 @@
       toggleAllRows () {
         if (this.toggleAll === false) {
           this.toggleAll = true
-          this.selection = Object.keys(this.body)
+          this.selection = Object.keys(this.processedSmartBody)
         } else {
           this.toggleAll = false
           this.selection = []
@@ -463,19 +481,50 @@
       },
       doCommand (command) {
         this.$dispatch('before-request')
-        this.$http.get(this.endpoint, command).then((response) => {
-          if (response.data.body !== undefined || response.data.body === {}) {
-            this.$set('body', response.data.body)
+
+        // special case
+        if (/^(_remove|_delete)$/i.test(command.action)) {
+          this.$http.delete(this.endpoint, command).then(onSuccess, onFailure)
+        } else {
+          this.$http.get(this.endpoint, command).then(onSuccess, onFailure)
+        }
+
+        function onSuccess(response) {
+          if (response.data[this.bodyField] !== undefined || response.data[this.bodyField] === {}) {
+            this.$set('body', response.data[this.bodyField])
             this.$set('footer', response.data.footer)
           }
           this.$dispatch('successful-request')
           this.$dispatch('after-request')
           this.$set('error', false)
-        }, (response) => {
+        }
+
+        function onFailure(response) {
           this.$set('error', { status: response.status, data: response.data.error })
           this.$dispatch('failed-request')
           this.$dispatch('after-request')
-        })
+        }
+      },
+      remove (id) {
+        this.$dispatch('before-request')
+
+        this.$http.delete(this.endpoint + '/' + id).then(onSuccess, onFailure)
+
+        function onSuccess(response) {
+          if (response.data[this.bodyField] !== undefined || response.data[this.bodyField] === {}) {
+            this.$set('body', response.data[this.bodyField])
+            this.$set('footer', response.data.footer)
+          }
+          this.$dispatch('successful-request')
+          this.$dispatch('after-request')
+          this.$set('error', false)
+        }
+
+        function onFailure(response) {
+          this.$set('error', { status: response.status, data: response.data.error })
+          this.$dispatch('failed-request')
+          this.$dispatch('after-request')
+        }
       },
       isEditable (col) {
         if (this.editable === false) {
@@ -499,8 +548,8 @@
           this.modalEdit = {
             id: id,
             col: col,
-            currentValue: this.body[id][col],
-            previousValue: this.body[id][col],
+            currentValue: this.processedSmartBody[id][col],
+            previousValue: this.processedSmartBody[id][col],
             type: this.editType(col)
           }
           this.$broadcast('modalEdit', this.modalEdit)

src/components/SmartTable.vue

@@ -13,6 +13,7 @@ chai.use(require('chai-dom'))
 let testBody = [{_id: 0, name: 'Gennaro', age: 34}, {_id: 1, name: 'Marco', age: 22}]
 let testBody2 = [{_id: 1, name: 'Gennaro', age: 34}, {_id: 3, name: 'Marco', age: 22}]
 let testBody3 = [{_id: 1, bau: 'Gennaro', pau: 34}, {_id: 55, bau: 'Marco', pau: 22}]
+let testBodyId = [{id: 1, name: 'Gennaro', age: 34}, {id: 3, name: 'Marco', age: 22}]
 let testBodyNoId = [{name: 'Gennaro', age: 34}, {name: 'Marco', age: 22}]
 
 describe('SmartTable.vue', () => {
@@ -122,6 +123,29 @@ describe('SmartTable.vue', () => {
     vm.$children[0].next()
     expect(vm.$children[0].$refs.son.received).to.eql(true)
   })
+  it('should broadcast \'command\' with an action when command called and id-col is set', () => {
+    const inject = require('!!vue?inject!../../../src/components/SmartTable.vue')
+    const SmartTableWithMock = inject({
+      './Modal': {
+        data () {
+          this.$parent.$refs['son'] = this
+          return {received: false}
+        },
+        events: {
+          'command' () {
+            this.received = true
+          }
+        }
+      }
+    })
+    const vm = new Vue({
+      template: '<div><smart-table :body="testBodyId" :actions="[\'act1\']" id-col="id"></smart-table></div>',
+      components: {'smart-table': SmartTableWithMock},
+      data: { testBodyId }
+    }).$mount()
+    vm.$children[0].next()
+    expect(vm.$children[0].$refs.son.received).to.eql(true)
+  })
   it('should broadcast \'command\' with an action key and label when command called (simple array case)', (done) => {
     const inject = require('!!vue?inject!../../../src/components/SmartTable.vue')
     const SmartTableWithMock = inject({
@@ -188,6 +212,27 @@ describe('SmartTable.vue', () => {
     vm.$children[0].selection = [1, 3]
     vm.$children[0].next()
   })
+  it('should broadcast \'command\' with an array of id and labels when command called with id-col changed', (done) => {
+    const inject = require('!!vue?inject!../../../src/components/SmartTable.vue')
+    const SmartTableWithMock = inject({
+      './Modal': {
+        events: {
+          'command' (command) {
+            expect(command.selection).to.eql([{key: 1, label: 'Gennaro'}, {key: 3, label: 'Marco'}])
+            done()
+          }
+        }
+      }
+    })
+    const vm = new Vue({
+      template: '<div><smart-table :body="testBodyId" :actions="[\'act1\']" id-col="id" label-col="name"></smart-table></div>',
+      components: {'smart-table': SmartTableWithMock},
+      data: { testBodyId }
+    }).$mount()
+    vm.$children[0].action = 'act1'
+    vm.$children[0].selection = [1, 3]
+    vm.$children[0].next()
+  })
   it('should extend an array of action names as an object', () => {
     const vm = new Vue({
       template: '<div><smart-table :body="testBody" :actions="[\'doge\',\'such test\']"></smart-table></div>',
@@ -352,6 +397,26 @@ describe('SmartTable.vue', () => {
     }).$mount()
     expect(vm.$children[0].mainCol).to.eql('bau')
   })
+  it('should show a delete button if delete is set to true', () => {
+    const vm = new Vue({
+      template: '<div><smart-table :body="testBody2" :delete="true"></smart-table></div>',
+      components: {SmartTable},
+      data: {testBody2}
+    }).$mount()
+    expect(vm.$el.querySelectorAll('button#delete-3').length).to.eql(1)
+  })
+  it('should be able to form derived columns', () => {
+    const vm = new Vue({
+      template: '<div><smart-table :body="testBody" :header="subset"></smart-table></div>',
+      components: {SmartTable},
+      data: {
+        subset: {'name+age': 'Nome+'},
+        testBody: [{_id: 1, name: 'Gennaro', age: 34, hidden: 'pupu'}, {_id: 55, name: 'Marco', age: 22, hidden: 'caca'}]
+      }
+    }).$mount()
+    expect(vm.$el.querySelectorAll('td').length).to.eql(2)
+    expect(vm.$el.querySelector('#value-1-name\\+age')).to.exist
+  })
   // todo: bring this to e2e
   /* it('double clicking a field should put it in edit mode', (done) => {
     const vm = new Vue({