From b44f8091a995e77bbff54b84dbde1d6976b7a2aa Mon Sep 17 00:00:00 2001
From: David Taylor <dtaylor113@gmail.com>
Date: Thu, 29 Jun 2017 14:49:57 -0400
Subject: [PATCH] pfTableView: icons, links, truncated text

---
 .../tableview/examples/table-view-basic.js    | 36 +++++++-
 .../examples/table-view-with-toolbar.js       | 86 ++++++++++++++++++-
 src/table/tableview/table-view.component.js   | 27 +++++-
 src/table/tableview/table-view.html           |  7 +-
 test/table/tableview/table-view.spec.js       | 18 +++-
 5 files changed, 163 insertions(+), 11 deletions(-)

diff --git a/src/table/tableview/examples/table-view-basic.js b/src/table/tableview/examples/table-view-basic.js
index 57005ad5d..72dc13000 100644
--- a/src/table/tableview/examples/table-view-basic.js
+++ b/src/table/tableview/examples/table-view-basic.js
@@ -16,10 +16,20 @@
   * </ul>
   * @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object.  See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder}
   * @param {array} items Array of items to display in the table view.
-  * @param {array} columns Array of table column information to display in the table's header row
+  * @param {array} columns Array of table column information to display in the table's header row and optionaly render the cells of a column.
   * <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>.htmlTemplate - (string) (optional) id/name of an embedded ng/html template. 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.
+  *   <pre>
+  *     <script type="text/ng-template" id="name_template.html">
+  *       <a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a>
+  *     </script>
+  *   </pre>
+  *   <li>.colActionFn - (function) (optional) Callback function used for the column. 'value' is passed as a paramenter to the
+  *        callback function.
   * </ul>
   * @param {array} actionButtons List of action buttons in each row
   *   <ul style='list-style-type: none'>
@@ -70,6 +80,15 @@
             <textarea rows="10" class="col-md-12">{{eventText}}</textarea>
           </div>
     </div>
+    <script type="text/ng-template" id="status_template.html">
+      <span ng-if="value === 'error'" class="pficon pficon-error-circle-o"></span>
+      <span ng-if="value === 'warning'" class="pficon pficon-warning-triangle-o"></span>
+      <span ng-if="value === 'ok'" class="pficon pficon-ok"></span>
+      {{value}}
+    </script>
+    <script type="text/ng-template" id="name_template.html">
+      <a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a>
+    </script>
   </file>
 
   <file name="module.js">
@@ -84,7 +103,8 @@
           };
 
           $scope.columns = [
-            { header: "Name", itemField: "name" },
+            { 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" },
             { header: "State", itemField: "state"}
@@ -120,6 +140,10 @@
             $scope.eventText = item.name + " : " + action.name + "\r\n" + $scope.eventText;
           };
 
+          function onNameClick (name) {
+            $scope.eventText = "You clicked on " + name + "\n" + $scope.eventText;
+          }
+
           $scope.actionButtons = [
             {
               name: 'Action',
@@ -188,48 +212,56 @@
           setTimeout(function() {
             let items = [
               {
+              status: "error",
               name: "Fred Flintstone",
               address: "20 Dinosaur Way",
               city: "Bedrock",
               state: "Washingstone"
               },
               {
+              status: "error",
               name: "John Smith",
               address: "415 East Main Street",
               city: "Norfolk",
               state: "Virginia",
               },
               {
+              status: "warning",
               name: "Frank Livingston",
               address: "234 Elm Street",
               city: "Pittsburgh",
               state: "Pennsylvania"
               },
               {
+              status: "ok",
               name: "Linda McGovern",
               address: "22 Oak Street",
               city: "Denver",
               state: "Colorado"
               },
               {
+              status: "error",
               name: "Jim Brown",
               address: "72 Bourbon Way",
               city: "Nashville",
               state: "Tennessee"
               },
               {
+              status: "ok",
               name: "Holly Nichols",
               address: "21 Jump Street",
               city: "Hollywood",
               state: "California"
               },
               {
+              status: "error",
               name: "Marie Edwards",
               address: "17 Cross Street",
               city: "Boston",
               state: "Massachusetts"
               },
               {
+              status: "ok",
               name: "Pat Thomas",
               address: "50 Second Street",
               city: "New York",
diff --git a/src/table/tableview/examples/table-view-with-toolbar.js b/src/table/tableview/examples/table-view-with-toolbar.js
index 3b1233adf..b902f598a 100644
--- a/src/table/tableview/examples/table-view-with-toolbar.js
+++ b/src/table/tableview/examples/table-view-with-toolbar.js
@@ -12,13 +12,23 @@
  *   <li>.onCheckBoxChange    - ( function(item) ) Called to notify when a checkbox selection changes, default is none
  *   <li>.itemsAvailable      - (boolean) If 'false', displays the {@link patternfly.views.component:pfEmptyState Empty State} component.
  *   <li>.showCheckboxes      - (boolean) Show checkboxes for row selection, default is true
-* </ul>
+ * </ul>
  * @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object.  See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder}
  * @param {array} items Array of items to display in the table view.
- * @param {array} columns Array of table column information to display in the table's header row
+ * @param {array} columns Array of table column information to display in the table's header row and optionaly render the cells of a column.
  * <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>.htmlTemplate - (string) (optional) id/name of an embedded ng/html template. 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.
+ *       <pre>
+ *         <script type="text/ng-template" id="name_template.html">
+ *           <a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a>
+ *         </script>
+ *       </pre>
+ *   <li>.colActionFn - (function) (optional) Callback function used for the column. 'value' is passed as a paramenter to the
+ *        callback function.
  * </ul>
  * @param {array} actionButtons List of action buttons in each row
  *   <ul style='list-style-type: none'>
@@ -36,6 +46,37 @@
  * @example
 <example module="patternfly.tableview.demo">
   <file name="index.html">
+    <style>
+      .truncate-text-container {
+          position: relative;
+          max-width: 100%;
+          padding: 0 !important;
+          display: -webkit-flex;
+          display: -moz-flex;
+          display: flex;
+          vertical-align: text-bottom !important;
+      }
+      .truncate-text-ellipsis {
+          position: absolute;
+          white-space: nowrap;
+          overflow-y: visible;
+          overflow-x: hidden;
+          text-overflow: ellipsis;
+          -ms-text-overflow: ellipsis;
+          -o-text-overflow: ellipsis;
+          max-width: 100%;
+          min-width: 0;
+          top: 0;
+          left: 0;
+      }
+      .truncate-text-container:after,
+      .truncate-text-ellipsis:after {
+          content: '-';
+          display: inline-block;
+          visibility: hidden;
+          width: 0;
+      }
+    </style>
     <div ng-controller="ViewCtrl" class="row example-container">
       <div class="col-md-12">
         <pf-toolbar id="exampleToolbar" config="toolbarConfig"></pf-toolbar>
@@ -76,6 +117,22 @@
       <div class="col-md-12">
         <textarea rows="6" class="col-md-12">{{actionsText}}</textarea>
       </div>
+      <script type="text/ng-template" id="status_template.html">
+        <span ng-if="value === 'error'" class="pficon pficon-error-circle-o"></span>
+        <span ng-if="value === 'warning'" class="pficon pficon-warning-triangle-o"></span>
+        <span ng-if="value === 'ok'" class="pficon pficon-ok"></span>
+        {{value}}
+      </script>
+      <script type="text/ng-template" id="name_template.html">
+        <a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a>
+      </script>
+      <script type="text/ng-template" id="address_template.html">
+        <span class="truncate-text-container">
+          <span class="truncate-text-ellipsis" title="{{value}}">
+            {{value}}
+          </span>
+        </span>
+      </script>
     </div>
   </file>
 
@@ -89,9 +146,10 @@
       $scope.actionsText = "";
 
       $scope.columns = [
-        { header: "Name", itemField: "name" },
+        { header: "Status", itemField: "status", htmlTemplate: "status_template.html" },
+        { header: "Name", itemField: "name", htmlTemplate: "name_template.html", colActionFn: onNameClick },
         { header: "Age", itemField: "age"},
-        { header: "Address", itemField: "address" },
+        { header: "Address", itemField: "address", htmlTemplate: "address_template.html" },
         { header: "BirthMonth", itemField: "birthMonth"}
       ];
 
@@ -120,96 +178,112 @@
 
       $scope.allItems = [
         {
+          status: "error",
           name: "Fred Flintstone",
           age: 57,
           address: "20 Dinosaur Way, Bedrock, Washingstone",
           birthMonth: 'February'
         },
         {
+          status: "ok",
           name: "John Smith",
           age: 23,
           address: "415 East Main Street, Norfolk, Virginia",
           birthMonth: 'October'
         },
         {
+          status: "warning",
           name: "Frank Livingston",
           age: 71,
           address: "234 Elm Street, Pittsburgh, Pennsylvania",
           birthMonth: 'March'
         },
         {
+          status: "ok",
           name: "Judy Green",
           age: 21,
           address: "2 Apple Boulevard, Cincinatti, Ohio",
           birthMonth: 'December'
         },
         {
+          status: "ok",
           name: "Pat Thomas",
           age: 19,
           address: "50 Second Street, New York, New York",
           birthMonth: 'February'
         },
         {
+          status: "error",
           name: "Linda McGovern",
           age: 32,
           address: "22 Oak Stree, Denver, Colorado",
           birthMonth: 'March'
         },
         {
+          status: "warning",
           name: "Jim Brown",
           age: 55,
           address: "72 Bourbon Way. Nashville. Tennessee",
           birthMonth: 'March'
         },
         {
+          status: "ok",
           name: "Holly Nichols",
           age: 34,
           address: "21 Jump Street, Hollywood, California",
           birthMonth: 'March'
         },
         {
+          status: "ok",
           name: "Wilma Flintstone",
           age: 47,
           address: "20 Dinosaur Way, Bedrock, Washingstone",
           birthMonth: 'February'
         },
         {
+          status: "warning",
           name: "Jane Smith",
           age: 22,
           address: "415 East Main Street, Norfolk, Virginia",
           birthMonth: 'April'
         },
         {
+          status: "error",
           name: "Liz Livingston",
           age: 65,
           address: "234 Elm Street, Pittsburgh, Pennsylvania",
           birthMonth: 'November'
         },
         {
+          status: "ok",
           name: "Jim Green",
           age: 23,
           address: "2 Apple Boulevard, Cincinatti, Ohio",
           birthMonth: 'January'
         },
         {
+          status: "ok",
           name: "Chris Thomas",
           age: 21,
           address: "50 Second Street, New York, New York",
           birthMonth: 'October'
         },
         {
+          status: "error",
           name: "Larry McGovern",
           age: 34,
           address: "22 Oak Stree, Denver, Colorado",
           birthMonth: 'September'
         },
         {
+          status: "warning",
           name: "July Brown",
           age: 51,
           address: "72 Bourbon Way. Nashville. Tennessee",
           birthMonth: 'May'
         },
         {
+          status: "error",
           name: "Henry Nichols",
           age: 36,
           address: "21 Jump Street, Hollywood, California",
@@ -283,6 +357,10 @@
         }
       }
 
+      function onNameClick (name) {
+         $scope.actionsText = "You clicked on " + name + "\n" + $scope.actionsText;
+      }
+
       $scope.filterConfig = {
         fields: [
           {
diff --git a/src/table/tableview/table-view.component.js b/src/table/tableview/table-view.component.js
index 000d5f2c7..7d23097eb 100644
--- a/src/table/tableview/table-view.component.js
+++ b/src/table/tableview/table-view.component.js
@@ -305,9 +305,9 @@ angular.module('patternfly.table').component('pfTableView', {
       var anNodes = document.querySelectorAll("#" + ctrl.tableId + "  tbody tr");
 
       for (i = 0; i < anNodes.length; ++i) {
-        rowData = oTable.fnGetData(anNodes[i]);
+        rowData = anNodes[i].cells;
         if (rowData !== null) {
-          visibleRows.push(rowData[ctrl.selectionMatchPropColNum]);
+          visibleRows.push(_.trim(rowData[ctrl.selectionMatchPropColNum].innerText));
         }
       }
 
@@ -339,6 +339,29 @@ angular.module('patternfly.table').component('pfTableView', {
       return retVal;
     };
 
+    ctrl.hasHTMLTemplate = function (key) {
+      var htmlTemplate = this.getHTMLTemplate(key);
+      return htmlTemplate.length > 0;
+    };
+
+    ctrl.getHTMLTemplate = function (key) {
+      var retVal = '';
+      var tableCol = $filter('filter')(ctrl.columns, {itemField: key});
+
+      if (tableCol && tableCol.length === 1 && tableCol[0].hasOwnProperty('htmlTemplate')) {
+        retVal = tableCol[0].htmlTemplate;
+      }
+      return retVal;
+    };
+
+    ctrl.handleColAction = function (key, value) {
+      var tableCol = $filter('filter')(ctrl.columns, {itemField: key});
+
+      if (tableCol && tableCol.length === 1 && tableCol[0].hasOwnProperty('colActionFn')) {
+        tableCol[0].colActionFn(value);
+      }
+    };
+
     ctrl.areActions = function () {
       return (ctrl.actionButtons && ctrl.actionButtons.length > 0) ||
         (ctrl.menuActions && ctrl.menuActions.length > 0);
diff --git a/src/table/tableview/table-view.html b/src/table/tableview/table-view.html
index 9802c51b9..3c00ecd83 100644
--- a/src/table/tableview/table-view.html
+++ b/src/table/tableview/table-view.html
@@ -16,7 +16,12 @@
       <td class="table-view-pf-select" ng-if="$ctrl.config.showCheckboxes">
         <input type="checkbox" value="item.selected" ng-model="item.selected" ng-change="$ctrl.toggleOne(item)"/>
       </td>
-      <td ng-repeat="(key, value) in item" ng-if="$ctrl.isColItemFld(key)">{{ value }}</td>
+
+      <td ng-repeat="(key, value) in item" ng-if="$ctrl.isColItemFld(key)">
+        <span ng-if="!$ctrl.hasHTMLTemplate(key)">{{value}}</span>
+        <span ng-if="$ctrl.hasHTMLTemplate(key)" ng-include="$ctrl.getHTMLTemplate(key)"></span>
+      </td>
+
       <td ng-if="$ctrl.actionButtons && $ctrl.actionButtons.length > 0" class="table-view-pf-actions" ng-repeat="actionButton in $ctrl.actionButtons">
         <div class="table-view-pf-btn">
           <button class="btn btn-default" title="{{actionButton.title}}"
diff --git a/test/table/tableview/table-view.spec.js b/test/table/tableview/table-view.spec.js
index ed86cf305..45252e422 100644
--- a/test/table/tableview/table-view.spec.js
+++ b/test/table/tableview/table-view.spec.js
@@ -23,6 +23,10 @@ describe('Component: pfTableView', function () {
     scope.$digest();
   };
 
+  function onNameClick (name) {
+    $scope.result = "You clicked on " + name;
+  }
+
   beforeEach(function () {
     $scope.config = {
       selectionMatchProp: 'uuid'
@@ -30,7 +34,7 @@ describe('Component: pfTableView', function () {
 
     $scope.columns = [
       {itemField: 'uuid', header: 'ID'},
-      {itemField: 'name', header: 'Name'},
+      {itemField: 'name', header: 'Name', htmlTemplate: "name_template.html", colActionFn: onNameClick},
       {itemField: 'size', header: 'Size'},
       {itemField: 'capacity', header: 'Capacity'}
     ];
@@ -43,7 +47,10 @@ describe('Component: pfTableView', function () {
       {uuid: '5', name: 'Five', size: 6781425410, capacity: 7600000000}
     ];
 
-    var htmlTmp = '<pf-table-view config="config" columns="columns" items="items"></pf-table-view>';
+    var htmlTmp = '<pf-table-view config="config" columns="columns" items="items"></pf-table-view>' +
+      '<script type="text/ng-template" id="name_template.html">' +
+        '<span class="custom-template" ng-click="$ctrl.handleColAction(key, value)">{{value}}</span>' +
+      '</script>';
 
     compileHTML(htmlTmp, $scope);
   });
@@ -87,4 +94,11 @@ describe('Component: pfTableView', function () {
     expect(bodyCheckboxes.length).toBe(0);
   });
 
+  it('should use an htmlTemplate if one is configured', function () {
+    var nameLinks = element.find('.custom-template');
+    expect(nameLinks.length).toBe(5);
+    eventFire(nameLinks[0], 'click');
+    expect($scope.result).toBe('You clicked on One');
+  });
+
 });