Update icon in member group picker (#10094)

* Use member group icon as default icon

* Make pickers consistent using member group entity icon

* Remove unused functions

* Use vm

* Use original getSelected() function

* Include clear function again

* Fix merge conflict

* Remove comment - remove function is requested from <umb-node-preview> in view

* Remove comment - wasn't used, but intend to use in PR 10096 to use property actions to clear member group picker

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

@@ -2,6 +2,12 @@
 //with a specified callback, this callback will receive an object with a selection on it
 function memberGroupPicker($scope, editorService, memberGroupResource){
 
+    var vm = this;
+
+    vm.openMemberGroupPicker = openMemberGroupPicker;
+    vm.remove = remove;
+    vm.clear = clear;
+
     function trim(str, chr) {
         var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^' + chr + '+|' + chr + '+$', 'g');
         return str.replace(rgxtrim, '');
@@ -24,7 +30,7 @@ function memberGroupPicker($scope, editorService, memberGroupResource){
         }
     }
 
-    $scope.openMemberGroupPicker = function() {
+    function openMemberGroupPicker() {
         var memberGroupPicker = {
             multiPicker: true,
             submit: function (model) {
@@ -52,31 +58,17 @@ function memberGroupPicker($scope, editorService, memberGroupResource){
             }
         };
         editorService.memberGroupPicker(memberGroupPicker);
-    };
+    }
 
-    // TODO: I don't believe this is used
-    $scope.remove = function(index){
+    function remove(index) {
         $scope.renderModel.splice(index, 1);
         setDirty();
-    };
+    }
 
-    // TODO: I don't believe this is used
-    $scope.add = function (item) {
-        var currIds = _.map($scope.renderModel, function (i) {
-            return i.id;
-        });
-
-        if (currIds.indexOf(item) < 0) {
-            $scope.renderModel.push({ name: item, id: item, icon: 'icon-users' });
-            setDirty();
-        }	
-    };
-
-    // TODO: I don't believe this is used
-    $scope.clear = function() {
+    function clear() {
         $scope.renderModel = [];
         setDirty();
-    };
+    }
 
     function renderModelIds() {
         return _.map($scope.renderModel, function (i) {

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

@@ -1,17 +1,18 @@
-<div ng-controller="Umbraco.PropertyEditors.MemberGroupPickerController" class="umb-property-editor umb-membergrouppicker">
+<div ng-controller="Umbraco.PropertyEditors.MemberGroupPickerController as vm" class="umb-property-editor umb-membergrouppicker">
 
 	<div ng-model="renderModel">
-		<umb-node-preview ng-repeat="node in renderModel | orderBy:'name'"
-						  icon="node.icon"
-						  name="node.name"
-						  allow-remove="allowRemove"
-						  on-remove="remove($index)">
+		<umb-node-preview
+			ng-repeat="node in renderModel | orderBy:'name'"
+			icon="node.icon"
+			name="node.name"
+			allow-remove="allowRemove"
+			on-remove="vm.remove($index)">
 		</umb-node-preview>
 	</div>
 
 	<button type="button"
-			class="umb-node-preview-add"
-			ng-click="openMemberGroupPicker()">
+            class="umb-node-preview-add"
+            ng-click="vm.openMemberGroupPicker()">
 		<localize key="general_add">Add</localize>
 	</button>
 

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

@@ -1,4 +1,10 @@
 function memberGroupController($scope, editorService, memberGroupResource) {
+
+    var vm = this;
+
+    vm.pickGroup = pickGroup;
+    vm.removeGroup = removeGroup;
+
     //set the selected to the keys of the dictionary who's value is true
     $scope.getSelected = function () {
         var selected = [];
@@ -16,7 +22,7 @@
         }
     }
 
-    $scope.pickGroup = function() {
+    function pickGroup() {
         editorService.memberGroupPicker({
             multiPicker: true,
             submit: function (model) {
@@ -39,7 +45,7 @@
         });
     }
 
-    $scope.removeGroup = function (group) {
+    function removeGroup(group) {
         $scope.model.value[group] = false;
         setDirty();
     }

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

@@ -1,15 +1,15 @@
-<div ng-controller="Umbraco.PropertyEditors.MemberGroupController">
+<div ng-controller="Umbraco.PropertyEditors.MemberGroupController as vm">
 
     <umb-node-preview ng-repeat="group in getSelected() | orderBy"
-                      icon="'icon-users'"
+                      icon="'icon-users-alt'"
                       name="group"
                       allow-remove="true"
-                      on-remove="removeGroup(group)">
+                      on-remove="vm.removeGroup(group)">
     </umb-node-preview>
 
     <button type="button"
             class="umb-node-preview-add"
-            ng-click="pickGroup()">
+            ng-click="vm.pickGroup()">
         <localize key="general_add">Add</localize>
     </button>
 

src/Umbraco.Web/Models/Mapping/MemberMapDefinition.cs

@@ -143,6 +143,7 @@ namespace Umbraco.Web.Models.Mapping
         // Umbraco.Code.MapAll -Icon -Trashed -ParentId -Alias
         private void Map(IMemberGroup source, MemberGroupDisplay target, MapperContext context)
         {
+            target.Icon = Constants.Icons.MemberGroup;
             target.Id = source.Id;
             target.Key = source.Key;
             target.Name = source.Name;