ListView drag and drop #393
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,64 @@ | ||
| <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? 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-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> | ||
|
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 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> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.