Some more member group picker WIP
This commit is contained in:
Tim Geyssens
@@ -373,6 +373,25 @@ angular.module('umbraco.services')
|
||||
options.show = true;
|
||||
return openDialog(options);
|
||||
},
|
||||
|
||||
/**
|
||||
* @ngdoc method
|
||||
* @name umbraco.services.dialogService#memberGroupPicker
|
||||
* @methodOf umbraco.services.dialogService
|
||||
*
|
||||
* @description
|
||||
* Opens a member group picker in a modal, the callback returns a object representing the selected member
|
||||
* @param {Object} options member group picker dialog options object
|
||||
* @param {$scope} options.scope dialog scope
|
||||
* @param {$scope} options.multiPicker should the tree pick one or multiple members before returning
|
||||
* @param {Function} options.callback callback function
|
||||
* @returns {Object} modal object
|
||||
*/
|
||||
memberGroupPicker: function (options) {
|
||||
options.template = 'views/common/dialogs/memberGroupPicker.html';
|
||||
options.show = true;
|
||||
return openDialog(options);
|
||||
},
|
||||
|
||||
/**
|
||||
* @ngdoc method
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
//used for the member picker dialog
|
||||
angular.module("umbraco").controller("Umbraco.Dialogs.MemberGroupPickerController",
|
||||
function($scope, eventsService, entityResource, searchService, $log) {
|
||||
var dialogOptions = $scope.$parent.dialogOptions;
|
||||
$scope.dialogTreeEventHandler = $({});
|
||||
$scope.results = [];
|
||||
|
||||
/** Method used for selecting a node */
|
||||
function select(text, id, entity) {
|
||||
|
||||
$scope.showSearch = false;
|
||||
$scope.results = [];
|
||||
$scope.term = "";
|
||||
$scope.oldTerm = undefined;
|
||||
|
||||
if (dialogOptions.multiPicker) {
|
||||
$scope.select(id);
|
||||
}
|
||||
else {
|
||||
//if an entity has been passed in, use it
|
||||
if (entity) {
|
||||
$scope.submit(entity);
|
||||
}
|
||||
else {
|
||||
//otherwise we have to get it from the server
|
||||
entityResource.getById(id, "Member").then(function (ent) {
|
||||
$scope.submit(ent);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$scope.performSearch = function() {
|
||||
if ($scope.term) {
|
||||
if ($scope.oldTerm !== $scope.term) {
|
||||
$scope.results = [];
|
||||
searchService.searchMembers({ term: $scope.term }).then(function(data) {
|
||||
$scope.results = data;
|
||||
});
|
||||
$scope.showSearch = true;
|
||||
$scope.oldTerm = $scope.term;
|
||||
}
|
||||
}
|
||||
else {
|
||||
$scope.oldTerm = "";
|
||||
$scope.showSearch = false;
|
||||
$scope.results = [];
|
||||
}
|
||||
};
|
||||
|
||||
/** method to select a search result */
|
||||
$scope.selectResult = function(result) {
|
||||
//since result = an entity, we'll pass it in so we don't have to go back to the server
|
||||
select(result.name, result.id, result);
|
||||
};
|
||||
|
||||
$scope.dialogTreeEventHandler.bind("treeNodeSelect", function(ev, args) {
|
||||
args.event.preventDefault();
|
||||
args.event.stopPropagation();
|
||||
|
||||
if (args.node.nodeType === "member-folder") {
|
||||
return;
|
||||
}
|
||||
|
||||
eventsService.publish("Umbraco.Dialogs.MemberPickerController.Select", args).then(function(a) {
|
||||
|
||||
//This is a tree node, so we don't have an entity to pass in, it will need to be looked up
|
||||
//from the server in this method.
|
||||
select(a.node.name, a.node.id);
|
||||
|
||||
if (dialogOptions && dialogOptions.multipicker) {
|
||||
|
||||
var c = $(a.event.target.parentElement);
|
||||
if (!a.node.selected) {
|
||||
a.node.selected = true;
|
||||
c.find("i.umb-tree-icon").hide()
|
||||
.after("<i class='icon umb-tree-icon sprTree icon-check blue temporary'></i>");
|
||||
}
|
||||
else {
|
||||
a.node.selected = false;
|
||||
c.find(".temporary").remove();
|
||||
c.find("i.umb-tree-icon").show();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,69 @@
|
||||
<div class="umb-panel" ng-controller="Umbraco.Dialogs.MemberGroupPickerController">
|
||||
<div class="umb-panel-header">
|
||||
<div class="umb-el-wrap umb-panel-buttons">
|
||||
<div class="form-search">
|
||||
<i class="icon-search"></i>
|
||||
<input type="text"
|
||||
ng-model="term"
|
||||
class="umb-search-field search-query"
|
||||
placeholder="Filter..."
|
||||
on-keyup="performSearch()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-panel-body with-footer">
|
||||
<!-- Search results -->
|
||||
<div id="search-results" ng-show="showSearch">
|
||||
<ul class="umb-tree">
|
||||
<li class="root">
|
||||
<ul class="umb-search-group" >
|
||||
<li ng-repeat="result in results">
|
||||
<div style="padding-left: 20px">
|
||||
<a ng-class="{first:$first}" ng-click="selectResult(result)">
|
||||
<i
|
||||
class="icon umb-tree-icon sprTree {{result.icon}}"></i>
|
||||
{{result.name}}
|
||||
<small class="search-subtitle" ng-show="result.subTitle">
|
||||
{{result.subTitle}}
|
||||
</small>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div ng-hide="showSearch">
|
||||
<umb-tree
|
||||
section="member"
|
||||
treealias="member"
|
||||
cachekey="memberpickerDialog"
|
||||
showheader="false"
|
||||
showoptions="false"
|
||||
isdialog="true"
|
||||
eventhandler="dialogTreeEventHandler">
|
||||
</umb-tree>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-panel-footer" >
|
||||
<div class="umb-el-wrap umb-panel-buttons">
|
||||
<div class="btn-toolbar umb-btn-toolbar pull-right">
|
||||
|
||||
<a href ng-click="close()" class="btn btn-link">
|
||||
<localize key="general_cancel">Cancel</localize>
|
||||
</a>
|
||||
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
ng-show="multipicker"
|
||||
ng-click="submit(dialogData)">
|
||||
<localize key="buttons_select">Select</localize>({{dialogData.selection.length}})
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +1,7 @@
|
||||
//this controller simply tells the dialogs service to open a memberPicker window
|
||||
//with a specified callback, this callback will receive an object with a selection on it
|
||||
angular.module('umbraco')
|
||||
.controller("Umbraco.PropertyEditors.MemberPickerController",
|
||||
.controller("Umbraco.PropertyEditors.MemberGroupPickerController",
|
||||
|
||||
function($scope, dialogService, entityResource, $log, iconHelper){
|
||||
$scope.renderModel = [];
|
||||
@@ -25,8 +25,8 @@ angular.module('umbraco')
|
||||
});
|
||||
});
|
||||
|
||||
$scope.openMemberPicker =function(){
|
||||
var d = dialogService.memberPicker(
|
||||
$scope.openMemberGroupPicker =function(){
|
||||
var d = dialogService.memberGroupPicker(
|
||||
{
|
||||
scope: $scope,
|
||||
multiPicker: $scope.cfg.multiPicker,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.MemberPickerController" class="umb-editor umb-memberpicker">
|
||||
<div ng-controller="Umbraco.PropertyEditors.MemberGroupPickerController" class="umb-editor umb-membergrouppicker">
|
||||
|
||||
|
||||
<ul class="unstyled"
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<ul class="unstyled">
|
||||
<li>
|
||||
<a href="#" ng-click="openMemberPicker()" prevent-default>
|
||||
<a href="#" ng-click="openMemberGroupPicker()" prevent-default>
|
||||
<i class="icon icon-add"></i> <localize key="general_add">Add</localize>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user