add sorting for media
This commit is contained in:
Mads Rasmussen
@@ -4,7 +4,7 @@
|
||||
function ContentSortController($scope, $filter, contentResource, navigationService) {
|
||||
|
||||
var vm = this;
|
||||
var parentId = $scope.currentNode.parentId;
|
||||
var parentId = $scope.currentNode.parentId ? $scope.currentNode.parentId : "-1";
|
||||
var id = $scope.currentNode.id;
|
||||
|
||||
vm.loading = false;
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function MediaSortController($scope, $filter, mediaResource, navigationService) {
|
||||
|
||||
var vm = this;
|
||||
var parentId = $scope.currentNode.parentId ? $scope.currentNode.parentId : "-1";
|
||||
var id = $scope.currentNode.id;
|
||||
|
||||
vm.loading = false;
|
||||
vm.children = [];
|
||||
vm.saveButtonState = "init";
|
||||
vm.sortOrder = {};
|
||||
vm.sortableOptions = {
|
||||
distance: 10,
|
||||
tolerance: "pointer",
|
||||
opacity: 0.7,
|
||||
scroll: true,
|
||||
cursor: "move",
|
||||
helper: fixSortableHelper,
|
||||
update: function() {
|
||||
// clear the sort order when drag and drop is used
|
||||
vm.sortOrder.column = "";
|
||||
vm.sortOrder.reverse = false;
|
||||
}
|
||||
};
|
||||
|
||||
vm.save = save;
|
||||
vm.sort = sort;
|
||||
|
||||
function onInit() {
|
||||
vm.loading = true;
|
||||
mediaResource.getChildren(id)
|
||||
.then(function(data){
|
||||
vm.children = data.items;
|
||||
vm.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
function save() {
|
||||
vm.saveButtonState = "busy";
|
||||
|
||||
var args = {
|
||||
parentId: parentId,
|
||||
sortedIds: _.map(vm.children, function(child){ return child.id; })
|
||||
};
|
||||
|
||||
mediaResource.sort(args)
|
||||
.then(function(){
|
||||
navigationService.syncTree({ tree: "media", path: $scope.currentNode.path, forceReload: true, activate: false });
|
||||
vm.saveButtonState = "success";
|
||||
}).catch(function(error) {
|
||||
vm.error = error;
|
||||
vm.saveButtonState = "error";
|
||||
});
|
||||
}
|
||||
|
||||
function fixSortableHelper(e, ui) {
|
||||
// keep the correct width of each table cell when sorting
|
||||
ui.children().each(function () {
|
||||
$(this).width($(this).width());
|
||||
});
|
||||
return ui;
|
||||
}
|
||||
|
||||
function sort(column) {
|
||||
// reverse if it is already ordered by that column
|
||||
if(vm.sortOrder.column === column) {
|
||||
vm.sortOrder.reverse = !vm.sortOrder.reverse
|
||||
} else {
|
||||
vm.sortOrder.column = column;
|
||||
vm.sortOrder.reverse = false;
|
||||
}
|
||||
vm.children = $filter('orderBy')(vm.children, vm.sortOrder.column, vm.sortOrder.reverse);
|
||||
}
|
||||
|
||||
onInit();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Media.SortController", MediaSortController);
|
||||
})();
|
||||
88
src/Umbraco.Web.UI.Client/src/views/media/sort.html
Normal file
88
src/Umbraco.Web.UI.Client/src/views/media/sort.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<div ng-controller="Umbraco.Editors.Media.SortController as vm" ng-cloak>
|
||||
|
||||
<div class="umb-dialog-body with-footer">
|
||||
|
||||
<div class="umb-pane">
|
||||
|
||||
<div ng-if="vm.error">
|
||||
<div class="alert alert-error">
|
||||
<div>{{vm.error.errorMsg}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-load-indicator
|
||||
ng-show="vm.loading">
|
||||
</umb-load-indicator>
|
||||
|
||||
<div ng-if="!vm.loading">
|
||||
<p class="abstract"><localize key="sort_sortHelp"></localize></p>
|
||||
<table class="table table-condensed table-sortable" ng-if="vm.children">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<a ng-href="#" ng-click="vm.sort('name')" prevent-default>
|
||||
<localize key="general_name"></localize>
|
||||
<span ng-if="vm.sortOrder.column === 'name'">
|
||||
<i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
|
||||
<i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a ng-href="#" ng-click="vm.sort('createDate')" prevent-default>
|
||||
<localize key="sort_sortCreationDate"></localize>
|
||||
<span ng-if="vm.sortOrder.column === 'createDate'">
|
||||
<i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
|
||||
<i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a ng-href="#" ng-click="vm.sort('sortOrder')" prevent-default>
|
||||
<localize key="sort_sortOrder"></localize>
|
||||
<span ng-if="vm.sortOrder.column === 'sortOrder'">
|
||||
<i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
|
||||
<i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody ui-sortable="vm.sortableOptions" ng-model="vm.children">
|
||||
<tr ng-repeat="child in vm.children">
|
||||
<td>{{ child.name }}</td>
|
||||
<td>{{ child.createDate }}</td>
|
||||
<td>{{ child.sortOrder }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<umb-empty-state
|
||||
ng-if="!vm.children"
|
||||
position="center">
|
||||
<localize key="sort_sortEmptyState"></localize>
|
||||
</umb-empty-state>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="link"
|
||||
action="nav.hideDialog()"
|
||||
label-key="general_close">
|
||||
</umb-button>
|
||||
<umb-button
|
||||
ng-if="vm.children"
|
||||
type="button"
|
||||
action="vm.save()"
|
||||
state="vm.saveButtonState"
|
||||
button-style="success"
|
||||
label-key="buttons_save">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user