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

Bugfix: Dropdown data structure

Browse Source 
The property-editor value needs to support
both `string` and `string[]` value types.
This commit is contained in:
leekelleher
2024-03-19 10:41:39 +00:00
parent ec4ca2c9d5
commit 9afce496ed
2 changed files with 22 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts
View File

@@ -1,7 +1,8 @@
import { css, html, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
@customElement('umb-input-dropdown-list')
export class UmbInputDropdownListElement extends FormControlMixin(UmbLitElement) {
@@ -25,7 +26,7 @@ export class UmbInputDropdownListElement extends FormControlMixin(UmbLitElement)
#onChange(e: UUISelectEvent) {
e.stopPropagation();
if (e.target.value) this.value = e.target.value;
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
this.dispatchEvent(new UmbChangeEvent());
}
render() {

52
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts
View File

@@ -1,55 +1,41 @@
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
/**
* @element umb-property-editor-ui-dropdown
*/
@customElement('umb-property-editor-ui-dropdown')
export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements UmbPropertyEditorUiElement {
#value = '';
@property({ type: String })
public set value(value: string | undefined) {
this.#value = value?.trim() || '';
}
public get value(): string {
return this.#value;
}
#selection: Array<string> = [];
@state()
_multiple?: boolean;
@property({ type: Array })
public set value(value: Array<string> | string | undefined) {
this.#selection = Array.isArray(value) ? value : value ? [value] : [];
}
public get value(): Array<string> | undefined {
return this.#selection;
}
@state()
private _list: Array<Option> = [];
@state()
private _multiple?: boolean;
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const listData: string[] | undefined = config?.getValueByAlias('items');
this._list = listData?.map((x) => ({ value: x, name: x, selected: this.#selection.includes(x) })) ?? [];
this._multiple = config?.getValueByAlias('multiple');
const listData: Record<number, { value: string; sortOrder: number }> | undefined = config.getValueByAlias('items');
if (!listData) return;
// formatting the items in the dictionary into an array
const sortedItems = [];
const values = Object.values<{ value: string; sortOrder: number }>(listData);
const keys = Object.keys(listData);
for (let i = 0; i < values.length; i++) {
sortedItems.push({ key: keys[i], sortOrder: values[i].sortOrder, value: values[i].value });
}
// ensure the items are sorted by the provided sort order
sortedItems.sort((a, b) => {
return a.sortOrder > b.sortOrder ? 1 : b.sortOrder > a.sortOrder ? -1 : 0;
});
this._list = sortedItems.map((x) => ({ value: x.value, name: x.value, selected: x.value === this.value }));
}
#onChange(event: UUISelectEvent) {
this.value = event.target.value as string;
this.dispatchEvent(new CustomEvent('property-value-change'));
const value = event.target.value as string;
this.value = value ? [value] : [];
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
render() {