From 8ade4a24fd1bfea2e65d2181fbd29c20c13253e3 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 1 Jul 2021 11:50:25 +0200
Subject: [PATCH] wire up server validation for properties on tabs

---
 .../contenttype/umbcontenttypetab.component.js    |  3 ++-
 .../components/umbgroupsbuilder.directive.js      | 15 +++++----------
 .../src/views/components/umb-groups-builder.html  |  6 +++---
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
index e030593204..e9bcbe5759 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
@@ -81,7 +81,8 @@
       onFocusName: '&?',
       onFocus: '&?',
       onChangeSortOrderValue: '&?',
-      onChangeName: '&?'
+      onChangeName: '&?',
+      valServerFieldName: '@'
     },
     controller: umbContentTypeTabController
   };
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
index 77423e6dbf..26a6982938 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
@@ -28,6 +28,10 @@
                 scope.tabs = $filter("filter")(scope.model.groups, (group) => {
                     return group.type === TYPE_TAB;
                 });
+
+                scope.tabs.forEach(tab => {
+                    tab.indexInGroups = scope.model.groups.findIndex(group => group.key === tab.key);
+                });
             });
 
             function getFirstTab () {
@@ -391,7 +395,7 @@
 
             };
 
-            /* ---------- TABS ---------- */
+            /* ---------- TABS ---------- */            
             scope.changeTab = function ({key}) {
                 scope.openTabKey = key;
             };
@@ -449,15 +453,6 @@
                 scope.$broadcast('umbOverflowChecker.checkOverflow');
             };
 
-            scope.getTabServerFieldName = function (tab) {
-                if (!tab) {
-                    return;
-                }
-
-                const indexInGroup = scope.model.groups.findIndex(group => group.key === tab.key);
-                return `Groups[${indexInGroup}].Name`;
-            };
-
             scope.ungroupedPropertiesAreVisible = function({key, properties}) {
                 const isOpenTab = key === scope.openTabKey;
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index 41ab40ac09..236c63f742 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -17,7 +17,7 @@
                             sorting="sortingMode"
                             allow-remove="canRemoveTab(tab) && !sortingMode"
                             on-remove="removeTab(tab)"
-                            val-server-field-name="{{ getTabServerFieldName(tab) }}"
+                            val-server-field-name="{{'Groups[' + tab.indexInGroups + '].Name'}}"
                             on-change-sort-order-value="onChangeTabSortOrderValue(tab)"
                             on-change-icon="onChangeTabIcon(icon, color, tab)"
                             on-change-name="onChangeTabName(name)">
@@ -90,8 +90,8 @@
                         sortable="sortingMode"
                         on-edit="editPropertyTypeSettings(property)"
                         on-remove="deleteProperty(tab.properties, property)"
-                        val-server-field-alias="{{'Groups[' + tabIndex + '].Properties[' + propertyIndex + '].Alias'}}"
-                        val-server-field-label="{{'Groups[' + tabIndex + '].Properties[' + propertyIndex + '].Label'}}"
+                        val-server-field-alias="{{'Groups[' + tab.indexInGroups + '].Properties[' + propertyIndex + '].Alias'}}"
+                        val-server-field-label="{{'Groups[' + tab.indexInGroups + '].Properties[' + propertyIndex + '].Label'}}"
                         on-change-sort-order-value="onChangePropertySortOrderValue(tab)">
                     </umb-content-type-property>
                 </li>