From 9ec1c05304e67f8d13064e23448b568d4a23e3ed Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 29 Sep 2019 13:48:00 +0200
Subject: [PATCH] v8: Use umb-radiobutton component in relation types (#6454)

---
 .../forms/umbradiobutton.directive.js         |  6 +-
 .../components/forms/umb-radiobutton.html     |  3 +-
 .../views/relationtypes/edit.controller.js    | 11 ++-
 .../relationtypes/views/relationType.html     | 70 +++++++++----------
 .../views/relationType.settings.controller.js | 31 ++++++++
 5 files changed, 80 insertions(+), 41 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.settings.controller.js

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
index 0036f6904b..df45181991 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
@@ -46,7 +46,7 @@
                     vm.onChange({ model: vm.model, value: vm.value });
                 }, 0);
             }
-        }     
+        }    
     }
 
     var component = {
@@ -58,8 +58,8 @@
             value: "@",
             name: "@",
             text: "@",
-            disabled: "=",
-            required: "=",
+            disabled: "<",
+            required: "<",
             onChange: "&?"
         }
     };
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
index 5ac82c316a..f3daa652d6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
@@ -1,5 +1,6 @@
 <label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
-    <input type="radio" name="{{vm.name}}"
+    <input type="radio"
+        name="{{vm.name}}"
         value="{{vm.value}}"
         class="umb-form-check__input"
         ng-model="vm.model"
diff --git a/src/Umbraco.Web.UI.Client/src/views/relationtypes/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/relationtypes/edit.controller.js
index 7bcbe0716e..138e3e90e2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/relationtypes/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/relationtypes/edit.controller.js
@@ -22,7 +22,12 @@ function RelationTypeEditController($scope, $routeParams, relationTypeResource,
     function init() {
         vm.page.loading = true;
 
-        localizationService.localizeMany(["relationType_tabRelationType", "relationType_tabRelations"]).then(function (data) {
+        var labelKeys = [
+            "relationType_tabRelationType",
+            "relationType_tabRelations"
+        ];
+
+        localizationService.localizeMany(labelKeys).then(function (data) {
             vm.page.navigation = [
                 {
                     "name": data[0],
@@ -51,6 +56,10 @@ function RelationTypeEditController($scope, $routeParams, relationTypeResource,
         formatDates(relationType.relations);
         getRelationNames(relationType);
 
+        // Convert property value to string, since the umb-radiobutton component at the moment only handle string values.
+        // Sometime later the umb-radiobutton might be able to handle value as boolean.
+        relationType.isBidirectional = (relationType.isBidirectional || false).toString();
+
         vm.relationType = relationType;
 
         editorState.set(vm.relationType);
diff --git a/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.html b/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.html
index 7f31461e69..043ced9a5f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.html
+++ b/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.html
@@ -1,40 +1,38 @@
-<umb-box>
-    <umb-box-content>
-        <!-- ID -->
-        <umb-control-group label="Id">
-            <div>{{model.relationType.id}}</div>
-            <small>{{model.relationType.key}}</small>
-        </umb-control-group>
+<div ng-controller="Umbraco.Editors.RelationTypes.SettingsController as vm">
+    <umb-box>
+        <umb-box-content>
+            <!-- ID -->
+            <umb-control-group label="Id">
+                <div>{{model.relationType.id}}</div>
+                <small>{{model.relationType.key}}</small>
+            </umb-control-group>
 
-        <!-- Direction -->
-        <umb-control-group label="@relationType_direction">
-            <ul class="unstyled">
-                <li>
-                    <label class="radio">
-                        <input type="radio" name="relationType-direction" ng-model="model.relationType.isBidirectional" ng-value="false"> <localize key="relationType_parentToChild">Parent to child</localize>
-                    </label>
-                </li>
-                <li>
-                    <label class="radio">
-                        <input type="radio" name="relationType-direction" ng-model="model.relationType.isBidirectional" ng-value="true"> <localize key="relationType_bidirectional">Bidirectional</localize>
-                    </label>
-                </li>
-            </ul>
-        </umb-control-group>
+            <!-- Direction -->
+            <umb-control-group label="@relationType_direction">
+                <ul class="unstyled">
+                    <li>
+                        <umb-radiobutton name="relationTypeDirection" value="false" model="model.relationType.isBidirectional" text="{{vm.labels.parentToChild}}"></umb-radiobutton>
+                    </li>
+                    <li>
+                        <umb-radiobutton name="relationTypeDirection" value="true" model="model.relationType.isBidirectional" text="{{vm.labels.bidirectional}}"></umb-radiobutton>
+                    </li>
+                </ul>
+            </umb-control-group>
 
-        <!-- Parent-->
-        <umb-control-group label="@relationType_parent">
-            <div>{{model.relationType.parentObjectTypeName}}</div>
-        </umb-control-group>
+            <!-- Parent-->
+            <umb-control-group label="@relationType_parent">
+                <div>{{model.relationType.parentObjectTypeName}}</div>
+            </umb-control-group>
 
-        <!-- Child -->
-        <umb-control-group label="@relationType_child">
-            <div>{{model.relationType.childObjectTypeName}}</div>
-        </umb-control-group>
+            <!-- Child -->
+            <umb-control-group label="@relationType_child">
+                <div>{{model.relationType.childObjectTypeName}}</div>
+            </umb-control-group>
 
-        <!-- Relation count -->
-        <umb-control-group label="@relationType_count" ng-if="model.relationType.relations.length > 0">
-            <div>{{model.relationType.relations.length}}</div>
-        </umb-control-group>
-    </umb-box-content>
-</umb-box>
+            <!-- Relation count -->
+            <umb-control-group label="@relationType_count" ng-if="model.relationType.relations.length > 0">
+                <div>{{model.relationType.relations.length}}</div>
+            </umb-control-group>
+        </umb-box-content>
+    </umb-box>
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.settings.controller.js b/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.settings.controller.js
new file mode 100644
index 0000000000..c8e0af0aa9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relationType.settings.controller.js
@@ -0,0 +1,31 @@
+/**
+ * @ngdoc controller
+ * @name Umbraco.Editors.RelationTypes.SettingsController
+ * @function
+ *
+ * @description
+ * The controller for editing relation type settings.
+ */
+function RelationTypeSettingsController($scope, localizationService) {
+
+    var vm = this;
+
+    vm.labels = {};
+
+    function init() {
+
+        var labelKeys = [
+            "relationType_parentToChild",
+            "relationType_bidirectional"
+        ];
+
+        localizationService.localizeMany(labelKeys).then(function (data) {
+            vm.labels.parentToChild = data[0];
+            vm.labels.bidirectional = data[1];
+        });
+    }
+
+    init();
+}
+
+angular.module("umbraco").controller("Umbraco.Editors.RelationTypes.SettingsController", RelationTypeSettingsController);