From d251d6c2e301dc00115c84220df9b66d4f6d80d5 Mon Sep 17 00:00:00 2001 From: Randall Wood Date: Mon, 3 Jul 2017 06:35:30 -0400 Subject: [PATCH 1/4] Add ability to put action buttons into the empty state associated with views. Addresses #510. --- .../tableview/examples/table-view-basic.js | 28 ++++++++++++++++++- .../examples/table-view-with-toolbar.js | 1 + src/table/tableview/table-view.component.js | 3 +- src/table/tableview/table-view.html | 2 +- src/views/cardview/card-view.component.js | 28 ++++++++++++++++++- src/views/cardview/card-view.html | 2 +- src/views/listview/examples/list-view.js | 28 ++++++++++++++++++- src/views/listview/list-view.component.js | 3 +- src/views/listview/list-view.html | 2 +- 9 files changed, 89 insertions(+), 8 deletions(-) diff --git a/src/table/tableview/examples/table-view-basic.js b/src/table/tableview/examples/table-view-basic.js index 57005ad5d..39bb575a4 100644 --- a/src/table/tableview/examples/table-view-basic.js +++ b/src/table/tableview/examples/table-view-basic.js @@ -34,6 +34,7 @@ *
  • .actionFn - (function(action)) Function to invoke when the action selected * * @param {object} emptyStateConfig Optional configuration settings for the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component + * @param {array} emptyStateActionButtons Optional buttons to display under the icon, title, and informational paragraph in the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component * @example @@ -46,7 +47,8 @@ columns="columns" items="items" action-buttons="actionButtons" - menu-actions="menuActions"> + menu-actions="menuActions" + empty-state-action-buttons="emptyStateActionButtons">
    @@ -112,6 +114,30 @@ } }; + $scope.emptyStateActionButtons = [ + { + name: 'Main Action', + title: 'Perform an action', + actionFn: performAction, + type: 'main' + }, + { + name: 'Secondary Action 1', + title: 'Perform an action', + actionFn: performAction + }, + { + name: 'Secondary Action 2', + title: 'Perform an action', + actionFn: performAction + }, + { + name: 'Secondary Action 3', + title: 'Perform an action', + actionFn: performAction + } + ]; + function handleCheckBoxChange (item) { $scope.eventText = item.name + ' checked: ' + item.selected + '\r\n' + $scope.eventText; }; diff --git a/src/table/tableview/examples/table-view-with-toolbar.js b/src/table/tableview/examples/table-view-with-toolbar.js index 3b1233adf..b1a6e6fbf 100644 --- a/src/table/tableview/examples/table-view-with-toolbar.js +++ b/src/table/tableview/examples/table-view-with-toolbar.js @@ -33,6 +33,7 @@ *
  • .actionFn - (function(action)) Function to invoke when the action selected * * @param {object} emptyStateConfig Optional configuration settings for the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component + * @param {array} emptyStateActionButtons Optional buttons to display under the icon, title, and informational paragraph. See the {@link patternfly.views.component:pfEmptyState Empty State} component * @example diff --git a/src/table/tableview/table-view.component.js b/src/table/tableview/table-view.component.js index 000d5f2c7..ff12a128b 100644 --- a/src/table/tableview/table-view.component.js +++ b/src/table/tableview/table-view.component.js @@ -7,7 +7,8 @@ angular.module('patternfly.table').component('pfTableView', { items: '<', actionButtons: ' - + diff --git a/src/views/cardview/card-view.component.js b/src/views/cardview/card-view.component.js index 4702b46f6..5d21ad69d 100644 --- a/src/views/cardview/card-view.component.js +++ b/src/views/cardview/card-view.component.js @@ -24,6 +24,7 @@ *
  • .itemsAvailable - (boolean) If 'false', displays the {@link patternfly.views.component:pfEmptyState Empty State} component. * * @param {object} emptyStateConfig Optional configuration settings for the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component + * @param {array} emptyStateActionButtons Optional buttons to display under the icon, title, and informational paragraph in the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component * @param {Array} items the data to be shown in the cards
    * * @example @@ -41,7 +42,7 @@
    - +
    {{item.name}}
    @@ -203,6 +204,30 @@ url : '#/api/patternfly.views.component:pfEmptyState' } }; + + $scope.emptyStateActionButtons = [ + { + name: 'Main Action', + title: 'Perform an action', + actionFn: performAction, + type: 'main' + }, + { + name: 'Secondary Action 1', + title: 'Perform an action', + actionFn: performAction + }, + { + name: 'Secondary Action 2', + title: 'Perform an action', + actionFn: performAction + }, + { + name: 'Secondary Action 3', + title: 'Perform an action', + actionFn: performAction + } + ]; } ]); @@ -212,6 +237,7 @@ angular.module('patternfly.views').component('pfCardView', { bindings: { config: '=?', emptyStateConfig: '=?', + emptyStateActionButtons: '=?', items: '=', eventId: '@id' }, diff --git a/src/views/cardview/card-view.html b/src/views/cardview/card-view.html index b38190d4a..6981e8562 100755 --- a/src/views/cardview/card-view.html +++ b/src/views/cardview/card-view.html @@ -12,5 +12,5 @@
    - + diff --git a/src/views/listview/examples/list-view.js b/src/views/listview/examples/list-view.js index dde919a86..cd7ee0084 100644 --- a/src/views/listview/examples/list-view.js +++ b/src/views/listview/examples/list-view.js @@ -58,6 +58,7 @@ * @param {function (action, item))} updateMenuActionForItemFn function(action, item) Used to update a menu action based on the current item * @param {object} customScope Object containing any variables/functions used by the transcluded html, access via $ctrl.customScope. * @param {object} emptyStateConfig Optional configuration settings for the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component +* @param {array} emptyStateActionButtons Optional buttons to display under the icon, title, and informational paragraph in the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component * @example @@ -93,7 +94,8 @@ menu-actions="menuActions" update-menu-action-for-item-fn="updateMenuActionForItemFn" menu-class-for-item-fn="getMenuClass" - hide-menu-for-item-fn="hideMenuActions"> + hide-menu-for-item-fn="hideMenuActions" + empty-state-action-buttons="emptyStateActionButtons">
    {{item.name}} @@ -318,6 +320,30 @@ } }; + $scope.emptyStateActionButtons = [ + { + name: 'Main Action', + title: 'Perform an action', + actionFn: performAction, + type: 'main' + }, + { + name: 'Secondary Action 1', + title: 'Perform an action', + actionFn: performAction + }, + { + name: 'Secondary Action 2', + title: 'Perform an action', + actionFn: performAction + }, + { + name: 'Secondary Action 3', + title: 'Perform an action', + actionFn: performAction + } + ]; + $scope.items = [ { name: "Fred Flintstone", diff --git a/src/views/listview/list-view.component.js b/src/views/listview/list-view.component.js index 052a3a084..a6d36ccbd 100644 --- a/src/views/listview/list-view.component.js +++ b/src/views/listview/list-view.component.js @@ -11,7 +11,8 @@ angular.module('patternfly.views').component('pfListView', { actions: '=?', updateActionForItemFn: '=?', customScope: '=?', - emptyStateConfig: '=?' + emptyStateConfig: '=?', + emptyStateActionButtons: '=?' }, transclude: { expandedContent: '?listExpandedContent' diff --git a/src/views/listview/list-view.html b/src/views/listview/list-view.html index 731bed42b..e0a9952a8 100644 --- a/src/views/listview/list-view.html +++ b/src/views/listview/list-view.html @@ -66,5 +66,5 @@
    - + From 8ffbcc720313620a286aee9199f18bb594955cec Mon Sep 17 00:00:00 2001 From: Randall Wood Date: Sat, 8 Jul 2017 04:59:30 -0400 Subject: [PATCH 2/4] Add function to examples to record clicking on empty state action buttons in example lists of events. Also fix one spelling error. --- src/table/tableview/examples/table-view-basic.js | 12 ++++++++---- src/views/cardview/card-view.component.js | 12 ++++++++---- src/views/listview/examples/list-view.js | 14 +++++++++----- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/table/tableview/examples/table-view-basic.js b/src/table/tableview/examples/table-view-basic.js index 39bb575a4..050bc91c1 100644 --- a/src/table/tableview/examples/table-view-basic.js +++ b/src/table/tableview/examples/table-view-basic.js @@ -103,6 +103,10 @@ showCheckboxes: true }; + var performEmptyStateAction = function (action) { + $scope.eventText = action.name + "\r\n" + $scope.eventText; + }; + $scope.emptyStateConfig = { icon: 'pficon-warning-triangle-o', title: 'No Items Available', @@ -118,23 +122,23 @@ { name: 'Main Action', title: 'Perform an action', - actionFn: performAction, + actionFn: performEmptyStateAction, type: 'main' }, { name: 'Secondary Action 1', title: 'Perform an action', - actionFn: performAction + actionFn: performEmptyStateAction }, { name: 'Secondary Action 2', title: 'Perform an action', - actionFn: performAction + actionFn: performEmptyStateAction }, { name: 'Secondary Action 3', title: 'Perform an action', - actionFn: performAction + actionFn: performEmptyStateAction } ]; diff --git a/src/views/cardview/card-view.component.js b/src/views/cardview/card-view.component.js index 5d21ad69d..1a6191340 100644 --- a/src/views/cardview/card-view.component.js +++ b/src/views/cardview/card-view.component.js @@ -194,6 +194,10 @@ }, ] + var performEmptyStateAction = function (action) { + $scope.eventText = action.name + "\r\n" + $scope.eventText; + }; + $scope.emptyStateConfig = { icon: 'pficon-warning-triangle-o', title: 'No Items Available', @@ -209,23 +213,23 @@ { name: 'Main Action', title: 'Perform an action', - actionFn: performAction, + actionFn: performEmptyStateAction, type: 'main' }, { name: 'Secondary Action 1', title: 'Perform an action', - actionFn: performAction + actionFn: performEmptyStateAction }, { name: 'Secondary Action 2', title: 'Perform an action', - actionFn: performAction + actionFn: performEmptyStateAction }, { name: 'Secondary Action 3', title: 'Perform an action', - actionFn: performAction + actionFn: performEmptyStateAction } ]; } diff --git a/src/views/listview/examples/list-view.js b/src/views/listview/examples/list-view.js index cd7ee0084..2bddae15b 100644 --- a/src/views/listview/examples/list-view.js +++ b/src/views/listview/examples/list-view.js @@ -309,6 +309,10 @@ onDblClick: handleDblClick }; + var performEmptyStateAction = function (action) { + $scope.eventText = action.name + "\r\n" + $scope.eventText; + }; + $scope.emptyStateConfig = { icon: 'pficon-warning-triangle-o', title: 'No Items Available', @@ -324,23 +328,23 @@ { name: 'Main Action', title: 'Perform an action', - actionFn: performAction, + actionFn: performEmptyStateAction, type: 'main' }, { name: 'Secondary Action 1', title: 'Perform an action', - actionFn: performAction + actionFn: performEmptyStateAction }, { name: 'Secondary Action 2', title: 'Perform an action', - actionFn: performAction + actionFn: performEmptyStateAction }, { name: 'Secondary Action 3', title: 'Perform an action', - actionFn: performAction + actionFn: performEmptyStateAction } ]; @@ -560,7 +564,7 @@     - + angular.module('patternfly.views').controller('CompoundExanspansionCtrl', ['$scope', '$templateCache', function ($scope, $templateCache) { $scope.eventText = ''; From 3d11ce387ca6a9186acfa1f52250d6c3e84f3383 Mon Sep 17 00:00:00 2001 From: Randall Wood Date: Sat, 8 Jul 2017 05:08:22 -0400 Subject: [PATCH 3/4] Add missing space. --- src/views/listview/examples/list-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/listview/examples/list-view.js b/src/views/listview/examples/list-view.js index 2bddae15b..554a97938 100644 --- a/src/views/listview/examples/list-view.js +++ b/src/views/listview/examples/list-view.js @@ -58,7 +58,7 @@ * @param {function (action, item))} updateMenuActionForItemFn function(action, item) Used to update a menu action based on the current item * @param {object} customScope Object containing any variables/functions used by the transcluded html, access via $ctrl.customScope. * @param {object} emptyStateConfig Optional configuration settings for the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component -* @param {array} emptyStateActionButtons Optional buttons to display under the icon, title, and informational paragraph in the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component + * @param {array} emptyStateActionButtons Optional buttons to display under the icon, title, and informational paragraph in the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component * @example From f2025f25dbfc8882b2f0fcab8feccde0b76b406e Mon Sep 17 00:00:00 2001 From: Randall Wood Date: Sat, 8 Jul 2017 05:11:33 -0400 Subject: [PATCH 4/4] Remove excess space in comments. --- src/table/tableview/examples/table-view-with-toolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/table/tableview/examples/table-view-with-toolbar.js b/src/table/tableview/examples/table-view-with-toolbar.js index b1a6e6fbf..af2172669 100644 --- a/src/table/tableview/examples/table-view-with-toolbar.js +++ b/src/table/tableview/examples/table-view-with-toolbar.js @@ -33,7 +33,7 @@ *
  • .actionFn - (function(action)) Function to invoke when the action selected * * @param {object} emptyStateConfig Optional configuration settings for the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component - * @param {array} emptyStateActionButtons Optional buttons to display under the icon, title, and informational paragraph. See the {@link patternfly.views.component:pfEmptyState Empty State} component + * @param {array} emptyStateActionButtons Optional buttons to display under the icon, title, and informational paragraph. See the {@link patternfly.views.component:pfEmptyState Empty State} component * @example