Add ability to have actions pulldown menu in pfDataList directive

Author: jeff-phillips-18

dist/angular-patternfly.js

@@ -3200,7 +3200,8 @@ angular.module('patternfly.validation', []).directive('pfValidation', ["$timeout
  *   Directive for rendering a data list.
  *   <br><br>
  *
- * @param {object} config configuration settings for the data list:<br/>
+ * @param {array} items Array of items to display in the list
+ * @param {object} config Configuration settings for the data list:
  * <ul style='list-style-type: none'>
  * <li>.showSelectBox          - (boolean) Show item selection boxes for each item, default is true
  * <li>.selectItems            - (boolean) Allow row selection, default is false
@@ -3216,28 +3217,35 @@ angular.module('patternfly.validation', []).directive('pfValidation', ["$timeout
  * <li>.onClick                - ( function(item, event) ) Called to notify when an item is clicked, default is none
  * <li>.onDblClick             - ( function(item, event) ) Called to notify when an item is double clicked, default is none
  * </ul>
- *
- * @param {Array} items the data to be shown in the data list<br/>
- *
+ * @param {array} actions List of actions for dropdown menu in each row
+ *   <ul style='list-style-type: none'>
+ *     <li>.name - (String) The name of the action, displayed on the button
+ *     <li>.title - (String) Optional title, used for the tooltip
+ *     <li>.actionFn - (function(action)) Function to invoke when the action selected
+ *     <li>.isVisible - (Boolean) set to true to disable the action
+ *     <li>.isDisabled - (Boolean) set to true to disable the action
+ *     <li>.isSeparator - (Boolean) set to true if this is a placeholder for a separator rather than an action
+ *   </ul>
+ * @param {function (action, item))} updateActionForItemFn function(action, item) Used to update an action based on the current item
  * @example
 <example module="patternfly.views" deps="patternfly.utils">
   <file name="index.html">
-    <div ng-controller="ViewCtrl" class="row" style="display:inline-block; width: 100%;">
-      <div class="col-md-12">
-        <div pf-data-list id="exampleDataList" config="config" items="items">
-          <div class="col-md-12 cfme-row-column">
-            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 list-column">
-              <span>{{item.name}}</span>
-            </div>
-            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 list-column">
-              <span>{{item.address}}</span>
-            </div>
-            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 list-column">
-              <span>{{item.city}}</span>
-            </div>
-            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 list-column">
-              <span>{{item.state}}</span>
-            </div>
+    <div ng-controller="ViewCtrl" class="row example-container">
+      <div class="col-md-12 list-view-container">
+        <div pf-data-list class="example-data-list" id="exampleDataList" config="config" items="items" actions="actions">
+          <div class="row">
+              <div class="col-md-3">
+                <span>{{item.name}}</span>
+              </div>
+              <div class="col-md-3">
+                <span>{{item.address}}</span>
+              </div>
+              <div class="col-md-3">
+                <span>{{item.city}}</span>
+              </div>
+              <div class="col-md-3">
+                <span>{{item.state}}</span>
+              </div>
           </div>
         </div>
       </div>
@@ -3369,36 +3377,144 @@ angular.module('patternfly.validation', []).directive('pfValidation', ["$timeout
             state: "Pennsylvania"
           },
           {
-            name: "Judy Green",
-            address: "2 Apple Boulevard",
-            city: "Cincinatti",
-            state: "Ohio"
+            name: "Linda McGovern",
+            address: "22 Oak Street",
+            city: "Denver",
+            state: "Colorado"
+          },
+          {
+            name: "Jim Beam",
+            address: "72 Bourbon Way",
+            city: "Nashville",
+            state: "Tennessee"
+          },
+          {
+            name: "Holly Nichols",
+            address: "21 Jump Street",
+            city: "Hollywood",
+            state: "California"
+          },
+          {
+            name: "Marie Edwards",
+            address: "17 Cross Street",
+            city: "Boston",
+            state: "Massachusetts"
           },
           {
             name: "Pat Thomas",
             address: "50 Second Street",
             city: "New York",
             state: "New York"
           },
-        ]
+        ];
+
+        var performAction = function (action, item) {
+          $scope.eventText = item.name + " : " + action.name + "\n" + $scope.eventText;
+        };
+
+        $scope.actions = [
+          {
+            name: 'Action',
+            title: 'Perform an action',
+            actionFn: performAction
+          },
+          {
+            name: 'Another Action',
+            title: 'Do something else',
+            actionFn: performAction
+          },
+          {
+            name: 'Disabled Action',
+            title: 'Unavailable action',
+            actionFn: performAction,
+            isDisabled: true
+          },
+          {
+            name: 'Something Else',
+            title: '',
+            actionFn: performAction
+          },
+          {
+            isSeparator: true
+          },
+          {
+            name: 'Grouped Action 1',
+            title: 'Do something',
+            actionFn: performAction
+          },
+          {
+            name: 'Grouped Action 2',
+            title: 'Do something similar',
+            actionFn: performAction
+          }
+        ];
       }
     ]);
   </file>
 </example>
  */
-angular.module('patternfly.views').directive('pfDataList', ["pfUtils", function (pfUtils) {
+angular.module('patternfly.views').directive('pfDataList',
+  ["$timeout", "$window", "pfUtils", function ($timeout, $window, pfUtils) {
     'use strict';
     return {
       restrict: 'A',
       scope: {
         config: '=?',
         items: '=',
-        eventId: '@id'
+        actions: '=?',
+        updateActionForItemFn: '=?'
       },
       transclude: true,
       templateUrl: 'views/datalist/data-list.html',
-      controller: ['$scope',
-        function ($scope) {
+      controller:
+        ["$scope", "$element", function ($scope, $element) {
+          var setDropMenuLocation = function (parentDiv) {
+            var dropButton = parentDiv.querySelector('.dropdown-toggle');
+            var dropMenu =  parentDiv.querySelector('.dropdown-menu');
+            var buttonRect = dropButton.getBoundingClientRect();
+            var menuRect = dropMenu.getBoundingClientRect();
+            var top = buttonRect.top + buttonRect.height;
+            var left = buttonRect.left + buttonRect.width - menuRect.width;
+            var docHeight = $window.innerHeight;
+
+            if (top + menuRect.height > docHeight) {
+              top = docHeight - menuRect.height;
+            }
+
+            dropMenu.style.top = top + "px";
+            dropMenu.style.left = left + "px";
+          };
+
+          var hideOnScroll = function () {
+            $scope.prevMenuItem.showMenu = false;
+            angular.element(angular.element($element).find('.data-list-pf')[0]).unbind("scroll", hideOnScroll);
+            angular.element($window).unbind("scroll", hideOnScroll);
+            $scope.$apply();
+          };
+
+          var showActionMenu = function (item, event) {
+            item.showMenu = true;
+            $scope.prevMenuItem = item;
+
+            $timeout(function () {
+              var parentDiv = undefined;
+              var nextElement;
+
+              nextElement = event.toElement;
+              while (nextElement && !parentDiv) {
+                if (nextElement.className.indexOf('list-menu') === 0) {
+                  parentDiv = nextElement;
+                  setDropMenuLocation (parentDiv);
+                }
+                nextElement = nextElement.parentElement;
+              }
+
+              angular.element(angular.element($element).find('.data-list-pf')[0]).bind("scroll", hideOnScroll);
+              angular.element($window).bind("scroll", hideOnScroll);
+            });
+
+          };
+
           $scope.defaultConfig = {
             selectItems: false,
             multiSelect: false,
@@ -3421,8 +3537,40 @@ angular.module('patternfly.views').directive('pfDataList', ["pfUtils", function
             'Illegal use of pfDataList directive! ' +
             'Cannot allow both select box and click selection in the same data list.');
           }
-        }
-      ],
+
+          $scope.handleAction = function (action, item) {
+            if (action && action.actionFn && (action.isDisabled !== true)) {
+              action.actionFn(action, item);
+            }
+          };
+
+          $scope.updateActions = function (item) {
+            $scope.actionItem = item;
+            if (typeof $scope.updateActionForItemFn === 'function') {
+              $scope.actions.forEach(function (action) {
+                $scope.updateActionForItemFn(action, item);
+              });
+            }
+          };
+
+          $scope.setupActions = function (item, event) {
+            if ($scope.prevMenuItem) {
+              $scope.prevMenuItem.showMenu = false;
+              $scope.prevMenuItem = undefined;
+            }
+
+            // Ignore disabled items completely
+            if ($scope.checkDisabled(item)) {
+              return;
+            }
+
+            // update the actions based on the current item
+            $scope.updateActions(item);
+
+            // Show the action menu for the item
+            showActionMenu(item, event);
+          };
+        }],
 
       link: function (scope, element, attrs) {
         attrs.$observe('config', function () {
@@ -3713,7 +3861,8 @@ angular.module('patternfly.views').directive('pfDataList', ["pfUtils", function
  </file>
  </example>
  */
-angular.module('patternfly.views').directive('pfDataTiles', ["pfUtils", function (pfUtils) {
+angular.module('patternfly.views').directive('pfDataTiles',
+  ["pfUtils", function (pfUtils) {
     'use strict';
     return {
       restrict: 'A',
@@ -3902,8 +4051,8 @@ angular.module('patternfly.views').directive('pfDataTiles', ["pfUtils", function
         <label class="events-label">Valid Items: </label>
       </div>
       <div class="col-md-12 list-view-container" ng-if="viewType == 'listView'">
-        <div pf-data-list class="row" config="listConfig" items="items">
-          <div class="row list-row">
+        <div pf-data-list config="listConfig" items="items">
+          <div class="row">
             <div class="col-md-3">
               <span>{{item.name}}</span>
             </div>
@@ -4423,7 +4572,7 @@ angular.module('patternfly.views').directive('pfDataToolbar',
   'use strict';
 
   $templateCache.put('views/datalist/data-list.html',
-    "<div class=data-list-pf><div class=list-group-item ng-repeat=\"item in items track by $index\" ng-class=\"{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item)}\"><div class=\"row list-row\"><div pf-transclude=parent class=list-content ng-class=\"{'with-check-box': config.showSelectBox, 'with-menu':config.showActionMenus}\" ng-click=\"itemClick($event, item)\" ng-dblclick=\"dblClick($event, item)\"></div><div class=list-check-box ng-if=config.showSelectBox style=\"padding-top: {{(config.rowHeight - 32) / 2}}px\"><input type=checkbox value=item.selected ng-model=item.selected ng-disabled=checkDisabled(item) ng-change=\"checkBoxChange(item)\"></div></div></div></div>"
+    "<div class=data-list-pf><div class=list-group-item ng-repeat=\"item in items track by $index\" ng-class=\"{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item)}\"><div class=list-row><div pf-transclude=parent class=list-content ng-class=\"{'with-check-box': config.showSelectBox, 'with-menu':actions && actions.length > 0}\" ng-click=\"itemClick($event, item)\" ng-dblclick=\"dblClick($event, item)\"></div><div class=list-check-box ng-if=config.showSelectBox style=\"padding-top: {{(config.rowHeight - 32) / 2}}px\"><input type=checkbox value=item.selected ng-model=item.selected ng-disabled=checkDisabled(item) ng-change=\"checkBoxChange(item)\"></div><div class=\"list-menu dropdown btn-group {{$index}}\" ng-if=\"actions && actions.length > 0\" ng-class=\"{'disabled': checkDisabled(item)}\"><button type=button class=\"btn btn-link dropdown-toggle\" data-toggle=dropdown aria-haspopup=true aria-expanded=false ng-click=\"setupActions(item, $event)\"><span class=\"fa fa-ellipsis-v\"></span></button><ul class=dropdown-menu ng-if=item.showMenu><li ng-repeat=\"action in actions\" ng-if=\"action.isVisible !== false\" role=\"{{action.isSeparator === true ? 'separator' : 'menuitem'}}\" ng-class=\"{'divider': (action.isSeparator === true), 'disabled': (action.isDisabled === true)}\"><a ng-if=\"action.isSeparator !== true\" href=# title={{action.title}} ng-click=\"handleAction(action, item)\">{{action.name}}</a></li></ul></div></div></div></div>"
   );
 
 

dist/angular-patternfly.min.js

@@ -103,6 +103,7 @@
   background: #fff;
   overflow-x: hidden;
   overflow-y: auto;
+  height: 100%;
   padding-bottom: 1px;
 }
 .data-list-pf .list-row {
@@ -112,21 +113,19 @@
   width: 100%;
 }
 .data-list-pf .list-content {
-  left: 15px;
+  margin-left: 15px;
   position: relative;
 }
 .data-list-pf .list-content.with-check-box {
   border-left: solid 2px #d2d2d2;
-  left: 30px;
-  margin-left: 10px;
+  margin-left: 35px;
+  padding-left: 5px;
 }
 .data-list-pf .list-content.with-menu {
-  margin-right: 30px;
-  right: 15px;
+  margin-right: 10px;
 }
 .data-list-pf .list-check-box {
   bottom: 0px;
-  left: 20px;
   position: absolute;
   top: 0px;
   width: 20px;
@@ -172,6 +171,43 @@
   padding-right: 5px;
 }
 
+.data-list-pf .list-menu {
+  bottom: 0px;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+}
+
+.data-list-pf .list-menu .btn-link {
+  color: #222;
+  font-size: 16px;
+  line-height: 1;
+  padding: 4px 0;
+}
+
+.data-list-pf .list-menu .btn-link:hover {
+  color: #0099d3;
+}
+
+.data-list-pf .list-menu.disabled .btn-link,
+.data-list-pf .list-menu.disabled .btn-link:hover {
+  color: #999999;
+  cursor: not-allowed;
+}
+
+.data-list-pf .list-menu .dropdown-menu {
+  cursor: pointer;
+  font-size: 12px;
+  left: inherit;
+  line-height: 7px;
+  padding: 0;
+  position: fixed;
+}
+
+.data-list-pf .list-menu li {
+  color: #000000;
+}
+
 .tiles-view-pf {
   overflow: auto;
   padding-top: 20px;