Skip to content

Commit c573681

Browse files
leekelleherleekelleher
committed
Refactored input-content to handle min/max validation
- Added `minMessage` and `maxMessage` properties - Added `selection` property; deprecated `items` property - Removed the `switch` from `#onChange`, as the type can be inferred - Set the form control to be the nested picker, (document, media or member)
1 parent 7bc848e commit c573681

File tree

1 file changed

+69
-67
lines changed

1 file changed

+69
-67
lines changed

‎src/packages/property-editors/content-picker/components/input-content/input-content.element.ts

Lines changed: 69 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import type { UmbContentPickerSource } from '../../types.js';
2-
import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
2+
import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
33
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
44
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
5-
import type { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
6-
import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
7-
import type { UmbInputMemberElement } from '@umbraco-cms/backoffice/member';
85
import type { UmbReferenceByUniqueAndType } from '@umbraco-cms/backoffice/models';
96
import type { UmbTreeStartNode } from '@umbraco-cms/backoffice/tree';
107
import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
@@ -16,53 +13,62 @@ const elementName = 'umb-input-content';
1613
export class UmbInputContentElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
1714
UmbLitElement,
1815
) {
19-
protected override getFormElement() {
20-
return undefined;
21-
}
22-
23-
private _type: UmbContentPickerSource['type'] = 'content';
2416
@property({ type: Object, attribute: false })
2517
public set type(newType: UmbContentPickerSource['type']) {
26-
const oldType = this._type;
27-
if (newType?.toLowerCase() !== this._type) {
28-
this._type = newType?.toLowerCase() as UmbContentPickerSource['type'];
18+
const oldType = this.#type;
19+
if (newType?.toLowerCase() !== this.#type) {
20+
this.#type = newType?.toLowerCase() as UmbContentPickerSource['type'];
2921
this.requestUpdate('type', oldType);
3022
}
3123
}
3224
public get type(): UmbContentPickerSource['type'] {
33-
return this._type;
25+
return this.#type;
3426
}
27+
#type: UmbContentPickerSource['type'] = 'content';
3528

3629
@property({ type: Number })
3730
min = 0;
3831

32+
@property({ type: String, attribute: 'min-message' })
33+
minMessage = 'This field need more items';
34+
3935
@property({ type: Number })
4036
max = 0;
4137

38+
@property({ type: String, attribute: 'max-message' })
39+
maxMessage = 'This field exceeds the allowed amount of items';
40+
4241
@property({ type: Object, attribute: false })
4342
startNode?: UmbTreeStartNode;
4443

45-
private _allowedContentTypeIds: Array<string> = [];
4644
@property()
4745
public set allowedContentTypeIds(value: string) {
48-
this._allowedContentTypeIds = value ? value.split(',') : [];
46+
this.#allowedContentTypeIds = value ? value.split(',') : [];
4947
}
5048
public get allowedContentTypeIds(): string {
51-
return this._allowedContentTypeIds.join(',');
49+
return this.#allowedContentTypeIds.join(',');
5250
}
51+
#allowedContentTypeIds: Array<string> = [];
5352

5453
@property({ type: Boolean })
5554
showOpenButton?: boolean;
5655

57-
#entityTypeLookup = { content: 'document', media: 'media', member: 'member' };
56+
@property({ type: Array })
57+
public set selection(values: Array<UmbReferenceByUniqueAndType>) {
58+
this.#selection = values?.map((item) => item.unique) ?? [];
59+
}
60+
public get selection(): Array<UmbReferenceByUniqueAndType> {
61+
return this.#selection.map((id) => ({ type: this.#entityTypeLookup[this.#type], unique: id }));
62+
}
5863

59-
// TODO: to be consistent with other pickers, this should be named `selection` [NL]
64+
/** @deprecated Please use `selection` instead. This property will be removed in Umbraco 15. */
6065
@property({ type: Array })
6166
public set items(items: Array<UmbReferenceByUniqueAndType>) {
62-
this.#selection = items?.map((item) => item.unique) ?? [];
67+
this.selection = items;
6368
}
69+
/** @deprecated Please use `selection` instead. This property will be removed in Umbraco 15. */
6470
public get items(): Array<UmbReferenceByUniqueAndType> {
65-
return this.#selection.map((id) => ({ type: this.#entityTypeLookup[this._type], unique: id }));
71+
return this.selection;
6672
}
6773

6874
@property({ type: String })
@@ -73,38 +79,22 @@ export class UmbInputContentElement extends UmbFormControlMixin<string | undefin
7379
return this.#selection.length > 0 ? this.#selection.join(',') : undefined;
7480
}
7581

82+
#entityTypeLookup = { content: 'document', media: 'media', member: 'member' };
83+
7684
#selection: Array<string> = [];
7785

78-
#onChange(event: CustomEvent) {
79-
switch (this._type) {
80-
case 'content':
81-
{
82-
const input = event.target as UmbInputDocumentElement;
83-
this.#selection = input.selection;
84-
this.value = input.selection.join(',');
85-
}
86-
break;
87-
case 'media': {
88-
const input = event.target as UmbInputMediaElement;
89-
this.#selection = input.selection;
90-
this.value = input.selection.join(',');
91-
break;
92-
}
93-
case 'member': {
94-
const input = event.target as UmbInputMemberElement;
95-
this.#selection = input.selection;
96-
this.value = input.selection.join(',');
97-
break;
98-
}
99-
default:
100-
break;
101-
}
86+
override firstUpdated() {
87+
this.addFormControlElement(this.shadowRoot!.querySelector(`umb-input-${this.#entityTypeLookup[this.#type]}`)!);
88+
}
10289

90+
#onChange(event: CustomEvent & { target: { selection: string[] | undefined } }) {
91+
this.#selection = event.target.selection ?? [];
92+
this.value = this.#selection.join(',');
10393
this.dispatchEvent(new UmbChangeEvent());
10494
}
10595

10696
override render() {
107-
switch (this._type) {
97+
switch (this.#type) {
10898
case 'content':
10999
return this.#renderDocumentPicker();
110100
case 'media':
@@ -117,34 +107,46 @@ export class UmbInputContentElement extends UmbFormControlMixin<string | undefin
117107
}
118108

119109
#renderDocumentPicker() {
120-
return html`<umb-input-document
121-
.selection=${this.#selection}
122-
.startNode=${this.startNode}
123-
.allowedContentTypeIds=${this._allowedContentTypeIds}
124-
.min=${this.min}
125-
.max=${this.max}
126-
?showOpenButton=${this.showOpenButton}
127-
@change=${this.#onChange}></umb-input-document>`;
110+
return html`
111+
<umb-input-document
112+
.selection=${this.#selection}
113+
.startNode=${this.startNode}
114+
.allowedContentTypeIds=${this.#allowedContentTypeIds}
115+
.min=${this.min}
116+
.minMessage=${this.minMessage}
117+
.max=${this.max}
118+
.maxMessage=${this.maxMessage}
119+
?showOpenButton=${this.showOpenButton}
120+
@change=${this.#onChange}></umb-input-document>
121+
`;
128122
}
129123

130124
#renderMediaPicker() {
131-
return html`<umb-input-media
132-
.selection=${this.#selection}
133-
.allowedContentTypeIds=${this._allowedContentTypeIds}
134-
.min=${this.min}
135-
.max=${this.max}
136-
?showOpenButton=${this.showOpenButton}
137-
@change=${this.#onChange}></umb-input-media>`;
125+
return html`
126+
<umb-input-media
127+
.selection=${this.#selection}
128+
.allowedContentTypeIds=${this.#allowedContentTypeIds}
129+
.min=${this.min}
130+
.minMessage=${this.minMessage}
131+
.max=${this.max}
132+
.maxMessage=${this.maxMessage}
133+
?showOpenButton=${this.showOpenButton}
134+
@change=${this.#onChange}></umb-input-media>
135+
`;
138136
}
139137

140138
#renderMemberPicker() {
141-
return html`<umb-input-member
142-
.selection=${this.#selection}
143-
.allowedContentTypeIds=${this._allowedContentTypeIds}
144-
.min=${this.min}
145-
.max=${this.max}
146-
?showOpenButton=${this.showOpenButton}
147-
@change=${this.#onChange}></umb-input-member>`;
139+
return html`
140+
<umb-input-member
141+
.selection=${this.#selection}
142+
.allowedContentTypeIds=${this.#allowedContentTypeIds}
143+
.min=${this.min}
144+
.minMessage=${this.minMessage}
145+
.max=${this.max}
146+
.maxMessage=${this.maxMessage}
147+
?showOpenButton=${this.showOpenButton}
148+
@change=${this.#onChange}></umb-input-member>
149+
`;
148150
}
149151

150152
static override styles = [

0 commit comments

Comments
 (0)