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] 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>