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

temp add actions to tree root

Browse Source
This commit is contained in:
Mads Rasmussen
2023-01-05 15:44:37 +01:00
parent 5e88e83452
commit c2e938ec7d
1 changed files with 38 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.element.ts
View File

@@ -5,8 +5,9 @@ import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { UmbLitElement } from '@umbraco-cms/element';
import { UmbSectionContext } from '../../section/section.context';
import { UmbTreeContextMenuService } from '../context-menu/tree-context-menu.service';
import { UmbTreeContext } from '../tree.context';
import type { Entity, ManifestTree } from '@umbraco-cms/models';
import type { Entity } from '@umbraco-cms/models';
import { UmbTreeDataStore } from '@umbraco-cms/stores/store';
import { DocumentTreeItem } from '@umbraco-cms/backend-api';
@@ -33,12 +34,14 @@ export class UmbTreeNavigator extends UmbLitElement {
@state()
private _items: DocumentTreeItem[] = [];
@state()
private _tree?: ManifestTree;
@state()
private _href?: string;
@state()
private _treeRootNode: any;
private _treeContext?: UmbTreeContext;
private _treeContextMenuService?: UmbTreeContextMenuService;
private _store?: UmbTreeDataStore<DocumentTreeItem>;
private _sectionContext?: UmbSectionContext;
@@ -50,7 +53,19 @@ export class UmbTreeNavigator extends UmbLitElement {
});
this.consumeContext('umbTreeContext', (treeContext: UmbTreeContext) => {
this._tree = treeContext.tree;
this._treeContext = treeContext;
this._treeRootNode = {
name: treeContext.tree.meta.label || '',
icon: treeContext.tree.meta.icon || '',
type: treeContext.tree.meta.rootNodeEntityType,
hasChildren: true,
parentKey: null,
};
});
this.consumeContext('umbTreeContextMenuService', (treeContextMenuService: UmbTreeContextMenuService) => {
this._treeContextMenuService = treeContextMenuService;
});
this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => {
@@ -88,7 +103,7 @@ export class UmbTreeNavigator extends UmbLitElement {
if (!this._sectionContext) return;
this.observe(this._sectionContext?.data, (section) => {
this._href = this._constructPath(section.meta.pathname, this._tree?.meta.rootNodeEntityType);
this._href = this._constructPath(section.meta.pathname, this._treeRootNode?.type);
});
}
@@ -97,15 +112,29 @@ export class UmbTreeNavigator extends UmbLitElement {
return type ? `section/${sectionPathname}/${type}` : undefined;
}
private _openActions() {
if (!this._treeContext || !this._sectionContext || !this._treeRootNode) return;
this._sectionContext?.setActiveTree(this._treeContext?.tree);
this._sectionContext?.setActiveTreeItem(this._treeRootNode);
this._treeContextMenuService?.open({ name: this._treeRootNode.name, key: this._treeRootNode.key });
}
render() {
// TODO: can we use tree item here instead so we don't have duplicated code?
// TODO: how do we know if a tree has children?
return html`<uui-menu-item
label="${ifDefined(this._tree?.meta.label)}"
return html` <uui-menu-item
label="${ifDefined(this._treeRootNode?.name)}"
@show-children=${this._onShowRoot}
href="${ifDefined(this._href)}"
has-children>
<uui-icon slot="icon" name="${ifDefined(this._tree?.meta.icon)}"></uui-icon>
${this._renderRootItems()}
<uui-icon slot="icon" name="${ifDefined(this._treeRootNode?.icon)}"></uui-icon>
<uui-action-bar slot="actions">
<uui-button @click=${this._openActions} label="Open actions menu">
<uui-symbol-more></uui-symbol-more>
</uui-button>
</uui-action-bar>
</uui-menu-item>`;
}