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 = ctrl.showSpinner === true;
+      }
     };
   }
 });

src/card/basic/card.html

@@ -1,15 +1,15 @@
 <div ng-class="$ctrl.showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'">
   <div ng-if="$ctrl.showHeader()" ng-class="$ctrl.shouldShowTitlesSeparator ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">
-    <div ng-if="$ctrl.showFilterInHeader()" ng-include="'card/basic/card-filter.html'"></div>
+    <div ng-class="{'hide': $ctrl.showSpinner === true}" 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-show="$ctrl.showSpinner" ng-class="{'spinner spinner-lg': $ctrl.showSpinner}"></div>
     <div ng-transclude></div>
   </div>
-  <div ng-if="$ctrl.footer" class="card-pf-footer">
+  <div ng-class="{'hide': $ctrl.showSpinner === true}" ng-if="$ctrl.footer" class="card-pf-footer">
     <div ng-if="$ctrl.showFilterInFooter()" ng-include="'card/basic/card-filter.html'"></div>
     <p>
       <a ng-if="$ctrl.footer.href" href="{{$ctrl.footer.href}}" ng-class="{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}">

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
@@ -45,10 +46,19 @@
           footer="footerConfig" filter="filterConfig" style="width: 50%">
         Card Contents
      </pf-card>
+     <label class="label-title">Loading State</label>
+     <pf-card show-spinner="dataLoading" head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
+     </pf-card>
    </div>
  </file>
  <file name="script.js">
- angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
+ angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope, $timeout ) {
+
+       $scope.dataLoading = true;
+
+       $timeout(function () {
+         $scope.dataLoading = false;
+       }, 3000 );
 
        $scope.footerConfig = {
          'iconClass' : 'fa fa-flag',

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