From 31465b38660a92c5215ec0f8ffabcbebdf24751b Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 19 Dec 2023 16:11:36 +0000 Subject: [PATCH 1/7] Added `input-document-source` element This is different to `input-document` as it will also contain the DynamicRoot functionality. --- .../documents/documents/components/index.ts | 1 + .../input-document-source.element.ts | 108 ++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts index a644a4c547..ce63360331 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts @@ -1,2 +1,3 @@ export * from './input-document/input-document.element.js'; export * from './input-document-granular-permission/input-document-granular-permission.element.js'; +export * from './input-document-source/input-document-source.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts new file mode 100644 index 0000000000..188d196417 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts @@ -0,0 +1,108 @@ +import { UmbDocumentPickerContext } from '../input-document/input-document.context.js'; +import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { FormControlMixin, UUIButtonElement } from '@umbraco-cms/backoffice/external/uui'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import type { DocumentItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; + +@customElement('umb-input-document-source') +export class UmbInputDocumentSourceElement extends FormControlMixin(UmbLitElement) { + public get nodeId(): string | null | undefined { + return this.#pickerContext.getSelection()[0]; + } + public set nodeId(id: string | null | undefined) { + const selection = id ? [id] : []; + this.#pickerContext.setSelection(selection); + } + + @property() + public set value(id: string) { + this.nodeId = id; + } + + @state() + private _items?: Array; + + #pickerContext = new UmbDocumentPickerContext(this); + + constructor() { + super(); + + this.#pickerContext.max = 1; + + this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(','))); + this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems)); + } + + protected getFormElement() { + return undefined; + } + + // TODO: Wire up the DynamicRoot picker feature. [LK] + private _openDynamicRootPicker(e: Event) { + console.log('openDynamicRootPicker', e); + const btn = e.target as UUIButtonElement; + btn.color = 'warning'; + btn.label = 'TODO!'; + btn.look = 'primary'; + } + + render() { + return html` + ${this._items + ? html` ${repeat( + this._items, + (item) => item.id, + (item) => this._renderItem(item), + )} + ` + : ''} + ${this.#renderButtons()} + `; + } + + #renderButtons() { + if (this.nodeId) return; + + //TODO: Dynamic paths + return html` + this.#pickerContext.openPicker()} + label=${this.localize.term('contentPicker_defineRootNode')}> + + `; + } + + private _renderItem(item: DocumentItemResponseModel) { + if (!item.id) return; + return html` + + + + this.#pickerContext.openPicker()} label="Edit document ${item.name}" + >Edit + this.#pickerContext.requestRemoveItem(item.id!)} + label="Remove document ${item.name}" + >Remove + + + `; + } + + static styles = [css``]; +} + +export default UmbInputDocumentSourceElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-input-document-source': UmbInputDocumentSourceElement; + } +} From 78715d0bfc1d41923a080f13707be35c97ee522e Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 19 Dec 2023 16:12:24 +0000 Subject: [PATCH 2/7] Added localized keys/terms for the button labels --- src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts | 2 ++ src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts index df0a6a2e45..d3b00b4443 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts @@ -1151,6 +1151,8 @@ export default { }, contentPicker: { allowedItemTypes: 'Du kan kun vælge følgende type(r) dokumenter: %0%', + defineDynamicRoot: 'Definer Dynamisk Udgangspunkt', + defineRootNode: 'Vælg udgangspunkt', pickedTrashedItem: 'Du har valgt et dokument som er slettet eller lagt i papirkurven', pickedTrashedItems: 'Du har valgt dokumenter som er slettede eller lagt i papirkurven', }, diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts index 19de39092d..cfbeba5478 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts @@ -1148,6 +1148,8 @@ export default { }, contentPicker: { allowedItemTypes: 'You can only select items of type(s): %0%', + defineDynamicRoot: 'Specify a Dynamic Root', + defineRootNode: 'Pick root node', pickedTrashedItem: 'You have picked a content item currently deleted or in the recycle bin', pickedTrashedItems: 'You have picked content items currently deleted or in the recycle bin', }, From 6a9574b18a4bd1fb8c1f4290b1ca48b231a207a9 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 19 Dec 2023 16:18:15 +0000 Subject: [PATCH 3/7] Updates to `start-node` elements to use the new `input-document-source` element. Extended the `StartNode` type to include the DynamicRoot schema. --- .../input-start-node.element.ts | 64 ++++++++++++++----- ...ditor-ui-tree-picker-start-node.element.ts | 8 ++- 2 files changed, 52 insertions(+), 20 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts index d6db6cc9c5..d5392ca592 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts @@ -1,16 +1,26 @@ -import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document'; +import { UmbInputDocumentSourceElement } from '@umbraco-cms/backoffice/document'; import { html, customElement, property, css, state } from '@umbraco-cms/backoffice/external/lit'; import { FormControlMixin, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media'; -import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +//import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; export type ContentType = 'content' | 'member' | 'media'; +export type DynamicRootQueryStepType = { + alias: string; + anyOfDocTypeKeys: Array; +}; + +export type DynamicRootType = { + originAlias: string; + querySteps?: Array | null; +}; + export type StartNode = { type?: ContentType; id?: string | null; - query?: string | null; + dynamicRoot?: DynamicRootType | null; }; @customElement('umb-input-start-node') @@ -20,14 +30,21 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) { } private _type: StartNode['type'] = 'content'; + @property() public set type(value: StartNode['type']) { + if (value === undefined) { + value = this._type; + } + const oldValue = this._type; this._options = this._options.map((option) => option.value === value ? { ...option, selected: true } : { ...option, selected: false }, ); + this._type = value; + this.requestUpdate('type', oldValue); } public get type(): StartNode['type'] { @@ -35,30 +52,43 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) { } @property({ attribute: 'node-id' }) - nodeId = ''; + nodeId?: string | null; - @property({ attribute: 'dynamic-path' }) - dynamicPath = ''; + @property({ attribute: false }) + dynamicRoot?: DynamicRootType | null; @state() _options: Array