From 48ba4f3875aa45e05e35be3a27e93d83bb960cdc Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 7 Jul 2021 10:39:01 +0200
Subject: [PATCH] performance tweaks for validationAlias

---
 .../content/umbtabbedcontent.directive.js     | 21 +++++++++--------
 .../content/umb-tabbed-content.html           |  4 ++--
 .../umb-element-editor-content.component.html |  4 ++--
 .../umbelementeditorcontent.component.js      | 23 ++++++++++---------
 4 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
index 2aac770866..26d250ba3c 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
@@ -105,15 +105,6 @@
                 tab.active = true;
             };
 
-            $scope.getValidationAlias = function ({ parentKey, alias }) {
-                if (parentKey) {
-                    const parentGroup = $scope.content.tabs.find(tab => tab.key === parentKey);
-                    return parentGroup.alias;
-                } else {
-                    return alias;
-                }
-            };
-
             $scope.$watchCollection('content.tabs', () => {
                 $scope.tabs = $filter("filter")($scope.content.tabs, (tab) => {
                     return tab.type === 1;
@@ -122,6 +113,18 @@
                 if ($scope.tabs.length > 0 && !$scope.activeTabKey) {
                     $scope.activeTabKey = $scope.tabs[0].key;
                 }
+
+                // for validation to work for each tab we need to associate a group with a tab.
+                $scope.content.tabs.forEach(group => {
+                    let validationAlias = group.alias;
+
+                    if (group.parentKey) {
+                        const parentGroup = $scope.content.tabs.find(tab => tab.key === group.parentKey);
+                        validationAlias = parentGroup.alias;
+                    }
+
+                    group.validationAlias = validationAlias;
+                });
             });
             
             $scope.$on("editors.apps.appChanged", function($event, $args) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
index 28b57400e3..4ef8d34873 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
@@ -6,7 +6,7 @@
         </umb-editor-tab-bar>
 
         <umb-box ng-repeat="tab in tabs" ng-show="tab.key === activeTabKey && tab.properties.length > 0">
-            <umb-box-content data-element="tab-content-{{getValidationAlias(tab)}}">
+            <umb-box-content data-element="tab-content-{{tab.validationAlias}}">
                 <umb-property
                     data-element="property-{{property.alias}}"
                     ng-repeat="property in tab.properties track by property.alias"
@@ -29,7 +29,7 @@
                 <div id="group-{{group.id}}">{{ group.label }}</div>
             </div>
 
-            <div class="umb-group-panel__content" data-element="tab-content-{{getValidationAlias(group)}}">
+            <div class="umb-group-panel__content" data-element="tab-content-{{group.validationAlias}}">
                 <umb-property
                     data-element="property-{{property.alias}}"
                     ng-repeat="property in group.properties track by property.alias"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umb-element-editor-content.component.html b/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umb-element-editor-content.component.html
index 2f3943598c..d43bc8d829 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umb-element-editor-content.component.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umb-element-editor-content.component.html
@@ -6,7 +6,7 @@
         </umb-editor-tab-bar>
 
         <umb-box ng-repeat="tab in vm.tabs" ng-show="tab.key === vm.activeTabKey && tab.properties.length > 0">
-            <umb-box-content data-element="tab-content-{{vm.getValidationAlias(tab)}}">
+            <umb-box-content data-element="tab-content-{{tab.validationAlias}}">
                 <umb-property
                     data-element="property-{{property.alias}}"
                     ng-repeat="property in tab.properties track by property.alias"
@@ -35,7 +35,7 @@
                 <div id="group-{{group.id}}">{{ group.label }}</div>
             </div>
 
-            <div class="umb-group-panel__content" data-element="tab-content-{{vm.getValidationAlias(group)}}">
+            <div class="umb-group-panel__content" data-element="tab-content-{{group.validationAlias}}">
                 <umb-property
                     data-element="property-{{property.alias}}"
                     ng-repeat="property in group.properties track by property.alias"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umbelementeditorcontent.component.js b/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umbelementeditorcontent.component.js
index afdff488cf..90d020fbc6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umbelementeditorcontent.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umbelementeditorcontent.component.js
@@ -24,7 +24,6 @@
 
         vm.getScope = getScope; // used by property editors to get a scope that is the root of split view, content apps etc.
         vm.setActiveTab = setActiveTab;
-        vm.getValidationAlias = getValidationAlias;
         
         $scope.$watchCollection('vm.model.variants[0].tabs', () => {
             vm.tabs = $filter("filter")(vm.model.variants[0].tabs, (tab) => {
@@ -34,6 +33,18 @@
             if (vm.tabs.length > 0 && !vm.activeTabKey) {
                 vm.activeTabKey = vm.tabs[0].key;
             }
+
+            // for validation to work for each tab we need to associate a group with a tab.
+            vm.model.variants[0].tabs.forEach(group => {
+                let validationAlias = group.alias;
+
+                if (group.parentKey) {
+                    const parentGroup = vm.model.variants[0].tabs.find(tab => tab.key === group.parentKey);
+                    validationAlias = parentGroup.alias;
+                }
+
+                group.validationAlias = validationAlias;
+            });
         });
 
         function getScope() {
@@ -45,16 +56,6 @@
             vm.tabs.forEach(tab => tab.active = false);
             tab.active = true;
         }
-
-        function getValidationAlias ({ parentKey, alias }) {
-            if (parentKey) {
-                const parentGroup = vm.model.variants[0].tabs.find(tab => tab.key === parentKey);
-                return parentGroup.alias;
-            } else {
-                return alias;
-            }
-        }
-
     }
 
 })();