Component to handle multiple lists easily with minimal code + multi-selection

[iranor1]

Hello,

I found your module very useful for an in-house app I am building. I just wanted to share a component I built around it to make it simpler to make multiple lists without too much boilerplate code.

Features:

• Display multiple drag-drop list with one line of code each
• Select multiple elements and drag them to another list
• Shift+click to select elements in-between (doesn't handle unselection yet)
• Choose if elements are added at end of list or in selected spot
• Specify elements to hide without removing them from the list

It works but it needs more polishing. If it may help someone of give you some ideas...

Example:

<drag-list list="parentsToLink" title="Parents" height="210"></drag-list>
<drag-list list="childrenToLink" title="Children" height="210"></drag-list>

In controller

$scope.parentsToLink = {items: $scope.linkedAsset.parents) , dragging: false};
$scope.childrenToLink = {items: $scope.linkedAsset.children), dragging: false};

dragList.js

app.component('dragList', {
	transclude: true,
	bindings: {
	  list: '=',
	  onUpdate: '&',
	  addAtEnd: '<',
	  filterIds: '<',
	  title: '@',
	  height: '@'
	},
	controller: function($scope) {
		var self = this;
			
		$scope.lastSelection = null;

		self.$onInit = function(){
			if (angular.isUndefined(this.addAtEnd) || this.addAtEnd=== null){
				this.addAtEnd = true; 
			}

			if (angular.isUndefined(this.height) || this.height=== null){
				this.height = 200; 
			}
		}
		
		self.$onDestroy = function(){
			if(self.list != null){
				self.list.items.forEach(function(item){
					item.selected = false;
				});
			}
		}
		
		$scope.filterElements = function(){
			return function(item) {
				return !$scope.isFiltered(item.id);
			}
		}

		$scope.selectedItem = function(item, e, list){
			item.selected = !item.selected;

			if(e.shiftKey){
				var lastSelectedIndex = list.items.indexOf($scope.lastSelection);
				var currentIndex = list.items.indexOf(item);
				
				if(currentIndex > lastSelectedIndex){
					for(var i=lastSelectedIndex; i<currentIndex; i++){
						if(!$scope.isFiltered(list.items[i].id)){
							list.items[i].selected = true;
						}
					}
				} else {
					for(var i=currentIndex; i<lastSelectedIndex; i++){
						if(!$scope.isFiltered(list.items[i].id)){
							list.items[i].selected = true;
						}
					}
				}
				
			} else {
				$scope.lastSelection = item;
			}
		}
		
		$scope.isFiltered = function(id){
			if(self.filterIds){
				return self.filterIds.indexOf(id) > -1;
			}
			return false;
		}
		
		$scope.getSelectedItemsIncluding = function(list, item) {
			item.selected = true;
			return list.items.filter(function(item) { return item.selected; });
		}
		
		$scope.onDragstart = function(list, event) {
			list.dragging = true;
		}

		$scope.onDrop = function(list, items, index) {
			angular.forEach(items, function(item) { item.selected = false; });
			
			if(self.addAtEnd){
				list.items = list.items.concat(items);
			} 
			else {
				list.items = list.items.slice(0, index)
				  .concat(items)
				  .concat(list.items.slice(index));
			}
			
			return true;
		}

		$scope.onMoved = function(list) {
			list.items = list.items.filter(function(item) { return !item.selected; });
			self.onUpdate();
		}
	},
	templateUrl: 'components/dragList.html'
});

css file

/* DragDropList */

.panel-body { padding: 5px; }
.panel-heading { padding: 5px; }

.dragDropList ul[dnd-list] {
	min-height: 30px;
	padding-left: 0px;
	height: 90%;
}

.dragDropList ul[dnd-list] .dndDraggingSource {
	display: none;
}

.dragDropList ul[dnd-list] .dndPlaceholder {
	background-color: #ddd;
	display: block;
	min-height: 5px;

}

.dragDropList ul[dnd-list] li {
	background-color: #fff;
	border: 1px solid #ddd;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	display: block;
	padding: 3px 3px;
	margin-bottom: -1px;
	font-size: 12px;
}

.dragDropList ul[dnd-list] li.selected {
	background-color: #dff0d8;
	color: #3c763d;
}

The file dragList.html

<div style="width: 100%" class="dragDropList">
	<div class="panel panel-info">
		<div class="panel-heading" ng-if="$ctrl.title">
			<h3 class="panel-title">{{$ctrl.title}}</h3>
		</div>
		<div class="panel-body" style="height: {{$ctrl.height}}px; overflow-y: auto">

			<ul dnd-list dnd-drop="onDrop($ctrl.list, item, index)">
				<li ng-repeat="item in $ctrl.list.items | filter: filterElements()"
					dnd-draggable="getSelectedItemsIncluding($ctrl.list, item)"
					dnd-dragstart="onDragstart($ctrl.list, event)"
					dnd-moved="onMoved($ctrl.list)"
					dnd-dragend="$ctrl.list.dragging = false"
					dnd-selected="selectedItem(item, event, $ctrl.list)"
					ng-class="{'selected': item.selected}"
					ng-hide="$ctrl.list.dragging && item.selected"
					>
					{{item.name}}
				</li>
			</ul>
		</div>
	</div>
</div>