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

further merge refactor

Browse Source
This commit is contained in:
Niels Lyngsø
2024-03-13 11:13:56 +01:00
parent 0f5df81b0f
commit 6984d2becb
4 changed files with 70 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts
View File

@@ -114,6 +114,7 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
if (!this.#structure) return;
if (this._isRoot) {
this.removeControllerByAlias('_observeOwnerContainers');
this.#containers.setValue([]);
//this._observeChildProperties(); // We cannot have root properties currently, therefor we instead just set it to false:
this.#hasProperties.setValue(false);
@@ -165,13 +166,19 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
}
private _observeChildContainers() {
if (!this.#structure || !this._parentName || !this._childType) return;
if (!this.#structure || !this._parentName || !this._childType || !this._parentId) return;
if (this._parentId) {
this._ownerContainers = this.#structure.getOwnerContainers(this._childType, this._parentId) ?? [];
} else {
this._ownerContainers = [];
}
//console.log('Get owner child containers', this._childType, this._parentId);
// TODO: We need to observe instead:
//this._ownerContainers = this.#structure.getOwnerContainers(this._childType, this._parentId) ?? [];
this.observe(
this.#structure.ownerContainersOf(this._childType, this._parentId),
(containers) => {
this._ownerContainers = containers ?? [];
//console.log('this._ownerContainers', this._ownerContainers);
},
'_observeOwnerContainers',
);
this._parentMatchingContainers.forEach((container) => {
this.observe(
@@ -179,20 +186,21 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
(containers) => {
// TODO: This stinks, we need to finder a smarter way to do merging on the way. Think about the case when a container is appended but matches a container already in the list.
const old = this.#containers.getValue();
const appends = this._insertChildContainers(containers);
//const appends = this._insertChildContainers(containers);
// Make sure entries are unique on name and type:
const oldFiltered = old.filter(
(x) =>
!appends.some(
(y) =>
y.name === x.name && y.type === x.type && this._ownerContainers.some((oc) => oc.id === y.parent?.id),
),
(x) => !containers.some((y) => y.id === x.id || (y.name === x.name && y.type === x.type)),
);
const newFiltered = oldFiltered.concat(appends);
const newFiltered = oldFiltered.concat(containers);
/*
// Filter the newFiltered so it becomes unique name and type:
newFiltered.forEach((x, i, value) => !value.some((y) => y.name === x.name && y.type === x.type));
this.#containers.setValue(newFiltered);
*/
this.#containers.setValue(this._filterContainers(newFiltered));
//console.log('new set of containers:', this.#containers.getValue(), this._parentId);
//debugger;
// TODO: make sure we filter away any inherited containers:
},
'_observeGroupsOf_' + container.id,
@@ -200,19 +208,33 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
});
}
private _filterContainers(old: Array<UmbPropertyTypeContainerModel>) {
return old.filter(
(anyCon) =>
!this._ownerContainers.some(
(ownerCon) =>
// We would like to keep the owner container in the anyCons, so do not filter that
ownerCon.id !== anyCon.id ||
(ownerCon.name === anyCon.name &&
ownerCon.type === anyCon.type &&
ownerCon.parent?.id === anyCon.parent?.id),
),
);
}
private _observeRootContainers() {
if (!this.#structure || !this._isRoot || !this._childType || this._parentId === undefined) return;
this.observe(
this.#structure.rootContainers(this._childType),
(rootContainers) => {
this.#containers.setValue(this._insertChildContainers(rootContainers));
this.#containers.setValue(rootContainers);
this._ownerContainers = this.#structure!.getOwnerContainers(this._childType!, this._parentId!) ?? [];
},
'_observeRootContainers',
);
}
/*
private _insertChildContainers(
childContainers: UmbPropertyTypeContainerModel[],
): Array<UmbPropertyTypeContainerModel> {
@@ -225,7 +247,7 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
}
return [];
});
}
}*/
/**
* Returns true if the container is an owner container.
@@ -243,6 +265,7 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
*/
isOwnerChildContainer(containerId?: string) {
if (!this.#structure || !containerId) return;
console.log('isOwnerChildContainer: ', this._parentId, this._ownerContainers, containerId);
return this._ownerContainers.some((x) => x.id === containerId);
}

14
src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-structure-manager.class.ts
View File

@@ -591,13 +591,19 @@ export class UmbContentTypePropertyStructureManager<T extends UmbContentTypeMode
});
}
ownerContainersOf(containerType: UmbPropertyContainerTypes) {
return this.ownerContentTypeObservablePart((x) => x.containers?.filter((x) => x.type === containerType) ?? []);
ownerContainersOf(containerType: UmbPropertyContainerTypes, parentId: string | null) {
return this.ownerContentTypeObservablePart(
(x) =>
x.containers?.filter(
(x) => (parentId ? x.parent?.id === parentId : x.parent === null) && x.type === containerType,
) ?? [],
);
}
getOwnerContainers(containerType: UmbPropertyContainerTypes, parentId: string | null) {
return this.getOwnerContentType()?.containers?.filter((x) =>
parentId ? x.parent?.id === parentId : x.parent === null && x.type === containerType,
console.log(this.getOwnerContentType()?.containers);
return this.getOwnerContentType()?.containers?.filter(
(x) => (parentId ? x.parent?.id === parentId : x.parent === null) && x.type === containerType,
);
}

4
src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-workspace-view-edit-tab.element.ts
View File

@@ -1,7 +1,7 @@
import { UMB_CONTENT_TYPE_WORKSPACE_CONTEXT } from '../../content-type-workspace.context-token.js';
import type { UmbContentTypeWorkspaceViewEditGroupElement } from './content-type-workspace-view-edit-group.element.js';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import {
UmbContentTypeContainerStructureHelper,
type UmbContentTypeModel,
@@ -32,7 +32,6 @@ export class UmbContentTypeWorkspaceViewEditTabElement extends UmbLitElement {
throw new Error('OwnerTabId is not set, we have not made a local duplicated of this container.');
return;
}
console.log('_ownerTabId', this._inherited);
/** Explanation: If the item is the first in list, we compare it to the item behind it to set a sortOrder.
* If it's not the first in list, we will compare to the item in before it, and check the following item to see if it caused overlapping sortOrder, then update
* the overlap if true, which may cause another overlap, so we loop through them till no more overlaps...
@@ -161,7 +160,6 @@ export class UmbContentTypeWorkspaceViewEditTabElement extends UmbLitElement {
const len = this._groups.length;
const sortOrder = len === 0 ? 0 : this._groups[len - 1].sortOrder + 1;
const container = this.#groupStructureHelper.addContainer(this._containerId, sortOrder);
console.log('container', container);
};
render() {

38
src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-workspace-view-edit.element.ts
View File

@@ -134,6 +134,10 @@ export class UmbContentTypeWorkspaceViewEditElement extends UmbLitElement implem
});
}
#toggleSortMode() {
this._workspaceContext?.setIsSorting(!this._sortModeActive);
}
private _observeRootGroups() {
if (!this._workspaceContext) return;
@@ -147,10 +151,6 @@ export class UmbContentTypeWorkspaceViewEditElement extends UmbLitElement implem
);
}
#changeMode() {
this._workspaceContext?.setIsSorting(!this._sortModeActive);
}
private _createRoutes() {
// TODO: How about storing a set of elements based on tab ids? to prevent re-initializing the element when renaming..[NL]
if (!this._workspaceContext || !this._tabs || this._hasRootGroups === undefined) return;
@@ -202,8 +202,7 @@ export class UmbContentTypeWorkspaceViewEditElement extends UmbLitElement implem
}
// If we have an active tab name, then we might have a active tab name re-name, then we will redirect to the new name if it has been changed: [NL]
// TODOD: this._activeTabId could be left out.
if (this._activeTabId && activeTabName) {
if (activeTabName) {
if (this._activePath && this._routerPath) {
const oldPath = this._activePath.split(this._routerPath)[1];
const newPath = '/tab/' + encodeFolderName(activeTabName);
@@ -216,9 +215,7 @@ export class UmbContentTypeWorkspaceViewEditElement extends UmbLitElement implem
}
}
//if (jsonStringComparison(this._routes, routes) === false) {
this._routes = routes;
//}
}
async #requestRemoveTab(tab: PropertyTypeContainerModelBaseModel | undefined) {
@@ -382,7 +379,7 @@ export class UmbContentTypeWorkspaceViewEditElement extends UmbLitElement implem
<uui-icon name="icon-merge"></uui-icon>
${this.localize.term('contentTypeEditor_compositions')}
</uui-button>
<uui-button look="outline" label=${sortButtonText} compact @click=${this.#changeMode}>
<uui-button look="outline" label=${sortButtonText} compact @click=${this.#toggleSortMode}>
<uui-icon name="icon-navigation"></uui-icon>
${sortButtonText}
</uui-button>
@@ -420,34 +417,35 @@ export class UmbContentTypeWorkspaceViewEditElement extends UmbLitElement implem
renderTab(tab: PropertyTypeContainerModelBaseModel) {
const path = this._routerPath + (tab.name ? '/tab/' + encodeFolderName(tab.name) : '/tab');
const tabActive = path === this._activePath;
const tabInherited = !this._tabsStructureHelper.isOwnerChildContainer(tab.id!);
const ownedTab = this._tabsStructureHelper.isOwnerChildContainer(tab.id!) ?? false;
console.log('ownedTab', ownedTab);
return html`<uui-tab
label=${tab.name ?? 'unnamed'}
.active=${tabActive}
href=${path}
data-umb-tabs-id=${ifDefined(tab.id)}>
${this.renderTabInner(tab, tabActive, tabInherited)}
${this.renderTabInner(tab, tabActive, ownedTab)}
</uui-tab>`;
}
renderTabInner(tab: PropertyTypeContainerModelBaseModel, tabActive: boolean, tabInherited: boolean) {
renderTabInner(tab: PropertyTypeContainerModelBaseModel, tabActive: boolean, ownedTab: boolean) {
// TODO: Localize this:
if (this._sortModeActive) {
return html`<div class="no-edit">
${tabInherited
? html`<uui-icon class="external" name="icon-merge"></uui-icon>${tab.name!}`
: html`<uui-icon name="icon-navigation" class="drag-${tab.id}"> </uui-icon>${tab.name!}
${ownedTab
? html`<uui-icon name="icon-navigation" class="drag-${tab.id}"> </uui-icon>${tab.name!}
<uui-input
label="sort order"
type="number"
value=${ifDefined(tab.sortOrder)}
style="width:50px"
@change=${(e: UUIInputEvent) => this.#changeOrderNumber(tab, e)}></uui-input>`}
@change=${(e: UUIInputEvent) => this.#changeOrderNumber(tab, e)}></uui-input>`
: html`<uui-icon class="external" name="icon-merge"></uui-icon>${tab.name!}`}
</div>`;
}
if (tabActive && !tabInherited) {
if (tabActive && ownedTab) {
return html`<div class="tab">
<uui-input
id="input"
@@ -464,10 +462,10 @@ export class UmbContentTypeWorkspaceViewEditElement extends UmbLitElement implem
</div>`;
}
if (tabInherited) {
return html`<div class="no-edit"><uui-icon name="icon-merge"></uui-icon>${tab.name!}</div>`;
} else {
if (ownedTab) {
return html`<div class="no-edit">${tab.name!} ${this.renderDeleteFor(tab)}</div>`;
} else {
return html`<div class="no-edit"><uui-icon name="icon-merge"></uui-icon>${tab.name!}</div>`;
}
}