Skip to content

pfTableView: Allow use of custom templates to render cells. Added icons, links, and truncated text #512

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cdcabrera merged 1 commit into from
Jul 10, 2017
Merged

pfTableView: Allow use of custom templates to render cells. Added icons, links, and truncated text #512

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions src/table/tableview/examples/table-view-basic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

@cdcabrera cdcabrera Jul 10, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor... optionally

* <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'>
Expand Down Expand Up @@ -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">
Expand All @@ -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"}
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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",
Expand Down
86 changes: 82 additions & 4 deletions src/table/tableview/examples/table-view-with-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

@cdcabrera cdcabrera Jul 10, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above, optionally

@abkieling abkieling Jul 10, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cdcabrera I think $filter('filter') is being used incorrectly in some cases where we need an exact match. I submitted a PR a while ago using lodash but it could have been pure javascript as well.

@cdcabrera cdcabrera Jul 10, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good good @akieling I'll add another inline callout on this PR

* <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'>
Expand All @@ -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>
Expand Down Expand Up @@ -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>

Expand All @@ -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"}
];

Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -283,6 +357,10 @@
}
}

function onNameClick (name) {
$scope.actionsText = "You clicked on " + name + "\n" + $scope.actionsText;
}

$scope.filterConfig = {
fields: [
{
Expand Down
27 changes: 25 additions & 2 deletions src/table/tableview/table-view.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand Down Expand Up @@ -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});

@cdcabrera cdcabrera Jul 10, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Preference of LoDash vs $filter ... looks like acceptable behavior based on the documentation, personal preference, or something Angular specific?

@dtaylor113 dtaylor113 Jul 10, 2017

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously, we tried to limit our use of LoDash just to minimize upgrade concerns.


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});

@cdcabrera cdcabrera Jul 10, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same LoDash vs $filter comment...

@dtaylor113 dtaylor113 Jul 10, 2017

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think since this is an angular repo., it's better to use the angular $filter


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);
Expand Down
7 changes: 6 additions & 1 deletion src/table/tableview/table-view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}"
Expand Down
Loading