From 206bb397d53eb53aa984e4ccb5101e434a803aec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 11 Jan 2023 15:26:14 +0100 Subject: [PATCH] selectedKeys --- .../workspace/document-workspace.element.ts | 2 +- .../input-document-picker.element.ts | 34 +++++++++---------- ...perty-editor-ui-document-picker.element.ts | 15 +++++--- 3 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts index 82a847c010..7f3f28b048 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts @@ -36,7 +36,7 @@ export class UmbDocumentWorkspaceElement extends UmbLitElement implements UmbWor } private _workspaceContext: UmbWorkspaceDocumentContext = new UmbWorkspaceDocumentContext(this); - + render() { return html``; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts index 0001d19931..547ba89ca4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts @@ -20,21 +20,21 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen `, ]; - private _pickedKeysArray: Array = []; - private get _pickedKeys(): Array { - return this._pickedKeysArray; + private _selectedKeys: Array = []; + public get selectedKeys(): Array { + return this._selectedKeys; } - private set _pickedKeys(keys: Array) { - this._pickedKeysArray = keys; - this._value = keys.join(','); + public set selectedKeys(keys: Array) { + console.log("selectedKeys", keys); + this._selectedKeys = keys; + super.value = keys.join(','); this._observePickedDocuments(); } - @property({ type: String }) + @property() public set value(keysString: string) { if(keysString !== this._value) { - super.value = keysString; - this._pickedKeys = keysString.split(/[ ,]+/); + this.selectedKeys = keysString.split(/[ ,]+/); } } @@ -71,16 +71,16 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen if (!this._documentStore) return; // TODO: consider changing this to the list data endpoint when it is available - this._pickedItemsObserver = this.observe(this._documentStore.getTreeItems(this._pickedKeysArray), (items) => { + this._pickedItemsObserver = this.observe(this._documentStore.getTreeItems(this._selectedKeys), (items) => { this._items = items; }); } private _openPicker() { - // We send a shallow copy(good enough as its just an array of keys) of our this._pickedKeysArray, as we don't want the modal to manipulate our data: - const modalHandler = this._modalService?.contentPicker({ multiple: true, selection: [...this._pickedKeysArray] }); + // We send a shallow copy(good enough as its just an array of keys) of our this._selectedKeys, as we don't want the modal to manipulate our data: + const modalHandler = this._modalService?.contentPicker({ multiple: true, selection: [...this._selectedKeys] }); modalHandler?.onClose().then(({ selection }: any) => { - this._setValue(selection); + this._setSelection(selection); }); } @@ -94,14 +94,14 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen modalHandler?.onClose().then(({ confirmed }) => { if (confirmed) { - const newValue = this._pickedKeys.filter((value) => value !== item.key); - this._setValue(newValue); + const newSelection = this._selectedKeys.filter((value) => value !== item.key); + this._setSelection(newSelection); } }); } - private _setValue(newValue: Array) { - this._pickedKeys = newValue; + private _setSelection(newSelection: Array) { + this.selectedKeys = newSelection; this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts index 478725c29f..c1f0c82bcc 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts @@ -1,5 +1,5 @@ import { html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { ChangeEvent } from 'react'; import { UmbLitElement } from '@umbraco-cms/element'; // eslint-disable-next-line import/no-named-as-default @@ -18,23 +18,30 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement { ]; */ + private _value: Array = []; @property({ type: Array }) - private value: Array = []; + public get value(): Array { + return this._value; + } + public set value(value: Array) { + console.log("property editor got value", value) + this._value = value || []; + } // TODO: Use config for something. @property({ type: Array, attribute: false }) public config = []; private _onChange(event: ChangeEvent) { - this.value = (event.target as UmbInputDocumentPickerElement).value; + this.value = (event.target as UmbInputDocumentPickerElement).selectedKeys; this.dispatchEvent(new CustomEvent('property-value-change')); } render() { return html` - Add + Add `; }