From cdaad8e8e3381418893669116b360b61363ef77b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 5 Aug 2021 10:01:26 +0200 Subject: [PATCH] relocate disoriented groups --- .../components/umbgroupsbuilder.directive.js | 34 ++++++------------ .../services/contenteditinghelper.service.js | 36 +++++++++++++++++++ 2 files changed, 46 insertions(+), 24 deletions(-) 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 1616f4e073..779dc0330e 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 @@ -33,12 +33,12 @@ properties: [] }; - // Add parentAlias property to all groups - scope.model.groups.forEach(group => { - group.parentAlias = contentEditingHelper.getParentAlias(group.alias); - }); - eventBindings.push(scope.$watchCollection('model.groups', newValue => { + + contentEditingHelper.defineParentAliasOnGroups(newValue); + console.log("relocateDisorientedGroups:") + contentEditingHelper.relocateDisorientedGroups(newValue); + scope.tabs = $filter("filter")(newValue, group => { return group.type === TYPE_TAB && group.parentAlias == null; }); @@ -46,7 +46,6 @@ // Update index and parentAlias properties of tabs scope.tabs.forEach(tab => { tab.indexInGroups = newValue.findIndex(group => group.alias === tab.alias); - tab.parentAlias = contentEditingHelper.getParentAlias(tab.alias); }); checkGenericTabVisibility(); @@ -122,7 +121,7 @@ group.alias = newAlias; group.parentAlias = parentAlias; - updateDescendingAliases(oldAlias, newAlias); + contentEditingHelper.updateDescendingAliases(scope.model.groups, oldAlias, newAlias); const groupsInTab = scope.model.groups.filter(group => group.parentAlias === parentAlias); updateSortOrder(groupsInTab); @@ -143,6 +142,7 @@ } }; + scope.sortableRequestedTabAlias = null; scope.sortableRequestedTabTimeout = null; scope.droppableOptionsTab = { accept: '.umb-group-builder__property-sortable, .umb-group-builder__group-sortable', @@ -169,6 +169,7 @@ if(scope.sortableRequestedTabTimeout !== null) { $timeout.cancel(scope.sortableRequestedTabTimeout); scope.sortableRequestedTabTimeout = null; + scope.sortableRequestedTabAlias = null; } scope.sortableRequestedTabAlias = hoveredTabAlias; scope.sortableRequestedTabTimeout = $timeout(() => { @@ -180,6 +181,7 @@ if(scope.sortableRequestedTabTimeout !== null) { $timeout.cancel(scope.sortableRequestedTabTimeout); scope.sortableRequestedTabTimeout = null; + scope.sortableRequestedTabAlias = null; } } }; @@ -582,26 +584,10 @@ group.alias = newAlias; group.parentAlias = contentEditingHelper.getParentAlias(newAlias); - updateDescendingAliases(oldAlias, newAlias); + contentEditingHelper.updateDescendingAliases(scope.model.groups, oldAlias, newAlias); return true; } - function updateDescendingAliases(oldParentAlias, newParentAlias) { - scope.model.groups.forEach(group => { - const parentAlias = contentEditingHelper.getParentAlias(group.alias); - - if (parentAlias === oldParentAlias) { - const oldAlias = group.alias, - newAlias = contentEditingHelper.updateParentAlias(oldAlias, newParentAlias); - - group.alias = newAlias; - group.parentAlias = newParentAlias; - updateDescendingAliases(oldAlias, newAlias); - - } - }); - } - scope.isUngroupedPropertiesVisible = ({alias, properties}) => { const isOpenTab = alias === scope.openTabAlias; diff --git a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js index d04652e18a..b56393793a 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js @@ -211,6 +211,22 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt return (parentAlias == null || parentAlias === '') ? localAlias : parentAlias + '/' + localAlias; }, + updateDescendingAliases: function (groups, oldParentAlias, newParentAlias) { + groups.forEach(group => { + const parentAlias = this.getParentAlias(group.alias); + + if (parentAlias === oldParentAlias) { + const oldAlias = group.alias, + newAlias = this.updateParentAlias(oldAlias, newParentAlias); + + group.alias = newAlias; + group.parentAlias = newParentAlias; + this.updateDescendingAliases(groups, oldAlias, newAlias); + + } + }); + }, + registerGenericTab: function (groups) { if (!groups) { return; @@ -243,6 +259,26 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt }); }, + defineParentAliasOnGroups: function (groups) { + groups.forEach(group => { + group.parentAlias = this.getParentAlias(group.alias); + }); + }, + + relocateDisorientedGroups: function (groups) { + const existingAliases = groups.map(group => group.alias); + existingAliases.push(null); + const disorientedGroups = groups.filter(group => existingAliases.indexOf(group.parentAlias) === -1); + disorientedGroups.forEach(group => { + const oldAlias = group.alias, + newAlias = this.updateParentAlias(oldAlias, null); + + group.alias = newAlias; + group.parentAlias = null; + this.updateDescendingAliases(groups, oldAlias, newAlias); + }); + }, + /** Returns the action button definitions based on what permissions the user has. The content.allowedActions parameter contains a list of chars, each represents a button by permission so here we'll build the buttons according to the chars of the user. */