Skip to content

Commit d3f873c

Browse files
dlabrecqjeff-phillips-18
dlabrecq
authored and
jeff-phillips-18
committed
ListView drag and drop for 4.0.0-alpha.x (#394)
* CFUX-311 List View drag and drop for Angular 1.5
1 parent 80e950a commit d3f873c

File tree

7 files changed

+142
-51
lines changed

7 files changed

+142
-51
lines changed

‎Gruntfile.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,8 @@ module.exports = function (grunt) {
148148
'misc/angular-bootstrap-prettify.js',
149149
'node_modules/lodash/lodash.min.js',
150150
'dist/angular-patternfly.js',
151-
'node_modules/angular-ui-router/release/angular-ui-router.min.js'],
151+
'node_modules/angular-ui-router/release/angular-ui-router.min.js',
152+
'node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js'],
152153
html5Mode: false,
153154
template: 'grunt-ngdocs-index.tmpl',
154155
styles: ['node_modules/datatables.net-dt/css/jquery.dataTables.css',

‎npm-shrinkwrap.json

Lines changed: 8 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"angular-sanitize": "1.5.*",
1414
"angular-ui-bootstrap": "2.3.x",
1515
"lodash-amd": "4.x",
16-
"patternfly": "~4.0.0-alpha.2"
16+
"patternfly": "git+https://git@github.com/patternfly/patternfly#list-view-dnd-branch-4.0-dev-dist"
1717
},
1818
"devDependencies": {
1919
"angular-mocks": "1.3.0 - 1.5.*",
@@ -49,14 +49,15 @@
4949
"patternfly-eng-release": "~4.0.0-alpha.2"
5050
},
5151
"optionalDependencies": {
52+
"angular-datatables": "^0.5.6",
53+
"angular-drag-and-drop-lists": "2.0.0",
5254
"bootstrap-select": "~1.10.0",
5355
"c3": "~0.4.11",
56+
"datatables.net": "^1.10.11",
57+
"datatables.net-select": "~1.2.0",
5458
"d3": "~3.5.17",
5559
"jquery": "~2.1.4",
56-
"moment": "~2.14.1",
57-
"angular-datatables": "^0.5.6",
58-
"datatables.net": "^1.10.11",
59-
"datatables.net-select": "~1.2.0"
60+
"moment": "~2.14.1"
6061
},
6162
"scripts": {
6263
"test": "grunt test"

‎src/views/listview/list-view.component.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@
1616
* <li>.showSelectBox - (boolean) Show item selection boxes for each item, default is true
1717
* <li>.selectItems - (boolean) Allow row selection, default is false
1818
* <li>.dlbClick - (boolean) Handle double clicking (item remains selected on a double click). Default is false.
19+
* <li>.dragEnabled - (boolean) Enable drag and drop. Default is false.
20+
* <li>.dragEnd - ( function() ) Function to call when the drag operation ended, default is none
21+
* <li>.dragMoved - ( function() ) Function to call when the drag operation moved an element, default is none
22+
* <li>.dragStart - ( function(item) ) Function to call when the drag operation started, default is none
1923
* <li>.multiSelect - (boolean) Allow multiple row selections, selectItems must also be set, not applicable when dblClick is true. Default is false
2024
* <li>.useExpandingRows - (boolean) Allow row expansion for each list item.
2125
* <li>.selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
@@ -159,6 +163,15 @@
159163
</div>
160164
</form>
161165
</div>
166+
<div class="col-md-12">
167+
<form role="form">
168+
<div class="form-group">
169+
<label class="checkbox-inline">
170+
<input type="checkbox" ng-model="config.dragEnabled">Drag and Drop</input>
171+
</label>
172+
</div>
173+
</form>
174+
</div>
162175
<div class="col-md-12">
163176
<label style="font-weight:normal;vertical-align:center;">Events: </label>
164177
</div>
@@ -192,6 +205,28 @@
192205
return $scope.showDisabled && (item.name === "John Smith");
193206
};
194207
208+
var dragEnd = function() {
209+
$scope.eventText = 'drag end\r\n' + $scope.eventText;
210+
};
211+
var dragMoved = function() {
212+
var index = -1;
213+
214+
for (var i = 0; i < $scope.items.length; i++) {
215+
if ($scope.items[i] === $scope.dragItem) {
216+
index = i;
217+
break;
218+
}
219+
}
220+
if (index >= 0) {
221+
$scope.items.splice(index, 1);
222+
}
223+
$scope.eventText = 'drag moved\r\n' + $scope.eventText;
224+
};
225+
var dragStart = function(item) {
226+
$scope.dragItem = item;
227+
$scope.eventText = item.name + ': drag start\r\n' + $scope.eventText;
228+
};
229+
195230
$scope.enableButtonForItemFn = function(action, item) {
196231
return !((action.name ==='Action 2') && (item.name === "Frank Livingston")) &&
197232
!(action.name === 'Start' && item.started);
@@ -232,6 +267,10 @@
232267
selectItems: false,
233268
multiSelect: false,
234269
dblClick: false,
270+
dragEnabled: false,
271+
dragEnd: dragEnd,
272+
dragMoved: dragMoved,
273+
dragStart: dragStart,
235274
selectionMatchProp: 'name',
236275
selectedItems: [],
237276
itemsAvailable: true,
@@ -444,6 +483,10 @@ angular.module('patternfly.views').component('pfListView', {
444483
selectItems: false,
445484
multiSelect: false,
446485
dblClick: false,
486+
dragEnabled: false,
487+
dragEnd: null,
488+
dragMoved: null,
489+
dragStart: null,
447490
selectionMatchProp: 'uuid',
448491
selectedItems: [],
449492
checkDisabled: false,
@@ -639,5 +682,29 @@ angular.module('patternfly.views').component('pfListView', {
639682
'Cannot allow both select box and click selection in the same list view.');
640683
}
641684
};
685+
686+
ctrl.dragEnd = function () {
687+
if (angular.isFunction(ctrl.config.dragEnd)) {
688+
ctrl.config.dragEnd();
689+
}
690+
};
691+
692+
ctrl.dragMoved = function () {
693+
if (angular.isFunction(ctrl.config.dragMoved)) {
694+
ctrl.config.dragMoved();
695+
}
696+
};
697+
698+
ctrl.isDragOriginal = function (item) {
699+
return (item === ctrl.dragItem);
700+
};
701+
702+
ctrl.dragStart = function (item) {
703+
ctrl.dragItem = item;
704+
705+
if (angular.isFunction(ctrl.config.dragStart)) {
706+
ctrl.config.dragStart(item);
707+
}
708+
};
642709
}
643710
});

‎src/views/listview/list-view.html

Lines changed: 56 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,69 @@
11
<span>
2-
<div class="list-group list-view-pf" ng-if="$ctrl.config.itemsAvailable !== false">
2+
<div class="list-group list-view-pf"
3+
dnd-list="$ctrl.items"
4+
ng-class="{'list-view-pf-dnd': $ctrl.config.dragEnabled === true}"
5+
ng-if="$ctrl.config.itemsAvailable !== false">
6+
<div class='dndPlaceholder'></div>
37
<div class="list-group-item {{item.rowClass}}"
48
ng-repeat="item in $ctrl.items track by $index"
5-
ng-class="{'pf-selectable': $ctrl.selectItems, 'active': $ctrl.isSelected(item), 'disabled': $ctrl.checkDisabled(item), 'list-view-pf-expand-active': item.isExpanded}">
9+
dnd-draggable="item"
10+
dnd-effect-allowed="move"
11+
dnd-disable-if="$ctrl.config.dragEnabled !== true"
12+
dnd-dragstart="$ctrl.dragStart(item)"
13+
dnd-moved="$ctrl.dragMoved()"
14+
dnd-dragend="$ctrl.dragEnd()"
15+
ng-class="{'drag-original': $ctrl.isDragOriginal(item), 'pf-selectable': $ctrl.selectItems, 'active': $ctrl.isSelected(item), 'disabled': $ctrl.checkDisabled(item), 'list-view-pf-expand-active': item.isExpanded}">
616
<div class="list-group-item-header">
7-
<div class="list-view-pf-expand" ng-if="$ctrl.config.useExpandingRows">
8-
<span class="fa fa-angle-right" ng-show="!item.disableRowExpansion" ng-click="$ctrl.toggleItemExpansion(item)" ng-class="{'fa-angle-down': item.isExpanded}"></span>
9-
<span class="pf-expand-placeholder" ng-show="item.disableRowExpansion"></span>
10-
</div>
11-
<div class="list-view-pf-checkbox" ng-if="$ctrl.config.showSelectBox" >
12-
<input type="checkbox" value="item.selected" ng-model="item.selected" ng-disabled="$ctrl.checkDisabled(item)" ng-change="$ctrl.checkBoxChange(item)"/>
17+
<div class="list-view-pf-dnd-drag-items" ng-if="$ctrl.config.dragEnabled === true">
18+
<div pf-transclude="parent" class="list-view-pf-main-info"></div>
1319
</div>
20+
<div ng-class="{'list-view-pf-dnd-original-items': $ctrl.config.dragEnabled === true}">
21+
<div class="list-view-pf-expand" ng-if="$ctrl.config.useExpandingRows">
22+
<span class="fa fa-angle-right" ng-show="!item.disableRowExpansion" ng-click="$ctrl.toggleItemExpansion(item)" ng-class="{'fa-angle-down': item.isExpanded}"></span>
23+
<span class="pf-expand-placeholder" ng-show="item.disableRowExpansion"></span>
24+
</div>
25+
<div class="list-view-pf-checkbox" ng-if="$ctrl.config.showSelectBox" >
26+
<input type="checkbox" value="item.selected" ng-model="item.selected" ng-disabled="$ctrl.checkDisabled(item)" ng-change="$ctrl.checkBoxChange(item)"/>
27+
</div>
1428

15-
<div class="list-view-pf-actions"
16-
ng-if="($ctrl.actionButtons && $ctrl.actionButtons.length > 0) || ($ctrl.menuActions && $ctrl.menuActions.length > 0)">
17-
<button class="btn btn-default {{actionButton.class}}" ng-repeat="actionButton in $ctrl.actionButtons"
18-
title="{{actionButton.title}}"
19-
ng-class="{'disabled' : $ctrl.checkDisabled(item) || !$ctrl.enableButtonForItem(actionButton, item)}"
20-
ng-click="$ctrl.handleButtonAction(actionButton, item)">
21-
<div ng-if="actionButton.include" class="actionButton.includeClass" ng-include src="actionButton.include"></div>
22-
<span ng-if="!actionButton.include">{{actionButton.name}}</span>
23-
</button>
24-
<div uib-dropdown class="{{$ctrl.dropdownClass}} pull-right dropdown-kebab-pf {{$ctrl.getMenuClassForItem(item)}} {{$ctrl.hideMenuForItem(item) ? 'invisible' : ''}}"
25-
id="kebab_{{$index}}"
26-
ng-if="$ctrl.menuActions && $ctrl.menuActions.length > 0">
27-
<button uib-dropdown-toggle class="btn btn-link" type="button"
28-
id="dropdownKebabRight_{{$index}}"
29-
ng-class="{'disabled': $ctrl.checkDisabled(item)}"
30-
ng-click="$ctrl.setupActions(item, $event)">
31-
<span class="fa fa-ellipsis-v"></span>
29+
<div class="list-view-pf-actions"
30+
ng-if="($ctrl.actionButtons && $ctrl.actionButtons.length > 0) || ($ctrl.menuActions && $ctrl.menuActions.length > 0)">
31+
<button class="btn btn-default {{actionButton.class}}" ng-repeat="actionButton in $ctrl.actionButtons"
32+
title="{{actionButton.title}}"
33+
ng-class="{'disabled' : $ctrl.checkDisabled(item) || !$ctrl.enableButtonForItem(actionButton, item)}"
34+
ng-click="$ctrl.handleButtonAction(actionButton, item)">
35+
<div ng-if="actionButton.include" class="actionButton.includeClass" ng-include src="actionButton.include"></div>
36+
<span ng-if="!actionButton.include">{{actionButton.name}}</span>
3237
</button>
33-
<ul uib-dropdown-menu class="dropdown-menu dropdown-menu-right {{$index}}" aria-labelledby="dropdownKebabRight_{{$index}}" >
34-
<li ng-repeat="menuAction in $ctrl.menuActions"
35-
ng-if="menuAction.isVisible !== false"
36-
role="{{menuAction.isSeparator === true ? 'separator' : 'menuitem'}}"
37-
ng-class="{'divider': (menuAction.isSeparator === true), 'disabled': (menuAction.isDisabled === true)}">
38-
<a ng-if="menuAction.isSeparator !== true" title="{{menuAction.title}}" ng-click="$ctrl.handleMenuAction(menuAction, item)">
39-
{{menuAction.name}}
40-
</a>
41-
</li>
42-
</ul>
38+
<div uib-dropdown class="{{$ctrl.dropdownClass}} pull-right dropdown-kebab-pf {{$ctrl.getMenuClassForItem(item)}} {{$ctrl.hideMenuForItem(item) ? 'invisible' : ''}}"
39+
id="kebab_{{$index}}"
40+
ng-if="$ctrl.menuActions && $ctrl.menuActions.length > 0">
41+
<button uib-dropdown-toggle class="btn btn-link" type="button"
42+
id="dropdownKebabRight_{{$index}}"
43+
ng-class="{'disabled': $ctrl.checkDisabled(item)}"
44+
ng-click="$ctrl.setupActions(item, $event)">
45+
<span class="fa fa-ellipsis-v"></span>
46+
</button>
47+
<ul uib-dropdown-menu class="dropdown-menu dropdown-menu-right {{$index}}" aria-labelledby="dropdownKebabRight_{{$index}}" >
48+
<li ng-repeat="menuAction in $ctrl.menuActions"
49+
ng-if="menuAction.isVisible !== false"
50+
role="{{menuAction.isSeparator === true ? 'separator' : 'menuitem'}}"
51+
ng-class="{'divider': (menuAction.isSeparator === true), 'disabled': (menuAction.isDisabled === true)}">
52+
<a ng-if="menuAction.isSeparator !== true" title="{{menuAction.title}}" ng-click="$ctrl.handleMenuAction(menuAction, item)">
53+
{{menuAction.name}}
54+
</a>
55+
</li>
56+
</ul>
57+
</div>
58+
</div>
59+
<div pf-transclude="parent"
60+
class="list-view-pf-main-info"
61+
ng-click="$ctrl.itemClick($event, item)"
62+
ng-dblclick="$ctrl.dblClick($event, item)">
4363
</div>
4464
</div>
45-
<div pf-transclude="parent"
46-
class="list-view-pf-main-info"
47-
ng-click="$ctrl.itemClick($event, item)"
48-
ng-dblclick="$ctrl.dblClick($event, item)">
49-
</div>
65+
<div class="list-group-item-container container-fluid" ng-transclude="expandedContent" ng-if="$ctrl.config.useExpandingRows && item.isExpanded"></div>
5066
</div>
51-
<div class="list-group-item-container container-fluid" ng-transclude="expandedContent" ng-if="$ctrl.config.useExpandingRows && item.isExpanded"></div>
5267
</div>
5368
</div>
5469
<pf-empty-state ng-if="$ctrl.config.itemsAvailable === false" config="$ctrl.emptyStateConfig"></pf-empty-state>

‎src/views/views.module.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@
55
* Views module for patternfly.
66
*
77
*/
8-
angular.module('patternfly.views', ['patternfly.utils', 'patternfly.filters', 'patternfly.sort', 'patternfly.charts']);
8+
angular.module('patternfly.views', ['patternfly.utils', 'patternfly.filters', 'patternfly.sort', 'patternfly.charts', 'dndLists']);

‎test/karma.conf.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ module.exports = function(config) {
3131
'test/wizard/script.js',
3232
'test/**/*.spec.js',
3333
'test/**/*.html',
34-
'node_modules/angular-ui-router/release/angular-ui-router.min.js'
34+
'node_modules/angular-ui-router/release/angular-ui-router.min.js',
35+
'node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js'
3536
],
3637

3738
// list of files to exclude

0 commit comments

Comments
 (0)