Skip to content

Commit aed2484

Browse files
dlabrecqjeff-phillips-18
dlabrecq
authored and
jeff-phillips-18
committed
ListView drag and drop (#393)
* CFUX-311 List View drag and drop for Angular 1
1 parent 5a88309 commit aed2484

File tree

7 files changed

+137
-48
lines changed

7 files changed

+137
-48
lines changed

‎Gruntfile.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,10 +142,11 @@ module.exports = function (grunt) {
142142
'misc/angular-bootstrap-prettify.js',
143143
'lib/lodash/lodash.min.js',
144144
'dist/angular-patternfly.js',
145-
'lib/angular-ui-router/release/angular-ui-router.min.js'],
145+
'lib/angular-ui-router/release/angular-ui-router.min.js',
146+
'node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js'],
146147
html5Mode: false,
147148
template: 'grunt-ngdocs-index.tmpl',
148-
styles: ['lib/patternfly/dist/css/patternfly.css', 'lib/patternfly/dist/css/patternfly-additions.css',
149+
styles: ['node_modules/patternfly/dist/css/patternfly.css', 'node_modules/patternfly/dist/css/patternfly-additions.css',
149150
'dist/styles/angular-patternfly.css', 'misc/ng-docs.css', 'misc/examples.css']
150151
},
151152

‎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: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"angular-sanitize": "1.3.0 - 1.5.*",
1414
"angular-ui-bootstrap": "0.14.x",
1515
"lodash": "3.x",
16-
"patternfly": "~3.18.1"
16+
"patternfly": "git+https://[email protected]/patternfly/patternfly#list-view-dnd-dist"
1717
},
1818
"devDependencies": {
1919
"express": "3.4.4",
@@ -45,6 +45,9 @@
4545
"nsp": "^2.6.1",
4646
"patternfly-eng-release": "~3.18.1"
4747
},
48+
"optionalDependencies": {
49+
"angular-drag-and-drop-lists": "2.0.0"
50+
},
4851
"scripts": {
4952
"test": "grunt test"
5053
},

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
* <li>.showSelectBox - (boolean) Show item selection boxes for each item, default is true
1616
* <li>.selectItems - (boolean) Allow row selection, default is false
1717
* <li>.dlbClick - (boolean) Handle double clicking (item remains selected on a double click). Default is false.
18+
* <li>.dragEnabled - (boolean) Enable drag and drop. Default is false.
19+
* <li>.dragEnd - ( function() ) Function to call when the drag operation ended, default is none
20+
* <li>.dragMoved - ( function() ) Function to call when the drag operation moved an element, default is none
21+
* <li>.dragStart - ( function(item) ) Function to call when the drag operation started, default is none
1822
* <li>.multiSelect - (boolean) Allow multiple row selections, selectItems must also be set, not applicable when dblClick is true. Default is false
1923
* <li>.useExpandingRows - (boolean) Allow row expansion for each list item.
2024
* <li>.selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
@@ -151,6 +155,15 @@
151155
</div>
152156
</form>
153157
</div>
158+
<div class="col-md-12">
159+
<form role="form">
160+
<div class="form-group">
161+
<label class="checkbox-inline">
162+
<input type="checkbox" ng-model="config.dragEnabled">Drag and Drop</input>
163+
</label>
164+
</div>
165+
</form>
166+
</div>
154167
<div class="col-md-12">
155168
<label style="font-weight:normal;vertical-align:center;">Events: </label>
156169
</div>
@@ -184,6 +197,27 @@
184197
return $scope.showDisabled && (item.name === "John Smith");
185198
};
186199
200+
var dragEnd = function() {
201+
$scope.eventText = 'drag end\r\n' + $scope.eventText;
202+
};
203+
var dragMoved = function() {
204+
var index = -1;
205+
206+
for (var i = 0; i < $scope.items.length; i++) {
207+
if ($scope.items[i] === $scope.dragItem) {
208+
index = i;
209+
}
210+
}
211+
if (index >= 0) {
212+
$scope.items.splice(index, 1);
213+
}
214+
$scope.eventText = 'drag moved\r\n' + $scope.eventText;
215+
};
216+
var dragStart = function(item) {
217+
$scope.dragItem = item;
218+
$scope.eventText = item.name + ': drag start\r\n' + $scope.eventText;
219+
};
220+
187221
$scope.enableButtonForItemFn = function(action, item) {
188222
return !((action.name ==='Action 2') && (item.name === "Frank Livingston")) &&
189223
!(action.name === 'Start' && item.started);
@@ -224,6 +258,10 @@
224258
selectItems: false,
225259
multiSelect: false,
226260
dblClick: false,
261+
dragEnabled: false,
262+
dragEnd: dragEnd,
263+
dragMoved: dragMoved,
264+
dragStart: dragStart,
227265
selectionMatchProp: 'name',
228266
selectedItems: [],
229267
checkDisabled: checkDisabledItem,
@@ -424,6 +462,10 @@ angular.module('patternfly.views').directive('pfListView', function ($timeout, $
424462
selectItems: false,
425463
multiSelect: false,
426464
dblClick: false,
465+
dragEnabled: false,
466+
dragEnd: null,
467+
dragMoved: null,
468+
dragStart: null,
427469
selectionMatchProp: 'uuid',
428470
selectedItems: [],
429471
checkDisabled: false,
@@ -618,6 +660,30 @@ angular.module('patternfly.views').directive('pfListView', function ($timeout, $
618660
scope.checkDisabled = function (item) {
619661
return scope.config.checkDisabled && scope.config.checkDisabled(item);
620662
};
663+
664+
scope.dragEnd = function () {
665+
if (angular.isFunction(scope.config.dragEnd)) {
666+
scope.config.dragEnd();
667+
}
668+
};
669+
670+
scope.dragMoved = function () {
671+
if (angular.isFunction(scope.config.dragMoved)) {
672+
scope.config.dragMoved();
673+
}
674+
};
675+
676+
scope.isDragOriginal = function (item) {
677+
return (item === scope.dragItem);
678+
};
679+
680+
scope.dragStart = function (item) {
681+
scope.dragItem = item;
682+
683+
if (angular.isFunction(scope.config.dragStart)) {
684+
scope.config.dragStart(item);
685+
}
686+
};
621687
}
622688
};
623689
});

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

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

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

‎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-
'lib/angular-ui-router/release/angular-ui-router.min.js'
34+
'lib/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)