fix(pfCard): Add loading state for pfCard

Author: Amineta Lo

src/card/basic/card.component.js

@@ -8,6 +8,7 @@
  * @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
  * @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
  * True (default) shows the line, false hides the line
+ * @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
  * @param {object=} footer footer configuration properties:<br/>
  * <ul style='list-style-type: none'>
  * <li>.iconClass  - (optional) the icon to show on the bottom left of the footer panel
@@ -91,6 +92,7 @@ angular.module('patternfly.card').component('pfCard', {
     subTitle: '@?',
     showTopBorder: '@?',
     showTitlesSeparator: '@?',
+    showSpinner: '@?',
     footer: '=?',
     filter: '=?'
   },
@@ -104,11 +106,9 @@ angular.module('patternfly.card').component('pfCard', {
         ctrl.currentFilter = ctrl.filter.filters[0];
       }
     }
-
     ctrl.footerCallBackFn = function () {
       ctrl.footerCallBackResult = ctrl.footer.callBackFn();
     };
-
     ctrl.filterCallBackFn = function (f) {
       ctrl.currentFilter = f;
       if (ctrl.filter.callBackFn) {
@@ -130,6 +130,9 @@ angular.module('patternfly.card').component('pfCard', {
 
     ctrl.$onInit = function () {
       ctrl.shouldShowTitlesSeparator = (!ctrl.showTitlesSeparator || ctrl.showTitlesSeparator === 'true');
+      if (angular.isUndefined(ctrl.showSpinner)) {
+        ctrl.showSpinner = 'false';
+      }
     };
   }
 });

src/card/basic/card.html

@@ -3,10 +3,10 @@
     <div ng-if="$ctrl.showFilterInHeader()" ng-include="'card/basic/card-filter.html'"></div>
     <h2 class="card-pf-title">{{$ctrl.headTitle}}</h2>
   </div>
-
-  <span ng-if="$ctrl.subTitle" class="card-pf-subtitle">{{$ctrl.subTitle}}</span>
+  <span ng-class="{'hide': $ctrl.showSpinner === 'true'}" ng-if="$ctrl.subTitle" class="card-pf-subtitle">{{$ctrl.subTitle}}</span>
 
   <div class="card-pf-body">
+    <div ng-class="{'spinner spinner-lg': $ctrl.showSpinner === 'true'}"></div>
     <div ng-transclude></div>
   </div>
   <div ng-if="$ctrl.footer" class="card-pf-footer">

src/card/examples/card-timeframe.js

@@ -8,6 +8,7 @@
  * @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
  * @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
  * True (default) shows the line, false hides the line
+ * @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
  * @param {object=} footer footer configuration properties:<br/>
  * <ul style='list-style-type: none'>
  * <li>.iconClass  - (optional) the icon to show on the bottom left of the footer panel
@@ -40,6 +41,9 @@
        <pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
          Card Contents
        </pf-card>
+     <label class="label-title">Timeframe filter in header & loading state</label>
+       <pf-card show-spinner="true" head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
+       </pf-card>
      <label class="label-title">Footer with Link & Timeframe filter</label>
      <pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
           footer="footerConfig" filter="filterConfig" style="width: 50%">

test/card/basic/card.spec.js

@@ -85,6 +85,19 @@ describe('Component: pfCard', function() {
 
     });
 
+    it("should show and hide the spinner", function() {
+
+      // by default, spinner should be hidden
+      element = compileCard('<pf-card head-title="My card title" sub-title="My card subtitle title" show-top-border="false">Inner content goes here</pf-card>', $scope);
+      cardClass = angular.element(element).find('.spinner-lg');
+      expect(cardClass.length).toBe(0);
+
+      // setting to true should show spinner
+      element = compileCard('<pf-card head-title="My card title" show-spinner="true" sub-title="My card subtitle title" show-top-border="false">Inner content goes here</pf-card>', $scope);
+      cardClass = angular.element(element).find('.spinner-lg');
+      expect(cardClass.length).toBe(1);
+    });
+
     it("should hide the action bar footer by default", function() {
 
       // by default, if footer not defined, footer should not be shown