From 2caa9cd88836948729190ffbfa11f6578ab0d196 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 30 May 2023 11:30:23 +0200 Subject: [PATCH] fix dictionary item inserting --- .../dictionary-item-picker-modal.token.ts | 27 +++--- .../templating-insert-menu.element.ts | 55 +++++++----- .../insert-choose-type-sidebar.element.ts | 31 +++---- .../template-workspace-edit.element.ts | 1 + .../src/packages/translation/index.ts | 3 +- .../dictionary-item-picker-modal.element.ts | 88 ------------------- .../packages/translation/modals/manifests.ts | 13 --- 7 files changed, 62 insertions(+), 156 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/translation/modals/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts index c4c2288089..5656c74717 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts @@ -1,20 +1,21 @@ -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 UmbDictionaryItemPickerModalData { - multiple: boolean; - selection: string[]; -} - -export interface UmbDictionaryItemPickerModalResult { - selection: Array; -} +export type UmbDictionaryItemPickerModalData = UmbTreePickerModalData; +export type UmbDictionaryItemPickerModalResult = UmbPickerModalResult; 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', -}); +>( + 'Umb.Modal.TreePicker', + { + type: 'sidebar', + size: 'small', + }, + { + treeAlias: 'Umb.Tree.Dictionary', + } +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts index 1988e926ad..2b4f307cfa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts @@ -47,6 +47,7 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { } async determineInsertValue(modalResult: ChooseInsertTypeModalResult) { + debugger; const { type, value } = modalResult; switch (type) { @@ -59,7 +60,9 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { break; } case CodeSnippetType.dictionaryItem: { - this.#getDictionaryItemSnippet(value as UmbDictionaryItemPickerModalResult); + await this.#getDictionaryItemSnippet(value as UmbDictionaryItemPickerModalResult); + this.#dispatchInsertEvent(); + break; } case CodeSnippetType.macro: { @@ -88,6 +91,7 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { hidePartialView: this.hidePartialView, }); this.#openModal?.onSubmit().then((closedModal: ChooseInsertTypeModalResult) => { + debugger; this.determineInsertValue(closedModal); }); }; @@ -100,17 +104,19 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { }); } - #openInsertPartialViewSidebar() { - this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); - this.#openModal?.onSubmit().then((value) => { - this.#getPartialViewSnippet(value).then(() => { - this.#dispatchInsertEvent(); - }); - }); - } + // #openInsertPartialViewSidebar() { + // this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); + // this.#openModal?.onSubmit().then((value) => { + // this.#getPartialViewSnippet(value).then(() => { + // this.#dispatchInsertEvent(); + // }); + // }); + // } #openInsertDictionaryItemModal() { - this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL); + this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, { + pickableFilter: (item) => item.id !== null, + }); this.#openModal?.onSubmit().then((value) => { this.#getDictionaryItemSnippet(value).then(() => { this.#dispatchInsertEvent(); @@ -119,7 +125,7 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { } #dispatchInsertEvent() { - this.dispatchEvent(new CustomEvent('insert', { bubbles: true, cancelable: true, composed: false })); + this.dispatchEvent(new CustomEvent('insert', { bubbles: false, cancelable: true, composed: false })); } @property() @@ -147,16 +153,7 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { @click=${this.#openInsertValueSidebar}> - ${this.hidePartialView - ? '' - : html`
  • - - -
    • `} +
    • -
  • + `; } + //TODO: put this back in when partial view is implemented + // ${this.hidePartialView + // ? '' + // : html`
  • + // + // + //
    • `} + static styles = [ UUITextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts index ce08094cd2..69236b884f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts @@ -74,9 +74,10 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement } #openInsertDictionaryItemModal() { - this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL); + this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {pickableFilter: item => item.id !== null}); this.#openModal?.onSubmit().then((dictionaryItemPickerModalResult) => { if (dictionaryItemPickerModalResult) + debugger; this.modalHandler?.submit({ value: dictionaryItemPickerModalResult, type: CodeSnippetType.dictionaryItem }); }); } @@ -93,22 +94,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement 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

    @@ -153,6 +139,17 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement ]; } +//TODO: insert this when we have partial views +// ${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. +//

    `} + declare global { interface HTMLElementTagNameMap { 'umb-templating-choose-insert-type-modal': UmbChooseInsertTypeModalElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-edit.element.ts index 37684a6a54..d251cab97a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-edit.element.ts @@ -75,6 +75,7 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement { } #insertSnippet(event: Event) { + debugger; const target = event.target as UmbTemplatingInsertMenuElement; const value = target.value as string; this._codeEditor?.insert(value); diff --git a/src/Umbraco.Web.UI.Client/src/packages/translation/index.ts b/src/Umbraco.Web.UI.Client/src/packages/translation/index.ts index 117757d292..292ffef21b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/translation/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/translation/index.ts @@ -1,10 +1,9 @@ import { manifests as translationSectionManifests } from './section.manifest.js'; import { manifests as dictionaryManifests } from './dictionary/manifests.js'; -import { manifests as modalManifests } from './modals/manifests.js'; import { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api'; -export const manifests = [...modalManifests, ...translationSectionManifests, ...dictionaryManifests]; +export const manifests = [...translationSectionManifests, ...dictionaryManifests]; export const onInit: UmbEntryPointOnInit = (_host, extensionRegistry) => { extensionRegistry.registerMany(manifests); diff --git a/src/Umbraco.Web.UI.Client/src/packages/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts deleted file mode 100644 index e5fababba6..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; -import { css, html , customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTreeElement } from '@umbraco-cms/backoffice/tree'; -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 -> { - @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 -
    -     - `; - } - - 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 { - interface HTMLElementTagNameMap { - 'umb-dictionary-item-picker-modal': UmbDictionaryItemPickerModalElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/translation/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/translation/modals/manifests.ts deleted file mode 100644 index 12ab2ad5c1..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/translation/modals/manifests.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { ManifestModal } from '@umbraco-cms/backoffice/extension-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.js'), - }, -]; - -export const manifests = [...modals];