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

rhwood · cdcabrera · commit 3b4df0162ec6 · 2017-07-11T17:10:15.000-04:00
* Add ability to put action buttons into the empty state associated with views. Addresses #510. * Add function to examples to record clicking on empty state action buttons in example lists of events. Also fix one spelling error. * Add missing space. * Remove excess space in comments.
diff --git a/src/table/tableview/examples/table-view-basic.js b/src/table/tableview/examples/table-view-basic.js
@@ -44,6 +44,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">
@@ -56,7 +57,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;">
@@ -121,6 +123,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',
@@ -132,6 +138,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;
           };
diff --git a/src/table/tableview/examples/table-view-with-toolbar.js b/src/table/tableview/examples/table-view-with-toolbar.js
@@ -43,6 +43,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">
diff --git 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: '<?',
     menuActions: '<?',
-    emptyStateConfig: '=?'
+    emptyStateConfig: '=?',
+    emptyStateActionButtons: '=?'
   },
   templateUrl: 'table/tableview/table-view.html',
   controller: function (DTOptionsBuilder, DTColumnDefBuilder, $element, pfUtils, $log, $filter, $timeout) {
diff --git a/src/table/tableview/table-view.html b/src/table/tableview/table-view.html
@@ -54,5 +54,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>
diff --git a/src/views/cardview/card-view.component.js b/src/views/cardview/card-view.component.js
@@ -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
@@ -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>
@@ -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',
@@ -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>
@@ -212,6 +241,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
@@ -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>
diff --git 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.<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">
@@ -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}}
@@ -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',
@@ -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",
@@ -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 = '';
diff --git 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
@@ -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>
