Fix the member group picker

src/Umbraco.Core/Services/IMemberGroupService.cs

@@ -7,6 +7,7 @@ namespace Umbraco.Core.Services
     {
         IEnumerable<IMemberGroup> GetAll();
         IMemberGroup GetById(int id);
+        IEnumerable<IMemberGroup> GetByIds(IEnumerable<int> ids);
         IMemberGroup GetByName(string name);
         void Save(IMemberGroup memberGroup, bool raiseEvents = true);
         void Delete(IMemberGroup memberGroup);

src/Umbraco.Core/Services/Implement/MemberGroupService.cs

@@ -1,4 +1,5 @@
 using System.Collections.Generic;
+using System.Linq;
 using Umbraco.Core.Events;
 using Umbraco.Core.Logging;
 using Umbraco.Core.Models;
@@ -60,6 +61,19 @@ namespace Umbraco.Core.Services.Implement
             }
         }
 
+        public IEnumerable<IMemberGroup> GetByIds(IEnumerable<int> ids)
+        {
+            if (ids == null || ids.Any() == false)
+            {
+                return new IMemberGroup[0];
+            }
+
+            using (var scope = ScopeProvider.CreateScope(autoComplete: true))
+            {
+                return _memberGroupRepository.GetMany(ids.ToArray());
+            }
+        }
+
         public IMemberGroup GetById(int id)
         {
             using (var scope = ScopeProvider.CreateScope(autoComplete: true))

src/Umbraco.Web.UI.Client/src/common/resources/membergroup.resource.js

@@ -29,6 +29,22 @@ function memberGroupResource($q, $http, umbRequestHelper) {
                "Failed to retrieve member group");
         },
 
+        getByIds: function (ids) {
+
+            var idQuery = "";
+            _.each(ids, function (item) {
+                idQuery += "ids=" + item + "&";
+            });
+
+            return umbRequestHelper.resourcePromise(
+                $http.get(
+                    umbRequestHelper.getApiUrl(
+                        "memberGroupApiBaseUrl",
+                        "GetByIds",
+                        idQuery)),
+                "Failed to retrieve member group");
+        },
+
         deleteById: function (id) {
 
             return umbRequestHelper.resourcePromise(

src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js

@@ -1,6 +1,6 @@
 //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
-function memberGroupPicker($scope, editorService){
+function memberGroupPicker($scope, editorService, memberGroupResource){
 
     function trim(str, chr) {
         var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^' + chr + '+|' + chr + '+$', 'g');
@@ -9,26 +9,35 @@ function memberGroupPicker($scope, editorService){
 
     $scope.renderModel = [];
     $scope.allowRemove = true;
-    
+    $scope.groupIds = [];
+
     if ($scope.model.value) {
-        var modelIds = $scope.model.value.split(',');
-        _.each(modelIds, function (item, i) {
-            $scope.renderModel.push({ name: item, id: item, icon: 'icon-users' });
+        var groupIds = $scope.model.value.split(',');
+        memberGroupResource.getByIds(groupIds).then(function(groups) {
+            $scope.renderModel = groups;
         });
     }
 
     $scope.openMemberGroupPicker = function() {
         var memberGroupPicker = {
             multiPicker: true,
-            submit: function(model) {
-                if(model.selectedMemberGroups) {
-                    _.each(model.selectedMemberGroups, function (item, i) {
-                        $scope.add(item);
+            submit: function (model) {
+                var selectedGroupIds = _.map(model.selectedMemberGroups
+                    ? model.selectedMemberGroups
+                    : [model.selectedMemberGroup],
+                    function (id) { return parseInt(id); }
+                );
+                // figure out which groups are new and fetch them
+                var newGroupIds = _.difference(selectedGroupIds, renderModelIds());
+                if (newGroupIds && newGroupIds.length) {
+                    memberGroupResource.getByIds(newGroupIds).then(function (groups) {
+                        $scope.renderModel = _.union($scope.renderModel, groups);
+                        editorService.close();
                     });
                 }
-                if(model.selectedMemberGroup) {
-                    $scope.clear();
-                    $scope.add(model.selectedMemberGroup);
+                else {
+                    // no new groups selected
+                    editorService.close();
                 }
                 editorService.close();
             },
@@ -57,11 +66,14 @@ function memberGroupPicker($scope, editorService){
         $scope.renderModel = [];
     };
 
-    var unsubscribe = $scope.$on("formSubmitting", function (ev, args) {
-        var currIds = _.map($scope.renderModel, function (i) {
+    function renderModelIds() {
+        return _.map($scope.renderModel, function (i) {
             return i.id;
         });
-        $scope.model.value = trim(currIds.join(), ",");
+    }
+
+    var unsubscribe = $scope.$on("formSubmitting", function (ev, args) {
+        $scope.model.value = trim(renderModelIds().join(), ",");
     });
 
     //when the scope is destroyed we need to unsubscribe

src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.html

@@ -2,7 +2,7 @@
 
 	<div ng-model="renderModel">
 		<umb-node-preview
-			ng-repeat="node in renderModel"
+			ng-repeat="node in renderModel | orderBy:'name'"
 			icon="node.icon"
 			name="node.name"
 			allow-remove="allowRemove"

src/Umbraco.Web/Editors/MemberGroupController.cs

@@ -36,6 +36,17 @@ namespace Umbraco.Web.Editors
             return dto;
         }
 
+        public IEnumerable<MemberGroupDisplay> GetByIds([FromUri]int[] ids)
+        {
+            if (_provider.IsUmbracoMembershipProvider())
+            {
+                return Services.MemberGroupService.GetByIds(ids)
+                    .Select(Mapper.Map<IMemberGroup, MemberGroupDisplay>);
+            }
+
+            return Enumerable.Empty<MemberGroupDisplay>();
+        }
+
         [HttpDelete]
         [HttpPost]
         public HttpResponseMessage DeleteById(int id)