From 0394bfe177190c0ea3e49dd255390d4fd0e17c33 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Wed, 29 Mar 2023 11:42:57 +0200 Subject: [PATCH 01/71] fix template section display --- .../template-workspace-edit.element.ts | 118 ++++++++++++++++ .../workspace/template-workspace.element.ts | 127 +++++------------- 2 files changed, 152 insertions(+), 93 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts new file mode 100644 index 0000000000..ef98af55f5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -0,0 +1,118 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { css, html } from 'lit'; +import { customElement, query, state } from 'lit/decorators.js'; +import { UUIInputElement } from '@umbraco-ui/uui'; +import { UmbCodeEditorElement } from '../../../shared/components/code-editor/code-editor.element'; +import { UmbTemplateWorkspaceContext } from './template-workspace.context'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; + +@customElement('umb-template-workspace-edit') +export class UmbTemplateWorkspaceEditElement extends UmbLitElement { + static styles = [ + UUITextStyles, + css` + :host { + display: block; + width: 100%; + height: 100%; + } + + umb-code-editor { + --editor-height: calc(100vh - 300px); + } + + uui-box { + margin: 1em; + --uui-box-default-padding: 0; + } + + uui-input { + width: 100%; + margin: 1em; + } + `, + ]; + + public load(entityKey: string) { + this.#templateWorkspaceContext?.load(entityKey); + } + + public create(parentKey: string | null) { + this.#isNew = true; + this.#templateWorkspaceContext?.createScaffold(parentKey); + } + + @state() + private _name?: string | null = ''; + + @state() + private _content?: string | null = ''; + + @query('umb-code-editor') + private _codeEditor?: UmbCodeEditorElement; + + #templateWorkspaceContext?: UmbTemplateWorkspaceContext; + #isNew = false; + + constructor() { + super(); + + this.consumeContext('umbWorkspaceContext', (workspaceContext: UmbTemplateWorkspaceContext) => { + this.#templateWorkspaceContext = workspaceContext; + this.observe(this.#templateWorkspaceContext.name, (name) => { + this._name = name; + }); + + this.observe(this.#templateWorkspaceContext.content, (content) => { + this._content = content; + }); + }); + } + + // TODO: temp code for testing create and save + #onNameInput(event: Event) { + const target = event.target as UUIInputElement; + const value = target.value as string; + this.#templateWorkspaceContext?.setName(value); + } + + //TODO - debounce that + #onCodeEditorInput(event: Event) { + const target = event.target as UmbCodeEditorElement; + const value = target.code as string; + this.#templateWorkspaceContext?.setContent(value); + } + + #insertCode(event: Event) { + const target = event.target as UUIInputElement; + const value = target.value as string; + + this._codeEditor?.insert(`My hovercraft is full of eels`); + } + + render() { + // TODO: add correct UI elements + return html` + + + Insert "My hovercraft is full of eels" + + + + `; + } +} + +export default UmbTemplateWorkspaceEditElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-template-workspace-edit': UmbTemplateWorkspaceEditElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts index 461f748a51..c45a694269 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts @@ -1,108 +1,49 @@ -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; -import { customElement, query, state } from 'lit/decorators.js'; -import { UUIInputElement } from '@umbraco-ui/uui'; -import { UmbCodeEditorElement } from '../../../shared/components/code-editor/code-editor.element'; -import { UmbTemplateWorkspaceContext } from './template-workspace.context'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbRouterSlotInitEvent, IRoute, IRoutingInfo } from '@umbraco-cms/internal/router'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import './template-workspace-edit.element'; +import { UmbTemplateWorkspaceContext } from './template-workspace.context'; + @customElement('umb-template-workspace') export class UmbTemplateWorkspaceElement extends UmbLitElement { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - width: 100%; - height: 100%; - } - - umb-code-editor { - --editor-height: calc(100vh - 300px); - } - - uui-box { - margin: 1em; - --uui-box-default-padding: 0; - } - - uui-input { - width: 100%; - margin: 1em; - } - `, - ]; - - public load(entityKey: string) { - this.#templateWorkspaceContext.load(entityKey); - } - - public create(parentKey: string | null) { - this.#isNew = true; - this.#templateWorkspaceContext.createScaffold(parentKey); - } - - @state() - private _name?: string | null = ''; - - @state() - private _content?: string | null = ''; - - @query('umb-code-editor') - private _codeEditor?: UmbCodeEditorElement; + static styles = [UUITextStyles, css``]; #templateWorkspaceContext = new UmbTemplateWorkspaceContext(this); - #isNew = false; - async connectedCallback() { - super.connectedCallback(); + #routerPath? = ''; - this.observe(this.#templateWorkspaceContext.name, (name) => { - this._name = name; - }); + #element = document.createElement('umb-template-workspace-edit'); + #key = ''; - this.observe(this.#templateWorkspaceContext.content, (content) => { - this._content = content; - }); - } - - // TODO: temp code for testing create and save - #onNameInput(event: Event) { - const target = event.target as UUIInputElement; - const value = target.value as string; - this.#templateWorkspaceContext.setName(value); - } - - //TODO - debounce that - #onCodeEditorInput(event: Event) { - const target = event.target as UmbCodeEditorElement; - const value = target.code as string; - this.#templateWorkspaceContext.setContent(value); - } - - #insertCode(event: Event) { - const target = event.target as UUIInputElement; - const value = target.value as string; - - this._codeEditor?.insert(`My hovercraft is full of eels`); - } + @state() + _routes: IRoute[] = [ + { + path: 'create/:parentKey', + component: () => this.#element, + setup: async (component: HTMLElement, info: IRoutingInfo) => { + const parentKey = info.match.params.parentKey; + this.#templateWorkspaceContext.createScaffold(parentKey); + }, + }, + { + path: 'edit/:key', + component: () => this.#element, + setup: (component: HTMLElement, info: IRoutingInfo) => { + const key = info.match.params.key; + this.#templateWorkspaceContext.load(key); + }, + }, + ]; render() { - // TODO: add correct UI elements - return html` - - - Insert "My hovercraft is full of eels" - - - - `; + return html` { + this.#routerPath = event.target.absoluteRouterPath; + }}>`; } } From 1a88a8e4a9e660505237d58cede9791c754d8081 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Wed, 29 Mar 2023 11:55:17 +0200 Subject: [PATCH 02/71] fix create route --- .../entity-actions/create/create.action.ts | 3 ++- .../workspace/template-workspace-edit.element.ts | 14 +++++--------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts index 11ba8f3d3b..a967cd50b3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts @@ -9,7 +9,8 @@ export class UmbCreateEntityAction }> extends // TODO: can we make this a generic create action async execute() { // TODO: get entity type from repository? - const url = `section/settings/template/create/${this.unique || 'root'}`; + const url = `section/settings/workspace/template/create/${this.unique || 'root'}`; + debugger; // TODO: how do we handle this with a href? history.pushState(null, '', url); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index ef98af55f5..00bc567f45 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -33,15 +33,6 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { `, ]; - public load(entityKey: string) { - this.#templateWorkspaceContext?.load(entityKey); - } - - public create(parentKey: string | null) { - this.#isNew = true; - this.#templateWorkspaceContext?.createScaffold(parentKey); - } - @state() private _name?: string | null = ''; @@ -66,6 +57,11 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { this.observe(this.#templateWorkspaceContext.content, (content) => { this._content = content; }); + + this.observe(this.#templateWorkspaceContext.isNew, (isNew) => { + this.#isNew = isNew; + console.log(this.#isNew); + }); }); } From f0e99e39cb7350438cf417088275f4e7bf7cc7c5 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Thu, 30 Mar 2023 15:43:51 +0200 Subject: [PATCH 03/71] set up partial views section --- .../src/backoffice/templating/index.ts | 3 +- .../entity-actions/create/create.action.ts | 16 ++ .../partial-views/entity-actions/manifests.ts | 37 +++ .../templating/partial-views/manifests.ts | 13 ++ .../partial-views/menu-item/manifests.ts | 20 ++ .../partial-views/repository/manifests.ts | 33 +++ .../repository/partial-views.repository.ts | 214 ++++++++++++++++++ .../repository/partial-views.store.ts | 44 ++++ .../repository/partial-views.tree.store.ts | 25 ++ .../partial-views/repository/sources/index.ts | 19 ++ .../partial-views.detail.server.data.ts | 51 +++++ .../sources/partial-views.tree.server.data.ts | 54 +++++ .../partial-views/tree/manifests.ts | 23 ++ .../partial-views/workspace/manifests.ts | 38 ++++ .../partial-views-workspace-edit.element.ts | 114 ++++++++++ .../partial-views-workspace.context.ts | 43 ++++ .../partial-views-workspace.element.ts | 56 +++++ .../entity-actions/create/create.action.ts | 1 - .../src/core/mocks/browser-handlers.ts | 2 + .../src/core/mocks/data/partial-views.data.ts | 64 ++++++ .../mocks/domains/partial-views.handlers.ts | 26 +++ 21 files changed, 894 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create.action.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/core/mocks/data/partial-views.data.ts create mode 100644 src/Umbraco.Web.UI.Client/src/core/mocks/domains/partial-views.handlers.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts index 27ba7af32b..0987adee6c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts @@ -1,12 +1,13 @@ import { manifests as menuManifests } from './menu.manifests'; import { manifests as templateManifests } from './templates/manifests'; import { manifests as stylesheetManifests } from './stylesheets/manifests'; +import { manifests as partialManifests } from './partial-views/manifests'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api'; import { ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry'; import './components'; -export const manifests = [...menuManifests, ...templateManifests, ...stylesheetManifests]; +export const manifests = [...menuManifests, ...templateManifests, ...stylesheetManifests, ...partialManifests]; const registerExtensions = (manifests: Array) => { manifests.forEach((manifest) => umbExtensionsRegistry.register(manifest)); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create.action.ts new file mode 100644 index 0000000000..1582d3f2b7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create.action.ts @@ -0,0 +1,16 @@ +import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; +import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; + +export class UmbCreateEntityAction }> extends UmbEntityActionBase { + constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { + super(host, repositoryAlias, unique); + } + + // TODO: can we make this a generic create action + async execute() { + // TODO: get entity type from repository? + const url = `section/settings/workspace/partial-views/create/${this.unique || 'root'}`; + // TODO: how do we handle this with a href? + history.pushState(null, '', url); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts new file mode 100644 index 0000000000..2af0dc5258 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts @@ -0,0 +1,37 @@ +import { PARTIAL_VIEW_REPOSITORY_ALIAS } from '../repository/manifests'; +import { UmbCreateEntityAction } from './create/create.action'; +import { UmbDeleteEntityAction } from '@umbraco-cms/backoffice/entity-action'; +import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models'; + +const entityActions: Array = [ + { + type: 'entityAction', + alias: 'Umb.EntityAction.PartialView.Create', + name: 'Create PartialView Entity Action', + meta: { + icon: 'umb:add', + label: 'Create', + api: UmbCreateEntityAction, + repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, + }, + conditions: { + entityType: 'partial-view', + }, + }, + { + type: 'entityAction', + alias: 'Umb.EntityAction.PartialView.Delete', + name: 'Delete PartialView Entity Action', + meta: { + icon: 'umb:trash', + label: 'Delete', + api: UmbDeleteEntityAction, + repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, + }, + conditions: { + entityType: 'partial-view', + }, + }, +]; + +export const manifests = [...entityActions]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/manifests.ts new file mode 100644 index 0000000000..84c48ea0b7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/manifests.ts @@ -0,0 +1,13 @@ +import { manifests as repositoryManifests } from './repository/manifests'; +import { manifests as menuItemManifests } from './menu-item/manifests'; +import { manifests as treeManifests } from './tree/manifests'; +import { manifests as entityActionsManifests } from './entity-actions/manifests'; +import { manifests as workspaceManifests } from './workspace/manifests'; + +export const manifests = [ + ...repositoryManifests, + ...menuItemManifests, + ...treeManifests, + ...entityActionsManifests, + ...workspaceManifests, +]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts new file mode 100644 index 0000000000..d910f4b7df --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts @@ -0,0 +1,20 @@ +import type { ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry'; + +const menuItem: ManifestTypes = { + type: 'menuItem', + kind: 'tree', + alias: 'Umb.MenuItem.PartialViews', + name: 'Partial View Menu Item', + weight: 40, + meta: { + label: 'Partial Views', + icon: 'umb:folder', + entityType: 'partial-view', + treeAlias: 'Umb.Tree.PartialViews', + }, + conditions: { + menus: ['Umb.Menu.Templating'], + }, +}; + +export const manifests = [menuItem]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts new file mode 100644 index 0000000000..09eb625db3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts @@ -0,0 +1,33 @@ +import { UmbTemplateRepository } from '../repository/partial-views.repository'; +import { UmbPartialViewsTreeStore } from './partial-views.tree.store'; +import { UmbPartialViewsStore } from './partial-views.store'; +import { ManifestRepository } from 'libs/extensions-registry/repository.models'; +import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry'; + +export const PARTIAL_VIEW_REPOSITORY_ALIAS = 'Umb.Repository.PartialViews'; + +const repository: ManifestRepository = { + type: 'repository', + alias: PARTIAL_VIEW_REPOSITORY_ALIAS, + name: 'Partial Views Repository', + class: UmbTemplateRepository, +}; + +export const PARTIAL_VIEW_STORE_ALIAS = 'Umb.Store.PartialViews'; +export const PARTIAL_VIEW_TREE_STORE_ALIAS = 'Umb.Store.PartialViewsTree'; + +const store: ManifestStore = { + type: 'store', + alias: PARTIAL_VIEW_STORE_ALIAS, + name: 'Partial Views Store', + class: UmbPartialViewsStore, +}; + +const treeStore: ManifestTreeStore = { + type: 'treeStore', + alias: PARTIAL_VIEW_TREE_STORE_ALIAS, + name: 'Partial Views Tree Store', + class: UmbPartialViewsTreeStore, +}; + +export const manifests = [repository, store, treeStore]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts new file mode 100644 index 0000000000..9c8ba0e38f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts @@ -0,0 +1,214 @@ +import { UmbPartialViewDetailServerDataSource } from './sources/partial-views.detail.server.data'; +import { UmbPartialViewsTreeServerDataSource } from './sources/partial-views.tree.server.data'; +import { UmbPartialViewsStore, UMB_PARTIAL_VIEWS_STORE_CONTEXT_TOKEN } from './partial-views.store'; +import { UmbPartialViewsTreeStore, UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN } from './partial-views.tree.store'; +import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification'; +import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api'; +import { ProblemDetailsModel, TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { UmbDetailRepository } from 'libs/repository/detail-repository.interface'; +import { UmbTreeRepository } from 'libs/repository/tree-repository.interface'; + +export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailRepository { + #init; + #host: UmbControllerHostInterface; + + #treeDataSource: UmbPartialViewsTreeServerDataSource; + #detailDataSource: UmbPartialViewDetailServerDataSource; + + #treeStore?: UmbPartialViewsTreeStore; + #store?: UmbPartialViewsStore; + + #notificationContext?: UmbNotificationContext; + + constructor(host: UmbControllerHostInterface) { + this.#host = host; + + this.#treeDataSource = new UmbPartialViewsTreeServerDataSource(this.#host); + this.#detailDataSource = new UmbPartialViewDetailServerDataSource(this.#host); + + this.#init = Promise.all([ + new UmbContextConsumerController(this.#host, UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN, (instance) => { + this.#treeStore = instance; + }), + + new UmbContextConsumerController(this.#host, UMB_PARTIAL_VIEWS_STORE_CONTEXT_TOKEN, (instance) => { + this.#store = instance; + }), + + new UmbContextConsumerController(this.#host, UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => { + this.#notificationContext = instance; + }), + ]); + } + + // TREE: + + async requestRootTreeItems() { + await this.#init; + + const { data, error } = await this.#treeDataSource.getRootItems(); + + if (data) { + this.#treeStore?.appendItems(data.items); + } + + return { data, error, asObservable: () => this.#treeStore!.rootItems }; + } + + async requestTreeItemsOf(parentKey: string | null) { + await this.#init; + + if (!parentKey) { + const error: ProblemDetailsModel = { title: 'Parent key is missing' }; + return { data: undefined, error }; + } + + const { data, error } = await this.#treeDataSource.getChildrenOf(parentKey); + + if (data) { + this.#treeStore?.appendItems(data.items); + } + + return { data, error, asObservable: () => this.#treeStore!.childrenOf(parentKey) }; + } + + async requestTreeItems(keys: Array) { + await this.#init; + + if (!keys) { + const error: ProblemDetailsModel = { title: 'Keys are missing' }; + return { data: undefined, error }; + } + + const { data, error } = await this.#treeDataSource.getItems(keys); + + return { data, error, asObservable: () => this.#treeStore!.items(keys) }; + } + + async rootTreeItems() { + await this.#init; + return this.#treeStore!.rootItems; + } + + async treeItemsOf(parentKey: string | null) { + await this.#init; + return this.#treeStore!.childrenOf(parentKey); + } + + async treeItems(keys: Array) { + await this.#init; + return this.#treeStore!.items(keys); + } + + // DETAILS: + + async createScaffold(parentKey: string | null) { + // await this.#init; + + // if (!parentKey) { + // throw new Error('Parent key is missing'); + // } + + // // TODO: add parent key to create scaffold + // return this.#detailDataSource.createScaffold(); + return Promise.reject(new Error('Not implemented')); + } + + async requestByKey(key: string) { + // await this.#init; + + // // TODO: should we show a notification if the key is missing? + // // Investigate what is best for Acceptance testing, cause in that perspective a thrown error might be the best choice? + // if (!key) { + // const error: ProblemDetailsModel = { title: 'Key is missing' }; + // return { error }; + // } + // const { data, error } = await this.#detailDataSource.get(key); + + // if (data) { + // this.#store?.append(data); + // } + + // return { data, error }; + return Promise.reject(new Error('Not implemented')); + } + + // Could potentially be general methods: + + async create(patrial: any) { + // await this.#init; + + // if (!template || !template.key) { + // throw new Error('Template is missing'); + // } + + // const { error } = await this.#detailDataSource.insert(template); + + // if (!error) { + // const notification = { data: { message: `Template created` } }; + // this.#notificationContext?.peek('positive', notification); + // } + + // // TODO: we currently don't use the detail store for anything. + // // Consider to look up the data before fetching from the server + // this.#store?.append(template); + // // TODO: Update tree store with the new item? or ask tree to request the new item? + + // return { error }; + + return Promise.reject(new Error('Not implemented')); + } + + async save(patrial: any) { + // await this.#init; + + // if (!template || !template.key) { + // throw new Error('Template is missing'); + // } + + // const { error } = await this.#detailDataSource.update(template); + + // if (!error) { + // const notification = { data: { message: `Template saved` } }; + // this.#notificationContext?.peek('positive', notification); + // } + + // // TODO: we currently don't use the detail store for anything. + // // Consider to look up the data before fetching from the server + // // Consider notify a workspace if a template is updated in the store while someone is editing it. + // this.#store?.append(template); + // this.#treeStore?.updateItem(template.key, { name: template.name }); + // // TODO: would be nice to align the stores on methods/methodNames. + + // return { error }; + return Promise.reject(new Error('Not implemented')); + } + + // General: + + async delete(key: string) { + // await this.#init; + + // if (!key) { + // throw new Error('Template key is missing'); + // } + + // const { error } = await this.#detailDataSource.delete(key); + + // if (!error) { + // const notification = { data: { message: `Template deleted` } }; + // this.#notificationContext?.peek('positive', notification); + // } + + // // TODO: we currently don't use the detail store for anything. + // // Consider to look up the data before fetching from the server. + // // Consider notify a workspace if a template is deleted from the store while someone is editing it. + // this.#store?.remove([key]); + // this.#treeStore?.removeItem(key); + // // TODO: would be nice to align the stores on methods/methodNames. + + // return { error }; + return Promise.reject(new Error('Not implemented')); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts new file mode 100644 index 0000000000..64c52c09a8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts @@ -0,0 +1,44 @@ +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; +import { ArrayState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbStoreBase } from '@umbraco-cms/backoffice/store'; +import type { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; + +/** + * @export + * @class UmbPartialViewsStore + * @extends {UmbStoreBase} + * @description - Data Store for partial views + */ +export class UmbPartialViewsStore extends UmbStoreBase { + #data = new ArrayState([], (x) => x.key); + + /** + * Creates an instance of UmbPartialViewsStore. + * @param {UmbControllerHostInterface} host + * @memberof UmbPartialViewsStore + */ + constructor(host: UmbControllerHostInterface) { + super(host, UMB_PARTIAL_VIEWS_STORE_CONTEXT_TOKEN.toString()); + } + + /** + * Append a partial view to the store + * @param {Template} template + * @memberof UmbPartialViewsStore + */ + append(template: TemplateResponseModel) { + this.#data.append([template]); + } + + /** + * Removes partial views in the store with the given uniques + * @param {string[]} uniques + * @memberof UmbPartialViewsStore + */ + remove(uniques: string[]) { + this.#data.remove(uniques); + } +} + +export const UMB_PARTIAL_VIEWS_STORE_CONTEXT_TOKEN = new UmbContextToken('UmbPartialViewStore'); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts new file mode 100644 index 0000000000..c5a56cff5d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts @@ -0,0 +1,25 @@ +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; +import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store'; +import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; + +export const UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken( + 'UmbPartialViewsTreeStore' +); + +/** + * Tree Store for partial views + * + * @export + * @class UmbPartialViewsTreeStore + * @extends {UmbEntityTreeStore} + */ +export class UmbPartialViewsTreeStore extends UmbEntityTreeStore { + /** + * Creates an instance of UmbPartialViewsTreeStore. + * @param {UmbControllerHostInterface} host + * @memberof UmbPartialViewsTreeStore + */ + constructor(host: UmbControllerHostInterface) { + super(host, UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN.toString()); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/index.ts new file mode 100644 index 0000000000..1be4b13578 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/index.ts @@ -0,0 +1,19 @@ +import { + FileSystemTreeItemPresentationModel, + PagedFileSystemTreeItemPresentationModel, +} from '@umbraco-cms/backoffice/backend-api'; +import type { DataSourceResponse } from '@umbraco-cms/backoffice/repository'; + +export interface PartialViewsTreeDataSource { + getRootItems(): Promise>; + getChildrenOf({ + path, + skip, + take, + }: { + path?: string | undefined; + skip?: number | undefined; + take?: number | undefined; + }): Promise>; + getItems(paths: Array): Promise>; +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts new file mode 100644 index 0000000000..bc8eed455a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts @@ -0,0 +1,51 @@ +import { ProblemDetailsModel, TemplateResponseModel, TemplateResource } from '@umbraco-cms/backoffice/backend-api'; +import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; +import type { DataSourceResponse } from '@umbraco-cms/backoffice/repository'; + +export interface PartialViewDetailDataSource { + //createScaffold(): Promise>; + get(key: string): Promise>; + //insert(template: TemplateResponseModel): Promise; + update(template: TemplateResponseModel): Promise; + delete(key: string): Promise; +} + +export class UmbPartialViewDetailServerDataSource implements PartialViewDetailDataSource { + #host: UmbControllerHostInterface; + + /** + * Creates an instance of UmbPartialViewDetailServerDataSource. + * @param {UmbControllerHostInterface} host + * @memberof UmbPartialViewDetailServerDataSource + */ + constructor(host: UmbControllerHostInterface) { + this.#host = host; + } + + get(key: string) { + // return tryExecuteAndNotify(this.#host, TemplateResource.getTemplateByKey({ key })); + return Promise.reject(new Error('Not implemented')); + } + + async update(partial: any) { + // if (!template.key) { + // const error: ProblemDetailsModel = { title: 'Template key is missing' }; + // return { error }; + // } + + // const payload = { key: template.key, requestBody: template }; + // return tryExecuteAndNotify(this.#host, TemplateResource.putTemplateByKey(payload)); + return Promise.reject(new Error('Not implemented')); + } + + async delete(key: string) { + // if (!key) { + // const error: ProblemDetailsModel = { title: 'Key is missing' }; + // return { error }; + // } + + // return await tryExecuteAndNotify(this.#host, TemplateResource.deleteTemplateByKey({ key })); + return Promise.reject(new Error('Not implemented')); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts new file mode 100644 index 0000000000..57a95b0e24 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts @@ -0,0 +1,54 @@ +import { PartialViewsTreeDataSource } from '.'; +import { PartialViewResource, ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api'; +import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; + +export class UmbPartialViewsTreeServerDataSource implements PartialViewsTreeDataSource { + #host: UmbControllerHostInterface; + + constructor(host: UmbControllerHostInterface) { + this.#host = host; + } + + async getRootItems() { + return tryExecuteAndNotify(this.#host, PartialViewResource.getTreePartialViewRoot({})); + } + + async getChildrenOf({ + path, + skip, + take, + }: { + path?: string | undefined; + skip?: number | undefined; + take?: number | undefined; + }) { + if (!path) { + const error: ProblemDetailsModel = { title: 'Path is missing' }; + return { error }; + } + + return tryExecuteAndNotify( + this.#host, + PartialViewResource.getTreePartialViewChildren({ + path, + skip, + take, + }) + ); + } + + async getItems(paths: Array) { + if (!paths) { + const error: ProblemDetailsModel = { title: 'Paths are missing' }; + return { error }; + } + + return tryExecuteAndNotify( + this.#host, + PartialViewResource.getTreePartialViewItem({ + path: paths, + }) + ); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts new file mode 100644 index 0000000000..34eb065fc0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts @@ -0,0 +1,23 @@ +import { PARTIAL_VIEW_REPOSITORY_ALIAS } from '../repository/manifests'; +import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry'; + +const tree: ManifestTree = { + type: 'tree', + alias: 'Umb.Tree.PartialViews', + name: 'Partial Views Tree', + meta: { + repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, + }, +}; + +const treeItem: ManifestTreeItem = { + type: 'treeItem', + kind: 'entity', + alias: 'Umb.TreeItem.PartialViews', + name: 'Partial Views Tree Item', + conditions: { + entityType: 'partial-view', + }, +}; + +export const manifests = [tree, treeItem]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/manifests.ts new file mode 100644 index 0000000000..0b950b01a2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/manifests.ts @@ -0,0 +1,38 @@ +import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace'; +import type { + ManifestWorkspace, + ManifestWorkspaceAction, + ManifestWorkspaceView, +} from '@umbraco-cms/backoffice/extensions-registry'; + +const workspace: ManifestWorkspace = { + type: 'workspace', + alias: 'Umb.Workspace.PartialView', + name: 'Partial View Workspace', + loader: () => import('./partial-views-workspace.element'), + meta: { + entityType: 'partial-view', + }, +}; + +const workspaceViews: Array = []; + +const workspaceActions: Array = [ + { + type: 'workspaceAction', + alias: 'Umb.WorkspaceAction.PartialView.Save', + name: 'Save Partial View', + weight: 70, + meta: { + look: 'primary', + color: 'positive', + label: 'Save', + api: UmbSaveWorkspaceAction, + }, + conditions: { + workspaces: ['Umb.Workspace.PartialView'], + }, + }, +]; + +export const manifests = [workspace, ...workspaceViews, ...workspaceActions]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts new file mode 100644 index 0000000000..db3079d057 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts @@ -0,0 +1,114 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { css, html } from 'lit'; +import { customElement, query, state } from 'lit/decorators.js'; +import { UUIInputElement } from '@umbraco-ui/uui'; +import { UmbCodeEditorElement } from '../../../shared/components/code-editor/code-editor.element'; +import { UmbPartialViewsWorkspaceContext } from './partial-views-workspace.context'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; + +@customElement('umb-partial-views-workspace-edit') +export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement { + static styles = [ + UUITextStyles, + css` + :host { + display: block; + width: 100%; + height: 100%; + } + + umb-code-editor { + --editor-height: calc(100vh - 300px); + } + + uui-box { + margin: 1em; + --uui-box-default-padding: 0; + } + + uui-input { + width: 100%; + margin: 1em; + } + `, + ]; + + @state() + private _name?: string | null = ''; + + @state() + private _content?: string | null = ''; + + @query('umb-code-editor') + private _codeEditor?: UmbCodeEditorElement; + + #partialViewsWorkspaceContext?: UmbPartialViewsWorkspaceContext; + #isNew = false; + + constructor() { + super(); + + this.consumeContext('umbWorkspaceContext', (workspaceContext: UmbPartialViewsWorkspaceContext) => { + this.#partialViewsWorkspaceContext = workspaceContext; + this.observe(this.#partialViewsWorkspaceContext.name, (name) => { + this._name = name; + }); + + this.observe(this.#partialViewsWorkspaceContext.content, (content) => { + this._content = content; + }); + + this.observe(this.#partialViewsWorkspaceContext.isNew, (isNew) => { + this.#isNew = isNew; + console.log(this.#isNew); + }); + }); + } + + // TODO: temp code for testing create and save + #onNameInput(event: Event) { + const target = event.target as UUIInputElement; + const value = target.value as string; + this.#partialViewsWorkspaceContext?.setName(value); + } + + //TODO - debounce that + #onCodeEditorInput(event: Event) { + const target = event.target as UmbCodeEditorElement; + const value = target.code as string; + this.#partialViewsWorkspaceContext?.setContent(value); + } + + #insertCode(event: Event) { + const target = event.target as UUIInputElement; + const value = target.value as string; + + this._codeEditor?.insert(`My hovercraft is full of eels`); + } + + render() { + // TODO: add correct UI elements + return html` + + + Insert "My hovercraft is full of eels" + + + + `; + } +} + +export default UmbPartialViewsWorkspaceEditElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-partial-views-workspace-edit': UmbPartialViewsWorkspaceEditElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts new file mode 100644 index 0000000000..f320ec5d37 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts @@ -0,0 +1,43 @@ +import { UmbTemplateRepository } from '../repository/partial-views.repository'; +import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context'; +import { createObservablePart, DeepState } from '@umbraco-cms/backoffice/observable-api'; +import { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; + +export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext { + #data = new DeepState(undefined); + data = this.#data.asObservable(); + name = createObservablePart(this.#data, (data) => data?.name); + content = createObservablePart(this.#data, (data) => data?.content); + + constructor(host: UmbControllerHostInterface) { + super(host, new UmbTemplateRepository(host)); + } + + getData() { + return this.#data.getValue(); + } + + setName(value: string) { + this.#data.next({ ...this.#data.value, $type: this.#data.value?.$type || '', name: value }); + } + + setContent(value: string) { + this.#data.next({ ...this.#data.value, $type: this.#data.value?.$type || '', content: value }); + } + + async load(entityKey: string) { + const { data } = await this.repository.requestByKey(entityKey); + if (data) { + this.setIsNew(false); + this.#data.next(data); + } + } + + async createScaffold(parentKey: string | null) { + const { data } = await this.repository.createScaffold(parentKey); + if (!data) return; + this.setIsNew(true); + this.#data.next(data); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts new file mode 100644 index 0000000000..bff129aac8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts @@ -0,0 +1,56 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbPartialViewsWorkspaceContext } from './partial-views-workspace.context'; +import { UmbRouterSlotInitEvent, IRoute, IRoutingInfo } from '@umbraco-cms/internal/router'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; + +import './partial-views-workspace-edit.element'; + +@customElement('umb-partial-views-workspace') +export class UmbPartialViewsWorkspaceElement extends UmbLitElement { + static styles = [UUITextStyles, css``]; + + #partialViewsWorkspaceContext = new UmbPartialViewsWorkspaceContext(this); + + #routerPath? = ''; + + #element = document.createElement('umb-partial-views-workspace-edit'); + #key = ''; + + @state() + _routes: IRoute[] = [ + { + path: 'create/:parentKey', + component: () => this.#element, + setup: async (component: HTMLElement, info: IRoutingInfo) => { + const parentKey = info.match.params.parentKey; + this.#partialViewsWorkspaceContext.createScaffold(parentKey); + }, + }, + { + path: 'edit/:key', + component: () => this.#element, + setup: (component: HTMLElement, info: IRoutingInfo) => { + const key = info.match.params.key; + this.#partialViewsWorkspaceContext.load(key); + }, + }, + ]; + + render() { + return html` { + this.#routerPath = event.target.absoluteRouterPath; + }}>`; + } +} + +export default UmbPartialViewsWorkspaceElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-partial-views-workspace': UmbPartialViewsWorkspaceElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts index a967cd50b3..ac19f930fa 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts @@ -10,7 +10,6 @@ export class UmbCreateEntityAction }> extends async execute() { // TODO: get entity type from repository? const url = `section/settings/workspace/template/create/${this.unique || 'root'}`; - debugger; // TODO: how do we handle this with a href? history.pushState(null, '', url); } diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts index a756d4c727..e843200a07 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts @@ -29,6 +29,7 @@ import { handlers as logViewerHandlers } from './domains/log-viewer.handlers'; import { handlers as packageHandlers } from './domains/package.handlers'; import { handlers as rteEmbedHandlers } from './domains/rte-embed.handlers'; import { handlers as stylesheetHandlers } from './domains/stylesheet.handlers'; +import { handlers as partialViewsHandlers } from './domains/partial-views.handlers'; const handlers = [ serverHandlers.serverVersionHandler, @@ -61,6 +62,7 @@ const handlers = [ ...packageHandlers, ...rteEmbedHandlers, ...stylesheetHandlers, + ...partialViewsHandlers, ]; switch (import.meta.env.VITE_UMBRACO_INSTALL_STATUS) { diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/partial-views.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/partial-views.data.ts new file mode 100644 index 0000000000..92bf5b84d3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/partial-views.data.ts @@ -0,0 +1,64 @@ +import { UmbEntityData } from './entity.data'; +import { createFileSystemTreeItem } from './utils'; +import { + FileSystemTreeItemPresentationModel, + PagedFileSystemTreeItemPresentationModel, +} from '@umbraco-cms/backoffice/backend-api'; + +export const data: Array = [ + { + path: 'blockgrid', + isFolder: true, + name: 'blockgrid', + type: 'partial-view', + icon: 'icon-folder', + hasChildren: true, + }, + { + path: 'blocklist', + isFolder: true, + name: 'blocklist', + type: 'partial-view', + icon: 'icon-folder', + hasChildren: true, + }, + { + path: 'grid', + isFolder: true, + name: 'grid', + type: 'partial-view', + icon: 'icon-folder', + hasChildren: true, + }, +]; + +// Temp mocked database +// TODO: all properties are optional in the server schema. I don't think this is correct. +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +class UmbPartialViewsData extends UmbEntityData { + constructor() { + super(data); + } + + getTreeRoot(): PagedFileSystemTreeItemPresentationModel { + const items = this.data.filter((item) => item.path?.includes('/') === false); + const treeItems = items.map((item) => createFileSystemTreeItem(item)); + const total = items.length; + return { items: treeItems, total }; + } + + getTreeItemChildren(parentPath: string): PagedFileSystemTreeItemPresentationModel { + const items = this.data.filter((item) => item.path?.startsWith(parentPath + '/')); + const treeItems = items.map((item) => createFileSystemTreeItem(item)); + const total = items.length; + return { items: treeItems, total }; + } + + getTreeItem(paths: Array): Array { + const items = this.data.filter((item) => paths.includes(item.path ?? '')); + return items.map((item) => createFileSystemTreeItem(item)); + } +} + +export const umbPartialViewsData = new UmbPartialViewsData(); diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/partial-views.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/partial-views.handlers.ts new file mode 100644 index 0000000000..9f8fc8d4cc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/partial-views.handlers.ts @@ -0,0 +1,26 @@ +import { rest } from 'msw'; +import { umbPartialViewsData } from '../data/partial-views.data'; +import { umbracoPath } from '@umbraco-cms/backoffice/utils'; + +export const handlers = [ + rest.get(umbracoPath('/tree/partial-view/root'), (req, res, ctx) => { + const response = umbPartialViewsData.getTreeRoot(); + return res(ctx.status(200), ctx.json(response)); + }), + + rest.get(umbracoPath('/tree/partial-view/children'), (req, res, ctx) => { + const path = req.url.searchParams.get('path'); + if (!path) return; + + const response = umbPartialViewsData.getTreeItemChildren(path); + return res(ctx.status(200), ctx.json(response)); + }), + + rest.get(umbracoPath('/tree/partial-view/item'), (req, res, ctx) => { + const paths = req.url.searchParams.getAll('paths'); + if (!paths) return; + + const items = umbPartialViewsData.getTreeItem(paths); + return res(ctx.status(200), ctx.json(items)); + }), +]; From deed3c87c74059d5ce5eb719ee4e214c7181dffa Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 31 Mar 2023 11:47:00 +0200 Subject: [PATCH 04/71] add changes --- .../src/backoffice/templating/partial-views/index.ts | 8 ++++++++ .../partial-views/repository/partial-views.repository.ts | 4 ++-- .../templating/partial-views/tree/manifests.ts | 9 ++++++--- 3 files changed, 16 insertions(+), 5 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/index.ts new file mode 100644 index 0000000000..c8473c3a70 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/index.ts @@ -0,0 +1,8 @@ +import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api'; + +// TODO: temp until we have a proper stylesheet model +export interface PartialViewDetails extends FileSystemTreeItemPresentationModel { + content: string; +} + +export const PARTIAL_VIEW_ENTITY_TYPE = 'partial-view'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts index 9c8ba0e38f..60c9a4d5d7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts @@ -5,11 +5,11 @@ import { UmbPartialViewsTreeStore, UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN } f import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification'; import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api'; -import { ProblemDetailsModel, TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbDetailRepository } from 'libs/repository/detail-repository.interface'; import { UmbTreeRepository } from 'libs/repository/tree-repository.interface'; -export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailRepository { +export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailRepository { #init; #host: UmbControllerHostInterface; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts index 34eb065fc0..6c33a99078 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts @@ -1,9 +1,12 @@ +import { PARTIAL_VIEW_ENTITY_TYPE } from '..'; import { PARTIAL_VIEW_REPOSITORY_ALIAS } from '../repository/manifests'; import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry'; +const PARTIAL_VIEW_TREE_ALIAS = 'Umb.Tree.PartialViews'; + const tree: ManifestTree = { type: 'tree', - alias: 'Umb.Tree.PartialViews', + alias: PARTIAL_VIEW_TREE_ALIAS, name: 'Partial Views Tree', meta: { repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, @@ -12,11 +15,11 @@ const tree: ManifestTree = { const treeItem: ManifestTreeItem = { type: 'treeItem', - kind: 'entity', + kind: 'fileSystem', alias: 'Umb.TreeItem.PartialViews', name: 'Partial Views Tree Item', conditions: { - entityType: 'partial-view', + entityType: PARTIAL_VIEW_ENTITY_TYPE, }, }; From a32aabaef0c03c2682de2dbe765b048bdd8d593d Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Mon, 3 Apr 2023 09:09:11 +0200 Subject: [PATCH 05/71] extend correct class --- .../templating/partial-views/menu-item/manifests.ts | 3 ++- .../partial-views/repository/partial-views.tree.store.ts | 4 ++-- .../backoffice/templating/partial-views/tree/manifests.ts | 2 +- .../src/core/mocks/data/partial-views.data.ts | 6 +++--- .../src/core/mocks/data/template.data.ts | 6 +++--- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts index d910f4b7df..258d3290fa 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts @@ -1,3 +1,4 @@ +import { PARTIAL_VIEW_TREE_ALIAS } from '../tree/manifests'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry'; const menuItem: ManifestTypes = { @@ -10,7 +11,7 @@ const menuItem: ManifestTypes = { label: 'Partial Views', icon: 'umb:folder', entityType: 'partial-view', - treeAlias: 'Umb.Tree.PartialViews', + treeAlias: PARTIAL_VIEW_TREE_ALIAS, }, conditions: { menus: ['Umb.Menu.Templating'], diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts index c5a56cff5d..7333509a28 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts @@ -1,5 +1,5 @@ import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; -import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store'; +import { UmbFileSystemTreeStore } from '@umbraco-cms/backoffice/store'; import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; export const UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken( @@ -13,7 +13,7 @@ export const UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken = [ isFolder: true, name: 'blockgrid', type: 'partial-view', - icon: 'icon-folder', + icon: 'umb:folder', hasChildren: true, }, { @@ -19,7 +19,7 @@ export const data: Array = [ isFolder: true, name: 'blocklist', type: 'partial-view', - icon: 'icon-folder', + icon: 'umb:folder', hasChildren: true, }, { @@ -27,7 +27,7 @@ export const data: Array = [ isFolder: true, name: 'grid', type: 'partial-view', - icon: 'icon-folder', + icon: 'umb:folder', hasChildren: true, }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/template.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/template.data.ts index 210f4b48d5..45431ddcff 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/template.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/template.data.ts @@ -29,7 +29,7 @@ export const data: Array = [ parentKey: null, name: 'Doc 1', type: 'template', - icon: 'icon-layout', + icon: 'umb:layout', hasChildren: false, alias: 'Doc1', content: `@using Umbraco.Extensions @@ -53,7 +53,7 @@ export const data: Array = [ parentKey: null, name: 'Test', type: 'template', - icon: 'icon-layout', + icon: 'umb:layout', hasChildren: true, alias: 'Test', content: @@ -66,7 +66,7 @@ export const data: Array = [ parentKey: '9a84c0b3-03b4-4dd4-84ac-706740ac0f71', name: 'Child', type: 'template', - icon: 'icon-layout', + icon: 'umb:layout', hasChildren: false, alias: 'Test', content: From d94b96759623a4abd5191faeece9a779ea2cd8c4 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 4 Apr 2023 12:42:48 +0200 Subject: [PATCH 06/71] move aliases to config, add actions --- .../templating/partial-views/config.ts | 16 +++ .../create/create-empty.action.ts | 12 ++ .../create/create-from-snippet.action.ts | 12 ++ .../entity-actions/create/create.action.ts | 16 --- .../partial-views/entity-actions/manifests.ts | 61 ++++++--- .../templating/partial-views/index.ts | 8 -- .../partial-views/menu-item/manifests.ts | 2 +- .../partial-views/repository/manifests.ts | 2 +- .../repository/partial-views.repository.ts | 126 +++--------------- .../repository/partial-views.store.ts | 5 +- .../repository/partial-views.tree.store.ts | 3 +- .../partial-views.detail.server.data.ts | 55 ++++---- .../partial-views/tree/manifests.ts | 5 +- 13 files changed, 134 insertions(+), 189 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/config.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-empty.action.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-from-snippet.action.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create.action.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/config.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/config.ts new file mode 100644 index 0000000000..d50c16cca9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/config.ts @@ -0,0 +1,16 @@ +import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api'; + +// TODO: temp until we have a proper stylesheet model +export interface PartialViewDetails extends FileSystemTreeItemPresentationModel { + content: string; +} + +export const PARTIAL_VIEW_ENTITY_TYPE = 'partial-view'; +export const PARTIAL_VIEW_FOLDER_ENTITY_TYPE = 'partial-view'; + +export const PARTIAL_VIEW_REPOSITORY_ALIAS = 'Umb.Repository.PartialViews'; + +export const PARTIAL_VIEW_TREE_ALIAS = 'Umb.Tree.PartialViews'; + +export const UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN_ALIAS = 'Umb.Store.PartialViews.Tree'; +export const UMB_PARTIAL_VIEW_STORE_CONTEXT_TOKEN_ALIAS = 'Umb.Store.PartialViews'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-empty.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-empty.action.ts new file mode 100644 index 0000000000..25d7b8f11d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-empty.action.ts @@ -0,0 +1,12 @@ +import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; +import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; + +export class UmbCreateEmptyPartialViewAction }> extends UmbEntityActionBase { + constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { + super(host, repositoryAlias, unique); + } + + async execute() { + throw new Error('Method not implemented.'); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-from-snippet.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-from-snippet.action.ts new file mode 100644 index 0000000000..cced8b5ddc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-from-snippet.action.ts @@ -0,0 +1,12 @@ +import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; +import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; + +export class UmbCreateFromSnippetPartialViewAction }> extends UmbEntityActionBase { + constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { + super(host, repositoryAlias, unique); + } + + async execute() { + throw new Error('Method not implemented.'); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create.action.ts deleted file mode 100644 index 1582d3f2b7..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create.action.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; -import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; - -export class UmbCreateEntityAction }> extends UmbEntityActionBase { - constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { - super(host, repositoryAlias, unique); - } - - // TODO: can we make this a generic create action - async execute() { - // TODO: get entity type from repository? - const url = `section/settings/workspace/partial-views/create/${this.unique || 'root'}`; - // TODO: how do we handle this with a href? - history.pushState(null, '', url); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts index 2af0dc5258..e13d6fbeff 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts @@ -1,23 +1,13 @@ -import { PARTIAL_VIEW_REPOSITORY_ALIAS } from '../repository/manifests'; -import { UmbCreateEntityAction } from './create/create.action'; +import { PARTIAL_VIEW_ENTITY_TYPE, PARTIAL_VIEW_FOLDER_ENTITY_TYPE, PARTIAL_VIEW_REPOSITORY_ALIAS } from '../config'; +import { UmbCreateFromSnippetPartialViewAction } from './create/create-from-snippet.action'; +import { UmbCreateEmptyPartialViewAction } from './create/create-empty.action'; import { UmbDeleteEntityAction } from '@umbraco-cms/backoffice/entity-action'; import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models'; -const entityActions: Array = [ - { - type: 'entityAction', - alias: 'Umb.EntityAction.PartialView.Create', - name: 'Create PartialView Entity Action', - meta: { - icon: 'umb:add', - label: 'Create', - api: UmbCreateEntityAction, - repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, - }, - conditions: { - entityType: 'partial-view', - }, - }, +//TODO: this is temporary until we have a proper way of registering actions for folder types in a specific tree + +//Actions for partial view files +const partialViewActions: Array = [ { type: 'entityAction', alias: 'Umb.EntityAction.PartialView.Delete', @@ -29,9 +19,42 @@ const entityActions: Array = [ repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, }, conditions: { - entityType: 'partial-view', + entityType: PARTIAL_VIEW_ENTITY_TYPE, }, }, ]; -export const manifests = [...entityActions]; +//TODO: add create folder action when the generic folder action is implemented +//Actions for directories +const partialViewFolderActions: Array = [ + { + type: 'entityAction', + alias: 'Umb.EntityAction.PartialViewFolder.Create.New', + name: 'Create PartialView Entity Under Directory Action', + meta: { + icon: 'umb:article', + label: 'New empty partial view', + api: UmbCreateEmptyPartialViewAction, + repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, + }, + conditions: { + entityType: PARTIAL_VIEW_FOLDER_ENTITY_TYPE, + }, + }, + { + type: 'entityAction', + alias: 'Umb.EntityAction.PartialViewFolder.Create.From.Snippet', + name: 'Create PartialView Entity From Snippet Under Directory Action', + meta: { + icon: 'umb:article', + label: 'New partial view from snippet...', + api: UmbCreateFromSnippetPartialViewAction, + repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, + }, + conditions: { + entityType: PARTIAL_VIEW_FOLDER_ENTITY_TYPE, + }, + }, +]; + +export const manifests = [...partialViewActions, ...partialViewFolderActions]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/index.ts deleted file mode 100644 index c8473c3a70..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api'; - -// TODO: temp until we have a proper stylesheet model -export interface PartialViewDetails extends FileSystemTreeItemPresentationModel { - content: string; -} - -export const PARTIAL_VIEW_ENTITY_TYPE = 'partial-view'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts index 258d3290fa..093c5a0afc 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/menu-item/manifests.ts @@ -1,4 +1,4 @@ -import { PARTIAL_VIEW_TREE_ALIAS } from '../tree/manifests'; +import { PARTIAL_VIEW_TREE_ALIAS } from '../config'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry'; const menuItem: ManifestTypes = { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts index 09eb625db3..fd2a4d8bf1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts @@ -1,10 +1,10 @@ import { UmbTemplateRepository } from '../repository/partial-views.repository'; +import { PARTIAL_VIEW_REPOSITORY_ALIAS } from '../config'; import { UmbPartialViewsTreeStore } from './partial-views.tree.store'; import { UmbPartialViewsStore } from './partial-views.store'; import { ManifestRepository } from 'libs/extensions-registry/repository.models'; import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry'; -export const PARTIAL_VIEW_REPOSITORY_ALIAS = 'Umb.Repository.PartialViews'; const repository: ManifestRepository = { type: 'repository', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts index 60c9a4d5d7..b36ddb2e0b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts @@ -56,21 +56,18 @@ export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailR return { data, error, asObservable: () => this.#treeStore!.rootItems }; } - async requestTreeItemsOf(parentKey: string | null) { + async requestTreeItemsOf(path: string | null) { + if (!path) throw new Error('Cannot request tree item with missing path'); + await this.#init; - if (!parentKey) { - const error: ProblemDetailsModel = { title: 'Parent key is missing' }; - return { data: undefined, error }; - } - - const { data, error } = await this.#treeDataSource.getChildrenOf(parentKey); + const { data, error } = await this.#treeDataSource.getChildrenOf({ path }); if (data) { - this.#treeStore?.appendItems(data.items); + this.#treeStore!.appendItems(data.items); } - return { data, error, asObservable: () => this.#treeStore!.childrenOf(parentKey) }; + return { data, error, asObservable: () => this.#treeStore!.childrenOf(path) }; } async requestTreeItems(keys: Array) { @@ -91,124 +88,41 @@ export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailR return this.#treeStore!.rootItems; } - async treeItemsOf(parentKey: string | null) { + async treeItemsOf(parentPath: string | null) { + if (!parentPath) throw new Error('Parent Path is missing'); await this.#init; - return this.#treeStore!.childrenOf(parentKey); + return this.#treeStore!.childrenOf(parentPath); } - async treeItems(keys: Array) { + async treeItems(paths: Array) { + if (!paths) throw new Error('Paths are missing'); await this.#init; - return this.#treeStore!.items(keys); + return this.#treeStore!.items(paths); + } + + // DETAILS + async requestByKey(path: string) { + if (!path) throw new Error('Path is missing'); + await this.#init; + const { data, error } = await this.#detailDataSource.get(path); + return { data, error }; } // DETAILS: async createScaffold(parentKey: string | null) { - // await this.#init; - - // if (!parentKey) { - // throw new Error('Parent key is missing'); - // } - - // // TODO: add parent key to create scaffold - // return this.#detailDataSource.createScaffold(); return Promise.reject(new Error('Not implemented')); } - async requestByKey(key: string) { - // await this.#init; - - // // TODO: should we show a notification if the key is missing? - // // Investigate what is best for Acceptance testing, cause in that perspective a thrown error might be the best choice? - // if (!key) { - // const error: ProblemDetailsModel = { title: 'Key is missing' }; - // return { error }; - // } - // const { data, error } = await this.#detailDataSource.get(key); - - // if (data) { - // this.#store?.append(data); - // } - - // return { data, error }; - return Promise.reject(new Error('Not implemented')); - } - - // Could potentially be general methods: - async create(patrial: any) { - // await this.#init; - - // if (!template || !template.key) { - // throw new Error('Template is missing'); - // } - - // const { error } = await this.#detailDataSource.insert(template); - - // if (!error) { - // const notification = { data: { message: `Template created` } }; - // this.#notificationContext?.peek('positive', notification); - // } - - // // TODO: we currently don't use the detail store for anything. - // // Consider to look up the data before fetching from the server - // this.#store?.append(template); - // // TODO: Update tree store with the new item? or ask tree to request the new item? - - // return { error }; - return Promise.reject(new Error('Not implemented')); } async save(patrial: any) { - // await this.#init; - - // if (!template || !template.key) { - // throw new Error('Template is missing'); - // } - - // const { error } = await this.#detailDataSource.update(template); - - // if (!error) { - // const notification = { data: { message: `Template saved` } }; - // this.#notificationContext?.peek('positive', notification); - // } - - // // TODO: we currently don't use the detail store for anything. - // // Consider to look up the data before fetching from the server - // // Consider notify a workspace if a template is updated in the store while someone is editing it. - // this.#store?.append(template); - // this.#treeStore?.updateItem(template.key, { name: template.name }); - // // TODO: would be nice to align the stores on methods/methodNames. - - // return { error }; return Promise.reject(new Error('Not implemented')); } - // General: - async delete(key: string) { - // await this.#init; - - // if (!key) { - // throw new Error('Template key is missing'); - // } - - // const { error } = await this.#detailDataSource.delete(key); - - // if (!error) { - // const notification = { data: { message: `Template deleted` } }; - // this.#notificationContext?.peek('positive', notification); - // } - - // // TODO: we currently don't use the detail store for anything. - // // Consider to look up the data before fetching from the server. - // // Consider notify a workspace if a template is deleted from the store while someone is editing it. - // this.#store?.remove([key]); - // this.#treeStore?.removeItem(key); - // // TODO: would be nice to align the stores on methods/methodNames. - - // return { error }; return Promise.reject(new Error('Not implemented')); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts index 64c52c09a8..4e63a23bd2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts @@ -3,6 +3,7 @@ import { ArrayState } from '@umbraco-cms/backoffice/observable-api'; import { UmbStoreBase } from '@umbraco-cms/backoffice/store'; import type { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api'; import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { UMB_PARTIAL_VIEW_STORE_CONTEXT_TOKEN_ALIAS } from '../config'; /** * @export @@ -41,4 +42,6 @@ export class UmbPartialViewsStore extends UmbStoreBase { } } -export const UMB_PARTIAL_VIEWS_STORE_CONTEXT_TOKEN = new UmbContextToken('UmbPartialViewStore'); +export const UMB_PARTIAL_VIEWS_STORE_CONTEXT_TOKEN = new UmbContextToken( + UMB_PARTIAL_VIEW_STORE_CONTEXT_TOKEN_ALIAS +); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts index 7333509a28..7d35905370 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts @@ -1,9 +1,10 @@ import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbFileSystemTreeStore } from '@umbraco-cms/backoffice/store'; import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN_ALIAS } from '../config'; export const UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken( - 'UmbPartialViewsTreeStore' + UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN_ALIAS ); /** diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts index bc8eed455a..0aff84c626 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts @@ -1,17 +1,8 @@ -import { ProblemDetailsModel, TemplateResponseModel, TemplateResource } from '@umbraco-cms/backoffice/backend-api'; +import { PartialViewDetails } from '../../config'; import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; -import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; -import type { DataSourceResponse } from '@umbraco-cms/backoffice/repository'; +import { DataSourceResponse, UmbDataSource } from '@umbraco-cms/backoffice/repository'; -export interface PartialViewDetailDataSource { - //createScaffold(): Promise>; - get(key: string): Promise>; - //insert(template: TemplateResponseModel): Promise; - update(template: TemplateResponseModel): Promise; - delete(key: string): Promise; -} - -export class UmbPartialViewDetailServerDataSource implements PartialViewDetailDataSource { +export class UmbPartialViewDetailServerDataSource implements UmbDataSource { #host: UmbControllerHostInterface; /** @@ -23,29 +14,29 @@ export class UmbPartialViewDetailServerDataSource implements PartialViewDetailDa this.#host = host; } - get(key: string) { - // return tryExecuteAndNotify(this.#host, TemplateResource.getTemplateByKey({ key })); - return Promise.reject(new Error('Not implemented')); + createScaffold(parentKey: string | null): Promise> { + throw new Error('Method not implemented.'); } - async update(partial: any) { - // if (!template.key) { - // const error: ProblemDetailsModel = { title: 'Template key is missing' }; - // return { error }; - // } - - // const payload = { key: template.key, requestBody: template }; - // return tryExecuteAndNotify(this.#host, TemplateResource.putTemplateByKey(payload)); - return Promise.reject(new Error('Not implemented')); + /** + * Fetches a Stylesheet with the given path from the server + * @param {string} path + * @return {*} + * @memberof UmbStylesheetServerDataSource + */ + async get(path: string) { + if (!path) throw new Error('Path is missing'); + console.log('GET PATRIAL WITH PATH', path); + return { data: undefined, error: undefined }; } - async delete(key: string) { - // if (!key) { - // const error: ProblemDetailsModel = { title: 'Key is missing' }; - // return { error }; - // } - - // return await tryExecuteAndNotify(this.#host, TemplateResource.deleteTemplateByKey({ key })); - return Promise.reject(new Error('Not implemented')); + insert(data: any): Promise> { + throw new Error('Method not implemented.'); + } + update(data: PartialViewDetails): Promise> { + throw new Error('Method not implemented.'); + } + delete(key: string): Promise> { + throw new Error('Method not implemented.'); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts index 09699c1f89..a4d9cffda8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts @@ -1,9 +1,6 @@ -import { PARTIAL_VIEW_ENTITY_TYPE } from '..'; -import { PARTIAL_VIEW_REPOSITORY_ALIAS } from '../repository/manifests'; +import { PARTIAL_VIEW_ENTITY_TYPE, PARTIAL_VIEW_REPOSITORY_ALIAS, PARTIAL_VIEW_TREE_ALIAS } from '../config'; import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry'; -export const PARTIAL_VIEW_TREE_ALIAS = 'Umb.Tree.PartialViews'; - const tree: ManifestTree = { type: 'tree', alias: PARTIAL_VIEW_TREE_ALIAS, From 4adc1c19ea3c9c47455c094e4a7a97638d7d3286 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 4 Apr 2023 12:50:47 +0200 Subject: [PATCH 07/71] add some more fake data to the tree --- .../src/core/mocks/data/partial-views.data.ts | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/partial-views.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/partial-views.data.ts index f9f2f3e408..0086e48c8a 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/partial-views.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/partial-views.data.ts @@ -30,6 +30,46 @@ export const data: Array = [ icon: 'umb:folder', hasChildren: true, }, + { + path: 'blockgrid/area.cshtml', + isFolder: false, + name: 'area.cshtml', + type: 'partial-view', + icon: 'umb:article', + hasChildren: false, + }, + { + path: 'blockgrid/items.cshtml', + isFolder: false, + name: 'items.cshtml', + type: 'partial-view', + icon: 'umb:article', + hasChildren: false, + }, + { + path: 'blocklist/default.cshtml', + isFolder: false, + name: 'default.cshtml', + type: 'partial-view', + icon: 'umb:article', + hasChildren: false, + }, + { + path: 'grid/editors', + isFolder: false, + name: 'editors', + type: 'partial-view', + icon: 'umb:folder', + hasChildren: false, + }, + { + path: 'grid/default.cshtml', + isFolder: false, + name: 'items.cshtml', + type: 'partial-view', + icon: 'umb:article', + hasChildren: false, + }, ]; // Temp mocked database From 1360e067e29a09c07ed22ad19186e8c3c1f76a23 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 11 Apr 2023 11:15:38 +0200 Subject: [PATCH 08/71] style the insert menu --- .../repository/partial-views.repository.ts | 13 +++-- .../repository/partial-views.tree.store.ts | 2 +- .../template-workspace-edit.element.ts | 53 +++++++++++++++++-- 3 files changed, 59 insertions(+), 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts index b36ddb2e0b..af23d46072 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts @@ -2,16 +2,15 @@ import { UmbPartialViewDetailServerDataSource } from './sources/partial-views.de import { UmbPartialViewsTreeServerDataSource } from './sources/partial-views.tree.server.data'; import { UmbPartialViewsStore, UMB_PARTIAL_VIEWS_STORE_CONTEXT_TOKEN } from './partial-views.store'; import { UmbPartialViewsTreeStore, UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN } from './partial-views.tree.store'; -import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification'; import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api'; import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api'; -import { UmbDetailRepository } from 'libs/repository/detail-repository.interface'; -import { UmbTreeRepository } from 'libs/repository/tree-repository.interface'; +import { UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository'; export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailRepository { #init; - #host: UmbControllerHostInterface; + #host: UmbControllerHostElement; #treeDataSource: UmbPartialViewsTreeServerDataSource; #detailDataSource: UmbPartialViewDetailServerDataSource; @@ -21,7 +20,7 @@ export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailR #notificationContext?: UmbNotificationContext; - constructor(host: UmbControllerHostInterface) { + constructor(host: UmbControllerHostElement) { this.#host = host; this.#treeDataSource = new UmbPartialViewsTreeServerDataSource(this.#host); @@ -41,6 +40,10 @@ export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailR }), ]); } + + requestById(id: string): Promise<{ data?: any; error?: ProblemDetailsModel | undefined }> { + throw new Error('Method not implemented.'); + } // TREE: diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts index 7d35905370..035e75375c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts @@ -1,7 +1,7 @@ +import { UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN_ALIAS } from '../config'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbFileSystemTreeStore } from '@umbraco-cms/backoffice/store'; import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; -import { UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN_ALIAS } from '../config'; export const UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken( UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN_ALIAS diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index 00bc567f45..6abb46f5f9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -30,6 +30,36 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { width: 100%; margin: 1em; } + + #code-editor-menu-container uui-icon { + margin-right: var(--uui-size-space-3); + } + + #insert-menu { + margin: 0; + padding: 0; + margin-top: var(--uui-size-space-3); + background-color: var(--uui-color-surface); + box-shadow: var(--uui-shadow-depth-3); + min-width: calc(100% + var(--uui-size-8, 24px)); + } + + #insert-menu > li, + ul { + padding: 0; + width: 100%; + list-style: none; + } + + .insert-menu-item { + width: 100%; + } + + #code-editor-menu-container { + display: flex; + justify-content: flex-end; + gap: var(--uui-size-space-3); + } `, ]; @@ -91,9 +121,26 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { return html` - Insert "My hovercraft is full of eels" +
+ + Insert +
    +
  • + +
    • +
  • + +
    • +
  • + + +
    • +
+ + + Query builder + +
Date: Wed, 12 Apr 2023 08:45:09 +0200 Subject: [PATCH 09/71] add menu item --- .../workspace/template-workspace-edit.element.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index 6abb46f5f9..6444260c55 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -122,12 +122,23 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement {
+ + Master template: something + + Insert
    • +
  • + +
    • From b568c0d5149bb0ce787eaa49f1cd765eb791276b Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 14 Apr 2023 13:40:32 +0200 Subject: [PATCH 10/71] add insert sidebar and menu --- .../button-with-dropdown.element.ts | 6 +- .../backoffice/templating/components/index.ts | 2 + .../templating-insert-menu.element.ts | 111 ++++++++++++++++++ .../insert-sidebar/insert-sidebar.element.ts | 97 +++++++++++++++ .../components/insert-sidebar/manifest.ts | 14 +++ .../templating/components/manifests.ts | 3 + .../src/backoffice/templating/index.ts | 9 +- .../template-workspace-edit.element.ts | 21 +--- 8 files changed, 242 insertions(+), 21 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts index b9aeb923cd..af6cd0b69f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts @@ -12,7 +12,7 @@ export class UmbButtonWithDropdownElement extends LitElement { UUITextStyles, css` uui-symbol-expand { - margin-left: var(--uui-size-space-3); + margin-left: var(--umb-button-with-dropdown-symbol-expand-margin-left, var(--uui-size-space-3)); } `, ]; @@ -32,6 +32,9 @@ export class UmbButtonWithDropdownElement extends LitElement { @property() placement: PopoverPlacement = 'bottom-start'; + @property({ type: Boolean }) + compact = false; + @query('#symbol-expand') symbolExpand!: UUISymbolExpandElement; @@ -62,6 +65,7 @@ export class UmbButtonWithDropdownElement extends LitElement { .look=${this.look} .color=${this.color} .label=${this.label} + .compact=${this.compact} id="myPopoverBtn" @click=${this.#togglePopover}> diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts index 23987fc391..cbd3e2c4ae 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts @@ -1 +1,3 @@ import './file-system-tree-item/file-system-tree-item.element'; +import './insert-menu/templating-insert-menu.element'; +import './insert-sidebar/insert-sidebar.element'; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts new file mode 100644 index 0000000000..08ef2a0234 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -0,0 +1,111 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../insert-sidebar/manifest'; + +export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( + UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); + +@customElement('umb-templating-insert-menu') +export class UmbTemplatingInsertMenuElement extends UmbLitElement { + static styles = [ + UUITextStyles, + css` + #insert-menu { + margin: 0; + padding: 0; + margin-top: var(--uui-size-space-3); + background-color: var(--uui-color-surface); + box-shadow: var(--uui-shadow-depth-3); + min-width: 150px; + } + + #insert-menu > li, + ul { + padding: 0; + width: 100%; + list-style: none; + } + + ul { + transform: translateX(-100px); + } + + .insert-menu-item { + width: 100%; + } + + umb-button-with-dropdown { + --umb-button-with-dropdown-symbol-expand-margin-left: 0; + } + + uui-icon[name='umb:add'] { + margin-right: var(--uui-size-4); + } + `, + ]; + + private _modalContext?: UmbModalContext; + + constructor() { + super(); + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; + }); + } + + #openChooseTypeModal = () => { + this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, { + hidePartialView: this.hidePartialView, + }); + }; + + @property() + hidePartialView = false; + + render() { + return html` + + + Insert + +
      +
    • + +
      • + ${this.hidePartialView + ? '' + : html`
    • + +
      • `} +
    • + +
      • +
    • + +
      • +
    +     +     + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-templating-insert-menu': UmbTemplatingInsertMenuElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts new file mode 100644 index 0000000000..29c32bdf5e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts @@ -0,0 +1,97 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; +import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '@umbraco-cms/backoffice/modal'; + +@customElement('umb-insert-sidebar') +export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hidePartialViews: boolean }> { + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button { + display: block; + margin-bottom: var(--uui-size-space-5); + } + + h3, + p { + text-align: left; + } + `, + ]; + + private _close() { + this.modalHandler?.submit(); + } + + private _modalContext?: UmbModalContext; + + constructor() { + super(); + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; + }); + } + + render() { + return html` + +
    + +

    Value

    +

    + Displays the value of a named field from the current page, with options to modify the value or fallback + to alternative values. +

    + ${this.data?.hidePartialViews + ? '' + : html`

    Partial view

    +

    + A partial view is a separate template file which can be rendered inside another template, it's great + for reusing markup or for separating complex templates into separate files. +

    `} +

    Macro

    +

    + A Macro is a configurable component which is great for reusable parts of your design, where you need the + option to provide parameters, such as galleries, forms and lists. +

    +

    Dictionary item

    +

    + A dictionary item is a placeholder for a translatable piece of text, which makes it easy to create + designs for multilingual websites. +

    +     +
    +
    + Close +
    +     + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-insert-sidebar': UmbInsertSidebarElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts new file mode 100644 index 0000000000..21a7697661 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts @@ -0,0 +1,14 @@ +import { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; + +export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.ChooseType.Sidebar'; + +const modals: Array = [ + { + type: 'modal', + alias: UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, + name: 'Choose insert type sidebar', + loader: () => import('./insert-sidebar.element'), + }, +]; + +export const manifests = [...modals]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts new file mode 100644 index 0000000000..5ee3c524fe --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts @@ -0,0 +1,3 @@ +import { manifests as insertSidebarManifest } from './insert-sidebar/manifest'; + +export const manifests = [...insertSidebarManifest]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts index 0987adee6c..88d355d5a8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts @@ -2,12 +2,19 @@ import { manifests as menuManifests } from './menu.manifests'; import { manifests as templateManifests } from './templates/manifests'; import { manifests as stylesheetManifests } from './stylesheets/manifests'; import { manifests as partialManifests } from './partial-views/manifests'; +import { manifests as componentManifests } from './components/manifests'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api'; import { ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry'; import './components'; -export const manifests = [...menuManifests, ...templateManifests, ...stylesheetManifests, ...partialManifests]; +export const manifests = [ + ...menuManifests, + ...templateManifests, + ...stylesheetManifests, + ...partialManifests, + ...componentManifests, +]; const registerExtensions = (manifests: Array) => { manifests.forEach((manifest) => umbExtensionsRegistry.register(manifest)); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index 6444260c55..40eb1cbb56 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -89,7 +89,7 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { }); this.observe(this.#templateWorkspaceContext.isNew, (isNew) => { - this.#isNew = isNew; + this.#isNew = !!isNew; console.log(this.#isNew); }); }); @@ -130,24 +130,7 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { > - - Insert -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - - -
      • -
    -     + Query builder From dab95de08af11f1d978e4ff090490df7d803fe3b Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 14 Apr 2023 16:21:16 +0200 Subject: [PATCH 11/71] add insert value tab --- .../backoffice/templating/components/index.ts | 2 +- .../templating-insert-menu.element.ts | 13 ++- ... => insert-choose-type-sidebar.element.ts} | 19 +++- .../insert-value-sidebar.element.ts | 94 +++++++++++++++++++ .../components/insert-sidebar/manifest.ts | 9 +- 5 files changed, 131 insertions(+), 6 deletions(-) rename src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/{insert-sidebar.element.ts => insert-choose-type-sidebar.element.ts} (80%) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-value-sidebar.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts index cbd3e2c4ae..6a29f8ea97 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts @@ -1,3 +1,3 @@ import './file-system-tree-item/file-system-tree-item.element'; import './insert-menu/templating-insert-menu.element'; -import './insert-sidebar/insert-sidebar.element'; \ No newline at end of file +import './insert-sidebar/insert-choose-type-sidebar.element'; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index 08ef2a0234..a113f4894c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, UmbModalToken } from '@umbraco-cms/backoffice/modal'; import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../insert-sidebar/manifest'; +import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL } from '../insert-sidebar/insert-choose-type-sidebar.element'; export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, @@ -67,6 +68,10 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { }); }; + #openInsertValueSidebar() { + this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); + } + @property() hidePartialView = false; @@ -84,7 +89,13 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { label="open insert menu">
    • - + +
      • ${this.hidePartialView ? '' diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts similarity index 80% rename from src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts index 29c32bdf5e..f0df5f93fa 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts @@ -1,8 +1,17 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; +import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS } from './manifest'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; -import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '@umbraco-cms/backoffice/modal'; +import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, UmbModalToken } from '@umbraco-cms/backoffice/modal'; + +export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL = new UmbModalToken( + UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); @customElement('umb-insert-sidebar') export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hidePartialViews: boolean }> { @@ -20,7 +29,7 @@ export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hideP height: calc(100vh - 124px); } - #main uui-button { + #main uui-button:not(:last-of-type) { display: block; margin-bottom: var(--uui-size-space-5); } @@ -45,12 +54,16 @@ export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hideP }); } + #openInsertValueSidebar() { + this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); + } + render() { return html`
      -

      Value

      Displays the value of a named field from the current page, with options to modify the value or fallback diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-value-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-value-sidebar.element.ts new file mode 100644 index 0000000000..2f71435526 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-value-sidebar.element.ts @@ -0,0 +1,94 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; + +@customElement('umb-insert-value-sidebar') +export default class UmbInsertValueSidebarElement extends UmbModalBaseElement { + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button { + width: 100%; + } + + h3, + p { + text-align: left; + } + + uui-combobox, + uui-input { + width: 100%; + } + `, + ]; + + private _close() { + this.modalHandler?.submit(); + } + + @state() + showDefaultValueInput = false; + + render() { + return html` + +

      + + + Choose field + + + apple + orange + lemon + + + + ${this.showDefaultValueInput + ? html` + Default value + + ` + : html` (this.showDefaultValueInput = true)} + look="placeholder" + label="Add default value " + >Add default value`} + + Recursive + Yes, make it recursive + + + Output sample + Some code that goes here... + + +
      +
      + Close + Submit +
      + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-insert-value-sidebar': UmbInsertValueSidebarElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts index 21a7697661..25bdacc5f3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts @@ -1,13 +1,20 @@ import { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.ChooseType.Sidebar'; +export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.InsertValue.Sidebar'; const modals: Array = [ { type: 'modal', alias: UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, name: 'Choose insert type sidebar', - loader: () => import('./insert-sidebar.element'), + loader: () => import('./insert-choose-type-sidebar.element'), + }, + { + type: 'modal', + alias: UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS, + name: 'Insert value type sidebar', + loader: () => import('./insert-value-sidebar.element'), }, ]; From b842fd56204eed3cee6138cf66ab63a222a5c9cb Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Mon, 17 Apr 2023 10:23:40 +0200 Subject: [PATCH 12/71] add partial views sidebar element --- .../templating-insert-menu.element.ts | 16 ++++- .../insert-choose-type-sidebar.element.ts | 19 +++++- .../insert-partial-view-sidebar.element.ts | 61 +++++++++++++++++++ .../components/insert-sidebar/manifest.ts | 9 ++- 4 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index a113f4894c..f334277314 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -4,7 +4,10 @@ import { customElement, property } from 'lit/decorators.js'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, UmbModalToken } from '@umbraco-cms/backoffice/modal'; import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../insert-sidebar/manifest'; -import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL } from '../insert-sidebar/insert-choose-type-sidebar.element'; +import { + UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_MODAL, + UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL, +} from '../insert-sidebar/insert-choose-type-sidebar.element'; export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, @@ -72,6 +75,10 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); } + #openInsertPartialViewSidebar() { + this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_MODAL); + } + @property() hidePartialView = false; @@ -100,7 +107,12 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { ${this.hidePartialView ? '' : html`
    • - + +
      • `}
    • diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts index f0df5f93fa..df1aa08119 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts @@ -1,7 +1,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS } from './manifest'; +import { + UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_ALIAS, + UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS, +} from './manifest'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, UmbModalToken } from '@umbraco-cms/backoffice/modal'; @@ -13,6 +16,14 @@ export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL = new UmbModalToken } ); +export const UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_MODAL = new UmbModalToken( + UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); + @customElement('umb-insert-sidebar') export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hidePartialViews: boolean }> { static styles = [ @@ -58,6 +69,10 @@ export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hideP this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); } + #openInsertPartialViewSidebar() { + this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_MODAL); + } + render() { return html` @@ -72,7 +87,7 @@ export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hideP > ${this.data?.hidePartialViews ? '' - : html`

      Partial view

      A partial view is a separate template file which can be rendered inside another template, it's great diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts new file mode 100644 index 0000000000..390da97db7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts @@ -0,0 +1,61 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; + +@customElement('umb-insert-partial-view-sidebar') +export default class UmbInsertPartialViewSidebarElement extends UmbModalBaseElement { + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button { + width: 100%; + } + + h3, + p { + text-align: left; + } + + uui-combobox, + uui-input { + width: 100%; + } + `, + ]; + + private _close() { + this.modalHandler?.submit(); + } + + render() { + return html` + +

      + +
      +
      + Close + Submit +
      +       + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-insert-partial-view-sidebar': UmbInsertPartialViewSidebarElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts index 25bdacc5f3..5ae7a35600 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts @@ -1,7 +1,8 @@ import { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.ChooseType.Sidebar'; -export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.InsertValue.Sidebar'; +export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.Value.Sidebar'; +export const UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.PartialView.Sidebar'; const modals: Array = [ { @@ -16,6 +17,12 @@ const modals: Array = [ name: 'Insert value type sidebar', loader: () => import('./insert-value-sidebar.element'), }, + { + type: 'modal', + alias: UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_ALIAS, + name: 'Insert value type sidebar', + loader: () => import('./insert-partial-view-sidebar.element'), + }, ]; export const manifests = [...modals]; From 6f9f739505c8e5d2e8d40d953647b7e0236bf7fc Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Mon, 17 Apr 2023 10:27:15 +0200 Subject: [PATCH 13/71] fix import patrial views action manifest --- .../templating/partial-views/entity-actions/manifests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts index e13d6fbeff..1260f28572 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts @@ -2,7 +2,7 @@ import { PARTIAL_VIEW_ENTITY_TYPE, PARTIAL_VIEW_FOLDER_ENTITY_TYPE, PARTIAL_VIEW import { UmbCreateFromSnippetPartialViewAction } from './create/create-from-snippet.action'; import { UmbCreateEmptyPartialViewAction } from './create/create-empty.action'; import { UmbDeleteEntityAction } from '@umbraco-cms/backoffice/entity-action'; -import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models'; +import { ManifestEntityAction } from '@umbraco-cms/backoffice/extensions-registry'; //TODO: this is temporary until we have a proper way of registering actions for folder types in a specific tree From 74b2583fbc59dec712327d5ecf6d8cf130301053 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Mon, 17 Apr 2023 10:54:30 +0200 Subject: [PATCH 14/71] fix alias --- .../insert-sidebar/insert-partial-view-sidebar.element.ts | 3 +-- .../templates/workspace/template-workspace-edit.element.ts | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts index 390da97db7..c182b2edd7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts @@ -41,13 +41,12 @@ export default class UmbInsertPartialViewSidebarElement extends UmbModalBaseElem render() { return html` - +
      Close - Submit
      `; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index 40eb1cbb56..b392d32262 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -78,13 +78,14 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbWorkspaceContext', (workspaceContext: UmbTemplateWorkspaceContext) => { + this.consumeContext('UmbEntityWorkspaceContext', (workspaceContext: UmbTemplateWorkspaceContext) => { this.#templateWorkspaceContext = workspaceContext; this.observe(this.#templateWorkspaceContext.name, (name) => { this._name = name; }); this.observe(this.#templateWorkspaceContext.content, (content) => { + debugger; this._content = content; }); From d9a4b71419bc56eeafce1e5274b9fd6fd9310060 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Mon, 17 Apr 2023 12:24:48 +0200 Subject: [PATCH 15/71] Update template-workspace-edit.element.ts --- .../templates/workspace/template-workspace-edit.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index b392d32262..a8ff1f1ae0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -85,7 +85,6 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { }); this.observe(this.#templateWorkspaceContext.content, (content) => { - debugger; this._content = content; }); From 7a57b1b9235b690bc8394f76650a6cbdea7f0553 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 18 Apr 2023 10:22:22 +0200 Subject: [PATCH 16/71] Update template-workspace-edit.element.ts --- .../templates/workspace/template-workspace-edit.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index a8ff1f1ae0..69a2bba7d5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -90,7 +90,6 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { this.observe(this.#templateWorkspaceContext.isNew, (isNew) => { this.#isNew = !!isNew; - console.log(this.#isNew); }); }); } From d48ca20f8c12fb8a07051880ffb11528dc61dd62 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Wed, 19 Apr 2023 13:24:09 +0200 Subject: [PATCH 17/71] move things around --- .../libs/modal/token/index.ts | 1 + .../token/partial-view-picker-modal.token.ts | 20 +++ .../templating-insert-menu.element.ts | 14 +- .../insert-choose-type-sidebar.element.ts | 125 ------------------ .../insert-partial-view-sidebar.element.ts | 60 --------- .../components/insert-sidebar/manifest.ts | 28 ---- 6 files changed, 29 insertions(+), 219 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/libs/modal/token/partial-view-picker-modal.token.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts index 7fd02d418b..3d48d08fa8 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts @@ -26,3 +26,4 @@ export * from './template-picker-modal.token'; export * from './user-group-picker-modal.token'; export * from './user-picker-modal.token'; export * from './folder-modal.token'; +export * from './partial-view-picker-modal.token'; diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/partial-view-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/partial-view-picker-modal.token.ts new file mode 100644 index 0000000000..ecd3904051 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/partial-view-picker-modal.token.ts @@ -0,0 +1,20 @@ +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; + +export interface UmbPartialViewPickerModalData { + multiple: boolean; + selection: string[]; +} + +export interface UmbPartialViewPickerModalResult { + selection: string[] | undefined; +} + +export const UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS = 'Umb.Modal.PartialViewPicker'; + +export const UMB_PARTIAL_VIEW_PICKER_MODAL = new UmbModalToken< + UmbPartialViewPickerModalData, + UmbPartialViewPickerModalResult +>(UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS, { + type: 'sidebar', + size: 'small', +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index f334277314..5372f06d2f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -1,13 +1,15 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../../modals/manifests'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, UmbModalToken } from '@umbraco-cms/backoffice/modal'; -import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../insert-sidebar/manifest'; import { - UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_MODAL, - UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL, -} from '../insert-sidebar/insert-choose-type-sidebar.element'; + UMB_MODAL_CONTEXT_TOKEN, + UMB_PARTIAL_VIEW_PICKER_MODAL, + UmbModalContext, + UmbModalToken, +} from '@umbraco-cms/backoffice/modal'; +import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL } from '../../modals/insert-choose-type-sidebar.element'; export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, @@ -76,7 +78,7 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { } #openInsertPartialViewSidebar() { - this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_MODAL); + this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); } @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts deleted file mode 100644 index df1aa08119..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-choose-type-sidebar.element.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { UUITextStyles } from '@umbraco-ui/uui-css'; -import { css, html } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import { - UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_ALIAS, - UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS, -} from './manifest'; -import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; -import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, UmbModalToken } from '@umbraco-cms/backoffice/modal'; - -export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL = new UmbModalToken( - UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS, - { - type: 'sidebar', - size: 'small', - } -); - -export const UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_MODAL = new UmbModalToken( - UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_ALIAS, - { - type: 'sidebar', - size: 'small', - } -); - -@customElement('umb-insert-sidebar') -export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hidePartialViews: boolean }> { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - color: var(--uui-color-text); - } - - #main { - box-sizing: border-box; - padding: var(--uui-size-space-5); - height: calc(100vh - 124px); - } - - #main uui-button:not(:last-of-type) { - display: block; - margin-bottom: var(--uui-size-space-5); - } - - h3, - p { - text-align: left; - } - `, - ]; - - private _close() { - this.modalHandler?.submit(); - } - - private _modalContext?: UmbModalContext; - - constructor() { - super(); - this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { - this._modalContext = instance; - }); - } - - #openInsertValueSidebar() { - this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); - } - - #openInsertPartialViewSidebar() { - this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_MODAL); - } - - render() { - return html` - -
      - -

      Value

      -

      - Displays the value of a named field from the current page, with options to modify the value or fallback - to alternative values. -

      - ${this.data?.hidePartialViews - ? '' - : html`

      Partial view

      -

      - A partial view is a separate template file which can be rendered inside another template, it's great - for reusing markup or for separating complex templates into separate files. -

      `} -

      Macro

      -

      - A Macro is a configurable component which is great for reusable parts of your design, where you need the - option to provide parameters, such as galleries, forms and lists. -

      -

      Dictionary item

      -

      - A dictionary item is a placeholder for a translatable piece of text, which makes it easy to create - designs for multilingual websites. -

      -       -
      -
      - Close -
      -       - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-insert-sidebar': UmbInsertSidebarElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts deleted file mode 100644 index c182b2edd7..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-partial-view-sidebar.element.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { UUITextStyles } from '@umbraco-ui/uui-css'; -import { css, html } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; - -@customElement('umb-insert-partial-view-sidebar') -export default class UmbInsertPartialViewSidebarElement extends UmbModalBaseElement { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - color: var(--uui-color-text); - } - - #main { - box-sizing: border-box; - padding: var(--uui-size-space-5); - height: calc(100vh - 124px); - } - - #main uui-button { - width: 100%; - } - - h3, - p { - text-align: left; - } - - uui-combobox, - uui-input { - width: 100%; - } - `, - ]; - - private _close() { - this.modalHandler?.submit(); - } - - render() { - return html` - -
      - -
      -
      - Close -
      -       - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-insert-partial-view-sidebar': UmbInsertPartialViewSidebarElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts deleted file mode 100644 index 5ae7a35600..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/manifest.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; - -export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.ChooseType.Sidebar'; -export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.Value.Sidebar'; -export const UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.PartialView.Sidebar'; - -const modals: Array = [ - { - type: 'modal', - alias: UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, - name: 'Choose insert type sidebar', - loader: () => import('./insert-choose-type-sidebar.element'), - }, - { - type: 'modal', - alias: UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS, - name: 'Insert value type sidebar', - loader: () => import('./insert-value-sidebar.element'), - }, - { - type: 'modal', - alias: UMB_MODAL_TEMPLATING_INSERT_PARTIAL_VIEW_SIDEBAR_ALIAS, - name: 'Insert value type sidebar', - loader: () => import('./insert-partial-view-sidebar.element'), - }, -]; - -export const manifests = [...modals]; From e42d6e35c0651fc4b4652fe5b2b944c430103495 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Wed, 19 Apr 2023 13:25:12 +0200 Subject: [PATCH 18/71] move things around again --- .../backoffice/templating/components/index.ts | 3 +- .../templating/components/manifests.ts | 3 - .../src/backoffice/templating/index.ts | 4 +- .../insert-choose-type-sidebar.element.ts | 119 ++++++++++++++++++ .../insert-value-sidebar.element.ts | 0 .../backoffice/templating/modals/manifests.ts | 28 +++++ .../partial-view-picker-modal.element.ts | 89 +++++++++++++ 7 files changed, 239 insertions(+), 7 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts rename src/Umbraco.Web.UI.Client/src/backoffice/templating/{components/insert-sidebar => modals}/insert-value-sidebar.element.ts (100%) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts index 6a29f8ea97..1e8352bcf1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/index.ts @@ -1,3 +1,2 @@ import './file-system-tree-item/file-system-tree-item.element'; -import './insert-menu/templating-insert-menu.element'; -import './insert-sidebar/insert-choose-type-sidebar.element'; \ No newline at end of file +import './insert-menu/templating-insert-menu.element'; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts deleted file mode 100644 index 5ee3c524fe..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/manifests.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { manifests as insertSidebarManifest } from './insert-sidebar/manifest'; - -export const manifests = [...insertSidebarManifest]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts index 88d355d5a8..edc8ff4605 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/index.ts @@ -2,7 +2,7 @@ import { manifests as menuManifests } from './menu.manifests'; import { manifests as templateManifests } from './templates/manifests'; import { manifests as stylesheetManifests } from './stylesheets/manifests'; import { manifests as partialManifests } from './partial-views/manifests'; -import { manifests as componentManifests } from './components/manifests'; +import { manifests as modalManifests } from './modals/manifests'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api'; import { ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry'; @@ -13,7 +13,7 @@ export const manifests = [ ...templateManifests, ...stylesheetManifests, ...partialManifests, - ...componentManifests, + ...modalManifests, ]; const registerExtensions = (manifests: Array) => { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts new file mode 100644 index 0000000000..309faf59ba --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -0,0 +1,119 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS } from './manifests'; +import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; +import { + UMB_MODAL_CONTEXT_TOKEN, + UmbModalContext, + UmbModalToken, + UMB_PARTIAL_VIEW_PICKER_MODAL, +} from '@umbraco-cms/backoffice/modal'; + +export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL = new UmbModalToken( + UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); + +@customElement('umb-insert-sidebar') +export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hidePartialViews: boolean }> { + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button:not(:last-of-type) { + display: block; + margin-bottom: var(--uui-size-space-5); + } + + h3, + p { + text-align: left; + } + `, + ]; + + private _close() { + this.modalHandler?.submit(); + } + + private _modalContext?: UmbModalContext; + + constructor() { + super(); + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; + }); + } + + #openInsertValueSidebar() { + this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); + } + + #openInsertPartialViewSidebar() { + this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); + } + + render() { + return html` + +
      + +

      Value

      +

      + Displays the value of a named field from the current page, with options to modify the value or fallback + to alternative values. +

      + ${this.data?.hidePartialViews + ? '' + : html`

      Partial view

      +

      + A partial view is a separate template file which can be rendered inside another template, it's great + for reusing markup or for separating complex templates into separate files. +

      `} +

      Macro

      +

      + A Macro is a configurable component which is great for reusable parts of your design, where you need the + option to provide parameters, such as galleries, forms and lists. +

      +

      Dictionary item

      +

      + A dictionary item is a placeholder for a translatable piece of text, which makes it easy to create + designs for multilingual websites. +

      +       +
      +
      + Close +
      +       + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-insert-sidebar': UmbInsertSidebarElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-value-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-sidebar/insert-value-sidebar.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts new file mode 100644 index 0000000000..5704dc3b3f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts @@ -0,0 +1,28 @@ +import { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; +import { UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS } from '@umbraco-cms/backoffice/modal'; + +export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.ChooseType.Sidebar'; +export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.Value.Sidebar'; + +const modals: Array = [ + { + type: 'modal', + alias: UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, + name: 'Choose insert type sidebar', + loader: () => import('./insert-choose-type-sidebar.element'), + }, + { + type: 'modal', + alias: UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS, + name: 'Insert value type sidebar', + loader: () => import('./insert-value-sidebar.element'), + }, + { + type: 'modal', + alias: UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS, + name: 'Partial View Picker Modal', + loader: () => import('../../templating/modals/partial-view-picker-modal.element'), + }, +]; + +export const manifests = [...modals]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts new file mode 100644 index 0000000000..add874a6b4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts @@ -0,0 +1,89 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbTreeElement } from '../../shared/components/tree/tree.element'; +import { UmbPartialViewPickerModalData, UmbPartialViewPickerModalResult } from '@umbraco-cms/backoffice/modal'; +import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; + +@customElement('umb-partial-view-picker-modal') +export default class UmbPartialViewPickerModalElement extends UmbModalBaseElement< + UmbPartialViewPickerModalData, + UmbPartialViewPickerModalResult +> { + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button { + width: 100%; + } + + h3, + p { + text-align: left; + } + `, + ]; + + @state() + _selection: Array = []; + + @state() + _multiple = false; + + connectedCallback() { + super.connectedCallback(); + this._selection = this.data?.selection ?? []; + this._multiple = this.data?.multiple ?? true; + } + + private _handleSelectionChange(e: CustomEvent) { + e.stopPropagation(); + const element = e.target as UmbTreeElement; + this._selection = this._multiple ? element.selection : [element.selection[element.selection.length - 1]]; + this._submit(); + } + + private _submit() { + this.modalHandler?.submit({ selection: this._selection }); + } + + private _close() { + this.modalHandler?.reject(); + } + + render() { + return html` + +
      + + + +
      +
      + Close +
      +       + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-partial-view-picker-modal': UmbPartialViewPickerModalElement; + } +} From c7aaf1495c8472576c31949985417ff8a6ceaa37 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Thu, 20 Apr 2023 13:24:58 +0200 Subject: [PATCH 19/71] pass instert value down --- .../templating-insert-menu.element.ts | 24 +++++++++++++++---- .../insert-choose-type-sidebar.element.ts | 18 ++++++++++---- .../modals/insert-value-sidebar.element.ts | 8 +++++-- .../template-workspace-edit.element.ts | 7 +++--- 4 files changed, 44 insertions(+), 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index 5372f06d2f..3cd929671d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -1,15 +1,17 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../../modals/manifests'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UMB_MODAL_CONTEXT_TOKEN, UMB_PARTIAL_VIEW_PICKER_MODAL, UmbModalContext, + UmbModalHandler, UmbModalToken, } from '@umbraco-cms/backoffice/modal'; import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL } from '../../modals/insert-choose-type-sidebar.element'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/events'; export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, @@ -58,8 +60,13 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { `, ]; + @property() + value = ''; + private _modalContext?: UmbModalContext; + #openModal?: UmbModalHandler; + constructor() { super(); this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { @@ -68,17 +75,26 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { } #openChooseTypeModal = () => { - this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, { + this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, { hidePartialView: this.hidePartialView, }); + this.#submitOpenModal(); }; #openInsertValueSidebar() { - this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); + this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); + this.#submitOpenModal(); + } + + #submitOpenModal() { + this.#openModal?.onSubmit().then((value) => { + this.value = value; + this.dispatchEvent(new CustomEvent('insert', { bubbles: true, cancelable: true, composed: false })); + }); } #openInsertPartialViewSidebar() { - this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); + this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); } @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index 309faf59ba..37e5a11cca 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -8,6 +8,7 @@ import { UmbModalContext, UmbModalToken, UMB_PARTIAL_VIEW_PICKER_MODAL, + UmbModalHandler, } from '@umbraco-cms/backoffice/modal'; export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL = new UmbModalToken( @@ -18,8 +19,12 @@ export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL = new UmbModalToken } ); +export interface InsertSidebarData { + hidePartialViews?: boolean; +} + @customElement('umb-insert-sidebar') -export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hidePartialViews: boolean }> { +export default class UmbInsertSidebarElement extends UmbModalBaseElement { static styles = [ UUITextStyles, css` @@ -47,7 +52,7 @@ export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hideP ]; private _close() { - this.modalHandler?.submit(); + this.modalHandler?.reject(); } private _modalContext?: UmbModalContext; @@ -59,12 +64,17 @@ export default class UmbInsertSidebarElement extends UmbModalBaseElement<{ hideP }); } + #openModal?: UmbModalHandler; + #openInsertValueSidebar() { - this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); + this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); + this.#openModal?.onSubmit().then(chosenValue => { + if(chosenValue)this.modalHandler?.submit(chosenValue); + }); } #openInsertPartialViewSidebar() { - this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); + this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts index 2f71435526..cc63d11933 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts @@ -4,7 +4,7 @@ import { customElement, state } from 'lit/decorators.js'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; @customElement('umb-insert-value-sidebar') -export default class UmbInsertValueSidebarElement extends UmbModalBaseElement { +export default class UmbInsertValueSidebarElement extends UmbModalBaseElement { static styles = [ UUITextStyles, css` @@ -39,6 +39,10 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement { this.modalHandler?.submit(); } + private _submit() { + this.modalHandler?.submit('I am some value to be inserted'); + } + @state() showDefaultValueInput = false; @@ -80,7 +84,7 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement {
      • Close - Submit + Submit
      `; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index 69a2bba7d5..5a00ac95f7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -5,6 +5,7 @@ import { UUIInputElement } from '@umbraco-ui/uui'; import { UmbCodeEditorElement } from '../../../shared/components/code-editor/code-editor.element'; import { UmbTemplateWorkspaceContext } from './template-workspace.context'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element'; @customElement('umb-template-workspace-edit') export class UmbTemplateWorkspaceEditElement extends UmbLitElement { @@ -109,10 +110,10 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { } #insertCode(event: Event) { - const target = event.target as UUIInputElement; + const target = event.target as UmbTemplatingInsertMenuElement; const value = target.value as string; - this._codeEditor?.insert(`My hovercraft is full of eels`); + this._codeEditor?.insert(value); } render() { @@ -129,7 +130,7 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { > - + Query builder From 83001fbcc1ce016e1c2874dde2356ca8f327d4e4 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Thu, 20 Apr 2023 13:46:19 +0200 Subject: [PATCH 20/71] add field creation logic --- .../modals/insert-value-sidebar.element.ts | 65 +++++++++++++++++-- 1 file changed, 59 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts index cc63d11933..8a1466b8d4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts @@ -1,7 +1,8 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; -import { css, html } from 'lit'; +import { PropertyValueMap, css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; +import { UUIComboboxElement, UUIInputElement } from '@umbraco-ui/uui'; @customElement('umb-insert-value-sidebar') export default class UmbInsertValueSidebarElement extends UmbModalBaseElement { @@ -40,12 +41,58 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement @@ -53,7 +100,7 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement Choose field - + apple orange @@ -64,7 +111,13 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement Default value - + + ` : html` (this.showDefaultValueInput = true)} @@ -74,11 +127,11 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement`} Recursive - Yes, make it recursive + (this.recursive = !this.recursive)}>Yes, make it recursive Output sample - Some code that goes here... + ${this.output}
From d1a865a44d67b5829e81cc9c71cf40a1bf8a35e4 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 21 Apr 2023 10:31:43 +0200 Subject: [PATCH 21/71] add snippet utils --- .../modals/insert-value-sidebar.element.ts | 25 ++------ .../src/backoffice/templating/utils.ts | 64 +++++++++++++++++++ 2 files changed, 68 insertions(+), 21 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts index 8a1466b8d4..c60737763b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts @@ -1,8 +1,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; -import { PropertyValueMap, css, html } from 'lit'; +import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UUIComboboxElement, UUIInputElement } from '@umbraco-ui/uui'; +import { getUmbracoFieldSnippet } from '../utils'; +import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; @customElement('umb-insert-value-sidebar') export default class UmbInsertValueSidebarElement extends UmbModalBaseElement { @@ -60,7 +61,7 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement encodeURIComp // TODO: we can try and make pretty urls if we want to export const serverFilePathFromUrlFriendlyPath = (unique: string) => decodeURIComponent(unique.replace('-', '.')); + +//Below are a copy of +export const getInsertDictionarySnippet = (nodeName: string) => { + return `@Umbraco.GetDictionaryValue("${nodeName}")`; +} + +export const getInsertPartialSnippet = (nodeName: string, parentId = '') => { + + let partialViewName = nodeName.replace(".cshtml", ""); + + if(parentId) { + partialViewName = parentId + "/" + partialViewName; + } + + return `@await Html.PartialAsync("${partialViewName}")` +} + +export const getQuerySnippet = (queryExpression: string) => { + let code = "\n@{\n" + "\tvar selection = " + queryExpression + ";\n}\n"; + code += "
    \n" + + "\t@foreach (var item in selection)\n" + + "\t{\n" + + "\t\t
  • \n" + + "\t\t\t@item.Name()\n" + + "\t\t
    • \n" + + "\t}\n" + + "
\n\n"; + return code; +} + +export const getRenderBodySnippet = () => "@RenderBody()"; + + +export const getRenderSectionSnippet = (sectionName: string, isMandatory: boolean) => `@RenderSection("${sectionName}", ${isMandatory})`; + + +export const getAddSectionSnippet = (sectionName: string) => `@section ${sectionName} +{ + + + +}` + + +export const getUmbracoFieldSnippet = (field: string, defaultValue: string | null = null, recursive = false) => { + let fallback = null; + + if (recursive !== false && defaultValue !== null) { + fallback = 'Fallback.To(Fallback.Ancestors, Fallback.DefaultValue)'; + } else if (recursive !== false) { + fallback = 'Fallback.ToAncestors'; + } else if (defaultValue !== null) { + fallback = 'Fallback.ToDefaultValue'; + } + + const value = `${field !== null ? `@Model.Value("${field}"` : ''}, ${ + fallback !== null ? `fallback: ${fallback}` : '' + }, ${defaultValue !== null ? `defaultValue: new HtmlString("${defaultValue}")` : ''}${ + field ? ')' : '' + }`; + + return value; +} + From 5947baadf1e721386bc42345321201a46f388384 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 21 Apr 2023 11:38:07 +0200 Subject: [PATCH 22/71] insert partina view from both modals --- .../templating-insert-menu.element.ts | 29 +++++--- .../insert-choose-type-sidebar.element.ts | 43 ++++++++--- .../backoffice/templating/modals/manifests.ts | 4 +- .../src/backoffice/templating/utils.ts | 73 ++++++++----------- 4 files changed, 86 insertions(+), 63 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index 3cd929671d..f9891df58f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -10,8 +10,12 @@ import { UmbModalHandler, UmbModalToken, } from '@umbraco-cms/backoffice/modal'; -import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL } from '../../modals/insert-choose-type-sidebar.element'; -import { UmbChangeEvent } from '@umbraco-cms/backoffice/events'; +import { + ChooseInsertTypeModalResult, + CodeSnippetType, + UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL, +} from '../../modals/insert-choose-type-sidebar.element'; +import { getInsertPartialSnippet } from '../../utils'; export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, @@ -78,23 +82,30 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, { hidePartialView: this.hidePartialView, }); - this.#submitOpenModal(); + this.#openModal?.onSubmit().then((closedModal: ChooseInsertTypeModalResult) => { + this.value = closedModal.value; + this.#dispatchInsertEvent(); + }); }; #openInsertValueSidebar() { - this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL); - this.#submitOpenModal(); - } - - #submitOpenModal() { + this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL); this.#openModal?.onSubmit().then((value) => { this.value = value; - this.dispatchEvent(new CustomEvent('insert', { bubbles: true, cancelable: true, composed: false })); + this.#dispatchInsertEvent(); }); } #openInsertPartialViewSidebar() { this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); + this.#openModal?.onSubmit().then((value) => { + this.value = getInsertPartialSnippet(value.selection?.[0]) ?? ''; + this.#dispatchInsertEvent(); + }); + } + + #dispatchInsertEvent() { + this.dispatchEvent(new CustomEvent('insert', { bubbles: true, cancelable: true, composed: false })); } @property() diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index 37e5a11cca..c90b82ccee 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -1,7 +1,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS } from './manifests'; +import { UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS } from './manifests'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UMB_MODAL_CONTEXT_TOKEN, @@ -10,21 +10,36 @@ import { UMB_PARTIAL_VIEW_PICKER_MODAL, UmbModalHandler, } from '@umbraco-cms/backoffice/modal'; +import { getInsertPartialSnippet } from '../utils'; -export const UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_MODAL = new UmbModalToken( - UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS, +export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken( + UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, { type: 'sidebar', size: 'small', } ); -export interface InsertSidebarData { +export interface ChooseInsertTypeModalData { hidePartialViews?: boolean; } -@customElement('umb-insert-sidebar') -export default class UmbInsertSidebarElement extends UmbModalBaseElement { +export enum CodeSnippetType { + partialView = 'partialView', + umbracoField = 'umbracoField', + dictionaryItem = 'dictionaryItem', + macro = 'macro', +} +export interface ChooseInsertTypeModalResult { + value: string; + type: CodeSnippetType; +} + +@customElement('umb-templating-choose-insert-type-modal') +export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement< + ChooseInsertTypeModalData, + ChooseInsertTypeModalResult +> { static styles = [ UUITextStyles, css` @@ -67,14 +82,22 @@ export default class UmbInsertSidebarElement extends UmbModalBaseElement { - if(chosenValue)this.modalHandler?.submit(chosenValue); + this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL); + this.#openModal?.onSubmit().then((chosenValue) => { + if (chosenValue) this.modalHandler?.submit({ value: chosenValue, type: CodeSnippetType.umbracoField }); }); } #openInsertPartialViewSidebar() { this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); + this.#openModal?.onSubmit().then((partialViewPickerModalResult) => { + debugger; + if (partialViewPickerModalResult) + this.modalHandler?.submit({ + type: CodeSnippetType.partialView, + value: getInsertPartialSnippet(partialViewPickerModalResult.selection[0]), + }); + }); } render() { @@ -124,6 +147,6 @@ export default class UmbInsertSidebarElement extends UmbModalBaseElement = [ { @@ -13,7 +13,7 @@ const modals: Array = [ }, { type: 'modal', - alias: UMB_MODAL_TEMPLATING_INSERT_VALUE_SIDEBAR_ALIAS, + alias: UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, name: 'Insert value type sidebar', loader: () => import('./insert-value-sidebar.element'), }, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/utils.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/utils.ts index e9010bae7f..afb8b2c552 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/utils.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/utils.ts @@ -9,61 +9,50 @@ export const getInsertDictionarySnippet = (nodeName: string) => { return `@Umbraco.GetDictionaryValue("${nodeName}")`; } -export const getInsertPartialSnippet = (nodeName: string, parentId = '') => { - - let partialViewName = nodeName.replace(".cshtml", ""); - - if(parentId) { - partialViewName = parentId + "/" + partialViewName; - } - - return `@await Html.PartialAsync("${partialViewName}")` -} +export const getInsertPartialSnippet = (nodeName: string) => + `@await Html.PartialAsync("${nodeName.replace('.cshtml', '')}")`; export const getQuerySnippet = (queryExpression: string) => { - let code = "\n@{\n" + "\tvar selection = " + queryExpression + ";\n}\n"; - code += "
    \n" + - "\t@foreach (var item in selection)\n" + - "\t{\n" + - "\t\t
  • \n" + - "\t\t\t@item.Name()\n" + - "\t\t
    • \n" + - "\t}\n" + - "
\n\n"; - return code; -} + let code = '\n@{\n' + '\tvar selection = ' + queryExpression + ';\n}\n'; + code += + '
    \n' + + '\t@foreach (var item in selection)\n' + + '\t{\n' + + '\t\t
  • \n' + + '\t\t\t@item.Name()\n' + + '\t\t
    • \n' + + '\t}\n' + + '
\n\n'; + return code; +}; -export const getRenderBodySnippet = () => "@RenderBody()"; - - -export const getRenderSectionSnippet = (sectionName: string, isMandatory: boolean) => `@RenderSection("${sectionName}", ${isMandatory})`; +export const getRenderBodySnippet = () => '@RenderBody()'; +export const getRenderSectionSnippet = (sectionName: string, isMandatory: boolean) => + `@RenderSection("${sectionName}", ${isMandatory})`; export const getAddSectionSnippet = (sectionName: string) => `@section ${sectionName} { -}` - +}`; export const getUmbracoFieldSnippet = (field: string, defaultValue: string | null = null, recursive = false) => { - let fallback = null; + let fallback = null; - if (recursive !== false && defaultValue !== null) { - fallback = 'Fallback.To(Fallback.Ancestors, Fallback.DefaultValue)'; - } else if (recursive !== false) { - fallback = 'Fallback.ToAncestors'; - } else if (defaultValue !== null) { - fallback = 'Fallback.ToDefaultValue'; - } + if (recursive !== false && defaultValue !== null) { + fallback = 'Fallback.To(Fallback.Ancestors, Fallback.DefaultValue)'; + } else if (recursive !== false) { + fallback = 'Fallback.ToAncestors'; + } else if (defaultValue !== null) { + fallback = 'Fallback.ToDefaultValue'; + } - const value = `${field !== null ? `@Model.Value("${field}"` : ''}, ${ - fallback !== null ? `fallback: ${fallback}` : '' - }, ${defaultValue !== null ? `defaultValue: new HtmlString("${defaultValue}")` : ''}${ - field ? ')' : '' - }`; + const value = `${field !== null ? `@Model.Value("${field}"` : ''}${ + fallback !== null ? `, fallback: ${fallback}` : '' + }${defaultValue !== null ? `, defaultValue: new HtmlString("${defaultValue}")` : ''}${field ? ')' : ''}`; - return value; -} + return value; +}; From 8adce76012ff4727c04a613c9e4894570df19f55 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 21 Apr 2023 12:20:02 +0200 Subject: [PATCH 23/71] add dictionary item picker --- .../dictionary-item-picker-modal.token.ts | 20 +++++ .../libs/modal/token/index.ts | 1 + .../insert-choose-type-sidebar.element.ts | 11 ++- .../src/backoffice/translation/index.ts | 4 +- .../dictionary-item-picker-modal.element.ts | 89 +++++++++++++++++++ .../translation/modals/manifests.ts | 13 +++ 6 files changed, 135 insertions(+), 3 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts new file mode 100644 index 0000000000..c4a6082183 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts @@ -0,0 +1,20 @@ +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; + +export interface UmbDictionaryItemPickerModalData { + multiple: boolean; + selection: string[]; +} + +export interface UmbDictionaryItemPickerModalResult { + selection: string[] | undefined; +} + +export const UMB_DICTIONARY_ITEM_PICKER_MODAL_ALIAS = 'Umb.Modal.DictionaryItemPicker'; + +export const UMB_DICTIONARY_ITEM_PICKER_MODAL = new UmbModalToken< + UmbDictionaryItemPickerModalData, + UmbDictionaryItemPickerModalResult +>(UMB_DICTIONARY_ITEM_PICKER_MODAL_ALIAS, { + type: 'sidebar', + size: 'small', +}); diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts index 3d48d08fa8..69ae6e1b86 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts @@ -27,3 +27,4 @@ export * from './user-group-picker-modal.token'; export * from './user-picker-modal.token'; export * from './folder-modal.token'; export * from './partial-view-picker-modal.token'; +export * from './dictionary-item-picker-modal.token'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index c90b82ccee..06e18cde9b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -9,6 +9,7 @@ import { UmbModalToken, UMB_PARTIAL_VIEW_PICKER_MODAL, UmbModalHandler, + UMB_DICTIONARY_ITEM_PICKER_MODAL, } from '@umbraco-cms/backoffice/modal'; import { getInsertPartialSnippet } from '../utils'; @@ -91,7 +92,6 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement #openInsertPartialViewSidebar() { this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); this.#openModal?.onSubmit().then((partialViewPickerModalResult) => { - debugger; if (partialViewPickerModalResult) this.modalHandler?.submit({ type: CodeSnippetType.partialView, @@ -100,6 +100,13 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement }); } + #openInsertDictionaryItemModal() { + this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL); + this.#openModal?.onSubmit().then((chosenValue) => { + if (chosenValue) this.modalHandler?.submit({ value: chosenValue, type: CodeSnippetType.umbracoField }); + }); + } + render() { return html` @@ -128,7 +135,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement option to provide parameters, such as galleries, forms and lists.

-

Dictionary item

A dictionary item is a placeholder for a translatable piece of text, which makes it easy to create diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/index.ts index 9d5a22448b..9ff5aaaec2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/index.ts @@ -1,9 +1,11 @@ import { manifests as translationSectionManifests } from './section.manifest'; import { manifests as dictionaryManifests } from './dictionary/manifests'; +import { manifests as modalManifests } from './modals/manifests'; + import type { ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api'; -export const manifests = [...translationSectionManifests, ...dictionaryManifests]; +export const manifests = [...modalManifests, ...translationSectionManifests, ...dictionaryManifests]; const registerExtensions = (manifests: Array) => { manifests.forEach((manifest) => umbExtensionsRegistry.register(manifest)); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts new file mode 100644 index 0000000000..1e37d48959 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts @@ -0,0 +1,89 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbTreeElement } from '../../../shared/components/tree/tree.element'; +import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; +import { UmbDictionaryItemPickerModalData, UmbDictionaryItemPickerModalResult } from '@umbraco-cms/backoffice/modal'; + +@customElement('umb-dictionary-item-picker-modal') +export default class UmbDictionaryItemPickerModalElement extends UmbModalBaseElement< + UmbDictionaryItemPickerModalData, + UmbDictionaryItemPickerModalResult +> { + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button { + width: 100%; + } + + h3, + p { + text-align: left; + } + `, + ]; + + @state() + _selection: Array = []; + + @state() + _multiple = false; + + connectedCallback() { + super.connectedCallback(); + this._selection = this.data?.selection ?? []; + this._multiple = this.data?.multiple ?? true; + } + + private _handleSelectionChange(e: CustomEvent) { + e.stopPropagation(); + const element = e.target as UmbTreeElement; + this._selection = this._multiple ? element.selection : [element.selection[element.selection.length - 1]]; + this._submit(); + } + + private _submit() { + this.modalHandler?.submit({ selection: this._selection }); + } + + private _close() { + this.modalHandler?.reject(); + } + + render() { + return html` + +

+ + + +
+
+ Close +
+ + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-dictionary-item-picker-modal': UmbDictionaryItemPickerModalElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/manifests.ts new file mode 100644 index 0000000000..e764a4f350 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/manifests.ts @@ -0,0 +1,13 @@ +import { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; +import { UMB_DICTIONARY_ITEM_PICKER_MODAL_ALIAS } from '@umbraco-cms/backoffice/modal'; + +const modals: Array = [ + { + type: 'modal', + alias: UMB_DICTIONARY_ITEM_PICKER_MODAL_ALIAS, + name: 'Dictionary Item Picker Modal', + loader: () => import('./dictionary-item-picker/dictionary-item-picker-modal.element'), + }, +]; + +export const manifests = [...modals]; From 6e729f98573311675fd26dae89a1531a5800f618 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 21 Apr 2023 12:42:30 +0200 Subject: [PATCH 24/71] fix deep state error --- .../workspace/partial-views-workspace.context.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts index f320ec5d37..3aa3343ce3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts @@ -1,11 +1,11 @@ import { UmbTemplateRepository } from '../repository/partial-views.repository'; import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context'; -import { createObservablePart, DeepState } from '@umbraco-cms/backoffice/observable-api'; +import { createObservablePart, UmbDeepState } from '@umbraco-cms/backoffice/observable-api'; import { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext { - #data = new DeepState(undefined); + #data = new UmbDeepState(undefined); data = this.#data.asObservable(); name = createObservablePart(this.#data, (data) => data?.name); content = createObservablePart(this.#data, (data) => data?.content); From 86fa8dafe3b295e6f7a6d6007685c8aeed421851 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 21 Apr 2023 13:28:33 +0200 Subject: [PATCH 25/71] fix variuous interface errors --- .../partial-views/repository/manifests.ts | 3 +-- .../repository/partial-views.repository.ts | 2 +- .../repository/partial-views.store.ts | 18 ++++++++++-------- .../repository/partial-views.tree.store.ts | 4 ++-- .../partial-views/repository/sources/index.ts | 2 +- .../partial-views.detail.server.data.ts | 15 +++++++++------ .../sources/partial-views.tree.server.data.ts | 14 +++++++------- .../partial-views-workspace.context.ts | 18 +++++++++++++++--- .../templates/workspace/manifests.ts | 1 - .../workspace/template-workspace.element.ts | 8 +++++--- 10 files changed, 51 insertions(+), 34 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts index fd2a4d8bf1..a67699c745 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/manifests.ts @@ -2,8 +2,7 @@ import { UmbTemplateRepository } from '../repository/partial-views.repository'; import { PARTIAL_VIEW_REPOSITORY_ALIAS } from '../config'; import { UmbPartialViewsTreeStore } from './partial-views.tree.store'; import { UmbPartialViewsStore } from './partial-views.store'; -import { ManifestRepository } from 'libs/extensions-registry/repository.models'; -import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry'; +import { ManifestRepository, ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry'; const repository: ManifestRepository = { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts index af23d46072..c1e1ee44d8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts @@ -81,7 +81,7 @@ export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailR return { data: undefined, error }; } - const { data, error } = await this.#treeDataSource.getItems(keys); + const { data, error } = await this.#treeDataSource.getItem(keys); return { data, error, asObservable: () => this.#treeStore!.items(keys) }; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts index 4e63a23bd2..56c444e0d7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.store.ts @@ -1,8 +1,8 @@ import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; -import { ArrayState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; import { UmbStoreBase } from '@umbraco-cms/backoffice/store'; import type { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api'; -import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; import { UMB_PARTIAL_VIEW_STORE_CONTEXT_TOKEN_ALIAS } from '../config'; /** @@ -12,15 +12,17 @@ import { UMB_PARTIAL_VIEW_STORE_CONTEXT_TOKEN_ALIAS } from '../config'; * @description - Data Store for partial views */ export class UmbPartialViewsStore extends UmbStoreBase { - #data = new ArrayState([], (x) => x.key); - /** * Creates an instance of UmbPartialViewsStore. * @param {UmbControllerHostInterface} host * @memberof UmbPartialViewsStore */ - constructor(host: UmbControllerHostInterface) { - super(host, UMB_PARTIAL_VIEWS_STORE_CONTEXT_TOKEN.toString()); + constructor(host: UmbControllerHostElement) { + super( + host, + UMB_PARTIAL_VIEWS_STORE_CONTEXT_TOKEN.toString(), + new UmbArrayState([], (x) => x.id) + ); } /** @@ -29,7 +31,7 @@ export class UmbPartialViewsStore extends UmbStoreBase { * @memberof UmbPartialViewsStore */ append(template: TemplateResponseModel) { - this.#data.append([template]); + this._data.append([template]); } /** @@ -38,7 +40,7 @@ export class UmbPartialViewsStore extends UmbStoreBase { * @memberof UmbPartialViewsStore */ remove(uniques: string[]) { - this.#data.remove(uniques); + this._data.remove(uniques); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts index 035e75375c..46979f5686 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.tree.store.ts @@ -1,7 +1,7 @@ import { UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN_ALIAS } from '../config'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbFileSystemTreeStore } from '@umbraco-cms/backoffice/store'; -import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; export const UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken( UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN_ALIAS @@ -20,7 +20,7 @@ export class UmbPartialViewsTreeStore extends UmbFileSystemTreeStore { * @param {UmbControllerHostInterface} host * @memberof UmbPartialViewsTreeStore */ - constructor(host: UmbControllerHostInterface) { + constructor(host: UmbControllerHostElement) { super(host, UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN.toString()); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/index.ts index 1be4b13578..2a8d8c1290 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/index.ts @@ -15,5 +15,5 @@ export interface PartialViewsTreeDataSource { skip?: number | undefined; take?: number | undefined; }): Promise>; - getItems(paths: Array): Promise>; + getItem(ids: Array): Promise>; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts index 0aff84c626..bbe848b399 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts @@ -1,16 +1,19 @@ import { PartialViewDetails } from '../../config'; -import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; import { DataSourceResponse, UmbDataSource } from '@umbraco-cms/backoffice/repository'; -export class UmbPartialViewDetailServerDataSource implements UmbDataSource { - #host: UmbControllerHostInterface; +//TODO Pass proper models +export class UmbPartialViewDetailServerDataSource + implements UmbDataSource +{ + #host: UmbControllerHostElement; /** * Creates an instance of UmbPartialViewDetailServerDataSource. * @param {UmbControllerHostInterface} host * @memberof UmbPartialViewDetailServerDataSource */ - constructor(host: UmbControllerHostInterface) { + constructor(host: UmbControllerHostElement) { this.#host = host; } @@ -33,10 +36,10 @@ export class UmbPartialViewDetailServerDataSource implements UmbDataSource> { throw new Error('Method not implemented.'); } - update(data: PartialViewDetails): Promise> { + update(unique: string, data: PartialViewDetails): Promise> { throw new Error('Method not implemented.'); } - delete(key: string): Promise> { + delete(unique: string): Promise { throw new Error('Method not implemented.'); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts index 57a95b0e24..6ca9e554da 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts @@ -1,12 +1,12 @@ import { PartialViewsTreeDataSource } from '.'; import { PartialViewResource, ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api'; -import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; export class UmbPartialViewsTreeServerDataSource implements PartialViewsTreeDataSource { - #host: UmbControllerHostInterface; + #host: UmbControllerHostElement; - constructor(host: UmbControllerHostInterface) { + constructor(host: UmbControllerHostElement) { this.#host = host; } @@ -38,16 +38,16 @@ export class UmbPartialViewsTreeServerDataSource implements PartialViewsTreeData ); } - async getItems(paths: Array) { - if (!paths) { + async getItem(id: Array) { + if (!id) { const error: ProblemDetailsModel = { title: 'Paths are missing' }; return { error }; } return tryExecuteAndNotify( this.#host, - PartialViewResource.getTreePartialViewItem({ - path: paths, + PartialViewResource.getPartialViewItem({ + id, }) ); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts index 3aa3343ce3..5e3634b785 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts @@ -2,15 +2,27 @@ import { UmbTemplateRepository } from '../repository/partial-views.repository'; import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context'; import { createObservablePart, UmbDeepState } from '@umbraco-cms/backoffice/observable-api'; import { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api'; -import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; -export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext { +export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext { + getEntityId(): string | undefined { + throw new Error('Method not implemented.'); + } + getEntityType(): string { + throw new Error('Method not implemented.'); + } + save(): Promise { + throw new Error('Method not implemented.'); + } + destroy(): void { + throw new Error('Method not implemented.'); + } #data = new UmbDeepState(undefined); data = this.#data.asObservable(); name = createObservablePart(this.#data, (data) => data?.name); content = createObservablePart(this.#data, (data) => data?.content); - constructor(host: UmbControllerHostInterface) { + constructor(host: UmbControllerHostElement) { super(host, new UmbTemplateRepository(host)); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/manifests.ts index 74a59dc455..d981f5f1e9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/manifests.ts @@ -1,4 +1,3 @@ -import { TEMPLATE_REPOSITORY_ALIAS } from '../repository/manifests'; import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace'; import type { ManifestWorkspace, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts index c45a694269..84e412696c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts @@ -1,7 +1,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { UmbRouterSlotInitEvent, IRoute, IRoutingInfo } from '@umbraco-cms/internal/router'; +import { UmbRouterSlotInitEvent } from '@umbraco-cms/internal/router'; +import type { IRoute, IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router'; + import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import './template-workspace-edit.element'; @@ -23,7 +25,7 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement { { path: 'create/:parentKey', component: () => this.#element, - setup: async (component: HTMLElement, info: IRoutingInfo) => { + setup: (component: PageComponent, info: IRoutingInfo) => { const parentKey = info.match.params.parentKey; this.#templateWorkspaceContext.createScaffold(parentKey); }, @@ -31,7 +33,7 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement { { path: 'edit/:key', component: () => this.#element, - setup: (component: HTMLElement, info: IRoutingInfo) => { + setup: (component: PageComponent, info: IRoutingInfo): void => { const key = info.match.params.key; this.#templateWorkspaceContext.load(key); }, From fd9d1f9bc9e20d8ca2824c0f43e15b465a295ac8 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Mon, 24 Apr 2023 09:12:33 +0200 Subject: [PATCH 26/71] move styles to the end of the file --- .../templating-insert-menu.element.ts | 74 ++++++------ .../insert-choose-type-sidebar.element.ts | 52 ++++---- .../modals/insert-value-sidebar.element.ts | 62 +++++----- .../partial-view-picker-modal.element.ts | 50 ++++---- .../partial-views-workspace-edit.element.ts | 52 ++++---- .../partial-views-workspace.element.ts | 11 +- .../template-workspace-edit.element.ts | 112 +++++++++--------- .../workspace/template-workspace.element.ts | 11 +- 8 files changed, 207 insertions(+), 217 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index f9891df58f..d92762935a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -27,43 +27,6 @@ export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModa @customElement('umb-templating-insert-menu') export class UmbTemplatingInsertMenuElement extends UmbLitElement { - static styles = [ - UUITextStyles, - css` - #insert-menu { - margin: 0; - padding: 0; - margin-top: var(--uui-size-space-3); - background-color: var(--uui-color-surface); - box-shadow: var(--uui-shadow-depth-3); - min-width: 150px; - } - - #insert-menu > li, - ul { - padding: 0; - width: 100%; - list-style: none; - } - - ul { - transform: translateX(-100px); - } - - .insert-menu-item { - width: 100%; - } - - umb-button-with-dropdown { - --umb-button-with-dropdown-symbol-expand-margin-left: 0; - } - - uui-icon[name='umb:add'] { - margin-right: var(--uui-size-4); - } - `, - ]; - @property() value = ''; @@ -154,6 +117,43 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { `; } + + static styles = [ + UUITextStyles, + css` + #insert-menu { + margin: 0; + padding: 0; + margin-top: var(--uui-size-space-3); + background-color: var(--uui-color-surface); + box-shadow: var(--uui-shadow-depth-3); + min-width: 150px; + } + + #insert-menu > li, + ul { + padding: 0; + width: 100%; + list-style: none; + } + + ul { + transform: translateX(-100px); + } + + .insert-menu-item { + width: 100%; + } + + umb-button-with-dropdown { + --umb-button-with-dropdown-symbol-expand-margin-left: 0; + } + + uui-icon[name='umb:add'] { + margin-right: var(--uui-size-4); + } + `, + ]; } declare global { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index 06e18cde9b..961a7f4398 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -41,32 +41,6 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement ChooseInsertTypeModalData, ChooseInsertTypeModalResult > { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - color: var(--uui-color-text); - } - - #main { - box-sizing: border-box; - padding: var(--uui-size-space-5); - height: calc(100vh - 124px); - } - - #main uui-button:not(:last-of-type) { - display: block; - margin-bottom: var(--uui-size-space-5); - } - - h3, - p { - text-align: left; - } - `, - ]; - private _close() { this.modalHandler?.reject(); } @@ -150,6 +124,32 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button:not(:last-of-type) { + display: block; + margin-bottom: var(--uui-size-space-5); + } + + h3, + p { + text-align: left; + } + `, + ]; } declare global { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts index c60737763b..cbed735108 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts @@ -7,36 +7,6 @@ import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; @customElement('umb-insert-value-sidebar') export default class UmbInsertValueSidebarElement extends UmbModalBaseElement { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - color: var(--uui-color-text); - } - - #main { - box-sizing: border-box; - padding: var(--uui-size-space-5); - height: calc(100vh - 124px); - } - - #main uui-button { - width: 100%; - } - - h3, - p { - text-align: left; - } - - uui-combobox, - uui-input { - width: 100%; - } - `, - ]; - private _close() { this.modalHandler?.submit(); } @@ -74,8 +44,6 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement @@ -125,6 +93,36 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button { + width: 100%; + } + + h3, + p { + text-align: left; + } + + uui-combobox, + uui-input { + width: 100%; + } + `, + ]; } declare global { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts index add874a6b4..353442936c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts @@ -10,31 +10,6 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen UmbPartialViewPickerModalData, UmbPartialViewPickerModalResult > { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - color: var(--uui-color-text); - } - - #main { - box-sizing: border-box; - padding: var(--uui-size-space-5); - height: calc(100vh - 124px); - } - - #main uui-button { - width: 100%; - } - - h3, - p { - text-align: left; - } - `, - ]; - @state() _selection: Array = []; @@ -80,6 +55,31 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button { + width: 100%; + } + + h3, + p { + text-align: left; + } + `, + ]; } declare global { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts index db3079d057..2b22856bcb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts @@ -8,31 +8,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @customElement('umb-partial-views-workspace-edit') export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - width: 100%; - height: 100%; - } - - umb-code-editor { - --editor-height: calc(100vh - 300px); - } - - uui-box { - margin: 1em; - --uui-box-default-padding: 0; - } - - uui-input { - width: 100%; - margin: 1em; - } - `, - ]; - @state() private _name?: string | null = ''; @@ -59,7 +34,7 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement { }); this.observe(this.#partialViewsWorkspaceContext.isNew, (isNew) => { - this.#isNew = isNew; + this.#isNew = !!isNew; console.log(this.#isNew); }); }); @@ -103,6 +78,31 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement { `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + width: 100%; + height: 100%; + } + + umb-code-editor { + --editor-height: calc(100vh - 300px); + } + + uui-box { + margin: 1em; + --uui-box-default-padding: 0; + } + + uui-input { + width: 100%; + margin: 1em; + } + `, + ]; } export default UmbPartialViewsWorkspaceEditElement; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts index bff129aac8..2ba6b08e7a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts @@ -2,15 +2,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { UmbPartialViewsWorkspaceContext } from './partial-views-workspace.context'; -import { UmbRouterSlotInitEvent, IRoute, IRoutingInfo } from '@umbraco-cms/internal/router'; +import { UmbRouterSlotInitEvent } from '@umbraco-cms/internal/router'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import './partial-views-workspace-edit.element'; +import { IRoute, IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router'; @customElement('umb-partial-views-workspace') export class UmbPartialViewsWorkspaceElement extends UmbLitElement { - static styles = [UUITextStyles, css``]; - #partialViewsWorkspaceContext = new UmbPartialViewsWorkspaceContext(this); #routerPath? = ''; @@ -23,7 +22,7 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement { { path: 'create/:parentKey', component: () => this.#element, - setup: async (component: HTMLElement, info: IRoutingInfo) => { + setup: async (component: PageComponent, info: IRoutingInfo) => { const parentKey = info.match.params.parentKey; this.#partialViewsWorkspaceContext.createScaffold(parentKey); }, @@ -31,7 +30,7 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement { { path: 'edit/:key', component: () => this.#element, - setup: (component: HTMLElement, info: IRoutingInfo) => { + setup: (component: PageComponent, info: IRoutingInfo) => { const key = info.match.params.key; this.#partialViewsWorkspaceContext.load(key); }, @@ -45,6 +44,8 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement { this.#routerPath = event.target.absoluteRouterPath; }}>`; } + + static styles = [UUITextStyles, css``]; } export default UmbPartialViewsWorkspaceElement; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index 5a00ac95f7..31f2306199 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -3,67 +3,12 @@ import { css, html } from 'lit'; import { customElement, query, state } from 'lit/decorators.js'; import { UUIInputElement } from '@umbraco-ui/uui'; import { UmbCodeEditorElement } from '../../../shared/components/code-editor/code-editor.element'; +import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element'; import { UmbTemplateWorkspaceContext } from './template-workspace.context'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element'; @customElement('umb-template-workspace-edit') export class UmbTemplateWorkspaceEditElement extends UmbLitElement { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - width: 100%; - height: 100%; - } - - umb-code-editor { - --editor-height: calc(100vh - 300px); - } - - uui-box { - margin: 1em; - --uui-box-default-padding: 0; - } - - uui-input { - width: 100%; - margin: 1em; - } - - #code-editor-menu-container uui-icon { - margin-right: var(--uui-size-space-3); - } - - #insert-menu { - margin: 0; - padding: 0; - margin-top: var(--uui-size-space-3); - background-color: var(--uui-color-surface); - box-shadow: var(--uui-shadow-depth-3); - min-width: calc(100% + var(--uui-size-8, 24px)); - } - - #insert-menu > li, - ul { - padding: 0; - width: 100%; - list-style: none; - } - - .insert-menu-item { - width: 100%; - } - - #code-editor-menu-container { - display: flex; - justify-content: flex-end; - gap: var(--uui-size-space-3); - } - `, - ]; - @state() private _name?: string | null = ''; @@ -144,6 +89,61 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + width: 100%; + height: 100%; + } + + umb-code-editor { + --editor-height: calc(100vh - 300px); + } + + uui-box { + margin: 1em; + --uui-box-default-padding: 0; + } + + uui-input { + width: 100%; + margin: 1em; + } + + #code-editor-menu-container uui-icon { + margin-right: var(--uui-size-space-3); + } + + #insert-menu { + margin: 0; + padding: 0; + margin-top: var(--uui-size-space-3); + background-color: var(--uui-color-surface); + box-shadow: var(--uui-shadow-depth-3); + min-width: calc(100% + var(--uui-size-8, 24px)); + } + + #insert-menu > li, + ul { + padding: 0; + width: 100%; + list-style: none; + } + + .insert-menu-item { + width: 100%; + } + + #code-editor-menu-container { + display: flex; + justify-content: flex-end; + gap: var(--uui-size-space-3); + } + `, + ]; } export default UmbTemplateWorkspaceEditElement; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts index b595fcb077..0d44e8c0a4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts @@ -11,25 +11,16 @@ import { UmbTemplateWorkspaceContext } from './template-workspace.context'; @customElement('umb-template-workspace') export class UmbTemplateWorkspaceElement extends UmbLitElement { - public load(entityId: string) { this.#templateWorkspaceContext.load(entityId); } - public create(parentId: string | null) { - this.#isNew = true; - this.#templateWorkspaceContext.createScaffold(parentId); - } - @state() private _name?: string | null = ''; @state() private _content?: string | null = ''; - @query('umb-code-editor') - private _codeEditor?: UmbCodeEditorElement; - #templateWorkspaceContext = new UmbTemplateWorkspaceContext(this); #routerPath? = ''; @@ -64,7 +55,7 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement { this.#routerPath = event.target.absoluteRouterPath; }}>`; } - + static styles = [ UUITextStyles, css` From b71f2502a1443fdc45dc277e281d2273c507d264 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 25 Apr 2023 11:41:58 +0200 Subject: [PATCH 27/71] implement dictionary item picker --- .../dictionary-item-picker-modal.token.ts | 3 +- .../document-picker-modal.element.ts | 4 +- .../templating-insert-menu.element.ts | 49 ++++++++++++++++-- .../insert-choose-type-sidebar.element.ts | 6 +-- .../dictionary-item-picker-modal.element.ts | 51 ++++++++++--------- 5 files changed, 77 insertions(+), 36 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts index c4a6082183..c1f8d7527e 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts @@ -1,3 +1,4 @@ +import { DictionaryItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbDictionaryItemPickerModalData { @@ -6,7 +7,7 @@ export interface UmbDictionaryItemPickerModalData { } export interface UmbDictionaryItemPickerModalResult { - selection: string[] | undefined; + selection: string[]; } export const UMB_DICTIONARY_ITEM_PICKER_MODAL_ALIAS = 'Umb.Modal.DictionaryItemPicker'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts index a228328e63..6be6cb96b8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts @@ -11,8 +11,6 @@ export class UmbDocumentPickerModalElement extends UmbModalBaseElement< UmbDocumentPickerModalData, UmbDocumentPickerModalResult > { - - @state() _selection: Array = []; @@ -59,7 +57,7 @@ export class UmbDocumentPickerModalElement extends UmbModalBaseElement< `; } - + static styles = [ UUITextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index d92762935a..e11af22d8f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -4,6 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js'; import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../../modals/manifests'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { + UMB_DICTIONARY_ITEM_PICKER_MODAL, UMB_MODAL_CONTEXT_TOKEN, UMB_PARTIAL_VIEW_PICKER_MODAL, UmbModalContext, @@ -15,7 +16,8 @@ import { CodeSnippetType, UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL, } from '../../modals/insert-choose-type-sidebar.element'; -import { getInsertPartialSnippet } from '../../utils'; +import { getInsertDictionarySnippet, getInsertPartialSnippet } from '../../utils'; +import { UmbDictionaryRepository } from '../../../translation/dictionary/repository/dictionary.repository'; export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, @@ -34,6 +36,8 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { #openModal?: UmbModalHandler; + #dictionaryRepository = new UmbDictionaryRepository(this); + constructor() { super(); this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { @@ -41,13 +45,37 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { }); } + async determineInsertValue(modalResult: ChooseInsertTypeModalResult) { + const { type, value } = modalResult; + debugger; + + const snipperOutputMap = { + [CodeSnippetType.partialView]: async (value: any) => + (this.value = getInsertPartialSnippet(value.selection?.[0]) ?? ''), + [CodeSnippetType.umbracoField]: async () => (this.value = value), + [CodeSnippetType.dictionaryItem]: async (value: any) => { + const { data, error } = await this.#dictionaryRepository.requestById(value.selection?.[0]); + this.value = getInsertDictionarySnippet(data?.name ?? ''); + }, + [CodeSnippetType.macro]: async () => (value: any) => + (this.value = getInsertPartialSnippet(value.selection?.[0]) ?? ''), + }; + + try { + await snipperOutputMap[type](value); + this.#dispatchInsertEvent(); + } catch (e) { + console.error(e); + } + } + #openChooseTypeModal = () => { this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, { hidePartialView: this.hidePartialView, }); this.#openModal?.onSubmit().then((closedModal: ChooseInsertTypeModalResult) => { - this.value = closedModal.value; - this.#dispatchInsertEvent(); + this.determineInsertValue(closedModal); + // this.#dispatchInsertEvent(); }); }; @@ -67,6 +95,14 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { }); } + #openInsertDictionaryItemModal() { + this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL); + this.#openModal?.onSubmit().then((value) => { + this.value = getInsertPartialSnippet(value.selection?.[0]) ?? ''; + this.#dispatchInsertEvent(); + }); + } + #dispatchInsertEvent() { this.dispatchEvent(new CustomEvent('insert', { bubbles: true, cancelable: true, composed: false })); } @@ -107,7 +143,12 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { `}
  • - + +
  • diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index 961a7f4398..d824cec51d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -69,15 +69,15 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement if (partialViewPickerModalResult) this.modalHandler?.submit({ type: CodeSnippetType.partialView, - value: getInsertPartialSnippet(partialViewPickerModalResult.selection[0]), + value: partialViewPickerModalResult.selection[0], }); }); } #openInsertDictionaryItemModal() { this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL); - this.#openModal?.onSubmit().then((chosenValue) => { - if (chosenValue) this.modalHandler?.submit({ value: chosenValue, type: CodeSnippetType.umbracoField }); + this.#openModal?.onSubmit().then((dictionaryItemPickerModalResult) => { + if (dictionaryItemPickerModalResult) this.modalHandler?.submit({ value: dictionaryItemPickerModalResult, type: CodeSnippetType.dictionaryItem }); }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts index 1e37d48959..e5d5062cad 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts @@ -4,37 +4,13 @@ import { customElement, state } from 'lit/decorators.js'; import { UmbTreeElement } from '../../../shared/components/tree/tree.element'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UmbDictionaryItemPickerModalData, UmbDictionaryItemPickerModalResult } from '@umbraco-cms/backoffice/modal'; +import { DictionaryItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @customElement('umb-dictionary-item-picker-modal') export default class UmbDictionaryItemPickerModalElement extends UmbModalBaseElement< UmbDictionaryItemPickerModalData, UmbDictionaryItemPickerModalResult > { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - color: var(--uui-color-text); - } - - #main { - box-sizing: border-box; - padding: var(--uui-size-space-5); - height: calc(100vh - 124px); - } - - #main uui-button { - width: 100%; - } - - h3, - p { - text-align: left; - } - `, - ]; - @state() _selection: Array = []; @@ -80,6 +56,31 @@ export default class UmbDictionaryItemPickerModalElement extends UmbModalBaseEle `; } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button { + width: 100%; + } + + h3, + p { + text-align: left; + } + `, + ]; } declare global { From c9ce86915f0917872062f5ffb36e962d24d29be6 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 25 Apr 2023 12:58:07 +0200 Subject: [PATCH 28/71] refactor to switch case --- .../templating-insert-menu.element.ts | 64 ++++++++++++------- .../insert-choose-type-sidebar.element.ts | 4 +- 2 files changed, 43 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index e11af22d8f..fcbec8d6f7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -7,9 +7,11 @@ import { UMB_DICTIONARY_ITEM_PICKER_MODAL, UMB_MODAL_CONTEXT_TOKEN, UMB_PARTIAL_VIEW_PICKER_MODAL, + UmbDictionaryItemPickerModalResult, UmbModalContext, UmbModalHandler, UmbModalToken, + UmbPartialViewPickerModalResult, } from '@umbraco-cms/backoffice/modal'; import { ChooseInsertTypeModalResult, @@ -27,6 +29,8 @@ export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModa } ); +type snippetHandler = (value: T) => Promise; + @customElement('umb-templating-insert-menu') export class UmbTemplatingInsertMenuElement extends UmbLitElement { @property() @@ -45,37 +49,49 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { }); } + //((value: string)=> Promise) |( (modalResult: UmbDictionaryItemPickerModalResult)=> Promise) + async determineInsertValue(modalResult: ChooseInsertTypeModalResult) { const { type, value } = modalResult; - debugger; - const snipperOutputMap = { - [CodeSnippetType.partialView]: async (value: any) => - (this.value = getInsertPartialSnippet(value.selection?.[0]) ?? ''), - [CodeSnippetType.umbracoField]: async () => (this.value = value), - [CodeSnippetType.dictionaryItem]: async (value: any) => { - const { data, error } = await this.#dictionaryRepository.requestById(value.selection?.[0]); - this.value = getInsertDictionarySnippet(data?.name ?? ''); - }, - [CodeSnippetType.macro]: async () => (value: any) => - (this.value = getInsertPartialSnippet(value.selection?.[0]) ?? ''), - }; - - try { - await snipperOutputMap[type](value); - this.#dispatchInsertEvent(); - } catch (e) { - console.error(e); + switch (type) { + case CodeSnippetType.umbracoField: { + this.#getUmbracoFieldValueSnippet(value as string); + break; + } + case CodeSnippetType.partialView: { + this.#getPartialViewSnippet(value as UmbPartialViewPickerModalResult); + break; + } + case CodeSnippetType.dictionaryItem: { + this.#getDictionaryItemSnippet(value as UmbDictionaryItemPickerModalResult); + break; + } + case CodeSnippetType.macro: { + throw new Error('Not implemented'); + } } } + #getDictionaryItemSnippet = async (modalResult: UmbDictionaryItemPickerModalResult) => { + const { data, error } = await this.#dictionaryRepository.requestById(modalResult.selection[0]); + this.value = getInsertDictionarySnippet(data?.name ?? ''); + }; + + #getUmbracoFieldValueSnippet = async (value: string) => { + this.value = value; + }; + + #getPartialViewSnippet = async (modalResult: UmbPartialViewPickerModalResult) => { + this.value = getInsertPartialSnippet(modalResult.selection?.[0] ?? ''); + }; + #openChooseTypeModal = () => { this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, { hidePartialView: this.hidePartialView, }); this.#openModal?.onSubmit().then((closedModal: ChooseInsertTypeModalResult) => { this.determineInsertValue(closedModal); - // this.#dispatchInsertEvent(); }); }; @@ -90,16 +106,18 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { #openInsertPartialViewSidebar() { this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); this.#openModal?.onSubmit().then((value) => { - this.value = getInsertPartialSnippet(value.selection?.[0]) ?? ''; - this.#dispatchInsertEvent(); + this.#getPartialViewSnippet(value).then(() => { + this.#dispatchInsertEvent(); + }); }); } #openInsertDictionaryItemModal() { this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL); this.#openModal?.onSubmit().then((value) => { - this.value = getInsertPartialSnippet(value.selection?.[0]) ?? ''; - this.#dispatchInsertEvent(); + this.#getDictionaryItemSnippet(value).then(() => { + this.#dispatchInsertEvent(); + }); }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index d824cec51d..282502a246 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -10,8 +10,8 @@ import { UMB_PARTIAL_VIEW_PICKER_MODAL, UmbModalHandler, UMB_DICTIONARY_ITEM_PICKER_MODAL, + UmbDictionaryItemPickerModalResult, } from '@umbraco-cms/backoffice/modal'; -import { getInsertPartialSnippet } from '../utils'; export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken( UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, @@ -32,7 +32,7 @@ export enum CodeSnippetType { macro = 'macro', } export interface ChooseInsertTypeModalResult { - value: string; + value: string | UmbDictionaryItemPickerModalResult; type: CodeSnippetType; } From c82b04582ffec9175758a7f0fa045996d8633a70 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Mon, 1 May 2023 10:14:47 +0200 Subject: [PATCH 29/71] create insert section modal --- .../dictionary-item-picker-modal.token.ts | 1 - .../templating-insert-menu.element.ts | 24 ++-- .../modals/insert-section-modal.element.ts | 125 ++++++++++++++++++ .../dictionary-item-picker-modal.element.ts | 1 - 4 files changed, 135 insertions(+), 16 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal.element.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts index c1f8d7527e..b67a0320ae 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts @@ -1,4 +1,3 @@ -import { DictionaryItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbDictionaryItemPickerModalData { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index fcbec8d6f7..73b4726807 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -1,8 +1,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import { customElement, property } from 'lit/decorators.js'; import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../../modals/manifests'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UmbDictionaryRepository } from '../../../translation/dictionary/repository/dictionary.repository'; +import { getInsertDictionarySnippet, getInsertPartialSnippet } from '../../utils'; +import { + ChooseInsertTypeModalResult, + CodeSnippetType, + UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL, +} from '../../modals/insert-choose-type-sidebar.element'; import { UMB_DICTIONARY_ITEM_PICKER_MODAL, UMB_MODAL_CONTEXT_TOKEN, @@ -13,13 +19,7 @@ import { UmbModalToken, UmbPartialViewPickerModalResult, } from '@umbraco-cms/backoffice/modal'; -import { - ChooseInsertTypeModalResult, - CodeSnippetType, - UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL, -} from '../../modals/insert-choose-type-sidebar.element'; -import { getInsertDictionarySnippet, getInsertPartialSnippet } from '../../utils'; -import { UmbDictionaryRepository } from '../../../translation/dictionary/repository/dictionary.repository'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, @@ -29,8 +29,6 @@ export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModa } ); -type snippetHandler = (value: T) => Promise; - @customElement('umb-templating-insert-menu') export class UmbTemplatingInsertMenuElement extends UmbLitElement { @property() @@ -49,8 +47,6 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { }); } - //((value: string)=> Promise) |( (modalResult: UmbDictionaryItemPickerModalResult)=> Promise) - async determineInsertValue(modalResult: ChooseInsertTypeModalResult) { const { type, value } = modalResult; @@ -74,7 +70,7 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { } #getDictionaryItemSnippet = async (modalResult: UmbDictionaryItemPickerModalResult) => { - const { data, error } = await this.#dictionaryRepository.requestById(modalResult.selection[0]); + const { data } = await this.#dictionaryRepository.requestById(modalResult.selection[0]); this.value = getInsertDictionarySnippet(data?.name ?? ''); }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal.element.ts new file mode 100644 index 0000000000..ed33525775 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal.element.ts @@ -0,0 +1,125 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS } from './manifests'; +import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; +import { + UMB_MODAL_CONTEXT_TOKEN, + UmbModalContext, + UmbModalToken, + UMB_PARTIAL_VIEW_PICKER_MODAL, + UmbModalHandler, + UMB_DICTIONARY_ITEM_PICKER_MODAL, + UmbDictionaryItemPickerModalResult, +} from '@umbraco-cms/backoffice/modal'; + +export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken( + UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); + +export interface InsertSectionModalModalResult { + value?: string; +} + +@customElement('umb-templating-insert-section-modal') +export default class UmbTemplatingInsertSectionModalElement extends UmbModalBaseElement< + object, + InsertSectionModalModalResult +> { + #addSection() { + this.modalHandler?.submit({ value: 'test' }); + } + + #close() { + this.modalHandler?.reject(); + } + + render() { + return html` + +
    + +

    Render child template

    +

    + Renders the contents of a child template, by inserting a @RenderBody() placeholder. +

    +

    Render a named section

    +

    + Renders a named area of a child template, by inserting a @RenderSection(name) placeholder. + This renders an area of a child template which is wrapped in a corresponding + @section [name]{ ... } definition. +

    + +

    + + Section name + + + + Section is mandatory + If mandatory, the child template must contain a @section definition, otherwise an error + is shown. +

    + +

    Define a named section

    +

    + Defines a part of your template as a named section by wrapping it in @section { ... }. This + can be rendered in a specific area of the parent of this template, by using @RenderSection. +

    + + Section name + + +     +     +
    +
    + Close +
    +     + `; + } + + static styles = [ + UUITextStyles, + css` + :host { + display: block; + color: var(--uui-color-text); + } + + #main { + box-sizing: border-box; + padding: var(--uui-size-space-5); + height: calc(100vh - 124px); + } + + #main uui-button:not(:last-of-type) { + display: block; + margin-bottom: var(--uui-size-space-5); + } + + h3, + p { + text-align: left; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-templating-insert-section-modal': UmbTemplatingInsertSectionModalElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts index e5d5062cad..2a188c9fb8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts @@ -4,7 +4,6 @@ import { customElement, state } from 'lit/decorators.js'; import { UmbTreeElement } from '../../../shared/components/tree/tree.element'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UmbDictionaryItemPickerModalData, UmbDictionaryItemPickerModalResult } from '@umbraco-cms/backoffice/modal'; -import { DictionaryItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @customElement('umb-dictionary-item-picker-modal') export default class UmbDictionaryItemPickerModalElement extends UmbModalBaseElement< From 10c495ad4c0170d6574a67177e0c338616cea270 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Mon, 1 May 2023 10:22:12 +0200 Subject: [PATCH 30/71] fix routing type error --- .../templates/workspace/template-workspace.element.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts index 502047c2d0..7d9c92da09 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts @@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { UmbRouterSlotInitEvent } from '@umbraco-cms/internal/router'; -import type { IRoute, IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router'; +import type { IRoutingInfo, PageComponent, UmbRoute } from '@umbraco-cms/backoffice/router'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -11,8 +11,6 @@ import { UmbTemplateWorkspaceContext } from './template-workspace.context'; @customElement('umb-template-workspace') export class UmbTemplateWorkspaceElement extends UmbLitElement { - - public load(entityId: string) { this.#templateWorkspaceContext.load(entityId); } @@ -31,7 +29,7 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement { #key = ''; @state() - _routes: IRoute[] = [ + _routes: UmbRoute[] = [ { path: 'create/:parentKey', component: () => this.#element, From a874ffeec1fd3031a9c97590be99bd770c382e29 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 2 May 2023 12:20:21 +0200 Subject: [PATCH 31/71] add section input --- .../insert-section-input.element.ts | 59 ++++++++++++++++ .../insert-section-modal.element.ts | 67 ++++++++----------- .../backoffice/templating/modals/manifests.ts | 7 ++ 3 files changed, 93 insertions(+), 40 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts rename src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/{ => insert-section-modal}/insert-section-modal.element.ts (58%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts new file mode 100644 index 0000000000..c06f47bd8e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts @@ -0,0 +1,59 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { UUIBooleanInputElement } from '@umbraco-ui/uui'; + +@customElement('umb-insert-section-checkbox') +export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { + renderCheckbox() { + return html` +

    ${this.label}

    +

    here goes some description

     + ${this.checked ? html`` : ''} + `; + } + + static styles = [ + ...UUIBooleanInputElement.styles, + UUITextStyles, + css` + :host { + display: block; + border-style: dashed; + background-color: transparent; + color: var(--uui-color-default-standalone, rgb(28, 35, 59)); + border-color: var(--uui-color-border-standalone, #c2c2c2); + border-radius: var(--uui-border-radius, 3px); + border-width: 1px; + line-height: normal; + } + + :host(:hover) { + background-color: var(--uui-button-background-color-hover, transparent); + color: var(--uui-color-default-emphasis, #3544b1); + border-color: var(--uui-color-default-emphasis, #3544b1); + } + + label { + padding: 6px 18px; + display: block; + } + + ::slotted(*) { + line-height: normal; + } + + .label { + display: none; + } + `, + ]; +} + +export default UmbInsertSectionCheckboxElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-insert-section-input': UmbInsertSectionCheckboxElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts similarity index 58% rename from src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts index ed33525775..aad5a961d1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts @@ -1,20 +1,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS } from './manifests'; +import { UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS } from '../manifests'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; -import { - UMB_MODAL_CONTEXT_TOKEN, - UmbModalContext, - UmbModalToken, - UMB_PARTIAL_VIEW_PICKER_MODAL, - UmbModalHandler, - UMB_DICTIONARY_ITEM_PICKER_MODAL, - UmbDictionaryItemPickerModalResult, -} from '@umbraco-cms/backoffice/modal'; +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; -export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken( - UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, +import './insert-section-input.element'; + +export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken( + UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS, { type: 'sidebar', size: 'small', @@ -30,7 +24,7 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase object, InsertSectionModalModalResult > { - #addSection() { + #chooseSection() { this.modalHandler?.submit({ value: 'test' }); } @@ -40,54 +34,48 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase render() { return html` - +
    -

    Render child template

    -

    - Renders the contents of a child template, by inserting a @RenderBody() placeholder. -

    -

    Render a named section

    + +

    Renders the contents of a child template, by inserting a @RenderBody() placeholder.

    +     + +

    Renders a named area of a child template, by inserting a @RenderSection(name) placeholder. This renders an area of a child template which is wrapped in a corresponding @section [name]{ ... } definition.

    - -

    - - Section name - - - - Section is mandatory + + Section name + + +

    + Section is mandatory
    If mandatory, the child template must contain a @section definition, otherwise an error is shown. -

    +

    + -

    Define a named section

    +

    Defines a part of your template as a named section by wrapping it in @section { ... }. This can be rendered in a specific area of the parent of this template, by using @RenderSection.

    - + Section name - -     + +
    Close
    -     + `; } @@ -105,8 +93,7 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase height: calc(100vh - 124px); } - #main uui-button:not(:last-of-type) { - display: block; + #main umb-insert-section-checkbox:not(:last-of-type) { margin-bottom: var(--uui-size-space-5); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts index 8b40374be6..c0057d8dc6 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts @@ -3,6 +3,7 @@ import { UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS } from '@umbraco-cms/backoffice/mod export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.ChooseType.Sidebar'; export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.Value.Sidebar'; +export const UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.Section.Sidebar'; const modals: Array = [ { @@ -23,6 +24,12 @@ const modals: Array = [ name: 'Partial View Picker Modal', loader: () => import('../../templating/modals/partial-view-picker-modal.element'), }, + { + type: 'modal', + alias: UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS, + name: 'Partial View Picker Modal', + loader: () => import('./insert-section-modal/insert-section-modal.element'), + }, ]; export const manifests = [...modals]; From 2c7617dbfaf9ec243c3150854c6649e84dcc458e Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 2 May 2023 12:20:35 +0200 Subject: [PATCH 32/71] use body layout --- .../insert-choose-type-sidebar.element.ts | 4 +-- .../modals/insert-value-sidebar.element.ts | 4 +-- .../partial-view-picker-modal.element.ts | 4 +-- .../partial-views-workspace-edit.element.ts | 4 +-- .../template-workspace-edit.element.ts | 27 +++++++++++++++++-- .../dictionary-item-picker-modal.element.ts | 4 +-- 6 files changed, 35 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index 282502a246..e2bea884cb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -83,7 +83,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement render() { return html` - +
    Close
    -     + `; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts index cbed735108..20310f0088 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts @@ -46,7 +46,7 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement +
    @@ -90,7 +90,7 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElementClose Submit
    - +     `; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts index 353442936c..8ab315a292 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts @@ -39,7 +39,7 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen render() { return html` - +
    Close
    -     + `; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts index 2b22856bcb..8fd6460679 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts @@ -63,7 +63,7 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement { render() { // TODO: add correct UI elements - return html` + return html` - `; + `; } static styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index 31f2306199..9ccad083fe 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -6,6 +6,8 @@ import { UmbCodeEditorElement } from '../../../shared/components/code-editor/cod import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element'; import { UmbTemplateWorkspaceContext } from './template-workspace.context'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '@umbraco-cms/backoffice/modal'; +import { UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL } from '../../modals/insert-section-modal/insert-section-modal.element'; @customElement('umb-template-workspace-edit') export class UmbTemplateWorkspaceEditElement extends UmbLitElement { @@ -24,6 +26,10 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { constructor() { super(); + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; + }); + this.consumeContext('UmbEntityWorkspaceContext', (workspaceContext: UmbTemplateWorkspaceContext) => { this.#templateWorkspaceContext = workspaceContext; this.observe(this.#templateWorkspaceContext.name, (name) => { @@ -61,9 +67,18 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { this._codeEditor?.insert(value); } + private _modalContext?: UmbModalContext; + + #openInsertSectionModal() { + const sectionModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL); + sectionModal?.onSubmit().then((insertSectionModalResult) => { + console.log(insertSectionModalResult); + }); + } + render() { // TODO: add correct UI elements - return html` + return html`
    @@ -79,6 +94,14 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { Query builder + + + Sections +
    -     `; + `; } static styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts index 2a188c9fb8..b67a227edd 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts @@ -39,7 +39,7 @@ export default class UmbDictionaryItemPickerModalElement extends UmbModalBaseEle render() { return html` - +
    Close
    -     + `; } From b4430d3f20b692362f871c5e635b5b0a1f6d78c4 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 2 May 2023 12:41:06 +0200 Subject: [PATCH 33/71] allow only one selection --- .../insert-section-input.element.ts | 11 +++++++- .../insert-section-modal.element.ts | 26 ++++++++++++++++--- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts index c06f47bd8e..fdb3b3da97 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts @@ -7,7 +7,7 @@ import { UUIBooleanInputElement } from '@umbraco-ui/uui'; export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { renderCheckbox() { return html` -

    ${this.label}

    +

    ${this.checked ? html`` : ''}${this.label}

    here goes some description

     ${this.checked ? html`` : ''} `; @@ -39,6 +39,15 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { display: block; } + uui-icon { + background-color: var(--uui-color-positive-emphasis); + border-radius: 50%; + padding: 0.2em; + margin-right: 1ch; + color: var(--uui-color-positive-contrast); + font-size: 0.7em; + } + ::slotted(*) { line-height: normal; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts index aad5a961d1..610cb16add 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts @@ -1,11 +1,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import { customElement, queryAll } from 'lit/decorators.js'; import { UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS } from '../manifests'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; import './insert-section-input.element'; +import UmbInsertSectionCheckboxElement from './insert-section-input.element'; export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken( UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS, @@ -24,8 +25,21 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase object, InsertSectionModalModalResult > { - #chooseSection() { - this.modalHandler?.submit({ value: 'test' }); + + @queryAll('umb-insert-section-checkbox') + checkboxes!: NodeListOf; + + #chooseSection(event: Event) { + const target = event.target as UmbInsertSectionCheckboxElement; + const checkboxes = Array.from(this.checkboxes); + if (target.checked) { + checkboxes.forEach((checkbox) => { + if (checkbox !== target) { + checkbox.checked = false; + } + }); + } + //this.modalHandler?.submit({ value: 'test' }); } #close() { @@ -36,7 +50,7 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase return html`
    - +

    Renders the contents of a child template, by inserting a @RenderBody() placeholder.

     @@ -101,6 +115,10 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase p { text-align: left; } + + uui-input { + width: 100%; + } `, ]; } From 4dbce297b5ff79e77b4c4b4be61c52bce6dfb948 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 2 May 2023 15:42:29 +0200 Subject: [PATCH 34/71] add checkbox validation --- .../insert-section-input.element.ts | 88 ++++++++++++++++--- .../insert-section-modal.element.ts | 61 ++++++------- 2 files changed, 105 insertions(+), 44 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts index fdb3b3da97..c23197b2d1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts @@ -1,15 +1,74 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import { UUIBooleanInputElement } from '@umbraco-ui/uui'; +import { customElement, property, query } from 'lit/decorators.js'; +import { UUIBooleanInputElement, UUIInputElement } from '@umbraco-ui/uui'; @customElement('umb-insert-section-checkbox') export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { renderCheckbox() { + return html``; + } + + @property({ type: Boolean, attribute: 'show-mandatory' }) + showMandatory = false; + + @property({ type: Boolean, attribute: 'show-input' }) + showInput = false; + + @query('uui-input') + input!: UUIInputElement; + + @query('form') + form!: HTMLFormElement; + + @query('uui-checkbox') + checkbox!: HTMLFormElement; + + validate() { + this.form.requestSubmit(); + return this.form.checkValidity(); + } + + #preventDefault(event: Event) { + event.preventDefault(); + } + + get inputValue() { + return this.input.value; + } + + get isMandatory() { + return this.checkbox.checked; + } + + render() { return html` -

    ${this.checked ? html`` : ''}${this.label}

    -

    here goes some description

     - ${this.checked ? html`` : ''} + ${super.render()} +

    ${this.checked ? html`` : ''}${this.label}

    +
    +

    here goes some description

     +
    + ${this.checked && this.showInput + ? html` +
    + + Section name + ${this.showMandatory + ? html`

    + Section is mandatory
    + If mandatory, the child template must contain a @section definition, otherwise an + error is shown. +

    ` + : ''} +
    +     ` + : ''} `; } @@ -26,19 +85,17 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { border-radius: var(--uui-border-radius, 3px); border-width: 1px; line-height: normal; + padding: 6px 18px; } - :host(:hover) { + :host(:hover), + :host(:focus), + :host(:focus-within) { background-color: var(--uui-button-background-color-hover, transparent); color: var(--uui-color-default-emphasis, #3544b1); border-color: var(--uui-color-default-emphasis, #3544b1); } - label { - padding: 6px 18px; - display: block; - } - uui-icon { background-color: var(--uui-color-positive-emphasis); border-radius: 50%; @@ -55,6 +112,15 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { .label { display: none; } + + h3, + p { + text-align: left; + } + + uui-input { + width: 100%; + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts index 610cb16add..ad2d058f19 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts @@ -1,6 +1,6 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; -import { customElement, queryAll } from 'lit/decorators.js'; +import { customElement, queryAll, state } from 'lit/decorators.js'; import { UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS } from '../manifests'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; @@ -25,69 +25,73 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase object, InsertSectionModalModalResult > { - @queryAll('umb-insert-section-checkbox') checkboxes!: NodeListOf; + @state() + selectedCheckbox?: UmbInsertSectionCheckboxElement | null = null; + #chooseSection(event: Event) { + event.stopPropagation(); const target = event.target as UmbInsertSectionCheckboxElement; const checkboxes = Array.from(this.checkboxes); + if (checkboxes.every((checkbox) => checkbox.checked === false)) { + this.selectedCheckbox = null; + return; + } if (target.checked) { + this.selectedCheckbox = target; checkboxes.forEach((checkbox) => { if (checkbox !== target) { checkbox.checked = false; } }); } - //this.modalHandler?.submit({ value: 'test' }); + } + + firstUpdated() { + this.selectedCheckbox = this.checkboxes[0]; } #close() { this.modalHandler?.reject(); } + #submit() { + if(this.selectedCheckbox?.validate()) + this.modalHandler?.submit({ value: (this.selectedCheckbox?.inputValue as string) ?? '' }); + } + render() { return html`
    - -

    Renders the contents of a child template, by inserting a @RenderBody() placeholder.

    + +

    + Renders the contents of a child template, by inserting a @RenderBody() placeholder. +

    - -

    + +

    Renders a named area of a child template, by inserting a @RenderSection(name) placeholder. This renders an area of a child template which is wrapped in a corresponding @section [name]{ ... } definition.

    - - Section name - - -

    - Section is mandatory
    - If mandatory, the child template must contain a @section definition, otherwise an error - is shown. -

    - -

    + +

    Defines a part of your template as a named section by wrapping it in @section { ... }. This can be rendered in a specific area of the parent of this template, by using @RenderSection.

    - - Section name - -
    Close + Submit
    `; @@ -110,15 +114,6 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase #main umb-insert-section-checkbox:not(:last-of-type) { margin-bottom: var(--uui-size-space-5); } - - h3, - p { - text-align: left; - } - - uui-input { - width: 100%; - } `, ]; } From 134e03e285e152bc6be02584e7204288fb052061 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 8 May 2023 20:49:44 +0200 Subject: [PATCH 35/71] add modal tree picker kind --- .../libs/extensions-registry/models/index.ts | 3 ++- .../libs/extensions-registry/models/modal.model.ts | 10 ++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/models/index.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/models/index.ts index def8693ca7..c0c049bb14 100644 --- a/src/Umbraco.Web.UI.Client/libs/extensions-registry/models/index.ts +++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/models/index.ts @@ -8,7 +8,7 @@ import type { ManifestHeaderApp, ManifestHeaderAppButtonKind } from './header-ap import type { ManifestHealthCheck } from './health-check.model'; import type { ManifestMenu } from './menu.model'; import type { ManifestMenuItem, ManifestMenuItemTreeKind } from './menu-item.model'; -import type { ManifestModal } from './modal.model'; +import type { ManifestModal, ManifestModalTreePickerKind } from './modal.model'; import type { ManifestPackageView } from './package-view.model'; import type { ManifestPropertyAction } from './property-action.model'; import type { ManifestPropertyEditorUI, ManifestPropertyEditorModel } from './property-editor.model'; @@ -72,6 +72,7 @@ export type ManifestTypes = | ManifestMenuItem | ManifestMenuItemTreeKind | ManifestModal + | ManifestModalTreePickerKind | ManifestPackageView | ManifestPropertyAction | ManifestPropertyEditorModel diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/models/modal.model.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/models/modal.model.ts index 2bace8be4d..105312466f 100644 --- a/src/Umbraco.Web.UI.Client/libs/extensions-registry/models/modal.model.ts +++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/models/modal.model.ts @@ -3,3 +3,13 @@ import type { ManifestElement } from '.'; export interface ManifestModal extends ManifestElement { type: 'modal'; } + +export interface ManifestModalTreePickerKind extends ManifestModal { + type: 'modal'; + kind: 'treePicker'; + meta: MetaModalTreePickerKind; +} + +export interface MetaModalTreePickerKind { + treeAlias: string; +} From 845d7b281b08c1424c06afee213d9059d50fccc5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 8 May 2023 20:50:00 +0200 Subject: [PATCH 36/71] allow kind in registerMany --- .../libs/extensions-api/registry/extension.registry.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-api/registry/extension.registry.ts b/src/Umbraco.Web.UI.Client/libs/extensions-api/registry/extension.registry.ts index 7ced4c0dbf..5a5b779069 100644 --- a/src/Umbraco.Web.UI.Client/libs/extensions-api/registry/extension.registry.ts +++ b/src/Umbraco.Web.UI.Client/libs/extensions-api/registry/extension.registry.ts @@ -70,7 +70,7 @@ export class UmbExtensionRegistry { this._extensions.next([...extensionsValues, manifest as ManifestTypes]); } - registerMany(manifests: Array): void { + registerMany(manifests: Array): void { manifests.forEach((manifest) => this.register(manifest)); } From a555f849360137ecc020f3417438da38bb8bbd0a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 8 May 2023 20:50:18 +0200 Subject: [PATCH 37/71] register kind --- .../src/backoffice/core/index.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts index 2350ed6611..da5ff50bc9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts @@ -10,14 +10,29 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal'; import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api'; import type { UmbEntrypointOnInit } from '@umbraco-cms/backoffice/extensions-api'; +import { ManifestKind, ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry'; import './notification'; -export const manifests = [ +import './components/tree-picker-modal/tree-picker-modal.element'; + +export const manifests: Array = [ ...componentManifests, ...propertyActionManifests, ...propertyEditorManifests, ...modalManifests, + // TODO: where should these live? + { + type: 'kind', + alias: 'Umb.Kind.TreePickerModal', + matchKind: 'treePicker', + matchType: 'modal', + manifest: { + type: 'modal', + kind: 'treePicker', + elementName: 'umb-tree-picker-modal', + }, + }, ]; export const onInit: UmbEntrypointOnInit = (host, extensionRegistry) => { From 04fb58410cf555b0cd4a0bd0534989cc1f844acf Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 8 May 2023 20:50:46 +0200 Subject: [PATCH 38/71] register data type modal as tree picker kind --- .../src/backoffice/settings/data-types/modal/manifests.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/manifests.ts index 838aba346b..d9d3472055 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/manifests.ts @@ -3,9 +3,12 @@ import type { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry' const modals: Array = [ { type: 'modal', + kind: 'treePicker', alias: 'Umb.Modal.DataTypePicker', name: 'Data Type Picker Modal', - loader: () => import('./data-type-picker/data-type-picker-modal.element'), + meta: { + treeAlias: 'Umb.Tree.DataTypes', + }, }, ]; From 61fd2534001f3ca68fe729b46ecd7f93b9c597a1 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 8 May 2023 20:51:56 +0200 Subject: [PATCH 39/71] add element for tree picker kind --- .../tree-picker-modal.element.ts | 70 +++++++++++++++++++ .../src/backoffice/core/index.ts | 2 - 2 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/core/components/tree-picker-modal/tree-picker-modal.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/tree-picker-modal/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/tree-picker-modal/tree-picker-modal.element.ts new file mode 100644 index 0000000000..34edfe18b1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/tree-picker-modal/tree-picker-modal.element.ts @@ -0,0 +1,70 @@ +import { css, html } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, state } from 'lit/decorators.js'; +import type { UmbTreeElement } from '../tree/tree.element'; +import { ManifestModalTreePickerKind } from '@umbraco-cms/backoffice/extensions-registry'; +import { UmbPickerModalData, UmbPickerModalResult } from '@umbraco-cms/backoffice/modal'; +import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; + +@customElement('umb-tree-picker-modal') +export class UmbTreePickerModalElement extends UmbModalBaseElement< + UmbPickerModalData, + UmbPickerModalResult, + ManifestModalTreePickerKind +> { + @state() + _selection: Array = []; + + @state() + _multiple = false; + + connectedCallback() { + super.connectedCallback(); + + this._selection = this.data?.selection ?? []; + this._multiple = this.data?.multiple ?? false; + } + + #onSelectionChange(e: CustomEvent) { + e.stopPropagation(); + const element = e.target as UmbTreeElement; + this._selection = element.selection; + } + + #submit() { + this.modalHandler?.submit({ selection: this._selection }); + } + + #close() { + this.modalHandler?.reject(); + } + + render() { + return html` + + + + +
    + + +
    +     + `; + } + + static styles = [UUITextStyles, css``]; +} + +export default UmbTreePickerModalElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-tree-picker-modal': UmbTreePickerModalElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts index da5ff50bc9..d0c5b467c9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/index.ts @@ -14,8 +14,6 @@ import { ManifestKind, ManifestTypes } from '@umbraco-cms/backoffice/extensions- import './notification'; -import './components/tree-picker-modal/tree-picker-modal.element'; - export const manifests: Array = [ ...componentManifests, ...propertyActionManifests, From 1bd96c113e8e6401f0c4a35a974f22e1bf7b116d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 8 May 2023 20:52:24 +0200 Subject: [PATCH 40/71] support manifest in modal base element --- .../src/core/modal/modal-element.element.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal-element.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/modal-element.element.ts index b9052d6d56..c1d80ac36f 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/modal-element.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/modal-element.element.ts @@ -1,15 +1,22 @@ import { property } from 'lit/decorators.js'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbModalHandler } from '@umbraco-cms/backoffice/modal'; -import type { UmbModalExtensionElement } from '@umbraco-cms/backoffice/extensions-registry'; +import type { ManifestModal, UmbModalExtensionElement } from '@umbraco-cms/backoffice/extensions-registry'; -export abstract class UmbModalBaseElement +export abstract class UmbModalBaseElement< + ModalDataType extends object = object, + ModalResultType = unknown, + ModalManifestType extends ManifestModal = ManifestModal + > extends UmbLitElement - implements UmbModalExtensionElement + implements UmbModalExtensionElement { + @property({ type: Array, attribute: false }) + public manifest?: ModalManifestType; + @property({ attribute: false }) - modalHandler?: UmbModalHandler; + public modalHandler?: UmbModalHandler; @property({ type: Object, attribute: false }) - data?: UmbModalData; + public data?: ModalDataType; } From c17f662642c8d008214de3d21520b5b636b44266 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 8 May 2023 20:52:38 +0200 Subject: [PATCH 41/71] import component --- .../src/backoffice/core/components/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts index a485d7735e..f5f9199ec3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts @@ -50,6 +50,7 @@ import './section/section.element'; import './tree/tree.element'; import './tree/entity-tree-item/entity-tree-item.element'; import './tree/tree-menu-item/tree-menu-item.element'; +import './tree-picker-modal/tree-picker-modal.element'; import './menu/menu-item-base/menu-item-base.element'; From fbcb99af6fc663cea43b69e309cca5c0a1d3d201 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 8 May 2023 20:53:05 +0200 Subject: [PATCH 42/71] assign manifest to modal element --- src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts index 6a0b00c0bb..e815c03cf4 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts @@ -109,6 +109,7 @@ export class UmbModalHandlerClass Date: Mon, 8 May 2023 21:00:44 +0200 Subject: [PATCH 43/71] use tree picker for document picker --- .../document-picker-modal.element.ts | 103 ------------------ .../document-picker-modal.stories.ts | 26 ----- .../documents/documents/modals/manifests.ts | 6 +- .../documents/documents/tree/manifests.ts | 4 +- .../data-type-picker-modal.element.ts | 75 ------------- 5 files changed, 7 insertions(+), 207 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/data-type-picker/data-type-picker-modal.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts deleted file mode 100644 index 1b2683e71a..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { css, html } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, state } from 'lit/decorators.js'; -import type { UmbTreeElement } from '../../../../core/components/tree/tree.element'; -import { UmbDocumentPickerModalData, UmbDocumentPickerModalResult } from '@umbraco-cms/backoffice/modal'; -import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; - -// TODO: make use of UmbPickerLayoutBase -@customElement('umb-document-picker-modal') -export class UmbDocumentPickerModalElement extends UmbModalBaseElement< - UmbDocumentPickerModalData, - UmbDocumentPickerModalResult -> { - @state() - _selection: Array = []; - - @state() - _multiple = true; - - connectedCallback() { - super.connectedCallback(); - this._selection = this.data?.selection ?? []; - this._multiple = this.data?.multiple ?? true; - } - - private _handleSelectionChange(e: CustomEvent) { - e.stopPropagation(); - const element = e.target as UmbTreeElement; - //TODO: Should multiple property be implemented here or be passed down into umb-tree? - this._selection = this._multiple ? element.selection : [element.selection[element.selection.length - 1]]; - } - - private _submit() { - this.modalHandler?.submit({ selection: this._selection }); - } - - private _close() { - this.modalHandler?.reject(); - } - - render() { - return html` - - - -
    - -     -
    - - -
    -     - `; - } - - static styles = [ - UUITextStyles, - css` - h3 { - margin-left: var(--uui-size-space-5); - margin-right: var(--uui-size-space-5); - } - - uui-input { - width: 100%; - } - - hr { - border: none; - border-bottom: 1px solid var(--uui-color-divider); - margin: 16px 0; - } - - #content-list { - display: flex; - flex-direction: column; - gap: var(--uui-size-space-3); - } - - .content-item { - cursor: pointer; - } - - .content-item.selected { - background-color: var(--uui-color-selected); - color: var(--uui-color-selected-contrast); - } - `, - ]; -} - -export default UmbDocumentPickerModalElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-document-picker-modal': UmbDocumentPickerModalElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts deleted file mode 100644 index 293c44f6d5..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import '../../../../core/components/body-layout/body-layout.element'; -import './document-picker-modal.element'; - -import { Meta, Story } from '@storybook/web-components'; -import { html } from 'lit'; - -import type { UmbDocumentPickerModalElement } from './document-picker-modal.element'; -import type { UmbDocumentPickerModalData } from '@umbraco-cms/backoffice/modal'; - -export default { - title: 'API/Modals/Layouts/Content Picker', - component: 'umb-document-picker-modal', - id: 'umb-document-picker-modal', -} as Meta; - -const data: UmbDocumentPickerModalData = { - multiple: true, - selection: [], -}; - -export const Overview: Story = () => html` - - -`; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts index 5e9595e6a0..7c2c4f7006 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts @@ -1,11 +1,15 @@ +import { DOCUMENT_TREE_ALIAS } from '../tree/manifests'; import type { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; const modals: Array = [ { type: 'modal', + kind: 'treePicker', alias: 'Umb.Modal.DocumentPicker', name: 'Document Picker Modal', - loader: () => import('./document-picker/document-picker-modal.element'), + meta: { + treeAlias: DOCUMENT_TREE_ALIAS, + }, }, { type: 'modal', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/manifests.ts index 306b2da976..ddc496c003 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/manifests.ts @@ -1,11 +1,11 @@ import { DOCUMENT_REPOSITORY_ALIAS } from '../repository/manifests'; import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry'; -const treeAlias = 'Umb.Tree.Documents'; +export const DOCUMENT_TREE_ALIAS = 'Umb.Tree.Documents'; const tree: ManifestTree = { type: 'tree', - alias: treeAlias, + alias: DOCUMENT_TREE_ALIAS, name: 'Documents Tree', meta: { repositoryAlias: DOCUMENT_REPOSITORY_ALIAS, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/data-type-picker/data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/data-type-picker/data-type-picker-modal.element.ts deleted file mode 100644 index e900eb8bb6..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/data-type-picker/data-type-picker-modal.element.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { css, html } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property, state } from 'lit/decorators.js'; -import type { UmbTreeElement } from '../../../../core/components/tree/tree.element'; -import { - UmbDataTypePickerModalData, - UmbDataTypePickerModalResult, - UmbModalHandler, -} from '@umbraco-cms/backoffice/modal'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; - -// TODO: make use of UmbPickerLayoutBase -@customElement('umb-data-type-picker-modal') -export class UmbDataTypePickerModalElement extends UmbLitElement { - @property({ attribute: false }) - modalHandler?: UmbModalHandler; - - @property({ type: Object, attribute: false }) - data?: UmbDataTypePickerModalData; - - @state() - _selection: Array = []; - - @state() - _multiple = false; - - connectedCallback() { - super.connectedCallback(); - this._selection = this.data?.selection ?? []; - this._multiple = this.data?.multiple ?? false; - } - - #onSelectionChange(e: CustomEvent) { - e.stopPropagation(); - const element = e.target as UmbTreeElement; - this._selection = element.selection; - } - - #submit() { - this.modalHandler?.submit({ selection: this._selection }); - } - - #close() { - this.modalHandler?.reject(); - } - - render() { - return html` - - - - -
    - - -
    -     - `; - } - - static styles = [UUITextStyles, css``]; -} - -export default UmbDataTypePickerModalElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-data-type-picker-modal': UmbDataTypePickerModalElement; - } -} From 97fc1bfe616a2a72b01903ef5e8b2e3618c77bb0 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 8 May 2023 21:05:27 +0200 Subject: [PATCH 44/71] use tree picker for document types --- .../document-types/modals/manifests.ts | 10 ++ .../document-types/tree/manifests.ts | 4 +- .../input-document-picker.element.ts | 3 +- .../document-type-picker-modal.element.ts | 103 ------------------ .../document-type-picker-modal.stories.ts | 26 ----- .../documents/documents/modals/manifests.ts | 6 - 6 files changed, 15 insertions(+), 137 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts index e0e2b4d05f..0f2d55d01b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts @@ -1,6 +1,16 @@ +import { DOCUMENT_TYPE_TREE_ALIAS } from '../tree/manifests'; import type { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; const modals: Array = [ + { + type: 'modal', + kind: 'treePicker', + alias: 'Umb.Modal.DocumentTypePicker', + name: 'Document Type Picker Modal', + meta: { + treeAlias: DOCUMENT_TYPE_TREE_ALIAS, + }, + }, { type: 'modal', alias: 'Umb.Modal.AllowedDocumentTypes', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/tree/manifests.ts index 2f2bf1fd5b..83ddb777f1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/tree/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/tree/manifests.ts @@ -1,9 +1,11 @@ import { DOCUMENT_TYPE_REPOSITORY_ALIAS } from '../repository/manifests'; import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry'; +export const DOCUMENT_TYPE_TREE_ALIAS = 'Umb.Tree.DocumentTypes'; + const tree: ManifestTree = { type: 'tree', - alias: 'Umb.Tree.DocumentTypes', + alias: DOCUMENT_TYPE_TREE_ALIAS, name: 'Document Types Tree', meta: { repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts index de5803d280..906930d539 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts @@ -10,6 +10,7 @@ import { UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL, UMB_DOCUMENT_PICKER_MODAL, + UMB_DOCUMENT_TYPE_PICKER_MODAL, } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { DocumentTreeItemResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -118,7 +119,7 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen private _openPicker() { // We send a shallow copy(good enough as its just an array of ids) of our this._selectedIds, as we don't want the modal to manipulate our data: - const modalHandler = this._modalContext?.open(UMB_DOCUMENT_PICKER_MODAL, { + const modalHandler = this._modalContext?.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, { multiple: this.max === 1 ? false : true, selection: [...this._selectedIds], }); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts deleted file mode 100644 index 69b5da52eb..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { css, html } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, state } from 'lit/decorators.js'; -import type { UmbTreeElement } from '../../../../core/components/tree/tree.element'; -import { UmbDocumentTypePickerModalData, UmbDocumentTypePickerModalResult } from '@umbraco-cms/backoffice/modal'; -import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; - -// TODO: make use of UmbPickerLayoutBase -@customElement('umb-document-type-picker-modal') -export class UmbDocumentTypePickerModalElement extends UmbModalBaseElement< - UmbDocumentTypePickerModalData, - UmbDocumentTypePickerModalResult -> { - @state() - _selection: Array = []; - - @state() - _multiple = true; - - connectedCallback() { - super.connectedCallback(); - this._selection = this.data?.selection ?? []; - this._multiple = this.data?.multiple ?? true; - } - - private _handleSelectionChange(e: CustomEvent) { - e.stopPropagation(); - const element = e.target as UmbTreeElement; - this._selection = element.selection; - } - - private _submit() { - this.modalHandler?.submit({ selection: this._selection }); - } - - private _close() { - this.modalHandler?.reject(); - } - - render() { - return html` - - - -
    - -     -
    - - -
    -     - `; - } - - static styles = [ - UUITextStyles, - css` - h3 { - margin-left: var(--uui-size-space-5); - margin-right: var(--uui-size-space-5); - } - - uui-input { - width: 100%; - } - - hr { - border: none; - border-bottom: 1px solid var(--uui-color-divider); - margin: 16px 0; - } - - #content-list { - display: flex; - flex-direction: column; - gap: var(--uui-size-space-3); - } - - .content-item { - cursor: pointer; - } - - .content-item.selected { - background-color: var(--uui-color-selected); - color: var(--uui-color-selected-contrast); - } - `, - ]; -} - -export default UmbDocumentTypePickerModalElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-document-type-picker-modal': UmbDocumentTypePickerModalElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts deleted file mode 100644 index f946b89fad..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import '../../../../core/components/body-layout/body-layout.element'; -import './document-type-picker-modal.element'; - -import { Meta, Story } from '@storybook/web-components'; -import { html } from 'lit'; - -import type { UmbDocumentTypePickerModalElement } from './document-type-picker-modal.element'; -import type { UmbDocumentTypePickerModalData } from '@umbraco-cms/backoffice/modal'; - -export default { - title: 'API/Modals/Layouts/Content Picker', - component: 'umb-document-type-picker-modal', - id: 'umb-document-type-picker-modal', -} as Meta; - -const data: UmbDocumentTypePickerModalData = { - multiple: true, - selection: [], -}; - -export const Overview: Story = () => html` - - -`; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts index 7c2c4f7006..e125e8b4c8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts @@ -11,12 +11,6 @@ const modals: Array = [ treeAlias: DOCUMENT_TREE_ALIAS, }, }, - { - type: 'modal', - alias: 'Umb.Modal.DocumentTypePicker', - name: 'Document Type Picker Modal', - loader: () => import('./document-type-picker/document-type-picker-modal.element'), - }, ]; export const manifests = [...modals]; From 5eef9082868ced6965b852e44e1103fe8d831af9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 10:59:30 +0200 Subject: [PATCH 45/71] change temp test back --- .../input-document-type-picker.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/components/input-document-type-picker/input-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/components/input-document-type-picker/input-document-type-picker.element.ts index 72e51ab375..8fad412c29 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/components/input-document-type-picker/input-document-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/components/input-document-type-picker/input-document-type-picker.element.ts @@ -11,7 +11,7 @@ import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL, - UMB_DOCUMENT_TYPE_PICKER_MODAL, + UMB_DOCUMENT_PICKER_MODAL, } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { DocumentTypeResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -73,7 +73,7 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl private _openPicker() { // We send a shallow copy(good enough as its just an array of ids) of our this._selectedIds, as we don't want the modal to manipulate our data: - const modalHandler = this._modalContext?.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, { + const modalHandler = this._modalContext?.open(UMB_DOCUMENT_PICKER_MODAL, { multiple: true, selection: [...this._selectedIds], }); From 17f05613b38bd28c56acc1098eaf5ac594c591aa Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 11:06:15 +0200 Subject: [PATCH 46/71] move tree picker into modals folder --- .../tree-picker}/tree-picker-modal.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/Umbraco.Web.UI.Client/src/backoffice/core/{components/tree-picker-modal => modals/tree-picker}/tree-picker-modal.element.ts (96%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/tree-picker-modal/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts similarity index 96% rename from src/Umbraco.Web.UI.Client/src/backoffice/core/components/tree-picker-modal/tree-picker-modal.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts index 34edfe18b1..b3906ecec1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/tree-picker-modal/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts @@ -1,7 +1,7 @@ import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, state } from 'lit/decorators.js'; -import type { UmbTreeElement } from '../tree/tree.element'; +import type { UmbTreeElement } from '../../components/tree/tree.element'; import { ManifestModalTreePickerKind } from '@umbraco-cms/backoffice/extensions-registry'; import { UmbPickerModalData, UmbPickerModalResult } from '@umbraco-cms/backoffice/modal'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; From a4cd7fd72417cdab94558045290f07daff0f36e3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 11:06:29 +0200 Subject: [PATCH 47/71] register tree picker modal --- .../src/backoffice/core/modals/manifests.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts index a91cbbc426..662d114e8d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts @@ -55,6 +55,12 @@ const modals: Array = [ name: 'Embedded Media Modal', loader: () => import('./embedded-media/embedded-media-modal.element'), }, + { + type: 'modal', + alias: 'Umb.Modal.TreePicker', + name: 'Tree Picker Modal', + loader: () => import('./tree-picker/tree-picker-modal.element'), + }, ]; export const manifests = [...modals]; From e7e46b250cebcea42dbed13550216b322335e7b5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 11:06:48 +0200 Subject: [PATCH 48/71] update picker modal interface --- src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts | 4 ++-- .../src/backoffice/core/components/index.ts | 2 +- .../core/components/input-list-base/input-list-base.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts index bcc2f9ad6d..9e3ec5168c 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts @@ -1,6 +1,6 @@ export interface UmbPickerModalData { - multiple: boolean; - selection: Array; + multiple?: boolean; + selection?: Array; filter?: (item: T) => boolean; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts index f5f9199ec3..5688b118bd 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts @@ -50,7 +50,7 @@ import './section/section.element'; import './tree/tree.element'; import './tree/entity-tree-item/entity-tree-item.element'; import './tree/tree-menu-item/tree-menu-item.element'; -import './tree-picker-modal/tree-picker-modal.element'; +import '../modals/tree-picker/tree-picker-modal.element'; import './menu/menu-item-base/menu-item-base.element'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-list-base/input-list-base.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-list-base/input-list-base.ts index 8d5208dc37..24b765218b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-list-base/input-list-base.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-list-base/input-list-base.ts @@ -45,7 +45,7 @@ export class UmbInputListBaseElement extends UmbLitElement { modalHandler?.onSubmit().then((data: UmbPickerModalData) => { if (data) { - this.value = data.selection.filter((id) => id !== null && id !== undefined) as Array; + this.value = data.selection?.filter((id) => id !== null && id !== undefined) as Array; this.selectionUpdated(); } }); From 3268e62fa34cb3068ecfddd34bcd4b1f9991afbd Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 11:14:48 +0200 Subject: [PATCH 49/71] lazy load tree picker --- .../src/backoffice/core/components/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts index 5688b118bd..a485d7735e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts @@ -50,7 +50,6 @@ import './section/section.element'; import './tree/tree.element'; import './tree/entity-tree-item/entity-tree-item.element'; import './tree/tree-menu-item/tree-menu-item.element'; -import '../modals/tree-picker/tree-picker-modal.element'; import './menu/menu-item-base/menu-item-base.element'; From aeb8dfc6a2f1fbfc8307d3dc79a59bf8cd0a7333 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 9 May 2023 11:18:13 +0200 Subject: [PATCH 50/71] submit section snippet --- .../insert-section-input.element.ts | 15 ++++++++++----- .../insert-section-modal.element.ts | 10 ++++++++-- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts index c23197b2d1..4b0e236761 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts @@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, property, query } from 'lit/decorators.js'; import { UUIBooleanInputElement, UUIInputElement } from '@umbraco-ui/uui'; +import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; @customElement('umb-insert-section-checkbox') export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { @@ -16,15 +17,18 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { showInput = false; @query('uui-input') - input!: UUIInputElement; + input?: UUIInputElement; @query('form') - form!: HTMLFormElement; + form?: HTMLFormElement; @query('uui-checkbox') - checkbox!: HTMLFormElement; + checkbox?: HTMLFormElement; validate() { + + if(!this.form) return true; + this.form.requestSubmit(); return this.form.checkValidity(); } @@ -34,13 +38,14 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { } get inputValue() { - return this.input.value; + return this.input?.value; } get isMandatory() { - return this.checkbox.checked; + return this.checkbox?.checked; } + render() { return html` ${super.render()} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts index ad2d058f19..7f3bb25f16 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts @@ -7,6 +7,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; import './insert-section-input.element'; import UmbInsertSectionCheckboxElement from './insert-section-input.element'; +import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken( UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS, @@ -31,6 +32,9 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase @state() selectedCheckbox?: UmbInsertSectionCheckboxElement | null = null; + @state() + snippet = ''; + #chooseSection(event: Event) { event.stopPropagation(); const target = event.target as UmbInsertSectionCheckboxElement; @@ -41,6 +45,7 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase } if (target.checked) { this.selectedCheckbox = target; + this.snippet = this.snippetMethods[checkboxes.indexOf(target)](target?.inputValue as string, target?.isMandatory); checkboxes.forEach((checkbox) => { if (checkbox !== target) { checkbox.checked = false; @@ -53,13 +58,14 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase this.selectedCheckbox = this.checkboxes[0]; } + snippetMethods = [getRenderBodySnippet, getRenderSectionSnippet, getAddSectionSnippet]; + #close() { this.modalHandler?.reject(); } #submit() { - if(this.selectedCheckbox?.validate()) - this.modalHandler?.submit({ value: (this.selectedCheckbox?.inputValue as string) ?? '' }); + if (this.selectedCheckbox?.validate()) this.modalHandler?.submit({ value: this.snippet ?? '' }); } render() { From a812b14668c15e6b2f8d1bb511742ec3a2e4b6e2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 11:48:10 +0200 Subject: [PATCH 51/71] add interface for tree picker --- src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts index 9e3ec5168c..6b7530c9bb 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts @@ -1,9 +1,13 @@ -export interface UmbPickerModalData { +export interface UmbPickerModalData { multiple?: boolean; selection?: Array; - filter?: (item: T) => boolean; + filter?: (item: ItemType) => boolean; } export interface UmbPickerModalResult { selection: Array; } + +export interface UmbTreePickerModalData extends UmbPickerModalData { + treeAlias: string; +} From 10328ee252c79e419aeb3ccb241debb48efa8e9c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 11:48:27 +0200 Subject: [PATCH 52/71] accept default data in modal token --- .../libs/modal/token/modal-token.ts | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts index 99510c47a8..057ffe5508 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts @@ -1,36 +1,38 @@ import { UmbModalConfig } from '../modal.context'; -export class UmbModalToken { +export class UmbModalToken { /** * Get the data type of the token's data. * * @public - * @type {Data} + * @type {ModalDataType} * @memberOf UmbModalToken * @example `typeof MyModal.TYPE` * @returns undefined */ - readonly DATA: Data = undefined as never; + readonly DATA: ModalDataType = undefined as never; /** * Get the result type of the token * * @public - * @type {Result} + * @type {ModalResultType} * @memberOf UmbModalToken * @example `typeof MyModal.RESULT` * @returns undefined */ - readonly RESULT: Result = undefined as never; + readonly RESULT: ModalResultType = undefined as never; /** * @param alias Unique identifier for the token, * @param defaultConfig Default configuration for the modal, - * @param _desc Description for the token, - * used only for debugging purposes, - * it should but does not need to be unique + * @param defaultData Default data for the modal, */ - constructor(protected alias: string, protected defaultConfig?: UmbModalConfig, protected _desc?: string) {} + constructor( + protected alias: string, + protected defaultConfig?: UmbModalConfig, + protected defaultData?: ModalDataType + ) {} /** * This method must always return the unique alias of the token since that @@ -45,4 +47,8 @@ export class UmbModalToken { public getDefaultConfig(): UmbModalConfig | undefined { return this.defaultConfig; } + + public getDefaultData(): ModalDataType | undefined { + return this.defaultData; + } } From 873fa6b80c4b4349b92f24349cc191ec25664a18 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 11:48:54 +0200 Subject: [PATCH 53/71] merge data before passing to modal --- src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts index e815c03cf4..d6881eebae 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts @@ -72,6 +72,9 @@ export class UmbModalHandlerClass { this._submitResolver = resolve; @@ -79,7 +82,7 @@ export class UmbModalHandlerClass Date: Tue, 9 May 2023 11:49:11 +0200 Subject: [PATCH 54/71] read treeAlias from modal data --- .../core/modals/tree-picker/tree-picker-modal.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts index b3906ecec1..5578335f49 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts @@ -3,12 +3,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, state } from 'lit/decorators.js'; import type { UmbTreeElement } from '../../components/tree/tree.element'; import { ManifestModalTreePickerKind } from '@umbraco-cms/backoffice/extensions-registry'; -import { UmbPickerModalData, UmbPickerModalResult } from '@umbraco-cms/backoffice/modal'; +import { UmbTreePickerModalData, UmbPickerModalResult } from '@umbraco-cms/backoffice/modal'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; @customElement('umb-tree-picker-modal') export class UmbTreePickerModalElement extends UmbModalBaseElement< - UmbPickerModalData, + UmbTreePickerModalData, UmbPickerModalResult, ManifestModalTreePickerKind > { @@ -44,7 +44,7 @@ export class UmbTreePickerModalElement extends UmbModalBaseElement< Date: Tue, 9 May 2023 11:49:28 +0200 Subject: [PATCH 55/71] pass treeAlias in dataType picker token --- .../modal/token/data-type-picker-modal.token.ts | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/data-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/data-type-picker-modal.token.ts index 2297e7e023..0f6edf105d 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/data-type-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/data-type-picker-modal.token.ts @@ -1,18 +1,15 @@ -import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal'; -export interface UmbDataTypePickerModalData { - selection?: Array; - multiple?: boolean; -} - -export interface UmbDataTypePickerModalResult { - selection: Array; -} +export type UmbDataTypePickerModalData = UmbTreePickerModalData; +export type UmbDataTypePickerModalResult = UmbPickerModalResult; export const UMB_DATA_TYPE_PICKER_MODAL = new UmbModalToken( - 'Umb.Modal.DataTypePicker', + 'Umb.Modal.TreePicker', { type: 'sidebar', size: 'small', + }, + { + treeAlias: 'Umb.Tree.DataTypes', } ); From c05d7ec2bc361ef93af8a2666e2a7339259dcb4b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 11:49:45 +0200 Subject: [PATCH 56/71] remove custom registration of data type picker --- .../backoffice/settings/data-types/manifests.ts | 2 -- .../settings/data-types/modal/manifests.ts | 15 --------------- 2 files changed, 17 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/manifests.ts index 28e0f18938..fac58d2628 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/manifests.ts @@ -3,7 +3,6 @@ import { manifests as repositoryManifests } from './repository/manifests'; import { manifests as menuItemManifests } from './menu-item/manifests'; import { manifests as treeManifests } from './tree/manifests'; import { manifests as workspaceManifests } from './workspace/manifests'; -import { manifests as modalManifests } from './modal/manifests'; export const manifests = [ ...entityActions, @@ -11,5 +10,4 @@ export const manifests = [ ...menuItemManifests, ...treeManifests, ...workspaceManifests, - ...modalManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/manifests.ts deleted file mode 100644 index d9d3472055..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/manifests.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; - -const modals: Array = [ - { - type: 'modal', - kind: 'treePicker', - alias: 'Umb.Modal.DataTypePicker', - name: 'Data Type Picker Modal', - meta: { - treeAlias: 'Umb.Tree.DataTypes', - }, - }, -]; - -export const manifests = [...modals]; From 5160356f3743d5f50bd9b23ec6d64a877229fa06 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 11:58:19 +0200 Subject: [PATCH 57/71] fix document picker --- .../input-document-picker/input-document-picker.element.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts index 906930d539..de5803d280 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts @@ -10,7 +10,6 @@ import { UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL, UMB_DOCUMENT_PICKER_MODAL, - UMB_DOCUMENT_TYPE_PICKER_MODAL, } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { DocumentTreeItemResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -119,7 +118,7 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen private _openPicker() { // We send a shallow copy(good enough as its just an array of ids) of our this._selectedIds, as we don't want the modal to manipulate our data: - const modalHandler = this._modalContext?.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, { + const modalHandler = this._modalContext?.open(UMB_DOCUMENT_PICKER_MODAL, { multiple: this.max === 1 ? false : true, selection: [...this._selectedIds], }); From 9749d388b88a43acf5cadb9344e0fc1b24cd7aec Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 11:58:45 +0200 Subject: [PATCH 58/71] use tree picker for documents --- .../libs/modal/modal.interfaces.ts | 2 +- .../modal/token/document-picker-modal.token.ts | 18 ++++++++---------- .../documents/documents/manifests.ts | 2 -- .../documents/documents/modals/manifests.ts | 16 ---------------- 4 files changed, 9 insertions(+), 29 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts index 6b7530c9bb..110dc4a309 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts @@ -9,5 +9,5 @@ export interface UmbPickerModalResult { } export interface UmbTreePickerModalData extends UmbPickerModalData { - treeAlias: string; + treeAlias?: string; } diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/document-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/document-picker-modal.token.ts index 5209f34110..60f45eafee 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/document-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/document-picker-modal.token.ts @@ -1,18 +1,16 @@ -import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import { DocumentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal'; -export interface UmbDocumentPickerModalData { - multiple?: boolean; - selection?: Array; -} - -export interface UmbDocumentPickerModalResult { - selection: Array; -} +export type UmbDocumentPickerModalData = UmbTreePickerModalData; +export type UmbDocumentPickerModalResult = UmbPickerModalResult; export const UMB_DOCUMENT_PICKER_MODAL = new UmbModalToken( - 'Umb.Modal.DocumentPicker', + 'Umb.Modal.TreePicker', { type: 'sidebar', size: 'small', + }, + { + treeAlias: 'Umb.Tree.Documents', } ); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/manifests.ts index b06012c704..7e4ce1758a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/manifests.ts @@ -5,7 +5,6 @@ import { manifests as treeManifests } from './tree/manifests'; import { manifests as workspaceManifests } from './workspace/manifests'; import { manifests as entityActionManifests } from './entity-actions/manifests'; import { manifests as entityBulkActionManifests } from './entity-bulk-actions/manifests'; -import { manifests as modalManifests } from './modals/manifests'; import { manifests as propertyEditorManifests } from './property-editors/manifests'; export const manifests = [ @@ -16,6 +15,5 @@ export const manifests = [ ...workspaceManifests, ...entityActionManifests, ...entityBulkActionManifests, - ...modalManifests, ...propertyEditorManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts deleted file mode 100644 index e125e8b4c8..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { DOCUMENT_TREE_ALIAS } from '../tree/manifests'; -import type { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; - -const modals: Array = [ - { - type: 'modal', - kind: 'treePicker', - alias: 'Umb.Modal.DocumentPicker', - name: 'Document Picker Modal', - meta: { - treeAlias: DOCUMENT_TREE_ALIAS, - }, - }, -]; - -export const manifests = [...modals]; From b639c4dbe3d54a9ded61229a916cfe9d32348120 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 12:02:48 +0200 Subject: [PATCH 59/71] use tree picker for document types --- .../token/document-type-picker-modal.token.ts | 27 ++++++++++--------- .../document-types/modals/manifests.ts | 10 ------- 2 files changed, 14 insertions(+), 23 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/document-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/document-type-picker-modal.token.ts index 6b2d0a6341..23e5a1eff4 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/document-type-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/document-type-picker-modal.token.ts @@ -1,18 +1,19 @@ -import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal'; -export interface UmbDocumentTypePickerModalData { - multiple?: boolean; - selection?: Array; -} - -export interface UmbDocumentTypePickerModalResult { - selection: Array; -} +export type UmbDocumentTypePickerModalData = UmbTreePickerModalData; +export type UmbDocumentTypePickerModalResult = UmbPickerModalResult; export const UMB_DOCUMENT_TYPE_PICKER_MODAL = new UmbModalToken< UmbDocumentTypePickerModalData, UmbDocumentTypePickerModalResult ->('Umb.Modal.DocumentTypePicker', { - type: 'sidebar', - size: 'small', -}); +>( + 'Umb.Modal.TreePicker', + { + type: 'sidebar', + size: 'small', + }, + { + treeAlias: 'Umb.Tree.DocumentTypes', + } +); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts index 0f2d55d01b..e0e2b4d05f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts @@ -1,16 +1,6 @@ -import { DOCUMENT_TYPE_TREE_ALIAS } from '../tree/manifests'; import type { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry'; const modals: Array = [ - { - type: 'modal', - kind: 'treePicker', - alias: 'Umb.Modal.DocumentTypePicker', - name: 'Document Type Picker Modal', - meta: { - treeAlias: DOCUMENT_TYPE_TREE_ALIAS, - }, - }, { type: 'modal', alias: 'Umb.Modal.AllowedDocumentTypes', From 41324661c13923bf4843d1005b935c9fd2a680ea Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 12:50:08 +0200 Subject: [PATCH 60/71] use tree picker modal for media tree picker --- .../modal/token/media-picker-modal.token.ts | 23 ++-- .../input-media-picker.element.ts | 4 +- .../entity-bulk-actions/move/move.action.ts | 4 +- .../src/backoffice/media/media/manifests.ts | 2 - .../media/media/modals/manifests.ts | 12 --- .../media-picker-modal.element.ts | 102 ------------------ 6 files changed, 16 insertions(+), 131 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/manifests.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/media-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/media-picker-modal.token.ts index 7e25303f88..aa050884ca 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/media-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/media-picker-modal.token.ts @@ -1,18 +1,19 @@ -import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal'; +import { ContentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; -export interface UmbMediaPickerModalData { - multiple?: boolean; - selection: Array; -} +export type UmbMediaTreePickerModalData = UmbTreePickerModalData; +export type UmbMediaTreePickerModalResult = UmbPickerModalResult; -export interface UmbMediaPickerModalResult { - selection: Array; -} - -export const UMB_MEDIA_PICKER_MODAL = new UmbModalToken( - 'Umb.Modal.MediaPicker', +export const UMB_MEDIA_TREE_PICKER_MODAL = new UmbModalToken< + UmbMediaTreePickerModalData, + UmbMediaTreePickerModalResult +>( + 'Umb.Modal.TreePicker', { type: 'sidebar', size: 'small', + }, + { + treeAlias: 'Umb.Tree.Media', } ); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/components/input-media-picker/input-media-picker.element.ts index 4c66716703..1305c0460e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/components/input-media-picker/input-media-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/components/input-media-picker/input-media-picker.element.ts @@ -8,7 +8,7 @@ import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL, - UMB_MEDIA_PICKER_MODAL, + UMB_MEDIA_TREE_PICKER_MODAL, } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -120,7 +120,7 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement) private _openPicker() { // We send a shallow copy(good enough as its just an array of ids) of our this._selectedIds, as we don't want the modal to manipulate our data: - const modalHandler = this._modalContext?.open(UMB_MEDIA_PICKER_MODAL, { + const modalHandler = this._modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL, { multiple: this.max === 1 ? false : true, selection: [...this._selectedIds], }); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts index 6f34b483ca..10d2bf8de5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts @@ -2,7 +2,7 @@ import type { UmbMediaRepository } from '../../repository/media.repository'; import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-action'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api'; -import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_MEDIA_PICKER_MODAL } from '@umbraco-cms/backoffice/modal'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_MEDIA_TREE_PICKER_MODAL } from '@umbraco-cms/backoffice/modal'; export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase { #modalContext?: UmbModalContext; @@ -17,7 +17,7 @@ export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase = [ - { - type: 'modal', - alias: 'Umb.Modal.MediaPicker', - name: 'Media Picker Modal', - loader: () => import('./media-picker/media-picker-modal.element'), - }, -]; - -export const manifests = [...modals]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts deleted file mode 100644 index 51c6822108..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { css, html } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, state } from 'lit/decorators.js'; -import { UmbTreeElement } from '../../../../core/components/tree/tree.element'; -import { UmbMediaPickerModalData, UmbMediaPickerModalResult } from '@umbraco-cms/backoffice/modal'; -import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; - -@customElement('umb-media-picker-modal') -export class UmbMediaPickerModalElement extends UmbModalBaseElement< - UmbMediaPickerModalData, - UmbMediaPickerModalResult -> { - @state() - _selection: Array = []; - - @state() - _multiple = true; - - connectedCallback() { - super.connectedCallback(); - this._selection = this.data?.selection ?? []; - this._multiple = this.data?.multiple ?? true; - } - - private _handleSelectionChange(e: CustomEvent) { - e.stopPropagation(); - const element = e.target as UmbTreeElement; - this._selection = element.selection; - } - - private _submit() { - this.modalHandler?.submit({ selection: this._selection }); - } - - private _close() { - this.modalHandler?.reject(); - } - - render() { - return html` - - - -
    - -     -
    - - -
    -     - `; - } - - static styles = [ - UUITextStyles, - css` - h3 { - margin-left: var(--uui-size-space-5); - margin-right: var(--uui-size-space-5); - } - - uui-input { - width: 100%; - } - - hr { - border: none; - border-bottom: 1px solid var(--uui-color-divider); - margin: 16px 0; - } - - #content-list { - display: flex; - flex-direction: column; - gap: var(--uui-size-space-3); - } - - .content-item { - cursor: pointer; - } - - .content-item.selected { - background-color: var(--uui-color-selected); - color: var(--uui-color-selected-contrast); - } - `, - ]; -} - -export default UmbMediaPickerModalElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-media-picker-modal': UmbMediaPickerModalElement; - } -} From 9d4f41431ac8c4cc900d0bb6f5f7afe820957b7c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 12:51:49 +0200 Subject: [PATCH 61/71] rename media picker token to media tree picker --- src/Umbraco.Web.UI.Client/libs/modal/token/index.ts | 2 +- ...a-picker-modal.token.ts => media-tree-picker-modal.token.ts} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/Umbraco.Web.UI.Client/libs/modal/token/{media-picker-modal.token.ts => media-tree-picker-modal.token.ts} (100%) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts index 284cdc1e6a..7de79aa5ed 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts @@ -16,7 +16,7 @@ export * from './import-dictionary-modal.token'; export * from './invite-user-modal.token'; export * from './language-picker-modal.token'; export * from './link-picker-modal.token'; -export * from './media-picker-modal.token'; +export * from './media-tree-picker-modal.token'; export * from './property-editor-ui-picker-modal.token'; export * from './property-settings-modal.token'; export * from './search-modal.token'; diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/media-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/media-tree-picker-modal.token.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/libs/modal/token/media-picker-modal.token.ts rename to src/Umbraco.Web.UI.Client/libs/modal/token/media-tree-picker-modal.token.ts From dead3cd9c67e064888962f0a377d357ae3f57e2e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 13:05:50 +0200 Subject: [PATCH 62/71] use tree picker modal for template picker modal --- .../token/template-picker-modal.token.ts | 18 ++- .../src/backoffice/core/modals/manifests.ts | 6 - .../template-picker-modal.element.ts | 105 ------------------ 3 files changed, 8 insertions(+), 121 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/core/modals/template-picker/template-picker-modal.element.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/template-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/template-picker-modal.token.ts index 8f9b122a69..2af6dc02d6 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/template-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/template-picker-modal.token.ts @@ -1,18 +1,16 @@ -import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal'; -export interface UmbTemplatePickerModalData { - multiple: boolean; - selection: Array; -} - -export interface UmbTemplatePickerModalResult { - selection: Array; -} +export type UmbTemplatePickerModalData = UmbTreePickerModalData; +export type UmbTemplatePickerModalResult = UmbPickerModalResult; export const UMB_TEMPLATE_PICKER_MODAL = new UmbModalToken( - 'Umb.Modal.TemplatePicker', + 'Umb.Modal.TreePicker', { type: 'sidebar', size: 'small', + }, + { + treeAlias: 'Umb.Tree.Templates', } ); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts index 662d114e8d..12151e0fc5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts @@ -37,12 +37,6 @@ const modals: Array = [ name: 'Section Picker Modal', loader: () => import('./section-picker/section-picker-modal.element'), }, - { - type: 'modal', - alias: 'Umb.Modal.TemplatePicker', - name: 'Template Picker Modal', - loader: () => import('./template-picker/template-picker-modal.element'), - }, { type: 'modal', alias: 'Umb.Modal.Template', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/template-picker/template-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/template-picker/template-picker-modal.element.ts deleted file mode 100644 index 3ce0e82b15..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/template-picker/template-picker-modal.element.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { css, html } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, state } from 'lit/decorators.js'; -import { UmbTreeElement } from '../../components/tree/tree.element'; -import { UmbTemplatePickerModalData, UmbTemplatePickerModalResult } from '@umbraco-cms/backoffice/modal'; -import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; - -//TODO: make a default tree-picker that can be used across multiple pickers -// TODO: make use of UmbPickerLayoutBase -@customElement('umb-template-picker-modal') -export class UmbTemplatePickerModalElement extends UmbModalBaseElement< - UmbTemplatePickerModalData, - UmbTemplatePickerModalResult -> { - @state() - _selection: Array = []; - - @state() - _multiple = true; - - connectedCallback() { - super.connectedCallback(); - this._selection = this.data?.selection ?? []; - this._multiple = this.data?.multiple ?? true; - } - - private _handleSelectionChange(e: CustomEvent) { - e.stopPropagation(); - const element = e.target as UmbTreeElement; - this._selection = this._multiple ? element.selection : [element.selection[element.selection.length - 1]]; - } - - private _submit() { - this.modalHandler?.submit({ selection: this._selection }); - } - - private _close() { - this.modalHandler?.reject(); - } - - // TODO: implement search - // TODO: make umb-tree have a disabled option (string array like selection)? - render() { - return html` - - - -
    - -     -
    - - -
    -     - `; - } - - static styles = [ - UUITextStyles, - css` - h3 { - margin-left: var(--uui-size-space-5); - margin-right: var(--uui-size-space-5); - } - - uui-input { - width: 100%; - } - - hr { - border: none; - border-bottom: 1px solid var(--uui-color-divider); - margin: 16px 0; - } - - #content-list { - display: flex; - flex-direction: column; - gap: var(--uui-size-space-3); - } - - .content-item { - cursor: pointer; - } - - .content-item.selected { - background-color: var(--uui-color-selected); - color: var(--uui-color-selected-contrast); - } - `, - ]; -} - -export default UmbTemplatePickerModalElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-template-picker-modal': UmbTemplatePickerModalElement; - } -} From ee12b1cba7cc600a6c4f0d9190b4912a593c2d1e Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 9 May 2023 13:16:56 +0200 Subject: [PATCH 63/71] fix imports, change text --- .../modal/token/dictionary-item-picker-modal.token.ts | 2 +- .../insert-menu/templating-insert-menu.element.ts | 4 +++- .../templating/modals/insert-value-sidebar.element.ts | 4 ++-- .../src/backoffice/templating/modals/manifests.ts | 2 +- .../src/backoffice/templating/modals/modal-tokens.ts | 1 + .../workspace/partial-views-workspace-edit.element.ts | 10 +++++----- .../workspace/partial-views-workspace.element.ts | 4 ++-- .../dictionary-item-picker-modal.element.ts | 4 ++-- 8 files changed, 17 insertions(+), 14 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts index b67a0320ae..c4c2288089 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/dictionary-item-picker-modal.token.ts @@ -6,7 +6,7 @@ export interface UmbDictionaryItemPickerModalData { } export interface UmbDictionaryItemPickerModalResult { - selection: string[]; + selection: Array; } export const UMB_DICTIONARY_ITEM_PICKER_MODAL_ALIAS = 'Umb.Modal.DictionaryItemPicker'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index 73b4726807..b9cf26f696 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -70,7 +70,9 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { } #getDictionaryItemSnippet = async (modalResult: UmbDictionaryItemPickerModalResult) => { - const { data } = await this.#dictionaryRepository.requestById(modalResult.selection[0]); + const id = modalResult.selection[0]; + if (id === null) return; + const { data } = await this.#dictionaryRepository.requestById(id); this.value = getInsertDictionarySnippet(data?.name ?? ''); }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts index 20310f0088..2431406194 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts @@ -77,8 +77,8 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElementAdd default value`} - Recursive - (this.recursive = !this.recursive)}>Yes, make it recursive + Fallback + (this.recursive = !this.recursive)}>From ancestors Output sample diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts index c0057d8dc6..19a0131992 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/manifests.ts @@ -27,7 +27,7 @@ const modals: Array = [ { type: 'modal', alias: UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS, - name: 'Partial View Picker Modal', + name: 'Partial Insert Section Picker Modal', loader: () => import('./insert-section-modal/insert-section-modal.element'), }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts new file mode 100644 index 0000000000..84d366ca6c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts @@ -0,0 +1 @@ +//TODO: move tokens here nad import this file somewhere diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts index 8fd6460679..8f7c0a3c88 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace-edit.element.ts @@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html } from 'lit'; import { customElement, query, state } from 'lit/decorators.js'; import { UUIInputElement } from '@umbraco-ui/uui'; -import { UmbCodeEditorElement } from '../../../shared/components/code-editor/code-editor.element'; +import { UmbCodeEditorElement } from '../../../core/components/code-editor'; import { UmbPartialViewsWorkspaceContext } from './partial-views-workspace.context'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -33,10 +33,10 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement { this._content = content; }); - this.observe(this.#partialViewsWorkspaceContext.isNew, (isNew) => { - this.#isNew = !!isNew; - console.log(this.#isNew); - }); + // this.observe(this.#partialViewsWorkspaceContext.isNew, (isNew) => { + // this.#isNew = !!isNew; + // console.log(this.#isNew); + // }); }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts index 2ba6b08e7a..f314361b77 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.element.ts @@ -6,7 +6,7 @@ import { UmbRouterSlotInitEvent } from '@umbraco-cms/internal/router'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import './partial-views-workspace-edit.element'; -import { IRoute, IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router'; +import { UmbRoute, IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router'; @customElement('umb-partial-views-workspace') export class UmbPartialViewsWorkspaceElement extends UmbLitElement { @@ -18,7 +18,7 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement { #key = ''; @state() - _routes: IRoute[] = [ + _routes: UmbRoute[] = [ { path: 'create/:parentKey', component: () => this.#element, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts index b67a227edd..f79cec25cf 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts @@ -1,7 +1,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { UmbTreeElement } from '../../../shared/components/tree/tree.element'; +import { UmbTreeElement } from '../../../core/components/tree/tree.element'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UmbDictionaryItemPickerModalData, UmbDictionaryItemPickerModalResult } from '@umbraco-cms/backoffice/modal'; @@ -11,7 +11,7 @@ export default class UmbDictionaryItemPickerModalElement extends UmbModalBaseEle UmbDictionaryItemPickerModalResult > { @state() - _selection: Array = []; + _selection: Array = []; @state() _multiple = false; From 110711bb7babbacc0cbcfcf1821e5dc333f8b5b6 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 9 May 2023 13:41:34 +0200 Subject: [PATCH 64/71] disable lit ally rule --- .../insert-section-modal/insert-section-input.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts index 4b0e236761..77910962ae 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts @@ -26,8 +26,7 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { checkbox?: HTMLFormElement; validate() { - - if(!this.form) return true; + if (!this.form) return true; this.form.requestSubmit(); return this.form.checkValidity(); @@ -45,7 +44,7 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { return this.checkbox?.checked; } - + /* eslint-disable lit-a11y/click-events-have-key-events */ render() { return html` ${super.render()} @@ -76,6 +75,7 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { : ''} `; } + /* eslint-enable lit-a11y/click-events-have-key-events */ static styles = [ ...UUIBooleanInputElement.styles, From 4800d03fcd5dc1001dc93be377f6596148b3d62b Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 9 May 2023 13:50:22 +0200 Subject: [PATCH 65/71] move modal tokens to separate file --- .../templating-insert-menu.element.ts | 9 ++------ .../insert-choose-type-sidebar.element.ts | 11 ++-------- .../insert-section-input.element.ts | 1 - .../insert-section-modal.element.ts | 5 ++--- .../templating/modals/modal-tokens.ts | 22 ++++++++++++++++++- 5 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index b9cf26f696..c069ceb8b0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -20,14 +20,9 @@ import { UmbPartialViewPickerModalResult, } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL } from '../../modals/modal-tokens'; + -export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( - UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, - { - type: 'sidebar', - size: 'small', - } -); @customElement('umb-templating-insert-menu') export class UmbTemplatingInsertMenuElement extends UmbLitElement { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index e2bea884cb..7d0578057c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -1,25 +1,18 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS } from './manifests'; +import { UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL } from './modal-tokens'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, - UmbModalToken, UMB_PARTIAL_VIEW_PICKER_MODAL, UmbModalHandler, UMB_DICTIONARY_ITEM_PICKER_MODAL, UmbDictionaryItemPickerModalResult, } from '@umbraco-cms/backoffice/modal'; -export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken( - UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, - { - type: 'sidebar', - size: 'small', - } -); + export interface ChooseInsertTypeModalData { hidePartialViews?: boolean; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts index 77910962ae..10f8e43401 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts @@ -2,7 +2,6 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, property, query } from 'lit/decorators.js'; import { UUIBooleanInputElement, UUIInputElement } from '@umbraco-ui/uui'; -import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; @customElement('umb-insert-section-checkbox') export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts index 7f3bb25f16..818d24171f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts @@ -2,12 +2,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, queryAll, state } from 'lit/decorators.js'; import { UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS } from '../manifests'; +import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; +import { UmbInsertSectionCheckboxElement } from './insert-section-input.element'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; -import './insert-section-input.element'; -import UmbInsertSectionCheckboxElement from './insert-section-input.element'; -import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken( UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts index 84d366ca6c..c9278d5ad1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts @@ -1 +1,21 @@ -//TODO: move tokens here nad import this file somewhere +import { + UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, + UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, +} from './manifests'; +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; + +export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( + UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); + +export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken( + UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); From c23dd3d4ea7b0654e0bcb4ecd14bb0ed8078ec97 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 9 May 2023 13:55:59 +0200 Subject: [PATCH 66/71] Revert "move modal tokens to separate file" This reverts commit 4800d03fcd5dc1001dc93be377f6596148b3d62b. --- .../templating-insert-menu.element.ts | 9 ++++++-- .../insert-choose-type-sidebar.element.ts | 11 ++++++++-- .../insert-section-input.element.ts | 1 + .../insert-section-modal.element.ts | 5 +++-- .../templating/modals/modal-tokens.ts | 22 +------------------ 5 files changed, 21 insertions(+), 27 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index c069ceb8b0..b9cf26f696 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -20,9 +20,14 @@ import { UmbPartialViewPickerModalResult, } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL } from '../../modals/modal-tokens'; - +export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( + UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); @customElement('umb-templating-insert-menu') export class UmbTemplatingInsertMenuElement extends UmbLitElement { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index 7d0578057c..e2bea884cb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -1,18 +1,25 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL } from './modal-tokens'; +import { UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS } from './manifests'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, + UmbModalToken, UMB_PARTIAL_VIEW_PICKER_MODAL, UmbModalHandler, UMB_DICTIONARY_ITEM_PICKER_MODAL, UmbDictionaryItemPickerModalResult, } from '@umbraco-cms/backoffice/modal'; - +export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken( + UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); export interface ChooseInsertTypeModalData { hidePartialViews?: boolean; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts index 10f8e43401..77910962ae 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts @@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, property, query } from 'lit/decorators.js'; import { UUIBooleanInputElement, UUIInputElement } from '@umbraco-ui/uui'; +import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; @customElement('umb-insert-section-checkbox') export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts index 818d24171f..7f3bb25f16 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts @@ -2,11 +2,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, queryAll, state } from 'lit/decorators.js'; import { UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS } from '../manifests'; -import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; -import { UmbInsertSectionCheckboxElement } from './insert-section-input.element'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import './insert-section-input.element'; +import UmbInsertSectionCheckboxElement from './insert-section-input.element'; +import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken( UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts index c9278d5ad1..84d366ca6c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts @@ -1,21 +1 @@ -import { - UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, - UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, -} from './manifests'; -import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; - -export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( - UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, - { - type: 'sidebar', - size: 'small', - } -); - -export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken( - UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, - { - type: 'sidebar', - size: 'small', - } -); +//TODO: move tokens here nad import this file somewhere From d177616f51b0dbac6e209dc21d4f2e2018613dab Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 9 May 2023 13:57:21 +0200 Subject: [PATCH 67/71] Revert "move modal tokens to separate file" This reverts commit 4800d03fcd5dc1001dc93be377f6596148b3d62b. --- .../templating-insert-menu.element.ts | 9 ++++++-- .../insert-choose-type-sidebar.element.ts | 11 ++++++++-- .../insert-section-input.element.ts | 1 + .../insert-section-modal.element.ts | 5 +++-- .../templating/modals/modal-tokens.ts | 22 +------------------ 5 files changed, 21 insertions(+), 27 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts index c069ceb8b0..b9cf26f696 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/insert-menu/templating-insert-menu.element.ts @@ -20,9 +20,14 @@ import { UmbPartialViewPickerModalResult, } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL } from '../../modals/modal-tokens'; - +export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( + UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); @customElement('umb-templating-insert-menu') export class UmbTemplatingInsertMenuElement extends UmbLitElement { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts index 7d0578057c..e2bea884cb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-choose-type-sidebar.element.ts @@ -1,18 +1,25 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL } from './modal-tokens'; +import { UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS } from './manifests'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext, + UmbModalToken, UMB_PARTIAL_VIEW_PICKER_MODAL, UmbModalHandler, UMB_DICTIONARY_ITEM_PICKER_MODAL, UmbDictionaryItemPickerModalResult, } from '@umbraco-cms/backoffice/modal'; - +export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken( + UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, + { + type: 'sidebar', + size: 'small', + } +); export interface ChooseInsertTypeModalData { hidePartialViews?: boolean; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts index 10f8e43401..77910962ae 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts @@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, property, query } from 'lit/decorators.js'; import { UUIBooleanInputElement, UUIInputElement } from '@umbraco-ui/uui'; +import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; @customElement('umb-insert-section-checkbox') export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts index 818d24171f..7f3bb25f16 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts @@ -2,11 +2,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, queryAll, state } from 'lit/decorators.js'; import { UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS } from '../manifests'; -import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; -import { UmbInsertSectionCheckboxElement } from './insert-section-input.element'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import './insert-section-input.element'; +import UmbInsertSectionCheckboxElement from './insert-section-input.element'; +import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils'; export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken( UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts index c9278d5ad1..84d366ca6c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/modal-tokens.ts @@ -1,21 +1 @@ -import { - UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, - UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, -} from './manifests'; -import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; - -export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( - UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, - { - type: 'sidebar', - size: 'small', - } -); - -export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken( - UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, - { - type: 'sidebar', - size: 'small', - } -); +//TODO: move tokens here nad import this file somewhere From 3be59d89063c0b68fe0f5b0daac1e8ccfe421f3f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 9 May 2023 15:38:25 +0200 Subject: [PATCH 68/71] update types --- .../core/modals/tree-picker/tree-picker-modal.element.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts index 8833cd3b40..fc676a3932 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/tree-picker/tree-picker-modal.element.ts @@ -5,10 +5,11 @@ import type { UmbTreeElement } from '../../components/tree/tree.element'; import { ManifestModalTreePickerKind } from '@umbraco-cms/backoffice/extensions-registry'; import { UmbTreePickerModalData, UmbPickerModalResult } from '@umbraco-cms/backoffice/modal'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; +import { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api'; @customElement('umb-tree-picker-modal') -export class UmbTreePickerModalElement extends UmbModalBaseElement< - UmbTreePickerModalData, +export class UmbTreePickerModalElement extends UmbModalBaseElement< + UmbTreePickerModalData, UmbPickerModalResult, ManifestModalTreePickerKind > { @@ -66,6 +67,6 @@ export default UmbTreePickerModalElement; declare global { interface HTMLElementTagNameMap { - 'umb-tree-picker-modal': UmbTreePickerModalElement; + 'umb-tree-picker-modal': UmbTreePickerModalElement; } } From 79e1cd875320551f54e25d1ec8fa489cdc43668c Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Wed, 10 May 2023 09:53:53 +0200 Subject: [PATCH 69/71] fix build errors --- .../token/partial-view-picker-modal.token.ts | 2 +- .../src/backoffice/core/components/index.ts | 2 ++ .../partial-view-picker-modal.element.ts | 4 ++-- .../create/create-empty.action.ts | 4 ++-- .../create/create-from-snippet.action.ts | 4 ++-- .../partial-views/entity-actions/manifests.ts | 6 ++--- .../repository/partial-views.repository.ts | 24 ++++++++++++++++++- .../partial-views.detail.server.data.ts | 2 +- .../sources/partial-views.tree.server.data.ts | 4 ++-- .../partial-views/tree/manifests.ts | 2 +- .../partial-views/workspace/manifests.ts | 10 ++------ .../partial-views-workspace.context.ts | 2 +- .../template-workspace-edit.element.ts | 4 ++-- 13 files changed, 44 insertions(+), 26 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/partial-view-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/partial-view-picker-modal.token.ts index ecd3904051..19419c1187 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/partial-view-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/partial-view-picker-modal.token.ts @@ -6,7 +6,7 @@ export interface UmbPartialViewPickerModalData { } export interface UmbPartialViewPickerModalResult { - selection: string[] | undefined; + selection: Array | undefined; } export const UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS = 'Umb.Modal.PartialViewPicker'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts index a485d7735e..c2fa96e763 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/index.ts @@ -73,5 +73,7 @@ import './variant-selector/variant-selector.element'; import './code-editor'; export * from './table'; +export * from './tree/tree.element'; +export * from './code-editor'; export const manifests = [...debugManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts index 8ab315a292..824b2469bf 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/partial-view-picker-modal.element.ts @@ -1,9 +1,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { UmbTreeElement } from '../../shared/components/tree/tree.element'; import { UmbPartialViewPickerModalData, UmbPartialViewPickerModalResult } from '@umbraco-cms/backoffice/modal'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; +import { UmbTreeElement } from '@umbraco-cms/backoffice/core/components'; @customElement('umb-partial-view-picker-modal') export default class UmbPartialViewPickerModalElement extends UmbModalBaseElement< @@ -11,7 +11,7 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen UmbPartialViewPickerModalResult > { @state() - _selection: Array = []; + _selection: Array = []; @state() _multiple = false; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-empty.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-empty.action.ts index 25d7b8f11d..b00aee6830 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-empty.action.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-empty.action.ts @@ -1,8 +1,8 @@ import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; -import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; export class UmbCreateEmptyPartialViewAction }> extends UmbEntityActionBase { - constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { + constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) { super(host, repositoryAlias, unique); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-from-snippet.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-from-snippet.action.ts index cced8b5ddc..9ac777fa21 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-from-snippet.action.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/create/create-from-snippet.action.ts @@ -1,8 +1,8 @@ import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; -import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller'; +import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; export class UmbCreateFromSnippetPartialViewAction }> extends UmbEntityActionBase { - constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { + constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) { super(host, repositoryAlias, unique); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts index 1260f28572..50c2cd5b4a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/entity-actions/manifests.ts @@ -19,7 +19,7 @@ const partialViewActions: Array = [ repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, }, conditions: { - entityType: PARTIAL_VIEW_ENTITY_TYPE, + entityTypes: [PARTIAL_VIEW_ENTITY_TYPE], }, }, ]; @@ -38,7 +38,7 @@ const partialViewFolderActions: Array = [ repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, }, conditions: { - entityType: PARTIAL_VIEW_FOLDER_ENTITY_TYPE, + entityTypes: [PARTIAL_VIEW_FOLDER_ENTITY_TYPE], }, }, { @@ -52,7 +52,7 @@ const partialViewFolderActions: Array = [ repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS, }, conditions: { - entityType: PARTIAL_VIEW_FOLDER_ENTITY_TYPE, + entityTypes: [PARTIAL_VIEW_FOLDER_ENTITY_TYPE], }, }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts index c1e1ee44d8..8928ccafcb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/partial-views.repository.ts @@ -7,6 +7,8 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api'; import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository'; +import { UmbTreeRootEntityModel } from '@umbraco-cms/backoffice/tree'; +import { Observable } from 'rxjs'; export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailRepository { #init; @@ -40,7 +42,27 @@ export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailR }), ]); } - + + requestTreeRoot(): Promise<{ data?: UmbTreeRootEntityModel | undefined; error?: ProblemDetailsModel | undefined }> { + throw new Error('Method not implemented.'); + } + + requestItemsLegacy?: + | (( + uniques: string[] + ) => Promise<{ + data?: any[] | undefined; + error?: ProblemDetailsModel | undefined; + asObservable?: (() => Observable) | undefined; + }>) + | undefined; + + itemsLegacy?: ((uniques: string[]) => Promise>) | undefined; + + byId(id: string): Promise> { + throw new Error('Method not implemented.'); + } + requestById(id: string): Promise<{ data?: any; error?: ProblemDetailsModel | undefined }> { throw new Error('Method not implemented.'); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts index bbe848b399..86a65028de 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.detail.server.data.ts @@ -4,7 +4,7 @@ import { DataSourceResponse, UmbDataSource } from '@umbraco-cms/backoffice/repos //TODO Pass proper models export class UmbPartialViewDetailServerDataSource - implements UmbDataSource + implements UmbDataSource { #host: UmbControllerHostElement; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts index 6ca9e554da..8ef71f1017 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/repository/sources/partial-views.tree.server.data.ts @@ -25,7 +25,7 @@ export class UmbPartialViewsTreeServerDataSource implements PartialViewsTreeData }) { if (!path) { const error: ProblemDetailsModel = { title: 'Path is missing' }; - return { error }; + return error ; } return tryExecuteAndNotify( @@ -41,7 +41,7 @@ export class UmbPartialViewsTreeServerDataSource implements PartialViewsTreeData async getItem(id: Array) { if (!id) { const error: ProblemDetailsModel = { title: 'Paths are missing' }; - return { error }; + return error ; } return tryExecuteAndNotify( diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts index a4d9cffda8..bad84fac40 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/tree/manifests.ts @@ -16,7 +16,7 @@ const treeItem: ManifestTreeItem = { alias: 'Umb.TreeItem.PartialViews', name: 'Partial Views Tree Item', conditions: { - entityType: PARTIAL_VIEW_ENTITY_TYPE, + entityTypes: [PARTIAL_VIEW_ENTITY_TYPE], }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/manifests.ts index 0b950b01a2..ea7c35fe95 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/manifests.ts @@ -1,9 +1,5 @@ import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace'; -import type { - ManifestWorkspace, - ManifestWorkspaceAction, - ManifestWorkspaceView, -} from '@umbraco-cms/backoffice/extensions-registry'; +import type { ManifestWorkspace, ManifestWorkspaceAction } from '@umbraco-cms/backoffice/extensions-registry'; const workspace: ManifestWorkspace = { type: 'workspace', @@ -15,8 +11,6 @@ const workspace: ManifestWorkspace = { }, }; -const workspaceViews: Array = []; - const workspaceActions: Array = [ { type: 'workspaceAction', @@ -35,4 +29,4 @@ const workspaceActions: Array = [ }, ]; -export const manifests = [workspace, ...workspaceViews, ...workspaceActions]; +export const manifests = [workspace, ...workspaceActions]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts index 5e3634b785..f88f6ea390 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/partial-views/workspace/partial-views-workspace.context.ts @@ -1,8 +1,8 @@ import { UmbTemplateRepository } from '../repository/partial-views.repository'; -import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context'; import { createObservablePart, UmbDeepState } from '@umbraco-cms/backoffice/observable-api'; import { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; +import { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace'; export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext { getEntityId(): string | undefined { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts index 9ccad083fe..12a410a67f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace-edit.element.ts @@ -2,12 +2,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html } from 'lit'; import { customElement, query, state } from 'lit/decorators.js'; import { UUIInputElement } from '@umbraco-ui/uui'; -import { UmbCodeEditorElement } from '../../../shared/components/code-editor/code-editor.element'; import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element'; +import { UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL } from '../../modals/insert-section-modal/insert-section-modal.element'; import { UmbTemplateWorkspaceContext } from './template-workspace.context'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '@umbraco-cms/backoffice/modal'; -import { UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL } from '../../modals/insert-section-modal/insert-section-modal.element'; +import { UmbCodeEditorElement } from '@umbraco-cms/backoffice/core/components'; @customElement('umb-template-workspace-edit') export class UmbTemplateWorkspaceEditElement extends UmbLitElement { From 84e4aaec6b98fe967a6094698840f3a343425e77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 10 May 2023 14:44:52 +0200 Subject: [PATCH 70/71] manifest on UmbModalExtensionElement --- .../interfaces/modal-extension-element.interface.ts | 10 ++++++++-- .../src/core/modal/modal-element.element.ts | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/interfaces/modal-extension-element.interface.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/interfaces/modal-extension-element.interface.ts index 8c7b0c398a..af019a8c5d 100644 --- a/src/Umbraco.Web.UI.Client/libs/extensions-registry/interfaces/modal-extension-element.interface.ts +++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/interfaces/modal-extension-element.interface.ts @@ -1,7 +1,13 @@ +import type { ManifestModal } from '../models'; import type { UmbModalHandler } from '@umbraco-cms/backoffice/modal'; -export interface UmbModalExtensionElement - extends HTMLElement { +export interface UmbModalExtensionElement< + UmbModalData extends object = object, + UmbModalResult = unknown, + ModalManifestType extends ManifestModal = ManifestModal +> extends HTMLElement { + manifest?: ModalManifestType; + modalHandler?: UmbModalHandler; data?: UmbModalData; diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal-element.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/modal-element.element.ts index c1d80ac36f..5b6d8b6438 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/modal-element.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/modal-element.element.ts @@ -9,7 +9,7 @@ export abstract class UmbModalBaseElement< ModalManifestType extends ManifestModal = ManifestModal > extends UmbLitElement - implements UmbModalExtensionElement + implements UmbModalExtensionElement { @property({ type: Array, attribute: false }) public manifest?: ModalManifestType; From c184c9da010162b856f083ab1cf859dbe2d875df Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 11 May 2023 09:58:38 +0200 Subject: [PATCH 71/71] bump uui peerDependencies --- src/Umbraco.Web.UI.Client/libs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/libs/package.json b/src/Umbraco.Web.UI.Client/libs/package.json index e5f1036d7d..2224fe9080 100644 --- a/src/Umbraco.Web.UI.Client/libs/package.json +++ b/src/Umbraco.Web.UI.Client/libs/package.json @@ -26,7 +26,7 @@ ], "peerDependencies": { "@types/uuid": "^9.0.1", - "@umbraco-ui/uui": "^1.2.0-rc.0", + "@umbraco-ui/uui": "1.2.1", "rxjs": "^7.8.0" }, "customElements": "custom-elements.json"