yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use Alias for groups

Browse Source
This commit is contained in:
Niels Lyngsø
2021-07-13 17:17:23 +02:00
parent bff132993f
commit abec5d61f2
5 changed files with 61 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
View File

@@ -4,7 +4,7 @@
/**
* A component to render the content type tab
*/
function umbContentTypeTabController() {
const vm = this;
@@ -48,7 +48,7 @@
function changeName () {
if (vm.onChangeName) {
vm.onChangeName({ name: vm.tab.name });
vm.onChangeName({ key: vm.tab.key, name: vm.tab.name });
}
}

71
src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
View File

@@ -21,7 +21,7 @@
scope.compositionsButtonState = "init";
scope.tabs = [];
scope.genericGroups = [];
scope.openTabAlias = null;
scope.openTabAlias = "";
scope.hasGenericTab = false;
scope.genericTab = {
key: null,
@@ -46,7 +46,7 @@
checkGenericTabVisibility();
if (!scope.openTabAlias && scope.hasGenericTab) {
scope.openTabAlias = null;
scope.openTabAlias = "";
} else if (!scope.openTabAlias && scope.tabs.length > 0) {
scope.openTabAlias = scope.tabs[0].alias;
}
@@ -126,7 +126,7 @@
accept: '.umb-group-builder__property-sortable, .umb-group-builder__group-sortable',
tolerance : 'pointer',
over: function (evt, ui) {
scope.openTabKey = evt.target.dataset.tabKey || null;
scope.openTabAlias = evt.target.dataset.tabAlias || "";
scope.$evalAsync();
}
};
@@ -416,7 +416,7 @@
const tab = {
key: String.CreateGuid(),
name: "",
parentKey: null,
parentAlias: "",
type: TYPE_TAB,
sortOrder,
properties: []
@@ -425,14 +425,14 @@
if (newTabIndex === 0) {
scope.model.groups.forEach(group => {
if (!group.inherited) {
group.parentKey = tab.key;
group.parentAlias = tab.alias;
}
});
}
scope.model.groups = [...scope.model.groups, tab];
scope.openTabKey = tab.key;
scope.openTabAlias = tab.alias;
scope.$broadcast('umbOverflowChecker.scrollTo', { position: 'end' });
scope.$broadcast('umbOverflowChecker.checkOverflow');
@@ -449,14 +449,14 @@
scope.model.groups.splice(tab.indexInGroups, 1);
// remove all child groups
scope.model.groups = scope.model.groups.filter(group => group.parentKey !== tab.key);
scope.model.groups = scope.model.groups.filter(group => group.parentAlias !== tab.alias);
// we need a timeout because the filter hasn't updated the tabs collection
$timeout(() => {
if (scope.tabs.length > 0) {
scope.openTabKey = indexInTabs > 0 ? scope.tabs[indexInTabs - 1].key : scope.tabs[0].key;
scope.openTabAlias = indexInTabs > 0 ? scope.tabs[indexInTabs - 1].alias : scope.tabs[0].alias;
} else {
scope.openTabKey = null;
scope.openTabAlias = "";
}
});
@@ -480,12 +480,38 @@
scope.tabs = $filter('orderBy')(scope.tabs, 'sortOrder');
};
scope.onChangeTabName = function () {
scope.onChangeTabName = function (key) {
const changedTab = scope.model.groups.find(group => group.key === key);
updateGroupAlias(changedTab)
scope.$broadcast('umbOverflowChecker.checkOverflow');
};
scope.ungroupedPropertiesAreVisible = function({key, properties}) {
const isOpenTab = key === scope.openTabKey;
/** Universal method for updating group alias (for tabs, field-sets etc.) */
function updateGroupAlias(changedGroup) {
console.log(changedGroup)
const newAlias = contentEditingHelper.generateTabAlias(changedGroup.parentAlias, changedGroup.name);
updateDescendingAliases(newAlias, changedGroup.alias);
changedGroup.alias = newAlias;
}
function updateDescendingAliases(oldAlias, newAlias) {
/** current code will replace old alias no matter how deep/nested the groups matching are.
* Meaning no need for recursive code.
* Recursive code could be problematic as we only want to change alias of groups we own, not inherited ones.
*/
const replaceAliasStr = oldAlias + "/";
const replaceAliasLength = replaceAliasStr.length;
scope.model.groups.forEach(tab => {
if(tab.parentAlias.indexOf(replaceAliasStr) === 0) {
tab.alias = newAlias + "/" + tab.alias.substr(replaceAliasLength)
tab.parentAlias = contentEditingHelper.getParentAliasFromAlias(tab.alias);
}
});
}
scope.ungroupedPropertiesAreVisible = function({alias, properties}) {
const isOpenTab = alias === scope.openTabAlias;
if (isOpenTab && properties.length > 0) {
return true;
@@ -495,7 +521,7 @@
return true;
}
const tabHasGroups = scope.model.groups.filter(group => group.parentKey === key).length > 0;
const tabHasGroups = scope.model.groups.filter(group => group.parentAlias === alias).length > 0;
if (isOpenTab && !tabHasGroups) {
return true;
@@ -503,7 +529,7 @@
};
function checkGenericTabVisibility () {
const hasRootGroups = scope.model.groups.filter(group => group.type === TYPE_GROUP && group.parentKey === null).length > 0;
const hasRootGroups = scope.model.groups.filter(group => group.type === TYPE_GROUP && group.parentAlias === "").length > 0;
scope.hasGenericTab = (hasRootGroups && scope.tabs.length > 0) || scope.sortingMode;
}
@@ -550,10 +576,10 @@
/* ---------- GROUPS ---------- */
scope.addGroup = function (tabKey) {
scope.addGroup = function (tabAlias) {
scope.model.groups = scope.model.groups || [];
const groupsInTab = scope.model.groups.filter(group => group.parentKey === tabKey);
const groupsInTab = scope.model.groups.filter(group => group.parentAlias === tabAlias);
const lastGroupSortOrder = groupsInTab.length > 0 ? groupsInTab[groupsInTab.length - 1].sortOrder + 1 : 0;
const group = {
@@ -562,7 +588,8 @@
parentTabContentTypes: [],
parentTabContentTypeNames: [],
name: "",
parentKey: tabKey || null,
alias: "",
parentAlias: tabAlias || "",
type: TYPE_GROUP,
sortOrder: lastGroupSortOrder
};
@@ -588,6 +615,10 @@
selectedGroup.tabState = "active";
};
scope.onChangeGroupName = function(group) {
updateGroupAlias(group);
}
scope.canRemoveGroup = function (group) {
return group.inherited !== true && _.find(group.properties, function (property) { return property.locked === true; }) == null;
};
@@ -610,7 +641,7 @@
};
scope.addGroupToActiveTab = function () {
scope.addGroup(scope.openTabKey);
scope.addGroup(scope.openTabAlias);
};
scope.changeSortOrderValue = function (group) {
@@ -623,8 +654,8 @@
};
scope.onChangeGroupSortOrderValue = function (sortedGroup) {
const groupsInTab = scope.model.groups.filter(group => group.parentKey === sortedGroup.parentKey);
const otherGroups = scope.model.groups.filter(group => group.parentKey !== sortedGroup.parentKey);
const groupsInTab = scope.model.groups.filter(group => group.parentAlias === sortedGroup.parentAlias);
const otherGroups = scope.model.groups.filter(group => group.parentAlias !== sortedGroup.parentAlias);
const sortedGroups = $filter('orderBy')(groupsInTab, 'sortOrder');
scope.model.groups = [...otherGroups, ...sortedGroups];
};

4
src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
View File

@@ -182,8 +182,8 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
genericTabAlias: "_umb_genericTab",
generateTabAlias: function(alias, parentAlias) {
return (parentAlias !== "" && parentAlias != null ? parentAlias + "/" : "" ) + alias;
generateTabAlias: function(parentAlias, name) {
return (parentAlias !== "" && parentAlias != null ? parentAlias + "/" : "" ) + name.toUmbracoAlias();
},
getParentAliasFromAlias: function(alias) {

2
src/Umbraco.Web.UI.Client/src/common/services/umbdataformatter.service.js
View File

@@ -75,7 +75,7 @@
});
saveModel.groups = _.map(realGroups, function (g) {
var saveGroup = _.pick(g, 'inherited', 'id', 'sortOrder', 'name', 'key', 'parentKey', 'type');
var saveGroup = _.pick(g, 'inherited', 'id', 'sortOrder', 'name', 'key', 'alias', 'type');
var realProperties = _.reject(g.properties, function (p) {
//do not include these properties

9
src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View File

@@ -12,7 +12,7 @@
<li ng-if="hasGenericTab" umb-droppable="droppableOptionsTab" data-tab-key="{{genericTab.key}}">
<umb-content-type-tab
tab="genericTab"
is-open="!openTabKey"
is-open="!openTabAlias"
on-click="changeTab(genericTab)"
allow-change-name="false">
</umb-content-type-tab>
@@ -20,14 +20,14 @@
<li ng-repeat="(tabIndex, tab) in tabs track by tab.key" ng-class="{'umb-group-builder__tab-sortable': sortingMode}" umb-droppable="droppableOptionsTab" data-tab-key="{{tab.key}}">
<umb-content-type-tab
tab="tab"
is-open="tab.key === openTabKey"
is-open="tab.alias === openTabAlias"
on-click="changeTab(tab)"
sorting="sortingMode"
allow-remove="canRemoveTab(tab) && !sortingMode"
on-remove="removeTab(tab, tabIndex)"
val-server-field-name="{{'Groups[' + tab.indexInGroups + '].Name'}}"
on-change-sort-order-value="onChangeTabSortOrderValue(tab)"
on-change-name="onChangeTabName(name)">
on-change-name="onChangeTabName(key)">
</umb-content-type-tab>
</li>
<li>
@@ -131,6 +131,7 @@
group="group"
allow-remove="canRemoveGroup(group) && !sortingMode"
on-remove="removeGroup(group)"
on-update-name="onChangeGroupName(group)"
sorting="sortingMode"
on-change-sort-order-value="onChangeGroupSortOrderValue(group)"
val-server-field-name="{{'Groups[' + $index + '].Name'}}"
@@ -166,7 +167,7 @@
ng-if="!sortingMode"
type="button"
class="umb-group-builder__group -placeholder"
ng-click="addGroup(openTabKey)"
ng-click="addGroupToActiveTab()"
data-element="group-add">
<localize key="contentTypeEditor_addGroup"></localize>
</button>