yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix dictionary item inserting

Browse Source
This commit is contained in:
Julia Gru
2023-05-30 11:30:23 +02:00
parent 7ccb4779c1
commit 2caa9cd888
7 changed files with 62 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts
View File

@@ -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<string | null>;
}
export type UmbDictionaryItemPickerModalData = UmbTreePickerModalData<EntityTreeItemResponseModel>;
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',
}
);

55
src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
View File

@@ -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}>
</uui-menu-item>
</li>
${this.hidePartialView
? ''
: html` <li>
<uui-menu-item
class="insert-menu-item"
label="Partial view"
title="Partial view"
@click=${this.#openInsertPartialViewSidebar}>
</uui-menu-item>
</li>`}
<li>
<uui-menu-item
class="insert-menu-item"
@@ -165,15 +162,27 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
@click=${this.#openInsertDictionaryItemModal}>
</uui-menu-item>
</li>
<li>
<!-- <li>
<uui-menu-item class="insert-menu-item" label="Macro" title="Macro"> </uui-menu-item>
</li>
</li> -->
</ul>
</umb-button-with-dropdown>
</uui-button-group>
`;
}
//TODO: put this back in when partial view is implemented
// ${this.hidePartialView
// ? ''
// : html` <li>
// <uui-menu-item
// class="insert-menu-item"
// label="Partial view"
// title="Partial view"
// @click=${this.#openInsertPartialViewSidebar}>
// </uui-menu-item>
// </li>`}
static styles = [
UUITextStyles,
css`

31
src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
View File

@@ -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.
</p></uui-button
>
${this.data?.hidePartialViews
? ''
: html`<uui-button @click=${this.#openInsertPartialViewSidebar} look="placeholder" label="Insert value"
><h3>Partial view</h3>
<p>
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.
</p></uui-button
>`}
<uui-button @click=${this._close} look="placeholder" label="Insert Macro"
><h3>Macro</h3>
<p>
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.
</p></uui-button
>
<uui-button @click=${this.#openInsertDictionaryItemModal} look="placeholder" label="Insert Dictionary item"
><h3>Dictionary item</h3>
<p>
@@ -153,6 +139,17 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
];
}
//TODO: insert this when we have partial views
// ${this.data?.hidePartialViews
// ? ''
// : html`<uui-button @click=${this.#openInsertPartialViewSidebar} look="placeholder" label="Insert value"
// ><h3>Partial view</h3>
// <p>
// 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.
// </p></uui-button
// >`}
declare global {
interface HTMLElementTagNameMap {
'umb-templating-choose-insert-type-modal': UmbChooseInsertTypeModalElement;

1
src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-edit.element.ts
View File

@@ -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);

3
src/Umbraco.Web.UI.Client/src/packages/translation/index.ts
View File

@@ -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);

88
src/Umbraco.Web.UI.Client/src/packages/translation/modals/dictionary-item-picker/dictionary-item-picker-modal.element.ts
View File

@@ -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<string | null> = [];
@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`
<umb-body-layout headline="Dictionary item">
<div id="main">
<uui-box>
<umb-tree
alias="Umb.Tree.Dictionary"
@selected=${this._handleSelectionChange}
.selection=${this._selection}
selectable></umb-tree>
</uui-box>
</div>
<div slot="actions">
<uui-button @click=${this._close} look="secondary">Close</uui-button>
</div>
</umb-body-layout>
`;
}
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;
}
}

13
src/Umbraco.Web.UI.Client/src/packages/translation/modals/manifests.ts
View File

@@ -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<ManifestModal> = [
{
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];