ListView drag and drop #393
Conversation
| @@ -618,6 +660,30 @@ angular.module('patternfly.views').directive('pfListView', function ($timeout, $ | |||
| scope.checkDisabled = function (item) { | |||
| return scope.config.checkDisabled && scope.config.checkDisabled(item); | |||
| }; | |||
|
|
|||
| scope.dragEnd = function () { | |||
| if (scope.config.dragEnd) { | |||
There was a problem hiding this comment.
Safer to us use angular.isFunction(scope.config.dragEnd) when checking these config items
| @@ -1,52 +1,64 @@ | |||
| <div class="list-group list-view-pf"> | |||
| <div class="list-group list-view-pf" dnd-list="items" ng-class="{'list-view-pf-dnd': config.dragEnabled === true}"> | |||
| <div class='dndPlaceholder'></div> | |||
There was a problem hiding this comment.
Should this div only be added when drag drop is enabled?
There was a problem hiding this comment.
The placeholder div has to be there; otherwise, I get an ugly empty space at the top of the list when enabled.
There was a problem hiding this comment.
yeah, but if drag/drop is not enabled it should be OK without it right?
(ng-if="config.dragEnabled")
There was a problem hiding this comment.
I tried this and I don't quite understand why it behaves this way but you are correct. I don't see why the ng-if makes a difference but I guess we leave it as is.
There was a problem hiding this comment.
I don't quite understand why it behaves like this, but suspect the library is looking for the selector when the page is loaded. If I don't provide this tag, the dnd library will use an HTML "li" element and then you see a list dot in the page when dragging.
There was a problem hiding this comment.
If this is a problem, I can style the HTML "li" element to not show up. Just thought this solution was more elegant than incorrectly using an "li" within a "div" tag.
There was a problem hiding this comment.
Yeah, if is fine as is. No harm no foul.
| <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 class="list-view-pf-dnd-drag-items"> | ||
| <div pf-transclude="parent" class="list-view-pf-main-info"></div> | ||
| </div> |
There was a problem hiding this comment.
This div should only be added if drag and drop is enabled
There was a problem hiding this comment.
Yes, I will add this only when drag and drop is enabled.
| </div> | ||
| <div class="list-view-pf-dnd-original-items"> |
There was a problem hiding this comment.
only add the class if drag/drop is enabled
|
Updated per Jeffs code review comments. |
| var dragEnd = function() { | ||
| $scope.eventText = 'drag end\r\n' + $scope.eventText; | ||
| }; | ||
| var dragMoved = function() { |
There was a problem hiding this comment.
Shouldn't this dragMoved functionality be the default behavior in the directive instead of leaving it up to the end users to implement it correctly?
There was a problem hiding this comment.
Applications will want to handle this on their own. Moving an item's order in the list would typically require a backend call to make the change. Maybe some validation, etc.
|
LGTM. I like the way the drag-n-drop works with all the existing selecting mechanisms and row expand content :-) |
Description
A CloudForms contribution adding drag and drop features to the ListView component for Angular 1. There is a separate PR for Angular 1.5 (i.e., the branch-4.0-dev branch).
Note that Patternfly depends on a feature branch for the CSS. However, this dependency will be replaced automatically by build scripts, upon the next release.
See: https://patternfly.atlassian.net/browse/CFUX-311
Steps to test or reproduce and link to rawgit
https://dlabrecq.github.io/angular-patternfly.github.io/index.html#/api/patternfly.views.directive:pfListView