From 995d6de20d7daeb2cee52470cde651f67d60e46f Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 4 Apr 2024 11:22:56 +0100 Subject: [PATCH] Package Builder: Template Picker --- .../document-workspace-view-info.element.ts | 1 - .../workspace-package-builder.element.ts | 27 +++++++++++++++---- .../input-template/input-template.context.ts | 13 +++++++++ .../input-template/input-template.element.ts | 1 - .../modals/template-picker-modal.token.ts | 3 ++- .../template-workspace-editor.element.ts | 1 - 6 files changed, 37 insertions(+), 9 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts index 851b75d8cb..a4b89a5671 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts @@ -277,7 +277,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement { const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); const modal = modalManager.open(this, UMB_TEMPLATE_PICKER_MODAL, { data: { - hideTreeRoot: true, multiple: false, pickableFilter: (template) => this._allowedTemplates?.find((allowed) => template.unique === allowed.id) ? true : false, diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts index d66d9cd4d7..2db1e739f7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts @@ -1,6 +1,7 @@ import { UmbDictionaryPickerContext } from '../../../dictionary/components/input-dictionary/input-dictionary.context.js'; import { UmbMediaPickerContext } from '../../../media/media/components/input-media/input-media.context.js'; import { UmbPackageRepository } from '../../package/repository/index.js'; +import { UmbTemplatePickerContext } from '../../../templating/templates/components/input-template/input-template.context.js'; import type { UmbCreatedPackageDefinition } from '../../types.js'; import type { UmbDataTypeInputElement } from '../../../data-type/components/data-type-input/data-type-input.element.js'; import type { UmbInputLanguageElement } from '../../../language/components/input-language/input-language.element.js'; @@ -183,8 +184,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement { ${this.#renderLanguageSection()} ${this.#renderDictionarySection()} ${this.#renderDataTypeSection()} - - ${this.#renderTemplateSection()} + ${this.#renderTemplateSection()} ${this.#renderStylesheetsSection()} @@ -347,10 +347,27 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement { `; } + #onTemplateChange(event: { target: UmbInputEntityElement }) { + if (!this._package) return; + + this._package.templates = event.target.selection ?? []; + this.requestUpdate('_package'); + } + #renderTemplateSection() { - return html`
- -
`; + if (!this._package) return nothing; + return html` + +
+ 'icon-newspaper'} + .pickerContext=${UmbTemplatePickerContext} + .selection=${this._package.templates ?? []} + @change=${this.#onTemplateChange}> + +
+ + `; } #renderStylesheetsSection() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.context.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.context.ts new file mode 100644 index 0000000000..6f70a59783 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.context.ts @@ -0,0 +1,13 @@ +import { UMB_TEMPLATE_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js'; +import { UMB_TEMPLATE_PICKER_MODAL } from '../../modals/template-picker-modal.token.js'; +import type { UmbTemplateItemModel } from '../../repository/index.js'; +import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbTemplatePickerContext extends UmbPickerInputContext { + constructor(host: UmbControllerHost) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + super(host, UMB_TEMPLATE_ITEM_REPOSITORY_ALIAS, UMB_TEMPLATE_PICKER_MODAL); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts index 7abec0e1cb..52fda1981e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts @@ -129,7 +129,6 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) { const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); const modalContext = modalManager.open(this, UMB_TEMPLATE_PICKER_MODAL, { data: { - hideTreeRoot: true, multiple: true, pickableFilter: (template) => template.unique !== null && !this._selection.includes(template.unique), }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/template-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/template-picker-modal.token.ts index dce7a3f9d8..7778661df7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/template-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/template-picker-modal.token.ts @@ -1,4 +1,4 @@ -import { UmbModalToken } from '../../../core/modal/token/modal-token.js'; +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; import type { UmbPickerModalValue, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal'; import type { UmbTemplateTreeItemModel } from '@umbraco-cms/backoffice/template'; @@ -13,6 +13,7 @@ export const UMB_TEMPLATE_PICKER_MODAL = new UmbModalToken { return item.unique !== null && item.unique !== this.#templateWorkspaceContext?.getUnique(); },