From 818809c019dd33771a77e243f27fafd3388d6656 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 24 Jan 2023 22:04:35 +0100 Subject: [PATCH] add sidebar menu item + tree manifests --- .../settings/data-types/tree/manifests.ts | 3 +- .../src/backoffice/templating/index.ts | 12 ++++++ .../templating/templates/manifests.ts | 4 ++ .../templates/sidebar-menu-item/manifests.ts | 17 ++++++++ .../templates-sidebar-menu-item.element.ts | 40 +++++++++++++++++++ .../templating/templates/tree/manifests.ts | 15 +++++++ 6 files changed, 89 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/templates-sidebar-menu-item.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/tree/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts index a73a6c4236..d4467cddb1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts @@ -1,11 +1,10 @@ -import { UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN } from '../data-type.tree.store'; +import { UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN } from './data-type.tree.store'; import type { ManifestTree, ManifestTreeItemAction } from '@umbraco-cms/models'; const tree: ManifestTree = { type: 'tree', alias: 'Umb.Tree.DataTypes', name: 'Data Types Tree', - weight: 100, meta: { storeAlias: UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN.toString(), }, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts new file mode 100644 index 0000000000..f91d5df3c5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts @@ -0,0 +1,12 @@ +import { manifests as templateManifests } from './templates/manifests'; + +import { ManifestTypes, umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; + +const registerExtensions = (manifests: Array) => { + manifests.forEach((manifest) => { + if (umbExtensionsRegistry.isRegistered(manifest.alias)) return; + umbExtensionsRegistry.register(manifest); + }); +}; + +registerExtensions([...templateManifests]); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/manifests.ts new file mode 100644 index 0000000000..e542c9a2d4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/manifests.ts @@ -0,0 +1,4 @@ +import { manifests as sidebarMenuItemManifests } from './sidebar-menu-item/manifests'; +import { manifests as treeManifests } from './tree/manifests'; + +export const manifests = [...sidebarMenuItemManifests, ...treeManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/manifests.ts new file mode 100644 index 0000000000..8785234af7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/manifests.ts @@ -0,0 +1,17 @@ +import type { ManifestSidebarMenuItem } from '@umbraco-cms/models'; + +const sidebarMenuItem: ManifestSidebarMenuItem = { + type: 'sidebarMenuItem', + alias: 'Umb.SidebarMenuItem.Templates', + name: 'Templates Sidebar Menu Item', + weight: 40, + loader: () => import('./templates-sidebar-menu-item.element'), + meta: { + label: 'Templates', + icon: 'umb:folder', + sections: ['Umb.Section.Settings'], + entityType: 'template', + }, +}; + +export const manifests = [sidebarMenuItem]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/templates-sidebar-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/templates-sidebar-menu-item.element.ts new file mode 100644 index 0000000000..866b1e58b7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/sidebar-menu-item/templates-sidebar-menu-item.element.ts @@ -0,0 +1,40 @@ +import { html, nothing } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/element'; + +@customElement('umb-templates-sidebar-menu-item') +export class UmbTemplatesSidebarMenuItemElement extends UmbLitElement { + @state() + private _renderTree = false; + + private _onShowChildren() { + this._renderTree = true; + } + + private _onHideChildren() { + this._renderTree = false; + } + + // TODO: check if root has children before settings the has-children attribute + // TODO: how do we want to cache the tree? (do we want to rerender every time the user opens the tree)? + // TODO: can we make this reusable? + render() { + return html` + ${this._renderTree ? html`` : nothing} + `; + } +} + +export default UmbTemplatesSidebarMenuItemElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-templates-sidebar-menu-item': UmbTemplatesSidebarMenuItemElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/tree/manifests.ts new file mode 100644 index 0000000000..0fad40ad7b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/tree/manifests.ts @@ -0,0 +1,15 @@ +import { UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN } from './template.tree.store'; +import type { ManifestTree, ManifestTreeItemAction } from '@umbraco-cms/models'; + +const tree: ManifestTree = { + type: 'tree', + alias: 'Umb.Tree.Templates', + name: 'Templates Tree', + meta: { + storeAlias: UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN.toString(), + }, +}; + +const treeItemActions: Array = []; + +export const manifests = [tree, ...treeItemActions];