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

[WIP] Dynamic Root

Browse Source
This commit is contained in:
leekelleher
2024-01-18 17:07:37 +00:00
parent 78b587a0eb
commit eeca7ee485
13 changed files with 158 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/package.json
View File

@@ -62,6 +62,7 @@
"./member-type": "./dist-cms/packages/members/member-types/index.js",
"./package": "./dist-cms/packages/packages/package/index.js",
"./data-type": "./dist-cms/packages/core/data-type/index.js",
"./dynamic-root": "./dist-cms/packages/dynamic-root/index.js",
"./language": "./dist-cms/packages/settings/languages/index.js",
"./logviewer": "./dist-cms/packages/settings/logviewer/index.js",
"./relation-type": "./dist-cms/packages/relations/relation-types/index.js",

1
src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
View File

@@ -30,6 +30,7 @@ const CORE_PACKAGES = [
import('../../packages/log-viewer/umbraco-package.js'),
import('../../packages/health-check/umbraco-package.js'),
import('../../packages/static-file/umbraco-package.js'),
import('../../packages/dynamic-root/umbraco-package.js'),
];
@customElement('umb-backoffice')

93
src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.ts
View File

@@ -1,8 +1,14 @@
import { UmbDocumentPickerContext } from '../input-document/input-document.context.js';
import { UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL } from '@umbraco-cms/backoffice/dynamic-root';
import { html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DocumentItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
import {
UMB_MODAL_MANAGER_CONTEXT_TOKEN,
UmbModalContext,
UmbModalManagerContext,
} from '@umbraco-cms/backoffice/modal';
@customElement('umb-input-document-picker-root')
export class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitElement) {
@@ -24,16 +30,17 @@ export class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitEl
#documentPickerContext = new UmbDocumentPickerContext(this);
// TODO: DynamicRoot - once feature implemented, wire up context and picker UI. [LK]
#dynamicRootPickerContext = {
openPicker: () => {
throw new Error('DynamicRoot picker has not been implemented yet.');
},
};
private _modalContext?: UmbModalManagerContext;
#openModal?: UmbModalContext;
constructor() {
super();
this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
this._modalContext = instance;
});
this.#documentPickerContext.max = 1;
this.observe(this.#documentPickerContext.selection, (selection) => (super.value = selection.join(',')));
@@ -44,55 +51,79 @@ export class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitEl
return undefined;
}
#openDocumentPicker() {
this.#documentPickerContext.openPicker({
hideTreeRoot: true,
});
}
#openDynamicRootPicker() {
this.#openModal = this._modalContext?.open(UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL, {
data: { testing: 123 },
});
this.#openModal?.onSubmit().then((data) => {
console.log('openDynamicRootPicker.onSubmit', data);
});
}
render() {
return html`
${this._items
? html` <uui-ref-list
>${repeat(
this._items,
(item) => item.id,
(item) => this._renderItem(item),
)}
</uui-ref-list>`
: ''}
${this.#renderButtons()}
`;
return html`${this.#renderButtons()} ${this.#renderItems()}`;
}
#renderButtons() {
if (this.nodeId) return;
//TODO: Dynamic paths
return html` <uui-button-group>
return html`<uui-button-group>
<uui-button
look="placeholder"
@click=${() => this.#documentPickerContext.openPicker()}
@click=${this.#openDocumentPicker}
label=${this.localize.term('contentPicker_defineRootNode')}></uui-button>
<uui-button
look="placeholder"
@click=${() => this.#dynamicRootPickerContext.openPicker()}
@click=${this.#openDynamicRootPicker}
label=${this.localize.term('contentPicker_defineDynamicRoot')}></uui-button>
</uui-button-group>`;
}
private _renderItem(item: DocumentItemResponseModel) {
#renderItems() {
if (!this._items) return;
return html`<uui-ref-list>
${repeat(
this._items,
(item) => item.id,
(item) => this.#renderItem(item),
)}
</uui-ref-list>`;
}
#renderItem(item: DocumentItemResponseModel) {
if (!item.id) return;
return html`
<uui-ref-node name=${ifDefined(item.name)} detail=${ifDefined(item.id)}>
<!-- TODO: implement is trashed <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->
${this.#renderIcon(item)}
${this.#renderIsTrashed(item)}
<uui-action-bar slot="actions">
<uui-button @click=${() => this.#documentPickerContext.openPicker()} label="Edit document ${item.name}"
>Edit</uui-button
>
<uui-button @click=${this.#openDocumentPicker} label="Edit document ${item.name}">
${this.localize.term('general_edit')}
</uui-button>
<uui-button
@click=${() => this.#documentPickerContext.requestRemoveItem(item.id!)}
label="Remove document ${item.name}"
>Remove</uui-button
>
label="Remove document ${item.name}">
${this.localize.term('general_remove')}
</uui-button>
</uui-action-bar>
</uui-ref-node>
`;
}
#renderIcon(item: DocumentItemResponseModel) {
if (!item.icon) return;
return html`<uui-icon slot="icon" name=${item.icon}></uui-icon>`;
}
#renderIsTrashed(item: DocumentItemResponseModel) {
if (!item.isTrashed) return;
return html`<uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag>`;
}
}
export default UmbInputDocumentPickerRootElement;

2
src/Umbraco.Web.UI.Client/src/packages/dynamic-root/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './modals/index.js';
export * from './repository/index.js';

7
src/Umbraco.Web.UI.Client/src/packages/dynamic-root/manifests.ts Normal file
View File

@@ -0,0 +1,7 @@
import { manifests as modalManifests } from './modals/manifests.js';
import { manifests as repositoryManifests } from './repository/manifests.js';
export const manifests = [
...modalManifests,
...repositoryManifests,
];

47
src/Umbraco.Web.UI.Client/src/packages/dynamic-root/modals/dynamic-root-origin-picker-modal.element.ts Normal file
View File

@@ -0,0 +1,47 @@
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
import {
UMB_MODAL_MANAGER_CONTEXT_TOKEN,
UmbModalManagerContext,
UmbModalBaseElement,
} from '@umbraco-cms/backoffice/modal';
@customElement('umb-dynamic-root-origin-picker-modal')
export class UmbDynamicRootOriginPickerModalModalElement extends UmbModalBaseElement {
private _modalContext?: UmbModalManagerContext;
constructor() {
super();
this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
this._modalContext = instance;
});
}
#close() {
this.modalContext?.reject();
}
render() {
return html`
<umb-body-layout headline="Insert">
<div id="main">
<h3>DynamicRoot Origin Picker Modal</h3>
<!-- TODO: List the Dynamic Root origins. [LK] -->
</div>
<div slot="actions">
<uui-button @click=${this.#close} look="secondary" label="Close">Close</uui-button>
</div>
</umb-body-layout>
`;
}
static styles = [UmbTextStyles, css``];
}
export default UmbDynamicRootOriginPickerModalModalElement;
declare global {
interface HTMLElementTagNameMap {
'umb-dynamic-root-origin-picker-modal': UmbDynamicRootOriginPickerModalModalElement;
}
}

9
src/Umbraco.Web.UI.Client/src/packages/dynamic-root/modals/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import { UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL_ALIAS } from './manifests.js';
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
export const UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL = new UmbModalToken(UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL_ALIAS, {
modal: {
type: 'sidebar',
size: 'small',
},
});

14
src/Umbraco.Web.UI.Client/src/packages/dynamic-root/modals/manifests.ts Normal file
View File

@@ -0,0 +1,14 @@
import { ManifestModal } from '@umbraco-cms/backoffice/extension-registry';
export const UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL_ALIAS = 'Umb.Modal.DynamicRoot.OriginPicker';
const modals: Array<ManifestModal> = [
{
type: 'modal',
alias: UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL_ALIAS,
name: 'Choose an origin',
js: () => import('./dynamic-root-origin-picker-modal.element.js'),
},
];
export const manifests = [...modals];

1
src/Umbraco.Web.UI.Client/src/packages/dynamic-root/repository/index.ts Normal file
View File

@@ -0,0 +1 @@
export { UMB_DYNAMIC_ROOT_REPOSITORY_ALIAS } from './manifests.js';

3
src/Umbraco.Web.UI.Client/src/packages/dynamic-root/repository/manifests.ts Normal file
View File

@@ -0,0 +1,3 @@
export const UMB_DYNAMIC_ROOT_REPOSITORY_ALIAS = 'Umb.Repository.DynamicRoot';
export const manifests = [];

9
src/Umbraco.Web.UI.Client/src/packages/dynamic-root/umbraco-package.ts Normal file
View File

@@ -0,0 +1,9 @@
export const name = 'Umbraco.Core.DynamicRoot';
export const extensions = [
{
name: 'Dynamic Root Bundle',
alias: 'Umb.Bundle.DynamicRoot',
type: 'bundle',
js: () => import('./manifests.js'),
},
];

1
src/Umbraco.Web.UI.Client/tsconfig.json
View File

@@ -92,6 +92,7 @@
"@umbraco-cms/backoffice/temporary-file": ["src/packages/core/temporary-file"],
"@umbraco-cms/backoffice/data-type": ["./src/packages/core/data-type/index.ts"],
"@umbraco-cms/backoffice/dynamic-root": ["./src/packages/dynamic-root/index.ts"],
"@umbraco-cms/backoffice/language": ["./src/packages/settings/languages/index.ts"],
"@umbraco-cms/backoffice/logviewer": ["src/packages/log-viewer/index.ts"],
"@umbraco-cms/backoffice/relation-types": ["src/packages/relations/relation-types/index.ts"],

1
src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
View File

@@ -107,6 +107,7 @@ export default {
'@umbraco-cms/backoffice/package': './src/packages/packages/package/index.ts',
'@umbraco-cms/backoffice/data-type': './src/packages/core/data-type/index.ts',
'@umbraco-cms/backoffice/dynamic-root': './src/packages/dynamic-root/index.ts',
'@umbraco-cms/backoffice/language': './src/packages/settings/languages/index.ts',
'@umbraco-cms/backoffice/logviewer': './src/packages/settings/logviewer/index.ts',
'@umbraco-cms/backoffice/relation-type': './src/packages/relations/relation-types/index.ts',