Skip to content

Allow action buttons in empty state for a card/list/table view #511

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 4 commits into from
Jul 11, 2017
Merged

Allow action buttons in empty state for a card/list/table view #511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d251d6c
Add ability to put action buttons into the empty state associated wit…
rhwood Jul 3, 2017
8ffbcc7
Add function to examples to record clicking on empty state action but…
rhwood Jul 8, 2017
3d11ce3
Add missing space.
rhwood Jul 8, 2017
f2025f2
Remove excess space in comments.
rhwood Jul 8, 2017
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
32 changes: 31 additions & 1 deletion 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 @@ -34,6 +34,7 @@
* <li>.actionFn - (function(action)) Function to invoke when the action selected
* </ul>
* @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
<example module="patternfly.tableview.demo">
<file name="index.html">
Expand All @@ -46,7 +47,8 @@
columns="columns"
items="items"
action-buttons="actionButtons"
menu-actions="menuActions">
menu-actions="menuActions"
empty-state-action-buttons="emptyStateActionButtons">
</pf-table-view>
</div>
<div class="col-md-12" style="padding-top: 12px;">
Expand Down Expand Up @@ -101,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',
Expand All @@ -112,6 +118,30 @@
}
};

$scope.emptyStateActionButtons = [
{
name: 'Main Action',
title: 'Perform an action',
actionFn: performEmptyStateAction,
type: 'main'
},
{
name: 'Secondary Action 1',
title: 'Perform an action',
actionFn: performEmptyStateAction
},
{
name: 'Secondary Action 2',
title: 'Perform an action',
actionFn: performEmptyStateAction
},
{
name: 'Secondary Action 3',
title: 'Perform an action',
actionFn: performEmptyStateAction
}
];

function handleCheckBoxChange (item) {
$scope.eventText = item.name + ' checked: ' + item.selected + '\r\n' + $scope.eventText;
};
Expand Down
1 change: 1 addition & 0 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 @@ -33,6 +33,7 @@
* <li>.actionFn - (function(action)) Function to invoke when the action selected
* </ul>
* @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
<example module="patternfly.tableview.demo">
<file name="index.html">
Expand Down
3 changes: 2 additions & 1 deletion src/table/tableview/table-view.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ angular.module('patternfly.table').component('pfTableView', {
items: '<',
actionButtons: '<?',
menuActions: '<?',
emptyStateConfig: '=?'
emptyStateConfig: '=?',
emptyStateActionButtons: '=?'
},
templateUrl: 'table/tableview/table-view.html',
controller: function (DTOptionsBuilder, DTColumnDefBuilder, $element, pfUtils, $log, $filter, $timeout) {
Expand Down
2 changes: 1 addition & 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 @@ -49,5 +49,5 @@
</tr>
</tbody>
</table>
<pf-empty-state ng-if="$ctrl.config.itemsAvailable === false" config="$ctrl.emptyStateConfig"></pf-empty-state>
<pf-empty-state ng-if="$ctrl.config.itemsAvailable === false" config="$ctrl.emptyStateConfig" action-buttons="$ctrl.emptyStateActionButtons"></pf-empty-state>
</div>
32 changes: 31 additions & 1 deletion src/views/cardview/card-view.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
* <li>.itemsAvailable - (boolean) If 'false', displays the {@link patternfly.views.component:pfEmptyState Empty State} component.
* </ul>
* @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<br/>
*
* @example
Expand All @@ -41,7 +42,7 @@
</style>
<div ng-controller="ViewCtrl" class="row" style="display:inline-block; width: 100%;">
<div class="col-md-12">
<pf-card-view id="exampleCardView" config="config" empty-state-config="emptyStateConfig" items="items">
<pf-card-view id="exampleCardView" config="config" empty-state-config="emptyStateConfig" items="items" empty-state-action-buttons="emptyStateActionButtons">
<div class="col-md-12">
<span>{{item.name}}</span>
</div>
Expand Down Expand Up @@ -193,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',
Expand All @@ -203,6 +208,30 @@
url : '#/api/patternfly.views.component:pfEmptyState'
}
};

$scope.emptyStateActionButtons = [
{
name: 'Main Action',
title: 'Perform an action',
actionFn: performEmptyStateAction,
type: 'main'
},
{
name: 'Secondary Action 1',
title: 'Perform an action',
actionFn: performEmptyStateAction
},
{
name: 'Secondary Action 2',
title: 'Perform an action',
actionFn: performEmptyStateAction
},
{
name: 'Secondary Action 3',
title: 'Perform an action',
actionFn: performEmptyStateAction
}
];
}
]);
</file>
Expand All @@ -212,6 +241,7 @@ angular.module('patternfly.views').component('pfCardView', {
bindings: {
config: '=?',
emptyStateConfig: '=?',
emptyStateActionButtons: '=?',
items: '=',
eventId: '@id'
},
Expand Down
2 changes: 1 addition & 1 deletion src/views/cardview/card-view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,5 @@
</div>
</div>
</div>
<pf-empty-state ng-if="$ctrl.config.itemsAvailable === false" config="$ctrl.emptyStateConfig"></pf-empty-state>
<pf-empty-state ng-if="$ctrl.config.itemsAvailable === false" config="$ctrl.emptyStateConfig" action-buttons="$ctrl.emptyStateActionButtons"></pf-empty-state>
</span>
34 changes: 32 additions & 2 deletions src/views/listview/examples/list-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.<xxx>
* @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
<example module="patternfly.views" deps="patternfly.utils">
<file name="index.html">
Expand Down Expand Up @@ -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">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
{{item.name}}
Expand Down Expand Up @@ -307,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',
Expand All @@ -318,6 +324,30 @@
}
};

$scope.emptyStateActionButtons = [
{
name: 'Main Action',
title: 'Perform an action',
actionFn: performEmptyStateAction,
type: 'main'
},
{
name: 'Secondary Action 1',
title: 'Perform an action',
actionFn: performEmptyStateAction
},
{
name: 'Secondary Action 2',
title: 'Perform an action',
actionFn: performEmptyStateAction
},
{
name: 'Secondary Action 3',
title: 'Perform an action',
actionFn: performEmptyStateAction
}
];

$scope.items = [
{
name: "Fred Flintstone",
Expand Down Expand Up @@ -534,7 +564,7 @@
</div>
</div>
</file>
<file name="counpund.js">
<file name="compound.js">
angular.module('patternfly.views').controller('CompoundExanspansionCtrl', ['$scope', '$templateCache',
function ($scope, $templateCache) {
$scope.eventText = '';
Expand Down
3 changes: 2 additions & 1 deletion src/views/listview/list-view.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ angular.module('patternfly.views').component('pfListView', {
actions: '=?',
updateActionForItemFn: '=?',
customScope: '=?',
emptyStateConfig: '=?'
emptyStateConfig: '=?',
emptyStateActionButtons: '=?'
},
transclude: {
expandedContent: '?listExpandedContent'
Expand Down
2 changes: 1 addition & 1 deletion src/views/listview/list-view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,5 +66,5 @@
</div>
</div>
</div>
<pf-empty-state ng-if="$ctrl.config.itemsAvailable === false" config="$ctrl.emptyStateConfig"></pf-empty-state>
<pf-empty-state ng-if="$ctrl.config.itemsAvailable === false" config="$ctrl.emptyStateConfig" action-buttons="$ctrl.emptyStateActionButtons"></pf-empty-state>
</span>