Add column formatters for the datatable component

frontend/admin/main.js

@@ -1,4 +1,3 @@
-let _ = require("lodash");
 let Vue = require("vue");
 let VueRouter = require("vue-router");
 let VueForm = require("vue-form");
@@ -18,10 +17,6 @@ Vue.use(VueForm, {
   }
 });
 
-Vue.filter("truncate", function(value) {
-  return _.truncate(value, {'length': 12 });
-});
-
 let router = new VueRouter({
   routes: [
     { path: '/', component: MainView },

frontend/admin/vue-components/AccountingView.vue

@@ -6,6 +6,7 @@
 
     <data-table
     :headers.once="table.headers"
+    :columnFormatters.once="table.columnFormatters"
     :rows="table.rows"
     :globalActions="table.globalActions"
     :rowActions="table.rowActions">
@@ -35,6 +36,13 @@
   let resources = require("admin-resources");
   let NewAccountingDialog = require("./accounting/NewAccountingDialog");
 
+  let checkIconFormatter = function(value) {
+    if(value) {
+      return '<i class="fa fa-check"></i>';
+    }
+    return '';
+  };
+
   module.exports = {
     components: {
       'new-accounting-dialog': NewAccountingDialog
@@ -46,6 +54,7 @@
           headers: [
             "ID", "Image", "Workspace", "Vol. source", "Vol. target", "Readonly"
           ],
+          columnFormatters: [undefined, undefined, checkIconFormatter, undefined, undefined, checkIconFormatter],
           rows: [],
           globalActions: [{
             label: "Create New Entry",

frontend/admin/vue-components/ContainersView.vue

@@ -5,6 +5,7 @@
     </div>
     <data-table
     :headers.once="table.headers"
+    :columnFormatters.once="table.columnFormatters"
     :rows="table.rows"
     :globalActions="table.globalActions"
     :rowActions="table.rowActions">
@@ -21,12 +22,18 @@
 
 <script>
   let resources = require("admin-resources");
+  let _ = require("lodash");
+
+  let truncate = function(value) {
+    return _.truncate(value, {'length': 24});
+  };
 
   module.exports = {
     data: function () {
       return {
         table: {
           headers: ["URL ID", "User", "Image", "Docker ID", "Mapping ID"],
+          columnFormatters: [truncate, undefined, undefined, truncate, truncate],
           rows: [],
           rowActions: [{
             label: "Stop",

frontend/admin/vue-components/accounting/NewAccountingDialog.vue

@@ -7,7 +7,7 @@
           <label class="control-label">Image Name</label>
           <select name="image_name" class="form-control" required v-model="model.image_name">
             <option v-for="imageName in imageNames">
-              {{imageName}}
+              {{ imageName }}
             </option>
           </select>
           <field-messages name="image_name" show="$dirty || $submitted">

frontend/tests/tests/vue/components/test_DataTable.js

@@ -1,7 +1,9 @@
-var DataTable = require("toolkit").DataTable;
-var helpers = require("helpers");
+let DataTable = require("toolkit").DataTable;
+let helpers = require("helpers");
+let _ = require("lodash");
 
 QUnit.module("DataTable");
+
 QUnit.test("rendering", function (assert) {
   assert.equal(helpers.getRenderedText(DataTable, {
     headers: ["foo", "bar"],
@@ -15,4 +17,21 @@ QUnit.test("rendering", function (assert) {
       callback: function() {}
     }]
   }), "New foobar Actions 12 Remove34 Remove");
+
+  let checkIconFormatter = function(value) {
+    return '<i class="fa fa-check" v-if="' + value + '"></i>';
+  };
+
+  let truncate = function(value) {
+    return _.truncate(value, {'length': 24});
+  };
+
+  assert.equal(helpers.getRenderedText(DataTable, {
+    headers: ["ID", "name", "checked"],
+    rows: [
+      ["12345678901234567890123456789", "JohnDoe", false],
+      ["98765432109876543210987654321", "JaneDoe", true]
+    ],
+    columnFormatters: [truncate, undefined, checkIconFormatter]
+  }).trim(), "IDnamechecked  123456789012345678901...JohnDoe 987654321098765432109...JaneDoe");
 });

frontend/toolkit/DataTable.vue

@@ -13,10 +13,9 @@
         </thead>
         <tbody>
           <tr v-for="(row, row_index) in rows">
-            <template v-for="(value, col_index) in row">
-              <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
-              <td v-else>{{value}}</td>
-            </template>
+            <td
+            v-for="(value, col_index) in row"
+            v-html="format(value, col_index)"></td>
             <td>
               <button v-for="action in rowActions"
               :class="buttonClassFromType(action.type)"
@@ -31,18 +30,27 @@
 </template>
 
 <script>
+  let _ = require('lodash');
+
   module.exports = {
-    props: [
-      "headers", "rows", "globalActions", "rowActions"
-    ],
+    props: {
+      headers: { type: Array, required: true },
+      columnFormatters: { type: Array, default: () => {return [];} },
+      rows: { type: Array, required: true },
+      globalActions: { type: Array, default: () => {return [];} },
+      rowActions: { type: Array, default: () => {return [];} }
+    },
     methods: {
-      isBoolean: function(value) {
-        return typeof(value) === "boolean";
-      },
       buttonClassFromType: function(value = "danger") {
         let cls = {"btn": true};
         cls["btn-" + value] = true;
         return cls;
+      },
+      format: function(value, col_index) {
+        if(_.isFunction(this.columnFormatters[col_index])) {
+          return this.columnFormatters[col_index](value);
+        }
+        return value;
       }
     }
   };