make checkbox list follow old backoffice data model

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts

@@ -21,21 +21,21 @@ export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement)
 	 * List of items.
 	 */
 	@property()
-	list?: [];
+	public list: Array<{ key: string; checked: boolean; value: string }> = [];
 
-	private _selectedKeys: Array<string> = [];
-	public get selectedKeys(): Array<string> {
-		return this._selectedKeys;
+	private _selected: Array<string> = [];
+	public get selected(): Array<string> {
+		return this._selected;
 	}
-	public set selectedKeys(keys: Array<string>) {
-		this._selectedKeys = keys;
+	public set selected(keys: Array<string>) {
+		this._selected = keys;
 		super.value = keys.join(',');
 	}
 
 	@property()
 	public set value(keysString: string) {
 		if (keysString !== this._value) {
-			this.selectedKeys = keysString.split(/[ ,]+/);
+			this.selected = keysString.split(/[ ,]+/);
 		}
 	}
 
@@ -45,17 +45,17 @@ export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement)
 
 	private _setSelection(e: UUIBooleanInputEvent) {
 		e.stopPropagation();
-		if (e.target.checked) this.selectedKeys = [...this.selectedKeys, e.target.value];
-		else this._removeFromSelection(this.selectedKeys.findIndex((key) => e.target.value === key));
+		if (e.target.checked) this.selected = [...this.selected, e.target.value];
+		else this._removeFromSelection(this.selected.findIndex((key) => e.target.value === key));
 
 		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
 	}
 
 	private _removeFromSelection(index: number) {
 		if (index == -1) return;
-		const keys = [...this.selectedKeys];
+		const keys = [...this.selected];
 		keys.splice(index, 1);
-		this.selectedKeys = keys;
+		this.selected = keys;
 	}
 
 	render() {
@@ -67,8 +67,8 @@ export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement)
 		</form>`;
 	}
 
-	renderCheckbox(item: any) {
-		return html`<uui-checkbox value="${item.key}" label="${item.label}"></uui-checkbox>`;
+	renderCheckbox(item: { key: string; checked: boolean; value: string }) {
+		return html`<uui-checkbox value="${item.value}" label="${item.value}" ?checked="${item.checked}"></uui-checkbox>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts

@@ -24,21 +24,37 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement {
 
 	@property({ type: Array, attribute: false })
 	public set config(config: Array<DataTypePropertyModel>) {
-		const listData = config.find((x) => x.alias === 'itemList');
+		const listData = config.find((x) => x.alias === 'items');
 
 		if (!listData) return;
-		this._list = listData.value;
+
+		// formatting the items in the dictionary into an array
+		const sortedItems = [];
+		const values = Object.values<{ value: string; sortOrder: number }>(listData.value);
+		const keys = Object.keys(listData.value);
+		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;
+		});
+
+		console.log('sortedItems', sortedItems, 'value', this._value);
+
+		this._list = sortedItems.map((x) => ({ key: x.key, checked: this._value.includes(x.value), value: x.value }));
 	}
 
 	@state()
-	private _list: [] = [];
+	private _list: Array<{ key: string; checked: boolean; value: string }> = [];
 
 	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbInputCheckboxListElement).selectedKeys;
+		this.value = (event.target as UmbInputCheckboxListElement).selected;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
 	render() {
+		console.log('list', this._list);
 		return html`<umb-input-checkbox-list
 			@change="${this._onChange}"
 			.selectedKeys="${this._value}"

src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts

@@ -218,11 +218,12 @@ export const data: Array<DataTypeModel> = [
 		propertyEditorUiAlias: 'Umb.PropertyEditorUI.CheckboxList',
 		data: [
 			{
-				alias: 'itemList',
-				value: [
-					{ label: 'Label 1', key: '123' },
-					{ label: 'Label 2', key: '456' },
-				],
+				alias: 'items',
+				value: {
+					0: { sortOrder: 1, value: 'First Option' },
+					1: { sortOrder: 2, value: 'Second Option' },
+					2: { sortOrder: 3, value: 'I Am the third Option' },
+				},
 			},
 		],
 	},