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

Entity Picker - adds getIcon property/method

Browse Source
This commit is contained in:
leekelleher
2024-04-04 11:32:37 +01:00
parent ce14e013d9
commit 72d58ed6db
1 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/Umbraco.Web.UI.Client/src/packages/core/components/input-entity/input-entity.element.ts
View File

@@ -16,6 +16,8 @@ import type { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input
@customElement('umb-input-entity')
export class UmbInputEntityElement extends FormControlMixin(UmbLitElement) {
// TODO: [LK] Add sort ordering.
protected getFormElement() {
return undefined;
}
@@ -42,6 +44,9 @@ export class UmbInputEntityElement extends FormControlMixin(UmbLitElement) {
return this.#pickerContext?.max ?? Infinity;
}
@property({ attribute: false })
getIcon?: (item: any) => string;
@property({ type: String, attribute: 'min-message' })
maxMessage = 'This field exceeds the allowed amount of items';
@@ -53,14 +58,12 @@ export class UmbInputEntityElement extends FormControlMixin(UmbLitElement) {
return this.selection?.join(',') ?? '';
}
@property({ attribute: false })
public set pickerContext(ctor: new (host: UmbControllerHost) => UmbPickerInputContext<any>) {
if (this.#pickerContext) return;
this.#pickerContext = new ctor(this);
this.#observePickerContext();
}
public get pickerContext(): UmbPickerInputContext<any> | undefined {
return this.#pickerContext;
}
#pickerContext?: UmbPickerInputContext<any>;
public set selection(value: Array<string>) {
@@ -78,23 +81,23 @@ export class UmbInputEntityElement extends FormControlMixin(UmbLitElement) {
super();
}
// connectedCallback() {
// super.connectedCallback();
connectedCallback() {
super.connectedCallback();
// if (!this.#pickerContext) return;
if (!this.#pickerContext) return;
// this.addValidator(
// 'rangeUnderflow',
// () => this.minMessage,
// () => !!this.min && this.#pickerContext.getSelection().length < this.min,
// );
this.addValidator(
'rangeUnderflow',
() => this.minMessage,
() => !!this.min && (this.#pickerContext?.getSelection().length ?? 0) < this.min,
);
// this.addValidator(
// 'rangeOverflow',
// () => this.maxMessage,
// () => !!this.max && this.#pickerContext.getSelection().length > this.max,
// );
// }
this.addValidator(
'rangeOverflow',
() => this.maxMessage,
() => !!this.max && (this.#pickerContext?.getSelection().length ?? 0) > this.max,
);
}
async #observePickerContext() {
if (!this.#pickerContext) return;
@@ -121,7 +124,7 @@ export class UmbInputEntityElement extends FormControlMixin(UmbLitElement) {
}
render() {
return html` ${this.#renderItems()} ${this.#renderAddButton()} `;
return html`${this.#renderItems()} ${this.#renderAddButton()}`;
}
#renderAddButton() {
@@ -150,9 +153,10 @@ export class UmbInputEntityElement extends FormControlMixin(UmbLitElement) {
#renderItem(item: any) {
if (!item.unique) return;
const icon = this.getIcon?.(item) ?? item.icon;
return html`
<uui-ref-node name=${ifDefined(item.name)}>
${when(item.icon, () => html`<umb-icon slot="icon" name=${item.icon}></umb-icon>`)}
${when(icon, () => html`<umb-icon slot="icon" name=${icon}></umb-icon>`)}
<uui-action-bar slot="actions">
<uui-button
@click=${() => this.#pickerContext?.requestRemoveItem(item.unique)}