@@ -106,7 +106,7 @@ angular.module( 'patternfly.utils', ['ui.bootstrap'] );
106
106
* Views module for patternfly.
107
107
*
108
108
*/
109
- angular . module ( 'patternfly.views' , [ 'patternfly.utils' , 'patternfly.filters' , 'patternfly.sort' , 'patternfly.charts' ] ) ;
109
+ angular . module ( 'patternfly.views' , [ 'patternfly.utils' , 'patternfly.filters' , 'patternfly.sort' , 'patternfly.charts' , 'dndLists' ] ) ;
110
110
; /**
111
111
* @name PatternFly Wizard
112
112
*
@@ -8229,6 +8229,10 @@ angular.module('patternfly.views').directive('pfCardView', ["pfUtils", function
8229
8229
* <li>.showSelectBox - (boolean) Show item selection boxes for each item, default is true
8230
8230
* <li>.selectItems - (boolean) Allow row selection, default is false
8231
8231
* <li>.dlbClick - (boolean) Handle double clicking (item remains selected on a double click). Default is false.
8232
+ * <li>.dragEnabled - (boolean) Enable drag and drop. Default is false.
8233
+ * <li>.dragEnd - ( function() ) Function to call when the drag operation ended, default is none
8234
+ * <li>.dragMoved - ( function() ) Function to call when the drag operation moved an element, default is none
8235
+ * <li>.dragStart - ( function(item) ) Function to call when the drag operation started, default is none
8232
8236
* <li>.multiSelect - (boolean) Allow multiple row selections, selectItems must also be set, not applicable when dblClick is true. Default is false
8233
8237
* <li>.useExpandingRows - (boolean) Allow row expansion for each list item.
8234
8238
* <li>.selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
@@ -8365,6 +8369,15 @@ angular.module('patternfly.views').directive('pfCardView', ["pfUtils", function
8365
8369
</div>
8366
8370
</form>
8367
8371
</div>
8372
+ <div class="col-md-12">
8373
+ <form role="form">
8374
+ <div class="form-group">
8375
+ <label class="checkbox-inline">
8376
+ <input type="checkbox" ng-model="config.dragEnabled">Drag and Drop</input>
8377
+ </label>
8378
+ </div>
8379
+ </form>
8380
+ </div>
8368
8381
<div class="col-md-12">
8369
8382
<label style="font-weight:normal;vertical-align:center;">Events: </label>
8370
8383
</div>
@@ -8398,6 +8411,27 @@ angular.module('patternfly.views').directive('pfCardView', ["pfUtils", function
8398
8411
return $scope.showDisabled && (item.name === "John Smith");
8399
8412
};
8400
8413
8414
+ var dragEnd = function() {
8415
+ $scope.eventText = 'drag end\r\n' + $scope.eventText;
8416
+ };
8417
+ var dragMoved = function() {
8418
+ var index = -1;
8419
+
8420
+ for (var i = 0; i < $scope.items.length; i++) {
8421
+ if ($scope.items[i] === $scope.dragItem) {
8422
+ index = i;
8423
+ }
8424
+ }
8425
+ if (index >= 0) {
8426
+ $scope.items.splice(index, 1);
8427
+ }
8428
+ $scope.eventText = 'drag moved\r\n' + $scope.eventText;
8429
+ };
8430
+ var dragStart = function(item) {
8431
+ $scope.dragItem = item;
8432
+ $scope.eventText = item.name + ': drag start\r\n' + $scope.eventText;
8433
+ };
8434
+
8401
8435
$scope.enableButtonForItemFn = function(action, item) {
8402
8436
return !((action.name ==='Action 2') && (item.name === "Frank Livingston")) &&
8403
8437
!(action.name === 'Start' && item.started);
@@ -8438,6 +8472,10 @@ angular.module('patternfly.views').directive('pfCardView', ["pfUtils", function
8438
8472
selectItems: false,
8439
8473
multiSelect: false,
8440
8474
dblClick: false,
8475
+ dragEnabled: false,
8476
+ dragEnd: dragEnd,
8477
+ dragMoved: dragMoved,
8478
+ dragStart: dragStart,
8441
8479
selectionMatchProp: 'name',
8442
8480
selectedItems: [],
8443
8481
checkDisabled: checkDisabledItem,
@@ -8638,6 +8676,10 @@ angular.module('patternfly.views').directive('pfListView', ["$timeout", "$window
8638
8676
selectItems : false ,
8639
8677
multiSelect : false ,
8640
8678
dblClick : false ,
8679
+ dragEnabled : false ,
8680
+ dragEnd : null ,
8681
+ dragMoved : null ,
8682
+ dragStart : null ,
8641
8683
selectionMatchProp : 'uuid' ,
8642
8684
selectedItems : [ ] ,
8643
8685
checkDisabled : false ,
@@ -8832,6 +8874,30 @@ angular.module('patternfly.views').directive('pfListView', ["$timeout", "$window
8832
8874
scope . checkDisabled = function ( item ) {
8833
8875
return scope . config . checkDisabled && scope . config . checkDisabled ( item ) ;
8834
8876
} ;
8877
+
8878
+ scope . dragEnd = function ( ) {
8879
+ if ( angular . isFunction ( scope . config . dragEnd ) ) {
8880
+ scope . config . dragEnd ( ) ;
8881
+ }
8882
+ } ;
8883
+
8884
+ scope . dragMoved = function ( ) {
8885
+ if ( angular . isFunction ( scope . config . dragMoved ) ) {
8886
+ scope . config . dragMoved ( ) ;
8887
+ }
8888
+ } ;
8889
+
8890
+ scope . isDragOriginal = function ( item ) {
8891
+ return ( item === scope . dragItem ) ;
8892
+ } ;
8893
+
8894
+ scope . dragStart = function ( item ) {
8895
+ scope . dragItem = item ;
8896
+
8897
+ if ( angular . isFunction ( scope . config . dragStart ) ) {
8898
+ scope . config . dragStart ( item ) ;
8899
+ }
8900
+ } ;
8835
8901
}
8836
8902
} ;
8837
8903
} ] ) ;
@@ -10349,7 +10415,7 @@ angular.module('patternfly.wizard').directive('pfWizardSubstep', function () {
10349
10415
10350
10416
10351
10417
$templateCache . put ( 'views/listview/list-view.html' ,
10352
- "<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), '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 uib-dropdown class=\"{{dropdownClass}} pull-right dropdown-kebab-pf {{getMenuClassForItem(item)}} {{hideMenuForItem(item) ? 'invisible' : ''}}\" id=kebab_{{$index}} ng-if=\"menuActions && menuActions.length > 0\"><button uib-dropdown-toggle class=\"btn btn-link\" type=button id=dropdownKebabRight_{{$index}} ng-class=\"{'disabled': checkDisabled(item)}\" ng-click=\"setupActions(item, $event)\"><span class=\"fa fa-ellipsis-v\"></span></button><ul uib-dropdown-menu 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 class=\"list-group-item-container container-fluid\" ng-transclude=expandedContent ng-if=\"config.useExpandingRows && item.isExpanded\"></div></div></div>"
10418
+ "<div class=\"list-group list-view-pf\" dnd-list=items ng-class=\"{'list-view-pf-dnd': config.dragEnabled === true}\"><div class=dndPlaceholder></div><div class=\"list-group-item {{item.rowClass}}\" ng-repeat=\"item in items track by $index\" dnd-draggable=item dnd-effect-allowed=move dnd-disable-if=\"config.dragEnabled !== true\" dnd-dragstart=dragStart(item) dnd-moved=dragMoved() dnd-dragend=dragEnd() ng-class=\"{'drag-original': isDragOriginal(item), '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-dnd-drag-items ng-if=\"config.dragEnabled === true\"><div pf-transclude=parent class=list-view-pf-main-info></div></div><div ng-class=\"{'list-view-pf-dnd-original-items': config.dragEnabled === true}\"><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 uib-dropdown class=\"{{dropdownClass}} pull-right dropdown-kebab-pf {{getMenuClassForItem(item)}} {{hideMenuForItem(item) ? 'invisible' : ''}}\" id=kebab_{{$index}} ng-if=\"menuActions && menuActions.length > 0\"><button uib-dropdown-toggle class=\"btn btn-link\" type=button id=dropdownKebabRight_{{$index}} ng-class=\"{'disabled': checkDisabled(item)}\" ng-click=\"setupActions(item, $event)\"><span class=\"fa fa-ellipsis-v\"></span></button><ul uib-dropdown-menu 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 class=\"list-group-item-container container-fluid\" ng-transclude=expandedContent ng-if=\"config.useExpandingRows && item.isExpanded\"></div></div></div></div></div>"
10353
10419
) ;
10354
10420
10355
10421
} ] ) ;
0 commit comments