Merge pull request #330 from dgutride/expanding-listview

Add list view expansion to Angular-Patternfly

Author: jeff-phillips-18

misc/examples.css

@@ -64,6 +64,10 @@ hr {
   padding-left: 5px;
 }
 
+.list-view-container .fa {
+  padding-left: 0px;
+}
+
 .card-view-container {
   border: 1px solid #000000;
   margin: 10px;

src/views/listview/list-view-directive.js

@@ -7,6 +7,7 @@
  *   Pass a customScope object containing any scope variables/functions you need to access from the transcluded source, access these
  *   via 'customScope' in your transcluded hmtl.
  *   <br><br>
+ *   If using expanding rows, use a list-expanded-content element containing expandable content for each row.  For each item in the items array, the expansion can be disabled by setting disableRowExpansion to true on the item.
  *
  * @param {array} items Array of items to display in the list view. If an item in the array has a 'rowClass' field, the value of this field will be used as a class specified on the row (list-group-item).
  * @param {object} config Configuration settings for the list view:
@@ -15,6 +16,7 @@
  * <li>.selectItems            - (boolean) Allow row selection, default is false
  * <li>.dlbClick               - (boolean) Handle double clicking (item remains selected on a double click). Default is false.
  * <li>.multiSelect            - (boolean) Allow multiple row selections, selectItems must also be set, not applicable when dblClick is true. Default is false
+ * <li>.useExpandingRows       - (boolean) Allow row expansion for each list item.
  * <li>.selectionMatchProp     - (string) Property of the items to use for determining matching, default is 'uuid'
  * <li>.selectedItems          - (array) Current set of selected items
  * <li>.checkDisabled          - ( function(item) ) Function to call to determine if an item is disabled, default is none
@@ -76,6 +78,36 @@
               {{item.state}}
             </div>
           </div>
+          <list-expanded-content>
+           {{item.city}}
+           <div class="row">
+            <div class="col-md-3">
+              <div pf-donut-pct-chart config="exampleChartConfig" data="{'used': '350','total': '1000'}" center-label="'Percent Used'"></div>
+            </div>
+            <div class="col-md-9">
+               <dl class="dl-horizontal">
+                 <dt>Host Name</dt>
+                 <dd>Hostceph1</dd>
+                 <dt>Device Path</dt>
+                 <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
+                 <dt>Time</dt>
+                 <dd>January 15, 2016 10:45:11 AM</dd>
+                 <dt>Severity</dt>
+                 <dd>Warning</dd>
+                 <dt>Cluster</dt>
+                 <dd>Cluster 1</dd>
+               </dl>
+               <p>
+                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+               </p>
+             </div>
+           </div>
+          </list-expanded-content>
         </div>
       </div>
       <hr class="col-md-12">
@@ -114,6 +146,9 @@
             <label class="checkbox-inline">
               <input type="checkbox" ng-model="showDisabled">Show Disabled Rows</input>
             </label>
+           <label class="checkbox-inline">
+              <input type="checkbox" ng-model="config.useExpandingRows">Show Expanding Rows</input>
+           </label>
           </div>
         </form>
       </div>
@@ -161,6 +196,15 @@
           }
         };
 
+        $scope.exampleChartConfig = {
+          'chartId': 'pctChart',
+          'units': 'GB',
+          'thresholds': {
+            'warning':'60',
+            'error':'90'
+          }
+        };
+
         $scope.selectType = 'checkbox';
         $scope.updateSelectionType = function() {
           if ($scope.selectType === 'checkbox') {
@@ -185,6 +229,7 @@
          selectedItems: [],
          checkDisabled: checkDisabledItem,
          showSelectBox: true,
+         useExpandingRows: false,
          onSelect: handleSelect,
          onSelectionChange: handleSelectionChange,
          onCheckBoxChange: handleCheckBoxChange,
@@ -203,7 +248,8 @@
             name: "John Smith",
             address: "415 East Main Street",
             city: "Norfolk",
-            state: "Virginia"
+            state: "Virginia",
+            disableRowExpansion: true
           },
           {
             name: "Frank Livingston",
@@ -353,7 +399,9 @@ angular.module('patternfly.views').directive('pfListView', function ($timeout, $
       updateActionForItemFn: '=?',
       customScope: '=?'
     },
-    transclude: true,
+    transclude: {
+      expandedContent: '?listExpandedContent'
+    },
     templateUrl: 'views/listview/list-view.html',
     controller:
       function ($scope, $element) {
@@ -380,6 +428,7 @@ angular.module('patternfly.views').directive('pfListView', function ($timeout, $
           selectionMatchProp: 'uuid',
           selectedItems: [],
           checkDisabled: false,
+          useExpandingRows: false,
           showSelectBox: true,
           onSelect: null,
           onSelectionChange: null,
@@ -442,6 +491,10 @@ angular.module('patternfly.views').directive('pfListView', function ($timeout, $
           return hideMenu;
         };
 
+        $scope.toggleItemExpansion = function (item) {
+          item.isExpanded = !item.isExpanded;
+        };
+
         $scope.setupActions = function (item, event) {
           // Ignore disabled items completely
           if ($scope.checkDisabled(item)) {

src/views/listview/list-view.html

@@ -1,48 +1,55 @@
-<div class="list-view-pf">
+<div class="list-group list-view-pf">
   <div class="list-group-item {{item.rowClass}}"
        ng-repeat="item in items track by $index"
-       ng-class="{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item)}">
-    <div class="list-view-pf-checkbox" ng-if="config.showSelectBox" >
-      <input type="checkbox" value="item.selected" ng-model="item.selected" ng-disabled="checkDisabled(item)" ng-change="checkBoxChange(item)"/>
-    </div>
+       ng-class="{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item), 'list-view-pf-expand-active': item.isExpanded}">
+    <div class="list-group-item-header">
+      <div class="list-view-pf-expand" ng-if="config.useExpandingRows">
+        <span class="fa fa-angle-right" ng-show="!item.disableRowExpansion" ng-click="toggleItemExpansion(item)" ng-class="{'fa-angle-down': item.isExpanded}"></span>
+        <span class="pf-expand-placeholder" ng-show="item.disableRowExpansion"></span>
+      </div>
+      <div class="list-view-pf-checkbox" ng-if="config.showSelectBox" >
+        <input type="checkbox" value="item.selected" ng-model="item.selected" ng-disabled="checkDisabled(item)" ng-change="checkBoxChange(item)"/>
+      </div>
 
-    <div class="list-view-pf-actions"
-         ng-if="(actionButtons && actionButtons.length > 0) || (menuActions && menuActions.length > 0)">
-      <button class="btn btn-default {{actionButton.class}}" ng-repeat="actionButton in actionButtons"
-              title="{{actionButton.title}}"
-              ng-class="{'disabled' : checkDisabled(item) || !enableButtonForItem(actionButton, item)}"
-              ng-click="handleButtonAction(actionButton, item)">
-        <div ng-if="actionButton.include" class="actionButton.includeClass" ng-include src="actionButton.include"></div>
-        <span ng-if="!actionButton.include">{{actionButton.name}}</span>
-      </button>
-      <div class="{{dropdownClass}} pull-right dropdown-kebab-pf {{getMenuClassForItem(item)}} {{hideMenuForItem(item) ? 'invisible' : ''}}"
-           id="kebab_{{$index}}"
-           ng-if="menuActions && menuActions.length > 0">
-        <button class="btn btn-link dropdown-toggle" type="button"
-                id="dropdownKebabRight_{{$index}}"
-                ng-class="{'disabled': checkDisabled(item)}"
-                ng-click="setupActions(item, $event)"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="true">
-          <span class="fa fa-ellipsis-v"></span>
+      <div class="list-view-pf-actions"
+           ng-if="(actionButtons && actionButtons.length > 0) || (menuActions && menuActions.length > 0)">
+        <button class="btn btn-default {{actionButton.class}}" ng-repeat="actionButton in actionButtons"
+                title="{{actionButton.title}}"
+                ng-class="{'disabled' : checkDisabled(item) || !enableButtonForItem(actionButton, item)}"
+                ng-click="handleButtonAction(actionButton, item)">
+          <div ng-if="actionButton.include" class="actionButton.includeClass" ng-include src="actionButton.include"></div>
+          <span ng-if="!actionButton.include">{{actionButton.name}}</span>
         </button>
-        <ul class="dropdown-menu dropdown-menu-right {{$index}}" aria-labelledby="dropdownKebabRight_{{$index}}" >
-          <li ng-repeat="menuAction in menuActions"
-              ng-if="menuAction.isVisible !== false"
-              role="{{menuAction.isSeparator === true ? 'separator' : 'menuitem'}}"
-              ng-class="{'divider': (menuAction.isSeparator === true), 'disabled': (menuAction.isDisabled === true)}">
-            <a ng-if="menuAction.isSeparator !== true" title="{{menuAction.title}}" ng-click="handleMenuAction(menuAction, item)">
-              {{menuAction.name}}
-            </a>
-          </li>
-        </ul>
+        <div class="{{dropdownClass}} pull-right dropdown-kebab-pf {{getMenuClassForItem(item)}} {{hideMenuForItem(item) ? 'invisible' : ''}}"
+             id="kebab_{{$index}}"
+             ng-if="menuActions && menuActions.length > 0">
+          <button class="btn btn-link dropdown-toggle" type="button"
+                  id="dropdownKebabRight_{{$index}}"
+                  ng-class="{'disabled': checkDisabled(item)}"
+                  ng-click="setupActions(item, $event)"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="true">
+            <span class="fa fa-ellipsis-v"></span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-right {{$index}}" aria-labelledby="dropdownKebabRight_{{$index}}" >
+            <li ng-repeat="menuAction in menuActions"
+                ng-if="menuAction.isVisible !== false"
+                role="{{menuAction.isSeparator === true ? 'separator' : 'menuitem'}}"
+                ng-class="{'divider': (menuAction.isSeparator === true), 'disabled': (menuAction.isDisabled === true)}">
+              <a ng-if="menuAction.isSeparator !== true" title="{{menuAction.title}}" ng-click="handleMenuAction(menuAction, item)">
+                {{menuAction.name}}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div pf-transclude="parent"
+           class="list-view-pf-main-info"
+           ng-click="itemClick($event, item)"
+           ng-dblclick="dblClick($event, item)">
       </div>
     </div>
-    <div pf-transclude="parent"
-         class="list-view-pf-main-info"
-         ng-click="itemClick($event, item)"
-         ng-dblclick="dblClick($event, item)">
-    </div>
+    <div class="list-group-item-container container-fluid" ng-transclude="expandedContent" ng-if="config.useExpandingRows && item.isExpanded"></div>
   </div>
 </div>

src/views/views.module.js

@@ -5,4 +5,4 @@
  *   Views module for patternfly.
  *
  */
-angular.module('patternfly.views', ['patternfly.utils', 'patternfly.filters', 'patternfly.sort']);
+angular.module('patternfly.views', ['patternfly.utils', 'patternfly.filters', 'patternfly.sort', 'patternfly.charts']);

styles/angular-patternfly.css

@@ -460,3 +460,7 @@ accordion > .panel-group .panel-open .panel-title > a:before {
 .wizard-pf-cancel-inline {
   margin-left: 25px;
 }
+
+.pf-expand-placeholder {
+  margin-right: 10px;
+}

test/views/listview/list-view.spec.js

@@ -513,4 +513,33 @@ describe('Directive:  pfDataList', function () {
     var alteredKebab = element.find('.dropdown-kebab-pf.test-class');
     expect(alteredKebab.length).toBe(1);
   });
+
+  it('should allow expanding rows', function () {
+    var items;
+    $scope.listConfig.useExpandingRows = true;
+
+    $scope.$digest();
+
+    items = element.find('.list-view-pf-expand .fa-angle-right');
+    expect(items.length).toBe(5);
+
+    eventFire(items[0], 'click');
+
+    var openItem = element.find('.list-group-item-container');
+    expect(openItem.length).toBe(1);
+  });
+
+  it('should allow expanding rows to disable individual expansion', function () {
+    $scope.systemModel[0].disableRowExpansion = true;
+    $scope.listConfig.useExpandingRows = true;
+    var htmlTmp = '<div pf-list-view items="systemModel" ' +
+      '  config="listConfig">' +
+      '</div>';
+
+    compileHTML(htmlTmp, $scope);
+
+    // Make sure one item is hiding the expansion action (based on the item settings above)
+    items = element.find('.list-view-pf-expand .fa-angle-right.ng-hide');
+    expect(items.length).toBe(1);
+  });
 });