Merge pull request #666 from akieling/angular-patternfly-665

pfTableView: change templateFn to receive the row item as second parameter

Author: jeff-phillips-18

src/table/tableview/examples/table-view-basic.js

@@ -20,7 +20,7 @@
   * <ul style='list-style-type: none'>
   *   <li>.header     - (string) Text label for a column header
   *   <li>.itemField    - (string) Item field to associate with a particular column.
-  *   <li>.templateFn - (function) (optional) Template function used to render each cell of the column. Pro: more performant than `htmlTemplate`. Con: doesn't support AngularJS directives in the template, therefore it doesn't support things like ng-click. Example: <pre>templateFn: value => `<span class="text-danger">${value}</span>`</pre>
+  *   <li>.templateFn - (function(value, item)) (optional) Template function used to render each cell of the column. Pro: more performant than `htmlTemplate`. Con: doesn't support AngularJS directives in the template, therefore it doesn't support things like ng-click. Example: <pre>templateFn: (value, item) => `<a href="${item.id}">${value}</a>`</pre>
   *   <li>.htmlTemplate - (string) (optional) id/name of an embedded ng/html template. Pro: supports AngularJS directives in the template. Con: poor performance on large tables. Ex: htmlTemplate="name_template.html".  The template will be used to render each cell of the column.
   *        Use <code>handleColAction(key, value)</code> in the template to call the <code>colActionFn</code> callback function you specify. 'key' is the item attribute name; which should equal the itemFld of a column.
   *       'value' is the item[key] value.
@@ -110,7 +110,7 @@
             { header: "Status", itemField: "status", htmlTemplate: "status_template.html" },
             { header: "Name", itemField: "name", htmlTemplate: "name_template.html", colActionFn: onNameClick },
             { header: "Address", itemField: "address"},
-            { header: "City", itemField: "city", templateFn: function(value) { return '<span class="text-success">' + value + '</span>' } },
+            { header: "City", itemField: "city", templateFn: function(value, item) { return '<a href="#' + item.name + '" title="' + item.address + '">' + value + '</span>' } },
             { header: "State", itemField: "state"}
           ];
 

src/table/tableview/examples/table-view-with-toolbar.js

@@ -28,7 +28,7 @@
  * <ul style='list-style-type: none'>
  *   <li>.header     - (string) Text label for a column header
  *   <li>.itemField    - (string) Item field to associate with a particular column.
- *   <li>.templateFn - (function) (optional) Template function used to render each cell of the column. Pro: more performant than `htmlTemplate`. Con: doesn't support AngularJS directives in the template, therefore it doesn't support things like ng-click. Example: <pre>templateFn: value => `<span class="text-danger">${value}</span>`</pre>
+ *   <li>.templateFn - (function(value, item)) (optional) Template function used to render each cell of the column. Pro: more performant than `htmlTemplate`. Con: doesn't support AngularJS directives in the template, therefore it doesn't support things like ng-click. Example: <pre>templateFn: (value, item) => `<a href="${item.id}">${value}</a>`</pre>
  *   <li>.htmlTemplate - (string) (optional) id/name of an embedded ng/html template. Pro: supports AngularJS directives in the template. Con: poor performance on large tables. Ex: htmlTemplate="name_template.html".  The template will be used to render each cell of the column.
  *        Use <code>handleColAction(key, value)</code> in the template to call the <code>colActionFn</code> callback function you specify. 'key' is the item attribute name; which should equal the itemFld of a column.
  *       'value' is the item[key] value.

src/table/tableview/table-view.html

@@ -20,7 +20,7 @@
       <td ng-repeat="col in $ctrl.columns" ng-init="key = col.itemField; value = item[key]">
         <span ng-if="!col.htmlTemplate && !col.templateFn">{{value}}</span>
         <span ng-if="col.htmlTemplate" ng-include="col.htmlTemplate"></span>
-        <span ng-if="col.templateFn" ng-bind-html="$ctrl.trustAsHtml(col.templateFn(value))"></span>
+        <span ng-if="col.templateFn" ng-bind-html="$ctrl.trustAsHtml(col.templateFn(value, item))"></span>
       </td>
 
       <td ng-if="$ctrl.actionButtons && $ctrl.actionButtons.length > 0" class="table-view-pf-actions" ng-repeat="actionButton in $ctrl.actionButtons">

test/table/tableview/table-view.spec.js

@@ -33,7 +33,7 @@ describe('Component: pfTableView', function () {
       {itemField: 'uuid', header: 'ID'},
       {itemField: 'name', header: 'Name', htmlTemplate: "name_template.html", colActionFn: onNameClick},
       {itemField: 'size', header: 'Size'},
-      {itemField: 'capacity', header: 'Capacity', templateFn: function(value) { return '<span class="custom-template2">' + value + '</span>' }}
+      {itemField: 'capacity', header: 'Capacity', templateFn: function(value, item) { return '<span id="' + item.uuid + '" class="custom-template2">' + value + '</span>' }}
     ];
 
     $scope.items = [
@@ -154,7 +154,8 @@ describe('Component: pfTableView', function () {
     expect(customSpans.length).toBe(5);
     customSpans.each(function(i) {
       var result = $(this).parent().html();
-      var expected = '<span class="custom-template2">' + $scope.items[i].capacity + '</span>';
+      var item = $scope.items[i];
+      var expected = '<span id="' + item.uuid + '" class="custom-template2">' + item.capacity + '</span>';
       expect(result).toBe(expected);
     });
   });