Skip to content

Commit 6ad8c3c

Browse files
leekelleherleekelleher
authored
Merge pull request #2094 from umbraco/v14/bugfix/mntp-min-max-validation
Bugfix: MNTP min/max validation
2 parents daf177b + cd8dce2 commit 6ad8c3c

File tree

8 files changed

+180
-138
lines changed

8 files changed

+180
-138
lines changed

‎src/packages/core/picker-input/picker-input.context.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export class UmbPickerInputContext<
9999
content: 'Are you sure you want to remove this item',
100100
confirmLabel: 'Remove',
101101
});
102+
102103
this.#removeItem(unique);
103104
}
104105

‎src/packages/documents/documents/components/input-document/input-document.element.ts

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@ import { UmbDocumentPickerContext } from './input-document.context.js';
22
import { classMap, css, customElement, html, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
33
import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
44
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
5+
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
56
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
67
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
78
import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
89
import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
910
import type { UmbDocumentItemModel } from '@umbraco-cms/backoffice/document';
1011
import type { UmbTreeStartNode } from '@umbraco-cms/backoffice/tree';
11-
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
1212

13-
@customElement('umb-input-document')
13+
const elementName = 'umb-input-document';
14+
15+
@customElement(elementName)
1416
export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
1517
UmbLitElement,
1618
) {
@@ -73,7 +75,7 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
7375
* @attr
7476
* @default
7577
*/
76-
@property({ type: String, attribute: 'min-message' })
78+
@property({ type: String, attribute: 'max-message' })
7779
maxMessage = 'This field exceeds the allowed amount of items';
7880

7981
public set selection(ids: Array<string>) {
@@ -124,28 +126,24 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
124126
this.addValidator(
125127
'rangeUnderflow',
126128
() => this.minMessage,
127-
() => !!this.min && this.#pickerContext.getSelection().length < this.min,
129+
() => !!this.min && this.selection.length < this.min,
128130
);
129131

130132
this.addValidator(
131133
'rangeOverflow',
132134
() => this.maxMessage,
133-
() => !!this.max && this.#pickerContext.getSelection().length > this.max,
135+
() => !!this.max && this.selection.length > this.max,
134136
);
135137

136138
this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
137139
this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observerItems');
138140
}
139141

140-
protected override getFormElement() {
141-
return undefined;
142-
}
143-
144142
#isDraft(item: UmbDocumentItemModel) {
145143
return item.variants[0]?.state === 'Draft';
146144
}
147145

148-
#pickableFilter: (item: UmbDocumentItemModel) => boolean = (item) => {
146+
#pickableFilter = (item: UmbDocumentItemModel): boolean => {
149147
if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
150148
return this.allowedContentTypeIds.includes(item.documentType.unique);
151149
}
@@ -160,7 +158,7 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
160158
});
161159
}
162160

163-
#removeItem(item: UmbDocumentItemModel) {
161+
#onRemove(item: UmbDocumentItemModel) {
164162
this.#pickerContext.requestRemoveItem(item.unique);
165163
}
166164

@@ -169,7 +167,7 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
169167
}
170168

171169
#renderAddButton() {
172-
if (this.max === 1 && this.selection.length >= this.max) return;
170+
if (this.selection.length >= this.max) return;
173171
return html`
174172
<uui-button
175173
id="btn-add"
@@ -199,7 +197,7 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
199197
${this.#renderIcon(item)} ${this.#renderIsTrashed(item)}
200198
<uui-action-bar slot="actions">
201199
${this.#renderOpenButton(item)}
202-
<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>
200+
<uui-button @click=${() => this.#onRemove(item)} label=${this.localize.term('general_remove')}></uui-button>
203201
</uui-action-bar>
204202
</uui-ref-node>
205203
`;
@@ -229,7 +227,7 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
229227
static override styles = [
230228
css`
231229
#btn-add {
232-
width: 100%;
230+
display: block;
233231
}
234232
235233
uui-ref-node[drag-placeholder] {
@@ -243,8 +241,10 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
243241
];
244242
}
245243

244+
export { UmbInputDocumentElement as element };
245+
246246
declare global {
247247
interface HTMLElementTagNameMap {
248-
'umb-input-document': UmbInputDocumentElement;
248+
[elementName]: UmbInputDocumentElement;
249249
}
250250
}

‎src/packages/media/media/components/input-media/input-media.element.ts

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined
8787
* @attr
8888
* @default
8989
*/
90-
@property({ type: String, attribute: 'min-message' })
90+
@property({ type: String, attribute: 'max-message' })
9191
maxMessage = 'This field exceeds the allowed amount of items';
9292

9393
public set selection(ids: Array<string>) {
@@ -164,20 +164,16 @@ export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined
164164
this.addValidator(
165165
'rangeUnderflow',
166166
() => this.minMessage,
167-
() => !!this.min && this.#pickerContext.getSelection().length < this.min,
167+
() => !!this.min && this.selection.length < this.min,
168168
);
169169
this.addValidator(
170170
'rangeOverflow',
171171
() => this.maxMessage,
172-
() => !!this.max && this.#pickerContext.getSelection().length > this.max,
172+
() => !!this.max && this.selection.length > this.max,
173173
);
174174
}
175175

176-
protected override getFormElement() {
177-
return undefined;
178-
}
179-
180-
#pickableFilter: (item: UmbMediaItemModel) => boolean = (item) => {
176+
#pickableFilter = (item: UmbMediaItemModel): boolean => {
181177
if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
182178
return this.allowedContentTypeIds.includes(item.mediaType.unique);
183179
}
@@ -192,8 +188,9 @@ export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined
192188
});
193189
}
194190

195-
#onRemove(item: UmbMediaCardItemModel) {
196-
this.#pickerContext.requestRemoveItem(item.unique);
191+
async #onRemove(item: UmbMediaCardItemModel) {
192+
await this.#pickerContext.requestRemoveItem(item.unique);
193+
this._cards = this._cards.filter((x) => x.unique !== item.unique);
197194
}
198195

199196
override render() {

‎src/packages/members/member/components/input-member/input-member.element.ts

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/rou
99
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
1010
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
1111

12-
@customElement('umb-input-member')
12+
const elementName = 'umb-input-member';
13+
14+
@customElement(elementName)
1315
export class UmbInputMemberElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
1416
UmbLitElement,
1517
) {
@@ -72,7 +74,7 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
7274
* @attr
7375
* @default
7476
*/
75-
@property({ type: String, attribute: 'min-message' })
77+
@property({ type: String, attribute: 'max-message' })
7678
maxMessage = 'This field exceeds the allowed amount of items';
7779

7880
public set selection(ids: Array<string>) {
@@ -123,24 +125,20 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
123125
this.addValidator(
124126
'rangeUnderflow',
125127
() => this.minMessage,
126-
() => !!this.min && this.#pickerContext.getSelection().length < this.min,
128+
() => !!this.min && this.selection.length < this.min,
127129
);
128130

129131
this.addValidator(
130132
'rangeOverflow',
131133
() => this.maxMessage,
132-
() => !!this.max && this.#pickerContext.getSelection().length > this.max,
134+
() => !!this.max && this.selection.length > this.max,
133135
);
134136

135137
this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
136138
this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observeItems');
137139
}
138140

139-
protected override getFormElement() {
140-
return undefined;
141-
}
142-
143-
#pickableFilter: (item: UmbMemberItemModel) => boolean = (item) => {
141+
#pickableFilter = (item: UmbMemberItemModel): boolean => {
144142
if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
145143
return this.allowedContentTypeIds.includes(item.memberType.unique);
146144
}
@@ -154,7 +152,7 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
154152
});
155153
}
156154

157-
#removeItem(item: UmbMemberItemModel) {
155+
#onRemove(item: UmbMemberItemModel) {
158156
this.#pickerContext.requestRemoveItem(item.unique);
159157
}
160158

@@ -176,12 +174,14 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
176174
}
177175

178176
#renderAddButton() {
179-
if (this.max === 1 && this.selection.length >= this.max) return nothing;
180-
return html`<uui-button
181-
id="btn-add"
182-
look="placeholder"
183-
@click=${this.#openPicker}
184-
label=${this.localize.term('general_choose')}></uui-button>`;
177+
if (this.selection.length >= this.max) return nothing;
178+
return html`
179+
<uui-button
180+
id="btn-add"
181+
look="placeholder"
182+
@click=${this.#openPicker}
183+
label=${this.localize.term('general_choose')}></uui-button>
184+
`;
185185
}
186186

187187
#renderItem(item: UmbMemberItemModel) {
@@ -190,7 +190,7 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
190190
<uui-ref-node name=${item.name} id=${item.unique}>
191191
<uui-action-bar slot="actions">
192192
${this.#renderOpenButton(item)}
193-
<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>
193+
<uui-button @click=${() => this.#onRemove(item)} label=${this.localize.term('general_remove')}></uui-button>
194194
</uui-action-bar>
195195
</uui-ref-node>
196196
`;
@@ -210,7 +210,7 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
210210
static override styles = [
211211
css`
212212
#btn-add {
213-
width: 100%;
213+
display: block;
214214
}
215215
216216
uui-ref-node[drag-placeholder] {
@@ -220,10 +220,10 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
220220
];
221221
}
222222

223-
export default UmbInputMemberElement;
223+
export { UmbInputMemberElement as element };
224224

225225
declare global {
226226
interface HTMLElementTagNameMap {
227-
'umb-input-member': UmbInputMemberElement;
227+
[elementName]: UmbInputMemberElement;
228228
}
229229
}

‎src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
2222
}
2323

2424
override render() {
25-
return html` <umb-input-member min="0" max="1" .value=${this.value} @change=${this.#onChange}></umb-input-member> `;
25+
return html`<umb-input-member min="0" max="1" .value=${this.value} @change=${this.#onChange}></umb-input-member>`;
2626
}
2727
}
2828

0 commit comments

Comments
 (0)