List view editor, make select all function and show bulk actions when at least 1 thing is selected

This commit is contained in:
Tim Geyssens
2013-09-19 14:47:08 +02:00
parent 2d569b40d2
commit 36133a3ee4
2 changed files with 57 additions and 14 deletions

View File

@@ -2,7 +2,7 @@ angular.module("umbraco")
.controller("Umbraco.Editors.ListViewController",
function ($rootScope, $scope, $routeParams, contentResource, contentTypeResource, editorContextService) {
$scope.selected = [];
$scope.options = {
pageSize: 10,
@@ -68,6 +68,48 @@ angular.module("umbraco")
});
};
var updateSelected = function (action, id) {
if (action === 'add' && $scope.selected.indexOf(id) === -1) {
$scope.selected.push(id);
}
if (action === 'remove' && $scope.selected.indexOf(id) !== -1) {
$scope.selected.splice($scope.selected.indexOf(id), 1);
}
};
$scope.updateSelection = function ($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
updateSelected(action, id);
};
$scope.selectAll = function ($event) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
for (var i = 0; i < $scope.listViewResultSet.items.length; i++) {
var entity = $scope.listViewResultSet.items[i];
updateSelected(action, entity.id);
}
};
$scope.getSelectedClass = function (entity) {
return $scope.isSelected(entity.id) ? 'selected' : '';
};
$scope.isSelected = function (id) {
return $scope.selected.indexOf(id) >= 0;
};
$scope.isSelectedAll = function () {
if ($scope.listViewResultSet != null)
return $scope.selected.length === $scope.listViewResultSet.items.length;
else
return false;
};
$scope.isAnythingSelected = function() {
return $scope.selected.length > 0;
};
if($routeParams.id){
$scope.pagination = new Array(100);

View File

@@ -14,23 +14,24 @@
</li>
</ul>
</div>
<!--
<div class="btn-group">
<a class="btn btn-success">Publish</a>
</div>
<div class="btn-group">
<a class="btn btn-warning">Unpublish</a>
</div>
<div class="btn-group">
<a class="btn btn-danger">Delete</a>
</div>
-->
<div class="btn-group" ng-show="isAnythingSelected()">
<a class="btn btn-success">Publish</a>
</div>
<div class="btn-group" ng-show="isAnythingSelected()">
<a class="btn btn-warning">Unpublish</a>
</div>
<div class="btn-group" ng-show="isAnythingSelected()">
<a class="btn btn-danger">Delete</a>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<td with="20"><input type="checkbox"></td>
<td with="20"><input type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"></td>
<td><a href="#" ng-click="sort('Name')" prevent-default>Name <i class="icon-sort"></i></a></td>
<td><a href="#" ng-click="sort('UpdateDate')" prevent-default>Last updated <i class="icon-sort"></i></a></td>
<td><a href="#" ng-click="sort('Owner')" prevent-default>Editor <i class="icon-sort"></i></a></td>
@@ -43,7 +44,7 @@
<tbody>
<tr ng-repeat="result in listViewResultSet.items">
<td><!--<i class="icon {{result.icon}}"></i>--><input type="checkbox"></td>
<td><!--<i class="icon {{result.icon}}"></i>--><input type="checkbox" ng-checked="isSelected(result.id)" ng-click="updateSelection($event, result.id)"></td>
<td><a href="#/content/content/edit/{{result.id}}">{{result.name}}</a></td>
<td>{{result.updateDate|date:'medium'}}
<!--<<span class="label label-success">Publish</span>-->