Refactored MultipleTextString value structure

The server sends a `string[]` instead of an `MultipleTextStringValueItem[]`
This commit is contained in:
leekelleher
2024-02-29 17:44:27 +00:00
parent b6fae85a83
commit ec48ad53e0
2 changed files with 9 additions and 15 deletions

View File

@@ -7,12 +7,6 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter';
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
export type MultipleTextStringValue = Array<MultipleTextStringValueItem>;
export interface MultipleTextStringValueItem {
value: string;
}
const SORTER_CONFIG: UmbSorterConfig<MultipleTextStringValueItem> = {
getUniqueOfElement: (element) => {
return element.getAttribute('data-sort-entry-id');
@@ -120,13 +114,13 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
}
@state()
private _items: MultipleTextStringValue = [];
private _items: Array<string> = [];
@property({ type: Array })
public get items(): MultipleTextStringValue {
public get items(): Array<string> {
return this._items;
}
public set items(items: MultipleTextStringValue) {
public set items(items: Array<string>) {
// TODO: when we have a way to overwrite the missing value validator we can remove this
this.value = items?.length > 0 ? 'some value' : '';
this._items = items ?? [];
@@ -146,7 +140,7 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
*/
#onAdd() {
this._items = [...this._items, { value: '' }];
this._items = [...this._items, ''];
this.pristine = false;
this.dispatchEvent(new UmbChangeEvent());
this.#focusNewItem();
@@ -156,7 +150,7 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
event.stopPropagation();
const target = event.currentTarget as UmbInputMultipleTextStringItemElement;
const value = target.value as string;
this._items = this._items.map((item, index) => (index === currentIndex ? { value } : item));
this._items = this._items.map((item, index) => (index === currentIndex ? value : item));
this.dispatchEvent(new UmbChangeEvent());
}
@@ -192,9 +186,9 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
(item, index) => index,
(item, index) =>
html` <umb-input-multiple-text-string-item
value=${item.value}
value=${item}
name="item-${index}"
data-sort-entry-id=${item.value}
data-sort-entry-id=${item}
@input=${(event: UmbInputEvent) => this.#onInput(event, index)}
@delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
?disabled=${this.disabled}

View File

@@ -4,7 +4,7 @@ import { html, customElement, property, state, ifDefined } from '@umbraco-cms/ba
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { MultipleTextStringValue, UmbInputMultipleTextStringElement } from '@umbraco-cms/backoffice/components';
import type { UmbInputMultipleTextStringElement } from '@umbraco-cms/backoffice/components';
/**
* @element umb-property-editor-ui-multiple-text-string
@@ -12,7 +12,7 @@ import type { MultipleTextStringValue, UmbInputMultipleTextStringElement } from
@customElement('umb-property-editor-ui-multiple-text-string')
export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@property({ type: Array })
public value: MultipleTextStringValue = [];
public value: Array<string> = [];
@property({ attribute: false })
public set config(config: UmbPropertyEditorConfigCollection | undefined) {