No editor found
'; - this._routes = this._editorViews.map((view) => { - return { - path: `view/${view.meta.pathname}`, - component: () => document.createElement(view.elementName || 'div'), - setup: (element: HTMLElement, info: IRoutingInfo) => { - this._currentView = info.match.route.path; - }, - }; - }); - - this._routes.push({ - path: '**', - redirectTo: `view/${this._editorViews?.[0].meta.pathname}`, - }); - - this.requestUpdate(); - await this.updateComplete; - - this._forceRouteRender(); + if (!editor) { + this._element = fallbackEditor; + return; } - } - // TODO: Figure out why this has been necessary for this case. Come up with another case - private _forceRouteRender() { - const routerSlotEl = this.shadowRoot?.querySelector('router-slot') as RouterSlot; - if (routerSlotEl) { - routerSlotEl.render(); + try { + this._element = (await createExtensionElement(editor)) as any; + this._element.entityKey = this.entityKey; + } catch (error) { + this._element = fallbackEditor; } } - private _renderViews() { - return html` - ${this._editorViews?.length > 0 - ? html` -No editor found
'; - return { - path: `${tree.meta.pathname}/:id`, - component: () => (editor ? createExtensionElement(editor) : fallbackEditor), - async setup(component: any, info: any) { - // TODO: temp hack - we need to make sure it's the component and not a promise - const hello = await component; - hello.entityId = parseInt(info.match.params.id); - hello.entityKey = info.match.params.id; + path: `:entityType/:key`, + component: () => import('../../editors/shared/editor-entity/editor-entity.element'), + setup: (component: UmbEditorElement, info: any) => { + component.entityKey = info.match.params.key; + component.entityType = info.match.params.entityType; }, }; }) ?? []; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/content/tree-content.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/content/tree-content.context.ts index 4eeff7b481..f6c4502845 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/content/tree-content.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/content/tree-content.context.ts @@ -18,7 +18,7 @@ export class UmbTreeContentContext implements UmbTreeContext { key: '485d49ef-a4aa-46ac-843f-4256fe167347', name: 'Content', hasChildren: true, - type: 'node', + type: 'document', icon: 'favorite', parentKey: '', }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts index 93347eb675..98761d2e29 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts @@ -18,7 +18,7 @@ export class UmbTreeMemberGroupsContext implements UmbTreeContext { key: 'd46d144e-33d8-41e3-bf7a-545287e16e3c', name: 'Member Groups', hasChildren: true, - type: 'member-group', + type: 'memberGroup', icon: 'favorite', parentKey: '', }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-item.element.ts index 12195fb92a..003c1e5f75 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-item.element.ts @@ -5,56 +5,45 @@ import { UmbContextConsumerMixin } from '../../../core/context'; import { UmbTreeContext } from '../tree.context'; import { UUIMenuItemEvent } from '@umbraco-ui/uui'; import { UmbSectionContext } from '../../sections/section.context'; -import { map, Subscription } from 'rxjs'; -import { UmbEntityStore } from '../../../core/stores/entity.store'; +import { Subscription } from 'rxjs'; +import { Entity } from '../../../mocks/data/entity.data'; @customElement('umb-tree-item') export class UmbTreeItem extends UmbContextConsumerMixin(LitElement) { static styles = [UUITextStyles, css``]; - @property({ type: Boolean }) - hasChildren = false; - - @property({ type: Number }) - itemId = -1; - @property() itemKey = ''; + @property() + itemType = ''; + @property({ type: String }) label = ''; - @property({ type: String }) - href = ''; + @property({ type: Boolean }) + hasChildren = false; @state() - childItems: any[] = []; + private _childItems: Entity[] = []; + + @state() + private _href = ''; @state() private _loading = false; - @state() - private _pathName? = ''; - - @state() - private _sectionPathname?: string; - private _treeContext?: UmbTreeContext; private _sectionContext?: UmbSectionContext; private _sectionSubscription?: Subscription; - - private _entitySubscription?: Subscription; - - @state() - private _itemName = ''; + private _childrenSubscription?: Subscription; constructor() { super(); this.consumeContext('umbTreeContext', (treeContext: UmbTreeContext) => { this._treeContext = treeContext; - this._pathName = this._treeContext?.tree?.meta?.pathname; }); this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => { @@ -67,25 +56,26 @@ export class UmbTreeItem extends UmbContextConsumerMixin(LitElement) { this._sectionSubscription?.unsubscribe(); this._sectionSubscription = this._sectionContext?.data.subscribe((section) => { - this._sectionPathname = section.meta.pathname; + this._href = this._constructPath(section.meta.pathname, this.itemType, this.itemKey); }); } // TODO: how do we handle this? - private _constructPath(key: string) { - return `/section/${this._sectionPathname}/${this._pathName}/${key}`; + private _constructPath(sectionPathname: string, type: string, key: string) { + return `/section/${sectionPathname}/${type}/${key}`; } private _onShowChildren(event: UUIMenuItemEvent) { event.stopPropagation(); - if (this.childItems.length > 0) return; + if (this._childItems.length > 0) return; this._loading = true; - this._treeContext?.fetchChildren(this.itemKey).subscribe((items) => { - if (items?.length === 0) return; + this._childrenSubscription?.unsubscribe(); - this.childItems = items; + this._childrenSubscription = this._treeContext?.fetchChildren(this.itemKey).subscribe((items) => { + if (items?.length === 0) return; + this._childItems = items; this._loading = false; }); } @@ -93,15 +83,16 @@ export class UmbTreeItem extends UmbContextConsumerMixin(LitElement) { disconnectedCallback(): void { super.disconnectedCallback(); this._sectionSubscription?.unsubscribe(); + this._childrenSubscription?.unsubscribe(); } private _renderChildItems() { - return this.childItems.map((item) => { + return this._childItems.map((item) => { return html`