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] 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<