From 031a976ac5ab11e140df504a318bd98b9f2d6629 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 19 Mar 2024 09:14:17 +0000 Subject: [PATCH] Bugfix: CheckboxList data structure --- .../input-checkbox-list.element.ts | 52 +++++++++---------- ...roperty-editor-ui-checkbox-list.element.ts | 43 ++++++--------- 2 files changed, 42 insertions(+), 53 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/input-checkbox-list/input-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/input-checkbox-list/input-checkbox-list.element.ts index 90a4b31cdb..752bb76eb7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/input-checkbox-list/input-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/input-checkbox-list/input-checkbox-list.element.ts @@ -1,64 +1,64 @@ -import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { css, html, nothing, repeat, customElement, property } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIBooleanInputEvent } 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 { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-input-checkbox-list') export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement) { - /** - * List of items. - */ - // TODO: Could this use a type that we export to ensure TS failure, or hook this up with a type coming from backend? + // TODO: Could this use a type that we export to ensure TS failure, or hook this up with a type coming from backend? @property({ attribute: false }) - public list: Array<{ key: string; checked: boolean; value: string }> = []; + public list: Array<{ label: string; value: string; checked: boolean }> = []; - #selected: Array = []; - public get selected(): Array { - return this.#selected; - } - public set selected(keys: Array) { - this.#selected = keys; + #selection: Array = []; + @property({ type: Array }) + public set selection(keys: Array) { + this.#selection = keys; super.value = keys.join(','); } + public get selection(): Array { + return this.#selection; + } @property() - public set value(keysString: string) { - if (keysString !== this._value) { - this.selected = keysString.split(/[ ,]+/); - } + public set value(value: string) { + this.selection = value.split(','); } protected getFormElement() { return undefined; } - #setSelection(e: UUIBooleanInputEvent) { + #onChange(e: UUIBooleanInputEvent) { e.stopPropagation(); - if (e.target.checked) this.selected = [...this.selected, e.target.value]; - else this.#removeFromSelection(this.selected.findIndex((key) => e.target.value === key)); + if (e.target.checked) this.selection = [...this.selection, e.target.value]; + else this.#removeFromSelection(this.selection.findIndex((key) => e.target.value === key)); this.dispatchEvent(new UmbChangeEvent()); } #removeFromSelection(index: number) { if (index == -1) return; - const keys = [...this.selected]; + const keys = [...this.selection]; keys.splice(index, 1); - this.selected = keys; + this.selection = keys; } render() { if (!this.list) return nothing; return html`
- - ${repeat(this.list, (item) => item.key, this.renderCheckbox)} + + ${repeat( + this.list, + (item) => item.value, + (item) => this.#renderCheckbox(item), + )} `; } - renderCheckbox(item: { key: string; checked: boolean; value: string }) { - return html``; + #renderCheckbox(item: (typeof this.list)[0]) { + return html``; } static styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts index 491688eb1b..7f78f66b71 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts @@ -1,9 +1,11 @@ import type { UmbInputCheckboxListElement } from './input-checkbox-list/input-checkbox-list.element.js'; -import './input-checkbox-list/input-checkbox-list.element.js'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; 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 './input-checkbox-list/input-checkbox-list.element.js'; /** * @element umb-property-editor-ui-checkbox-list @@ -20,39 +22,26 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem } public set config(config: UmbPropertyEditorConfigCollection | undefined) { - if (!config) return; - const listData: Record | 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) => ({ key: x.key, checked: this.#value.includes(x.value), value: x.value })); + const listData: string[] | undefined = config?.getValueByAlias('items'); + this._list = listData?.map((item) => ({ label: item, value: item, checked: this.#value.includes(item) })) ?? []; } @state() - private _list: Array<{ key: string; checked: boolean; value: string }> = []; + private _list: UmbInputCheckboxListElement['list'] = []; #onChange(event: CustomEvent) { - this.value = (event.target as UmbInputCheckboxListElement).selected; - this.dispatchEvent(new CustomEvent('property-value-change')); + const element = event.target as UmbInputCheckboxListElement; + this.value = element.selection; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); } render() { - return html``; + return html` + + `; } }