From adcf09c99b551391f3ce6d8aa1b55ce8992e07d2 Mon Sep 17 00:00:00 2001
From: Tim Geyssens <tg@umbraco.com>
Date: Thu, 31 Oct 2013 09:22:06 +0100
Subject: [PATCH 1/4] Work on member group picker, allows multiple selection

---
 .../dialogs/membergrouppicker.controller.js   | 23 +++++++++++++++----
 .../common/dialogs/membergrouppicker.html     |  4 ++--
 .../membergrouppicker.controller.js           |  2 +-
 .../membergrouppicker/membergrouppicker.html  |  5 ++--
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/membergrouppicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/membergrouppicker.controller.js
index d7d85a4142..d9ea9f3a52 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/membergrouppicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/membergrouppicker.controller.js
@@ -4,9 +4,10 @@ angular.module("umbraco").controller("Umbraco.Dialogs.MemberGroupPickerControlle
         var dialogOptions = $scope.$parent.dialogOptions;
         $scope.dialogTreeEventHandler = $({});
         $scope.results = [];
-
+        $scope.dialogData = [];
+        
         /** Method used for selecting a node */
-        function select(text, id, entity) {
+        function select(text, id) {
 
            
             $scope.showSearch = false;
@@ -15,13 +16,23 @@ angular.module("umbraco").controller("Umbraco.Dialogs.MemberGroupPickerControlle
             $scope.oldTerm = undefined;
 
             if (dialogOptions.multiPicker) {
-                $scope.select(id);
+                if ($scope.dialogData.indexOf(id) == -1) {
+                    $scope.dialogData.push(id);
+                }
             }
             else {
                 $scope.submit(id);
                
             }
         }
+        
+        function remove(text, id) {
+            var index = $scope.dialogData.indexOf(id);
+         
+            if (index > -1) {
+                $scope.dialogData.splice(index, 1);
+            }
+        }
 
 
         $scope.dialogTreeEventHandler.bind("treeNodeSelect", function(ev, args) {
@@ -35,8 +46,7 @@ angular.module("umbraco").controller("Umbraco.Dialogs.MemberGroupPickerControlle
                 //from the server in this method.
                 select(a.node.name, a.node.id);
 
-                if (dialogOptions && dialogOptions.multipicker) {
-
+                if (dialogOptions.multiPicker) {
                     var c = $(a.event.target.parentElement);
                     if (!a.node.selected) {
                         a.node.selected = true;
@@ -44,6 +54,9 @@ angular.module("umbraco").controller("Umbraco.Dialogs.MemberGroupPickerControlle
                             .after("<i class='icon umb-tree-icon sprTree icon-check blue temporary'></i>");
                     }
                     else {
+                        
+                        remove(a.node.name, a.node.id);
+                        
                         a.node.selected = false;
                         c.find(".temporary").remove();
                         c.find("i.umb-tree-icon").show();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/membergrouppicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/membergrouppicker.html
index 6a8a0e3551..8779d4feb2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/membergrouppicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/membergrouppicker.html
@@ -26,9 +26,9 @@
 
 					<button
 						class="btn btn-primary"
-						ng-show="multipicker" 
+						ng-show="dialogOptions.multiPicker" 
 						ng-click="submit(dialogData)">
-						<localize key="buttons_select">Select</localize>({{dialogData.selection.length}})
+						<localize key="buttons_select">Select</localize>
 					</button>
 
 		        </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js
index 5cd12cc0cc..e1b892379b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js
@@ -7,7 +7,7 @@ angular.module('umbraco')
 		$scope.renderModel = [];
 		$scope.ids = $scope.model.value.split(',');
 
-		$scope.cfg = {multiPicker: false, entityType: "MemberGroup", type: "membergroup", treeAlias: "memberGroup", filter: ""};
+		$scope.cfg = {multiPicker: true, entityType: "MemberGroup", type: "membergroup", treeAlias: "memberGroup", filter: ""};
 		if($scope.model.config){
 			$scope.cfg = angular.extend($scope.cfg, $scope.model.config);
 		}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.html
index 60b90c9c62..ecb514cc61 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.html
@@ -2,11 +2,10 @@
     
 
     <ul class="unstyled" 
-    		ui-sortable="sortableOptions"
     		ng-model="renderModel">	
     		<li ng-repeat="node in renderModel">
 
-    			<i class="icon icon-navigation handle"></i>
+    			
 
     			<a href="#" prevent-default ng-click="remove($index)">
     				<i class="icon icon-delete red hover-show"></i>
@@ -19,7 +18,7 @@
 	<ul class="unstyled">	
 		<li>
 			<a href="#" ng-click="openMemberGroupPicker()" prevent-default>
-				<i class="icon icon-add"></i> <localize key="general_add">Add</localize>
+				<i class="icon icon-add blue"></i> <localize key="general_add">Add</localize>
 			</a>
 		</li>
 	</ul>

From a79132e92245b2e83eb7b982b6b27f50a701b282 Mon Sep 17 00:00:00 2001
From: Tim Geyssens <tg@umbraco.com>
Date: Thu, 31 Oct 2013 09:29:06 +0100
Subject: [PATCH 2/4] Member groups picker prop editor is working

---
 .../membergrouppicker.controller.js           | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js
index e1b892379b..4e236bd668 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js
@@ -3,11 +3,22 @@
 angular.module('umbraco')
 .controller("Umbraco.PropertyEditors.MemberGroupPickerController",
 	
-	function($scope, dialogService, entityResource, $log, iconHelper){
+	function($scope, dialogService){
 		$scope.renderModel = [];
-		$scope.ids = $scope.model.value.split(',');
+		$scope.ids = [];
 
-		$scope.cfg = {multiPicker: true, entityType: "MemberGroup", type: "membergroup", treeAlias: "memberGroup", filter: ""};
+		
+	    
+	    if ($scope.model.value) {
+	        $scope.ids = $scope.model.value.split(',');
+
+	        $($scope.ids).each(function (i, item) {
+	           
+	            $scope.renderModel.push({ name: item, id: item, icon: 'icon-users' });
+	        });
+	    }
+	    
+	    $scope.cfg = {multiPicker: true, entityType: "MemberGroup", type: "membergroup", treeAlias: "memberGroup", filter: ""};
 		if($scope.model.config){
 			$scope.cfg = angular.extend($scope.cfg, $scope.model.config);
 		}
@@ -49,18 +60,6 @@ angular.module('umbraco')
 	    };
 	   
 
-	    $scope.sortableOptions = {
-	        update: function(e, ui) {
-	        	var r = [];
-	        	angular.forEach($scope.renderModel, function(value, key){
-	        		r.push(value.id);
-	        	});
-
-	        	$scope.ids = r;
-	        	$scope.model.value = trim($scope.ids.join(), ",");
-	        }
-	    };
-
 
 	    $scope.$on("formSubmitting", function (ev, args) {
 			$scope.model.value = trim($scope.ids.join(), ",");

From 2b9211c56d4d21fb5eb79a0c1198807ad12e76f2 Mon Sep 17 00:00:00 2001
From: Tim Geyssens <tg@umbraco.com>
Date: Thu, 31 Oct 2013 10:10:51 +0100
Subject: [PATCH 3/4] Work on related links prop editor

---
 .../relatedlinks/relatedlinks.controller.js   | 81 +++++++++++++------
 .../relatedlinks/relatedlinks.html            | 20 ++++-
 2 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
index 845b620b94..ba1c65fbdb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
@@ -12,6 +12,8 @@
             $scope.newInternal = null;
             $scope.newInternalName = '';
             $scope.addExternal = true;
+            $scope.currentEditLink = null;
+            $scope.hasError = false;
             
             //$scope.relatedLinks = [
             //    { caption: 'Google', link: "http://google.com", newWindow: false, edit:false },
@@ -20,6 +22,18 @@
             //];
 
             $scope.internal = function ($event) {
+
+                $scope.currentEditLink = null;
+                
+                var d = dialogService.contentPicker({ scope: $scope, multipicker: false, callback: select });
+
+                $event.preventDefault();
+            };
+            
+            $scope.selectInternal = function ($event, link) {
+
+                $scope.currentEditLink = link;
+                
                 var d = dialogService.contentPicker({ scope: $scope, multipicker: false, callback: select });
 
                 $event.preventDefault();
@@ -43,32 +57,37 @@
             };
 
             $scope.add = function () {
-
-                if ($scope.addExternal) {
-                    var newExtLink = new function() {
-                        this.caption = $scope.newCaption;
-                        this.link = $scope.newLink;
-                        this.newWindow = $scope.newNewWindow;
-                        this.edit = false;
-                    };
-                    $scope.model.value.push(newExtLink);
+                if ($scope.newCaption == "") {
+                    $scope.hasError = true;
                 } else {
-                    var newIntLink = new function () {
-                        this.caption = $scope.newCaption;
-                        this.link = $scope.newLink;
-                        this.newWindow = $scope.newNewWindow;
-                        this.internal = $scope.newInternal;
-                        this.edit = false;
-                    };
-                    $scope.model.value.push(newIntLink);
+                    if ($scope.addExternal) {
+                        var newExtLink = new function() {
+                            this.caption = $scope.newCaption;
+                            this.link = $scope.newLink;
+                            this.newWindow = $scope.newNewWindow;
+                            this.edit = false;
+                            this.isInternal = false;
+                        };
+                        $scope.model.value.push(newExtLink);
+                    } else {
+                        var newIntLink = new function() {
+                            this.caption = $scope.newCaption;
+                            this.link = $scope.newLink;
+                            this.newWindow = $scope.newNewWindow;
+                            this.internal = $scope.newInternal;
+                            this.edit = false;
+                            this.isInternal = true;
+                            this.iternalName = $scope.newInternalName;
+                        };
+                        $scope.model.value.push(newIntLink);
+                    }
+                    $scope.newCaption = '';
+                    $scope.newLink = 'http://';
+                    $scope.newNewWindow = false;
+                    $scope.newInternal = null;
+                    $scope.newInternalName = '';
+
                 }
-                $scope.newCaption = '';
-                $scope.newLink = 'http://';
-                $scope.newNewWindow = false;
-                $scope.newInternal = null;
-                $scope.newInternalName = '';
-                
-               
             };
 
             $scope.switch = function ($event) {
@@ -76,9 +95,19 @@
                 $event.preventDefault();
             };
             
+            $scope.switchLinkType = function ($event,link) {
+                link.isInternal = !link.isInternal;
+                $event.preventDefault();
+            };
+            
             function select(data) {
-                $scope.newInternal = data.id;
-                $scope.newInternalName = data.name;
+                if ($scope.currentEditLink != null) {
+                    $scope.currentEditLink.internal = data.id;
+                    $scope.currentEditLink.internalName = data.name;
+                } else {
+                    $scope.newInternal = data.id;
+                    $scope.newInternalName = data.name;
+                }
             }
 
             
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
index 522e0097d0..1b23bf76bf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
@@ -16,8 +16,19 @@
                         <input type="text" ng-model="link.caption" ng-show="link.edit"/>
                     </td>
                     <td>
-                        <a href="{{link.link}}" target="_blank" ng-show="!link.edit">{{link.link}}</a>
-                         <input type="text" ng-model="link.link" ng-show="link.edit"/>
+                        <a href="{{link.link}}" target="_blank" ng-show="!link.edit && !link.isInternal">{{link.link}}</a>
+                        <a href="#/content/content/edit/{{link.internal}}" target="_blank" ng-show="!link.edit && link.isInternal">{{link.internalName}}</a>
+                        <div ng-show="link.edit">
+                            <div ng-show="!link.isInternal">
+                                <input type="text" ng-model="link.link"/><br />
+                                or <a href="#" ng-click="switchLinkType($event,link)">choose internal page</a>
+                            </div>
+                            
+                            <div ng-show="link.isInternal">
+                                <span ng-bind="link.internalName"></span> <a href="#" ng-click="selectInternal($event,link)">Choose</a><br/>
+                                or <a href="#" ng-click="switchLinkType($event,link)">enter external link</a>
+                            </div>
+                        </div>
                     </td>
                     <td>
                         <span ng-show="!link.edit">{{link.newWindow}}</span>
@@ -33,14 +44,15 @@
                             <button type="button" class="btn btn-default" ng-click="cancelEdit($index)">Cancel</button>
                             <button type="button" class="btn btn-default" ng-click="cancelEdit($index)">Save</button>
                         </div>
+                        
                     </td>
                 </tr>
                 <tr>
                     <form ng-submit="add()">
-                    <td><input type="text" ng-model="newCaption" placeholder="Enter a new caption" required/></td>
+                    <td><input type="text" ng-model="newCaption" placeholder="Enter a new caption" val-highlight="hasError"/></td>
                         <td>
                             <div ng-show="addExternal">
-                                <input type="text" ng-model="newLink" placeholder="Enter the link" required/>
+                                <input type="text" ng-model="newLink" placeholder="Enter the link"/>
                                 <br/> or
                                 <a href="#" ng-click="switch($event)">choose internal page</a>
                             </div>

From 453769b1e77d02c78cb17b88626a768e351a754d Mon Sep 17 00:00:00 2001
From: Tim Geyssens <tg@umbraco.com>
Date: Thu, 31 Oct 2013 11:28:38 +0100
Subject: [PATCH 4/4] Some styling for related links prop editor

---
 src/Umbraco.Web.UI.Client/src/less/forms.less               | 6 ++++++
 .../views/propertyeditors/relatedlinks/relatedlinks.html    | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index e01da22a56..9925db3d00 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -448,6 +448,12 @@ input[type="checkbox"][readonly] {
   }
 }
 
+//val-highlight directive styling
+.highlight-error {
+    color: @formErrorText !important;
+    border-color: #ee5f5b !important;
+}
+
 //disable the glowing border for the umb-content-name
 .show-validation .umb-headline-editor-wrapper input:focus:invalid,
 .show-validation .umb-headline-editor-wrapper textarea:focus:invalid,
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
index 1b23bf76bf..09041d6d15 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
@@ -63,7 +63,7 @@
                             </div>
                         </td>
                     <td><input type="checkbox" ng-model="newNewWindow"/> </td>
-                    <td>
+                        <td>
                         <div class="btn-group">
                             <input type="submit" class="btn btn-default" value="Add"/>
                         </div>