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

selectedKeys

Browse Source
This commit is contained in:
Niels Lyngsø
2023-01-11 15:26:14 +01:00
parent 34e305814c
commit 206bb397d5
3 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
View File

@@ -36,7 +36,7 @@ export class UmbDocumentWorkspaceElement extends UmbLitElement implements UmbWor
}
private _workspaceContext: UmbWorkspaceDocumentContext = new UmbWorkspaceDocumentContext(this);
render() {
return html`<umb-workspace-content alias="Umb.Workspace.Document"></umb-workspace-content>`;
}

34
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
View File

@@ -20,21 +20,21 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
`,
];
private _pickedKeysArray: Array<string> = [];
private get _pickedKeys(): Array<string> {
return this._pickedKeysArray;
private _selectedKeys: Array<string> = [];
public get selectedKeys(): Array<string> {
return this._selectedKeys;
}
private set _pickedKeys(keys: Array<string>) {
this._pickedKeysArray = keys;
this._value = keys.join(',');
public set selectedKeys(keys: Array<string>) {
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<string>) {
this._pickedKeys = newValue;
private _setSelection(newSelection: Array<string>) {
this.selectedKeys = newSelection;
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
}

15
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts
View File

@@ -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<string> = [];
@property({ type: Array })
private value: Array<string> = [];
public get value(): Array<string> {
return this._value;
}
public set value(value: Array<string>) {
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`
<umb-input-document-picker @change=${this._onChange} .value=${this.value}>Add</umb-input-document-picker>
<umb-input-document-picker @change=${this._onChange} .selectedKeys=${this._value}>Add</umb-input-document-picker>
`;
}