@mmlogic/components 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mosterdcomponents.cjs.js +1 -1
- package/dist/cjs/mrd-boolean-field_16.cjs.entry.js +124 -28
- package/dist/collection/components/mrd-field/mrd-field.js +35 -16
- package/dist/collection/components/mrd-form/mrd-form.js +85 -2
- package/dist/collection/components/mrd-relation-field/mrd-relation-field.js +121 -12
- package/dist/collection/dev/api.js +198 -0
- package/dist/collection/dev/app.js +521 -0
- package/dist/collection/dev/auth.js +156 -0
- package/dist/collection/dev/example-data.js +256 -0
- package/dist/components/mrd-field2.js +1 -1
- package/dist/components/mrd-form.js +1 -1
- package/dist/components/mrd-relation-field2.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mosterdcomponents.js +1 -1
- package/dist/esm/mrd-boolean-field_16.entry.js +125 -29
- package/dist/mosterdcomponents/mosterdcomponents.esm.js +1 -1
- package/dist/mosterdcomponents/p-5a453e03.entry.js +1 -0
- package/dist/types/components/mrd-field/mrd-field.d.ts +9 -0
- package/dist/types/components/mrd-form/mrd-form.d.ts +17 -0
- package/dist/types/components/mrd-relation-field/mrd-relation-field.d.ts +14 -1
- package/dist/types/components.d.ts +15 -2
- package/dist/types/types/client-layout.d.ts +1 -0
- package/package.json +1 -1
- package/dist/mosterdcomponents/p-45c40269.entry.js +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setSearchResults":[64],"setLoading":[64]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
|
|
9
|
+
return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"editBehavior":[1,"edit-behavior"],"commonRelation":[1,"common-relation"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"allRecords":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setAllRecords":[64],"setSearchResults":[64],"setLoading":[64]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setSearchResults":[64],"setLoading":[64]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"editBehavior":[1,"edit-behavior"],"commonRelation":[1,"common-relation"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"allRecords":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setAllRecords":[64],"setSearchResults":[64],"setLoading":[64]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -336,6 +336,7 @@ const MrdField = class {
|
|
|
336
336
|
this.mrdChange = index.createEvent(this, "mrdChange");
|
|
337
337
|
this.mrdBlur = index.createEvent(this, "mrdBlur");
|
|
338
338
|
this.mrdSearch = index.createEvent(this, "mrdSearch");
|
|
339
|
+
this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
|
|
339
340
|
this.locale = navigator.language;
|
|
340
341
|
this.handleChange = (e) => {
|
|
341
342
|
e.stopPropagation();
|
|
@@ -349,13 +350,17 @@ const MrdField = class {
|
|
|
349
350
|
e.stopPropagation();
|
|
350
351
|
this.mrdSearch.emit(e.detail);
|
|
351
352
|
};
|
|
353
|
+
this.handleFetchAll = (e) => {
|
|
354
|
+
e.stopPropagation();
|
|
355
|
+
this.mrdFetchAll.emit(e.detail);
|
|
356
|
+
};
|
|
352
357
|
}
|
|
353
358
|
render() {
|
|
354
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
|
|
359
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
|
|
355
360
|
const { item, locale, value } = this;
|
|
356
361
|
if (item.type === index$1.ClientLayoutItemType.RELATION && item.relation) {
|
|
357
362
|
const rel = item.relation;
|
|
358
|
-
return (index.h(index.Host, null, index.h("mrd-relation-field", { name: rel.name, label: rel.label, required: rel.required, disabled: (_a = rel.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: rel.relatedClass, mostSignificantClass: (_b = rel.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = rel.displayType) !== null && _c !== void 0 ? _c : index$1.ClientLayoutItemRelationDisplayType.SEARCH,
|
|
363
|
+
return (index.h(index.Host, null, index.h("mrd-relation-field", { name: rel.name, label: rel.label, required: rel.required, disabled: (_a = rel.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: rel.relatedClass, mostSignificantClass: (_b = rel.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = rel.displayType) !== null && _c !== void 0 ? _c : index$1.ClientLayoutItemRelationDisplayType.SEARCH, editBehavior: (_d = rel.editBehavior) !== null && _d !== void 0 ? _d : null, commonRelation: rel.commonRelation, multiple: (_e = rel.multiple) !== null && _e !== void 0 ? _e : false, dropdownValues: (_f = rel.dropdownValues) !== null && _f !== void 0 ? _f : [], value: value, onMrdChange: this.handleChange, onMrdBlur: this.handleBlur, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll })));
|
|
359
364
|
}
|
|
360
365
|
if (item.type !== index$1.ClientLayoutItemType.FIELD || !item.field) {
|
|
361
366
|
return index.h(index.Host, null);
|
|
@@ -365,40 +370,40 @@ const MrdField = class {
|
|
|
365
370
|
name: field.name,
|
|
366
371
|
label: field.label,
|
|
367
372
|
required: field.required,
|
|
368
|
-
disabled: (
|
|
373
|
+
disabled: (_g = field.disabled) !== null && _g !== void 0 ? _g : false,
|
|
369
374
|
locale,
|
|
370
375
|
onMrdChange: this.handleChange,
|
|
371
376
|
onMrdBlur: this.handleBlur,
|
|
372
377
|
};
|
|
373
378
|
switch (field.dataType) {
|
|
374
379
|
case index$1.ClientLayoutItemFieldDataType.TEXT:
|
|
375
|
-
return (index.h(index.Host, null, index.h("mrd-text-field", Object.assign({}, commonProps, { value: (
|
|
380
|
+
return (index.h(index.Host, null, index.h("mrd-text-field", Object.assign({}, commonProps, { value: (_h = value) !== null && _h !== void 0 ? _h : '', placeholder: (_j = field.placeholder) !== null && _j !== void 0 ? _j : '' }))));
|
|
376
381
|
case index$1.ClientLayoutItemFieldDataType.TEXTBLOCK:
|
|
377
|
-
return (index.h(index.Host, null, index.h("mrd-textarea-field", Object.assign({}, commonProps, { value: (
|
|
382
|
+
return (index.h(index.Host, null, index.h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_k = value) !== null && _k !== void 0 ? _k : '', placeholder: (_l = field.placeholder) !== null && _l !== void 0 ? _l : '' }))));
|
|
378
383
|
case index$1.ClientLayoutItemFieldDataType.INTEGER:
|
|
379
384
|
case index$1.ClientLayoutItemFieldDataType.DECIMAL:
|
|
380
385
|
case index$1.ClientLayoutItemFieldDataType.PERCENTAGE:
|
|
381
|
-
return (index.h(index.Host, null, index.h("mrd-number-field", Object.assign({}, commonProps, { value: (
|
|
386
|
+
return (index.h(index.Host, null, index.h("mrd-number-field", Object.assign({}, commonProps, { value: (_m = value) !== null && _m !== void 0 ? _m : null, dataType: field.dataType, decimalPrecision: (_o = field.decimalPrecision) !== null && _o !== void 0 ? _o : 2, placeholder: (_p = field.placeholder) !== null && _p !== void 0 ? _p : '' }))));
|
|
382
387
|
case index$1.ClientLayoutItemFieldDataType.CURRENCY:
|
|
383
|
-
return (index.h(index.Host, null, index.h("mrd-currency-field", Object.assign({}, commonProps, { value: (
|
|
388
|
+
return (index.h(index.Host, null, index.h("mrd-currency-field", Object.assign({}, commonProps, { value: (_q = value) !== null && _q !== void 0 ? _q : { amount: null, currency: (_r = field.currencyCode) !== null && _r !== void 0 ? _r : 'EUR' } }))));
|
|
384
389
|
case index$1.ClientLayoutItemFieldDataType.BOOLEAN:
|
|
385
|
-
return (index.h(index.Host, null, index.h("mrd-boolean-field", Object.assign({}, commonProps, { value: (
|
|
390
|
+
return (index.h(index.Host, null, index.h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_s = value) !== null && _s !== void 0 ? _s : false }))));
|
|
386
391
|
case index$1.ClientLayoutItemFieldDataType.DATE:
|
|
387
|
-
return (index.h(index.Host, null, index.h("mrd-date-field", Object.assign({}, commonProps, { value: (
|
|
392
|
+
return (index.h(index.Host, null, index.h("mrd-date-field", Object.assign({}, commonProps, { value: (_t = value) !== null && _t !== void 0 ? _t : '' }))));
|
|
388
393
|
case index$1.ClientLayoutItemFieldDataType.DATETIME:
|
|
389
|
-
return (index.h(index.Host, null, index.h("mrd-datetime-field", Object.assign({}, commonProps, { value: (
|
|
394
|
+
return (index.h(index.Host, null, index.h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_u = value) !== null && _u !== void 0 ? _u : '' }))));
|
|
390
395
|
case index$1.ClientLayoutItemFieldDataType.TIME:
|
|
391
|
-
return (index.h(index.Host, null, index.h("mrd-time-field", Object.assign({}, commonProps, { value: (
|
|
396
|
+
return (index.h(index.Host, null, index.h("mrd-time-field", Object.assign({}, commonProps, { value: (_v = value) !== null && _v !== void 0 ? _v : '' }))));
|
|
392
397
|
case index$1.ClientLayoutItemFieldDataType.EMAIL:
|
|
393
|
-
return (index.h(index.Host, null, index.h("mrd-email-field", Object.assign({}, commonProps, { value: (
|
|
398
|
+
return (index.h(index.Host, null, index.h("mrd-email-field", Object.assign({}, commonProps, { value: (_w = value) !== null && _w !== void 0 ? _w : '', placeholder: (_x = field.placeholder) !== null && _x !== void 0 ? _x : '' }))));
|
|
394
399
|
case index$1.ClientLayoutItemFieldDataType.HYPERLINK:
|
|
395
|
-
return (index.h(index.Host, null, index.h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (
|
|
400
|
+
return (index.h(index.Host, null, index.h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', placeholder: (_z = field.placeholder) !== null && _z !== void 0 ? _z : '' }))));
|
|
396
401
|
case index$1.ClientLayoutItemFieldDataType.LIST:
|
|
397
|
-
return (index.h(index.Host, null, index.h("mrd-list-field", Object.assign({}, commonProps, { value: (
|
|
402
|
+
return (index.h(index.Host, null, index.h("mrd-list-field", Object.assign({}, commonProps, { value: (_0 = value) !== null && _0 !== void 0 ? _0 : '', multiple: (_1 = field.multiple) !== null && _1 !== void 0 ? _1 : false, listItems: (_2 = field.listItems) !== null && _2 !== void 0 ? _2 : [] }))));
|
|
398
403
|
case index$1.ClientLayoutItemFieldDataType.FILE:
|
|
399
|
-
return (index.h(index.Host, null, index.h("mrd-file-field", Object.assign({}, commonProps, { accept: (
|
|
404
|
+
return (index.h(index.Host, null, index.h("mrd-file-field", Object.assign({}, commonProps, { accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0 }))));
|
|
400
405
|
case index$1.ClientLayoutItemFieldDataType.IMAGE:
|
|
401
|
-
return (index.h(index.Host, null, index.h("mrd-image-field", Object.assign({}, commonProps, { accept: (
|
|
406
|
+
return (index.h(index.Host, null, index.h("mrd-image-field", Object.assign({}, commonProps, { accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 0 }))));
|
|
402
407
|
default:
|
|
403
408
|
return index.h(index.Host, null);
|
|
404
409
|
}
|
|
@@ -484,6 +489,7 @@ const MrdForm = class {
|
|
|
484
489
|
index.registerInstance(this, hostRef);
|
|
485
490
|
this.mrdSubmit = index.createEvent(this, "mrdSubmit");
|
|
486
491
|
this.mrdSearch = index.createEvent(this, "mrdSearch");
|
|
492
|
+
this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
|
|
487
493
|
this.locale = navigator.language;
|
|
488
494
|
this.values = {};
|
|
489
495
|
this.formValues = {};
|
|
@@ -495,11 +501,32 @@ const MrdForm = class {
|
|
|
495
501
|
if (this.errors[name]) {
|
|
496
502
|
this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
|
|
497
503
|
}
|
|
504
|
+
// When a field changes, check if it is the commonRelation dependency for any
|
|
505
|
+
// DROPDOWN relation. If so, reset the dependent field and re-fetch its options.
|
|
506
|
+
for (const rel of this.collectDependentDropdowns()) {
|
|
507
|
+
if (rel.commonRelation !== name)
|
|
508
|
+
continue;
|
|
509
|
+
// Clear the dependent field's current selection (options have changed)
|
|
510
|
+
this.formValues = Object.assign(Object.assign({}, this.formValues), { [rel.name]: null });
|
|
511
|
+
const filterValue = this.getHref(value);
|
|
512
|
+
this.mrdFetchAll.emit({
|
|
513
|
+
name: rel.name,
|
|
514
|
+
relatedClass: rel.relatedClass,
|
|
515
|
+
mostSignificantClass: rel.mostSignificantClass,
|
|
516
|
+
commonRelation: rel.commonRelation,
|
|
517
|
+
filter: rel.commonRelation,
|
|
518
|
+
filterValue, // empty string when dependency was cleared → host should clear the list
|
|
519
|
+
});
|
|
520
|
+
}
|
|
498
521
|
};
|
|
499
522
|
this.handleSearch = (e) => {
|
|
500
523
|
e.stopPropagation();
|
|
501
524
|
this.mrdSearch.emit(e.detail);
|
|
502
525
|
};
|
|
526
|
+
this.handleFetchAll = (e) => {
|
|
527
|
+
e.stopPropagation();
|
|
528
|
+
this.mrdFetchAll.emit(e.detail);
|
|
529
|
+
};
|
|
503
530
|
this.handleSubmit = (e) => {
|
|
504
531
|
e.preventDefault();
|
|
505
532
|
this.submitted = true;
|
|
@@ -512,12 +539,20 @@ const MrdForm = class {
|
|
|
512
539
|
var _a;
|
|
513
540
|
this.formValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
|
|
514
541
|
}
|
|
542
|
+
componentDidLoad() {
|
|
543
|
+
// Emit mrdFetchAll for DROPDOWN fields with commonRelation whose dependency
|
|
544
|
+
// already has a value — this handles the edit-mode case where values are set
|
|
545
|
+
// as a prop before mount.
|
|
546
|
+
setTimeout(() => this.emitDependentFetchAll(), 0);
|
|
547
|
+
}
|
|
515
548
|
/** Sync formValues when the values prop is set from outside after mount
|
|
516
549
|
* (e.g. when pre-filling an existing record in edit mode). */
|
|
517
550
|
valuesChanged(newValues) {
|
|
518
551
|
this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
|
|
519
552
|
this.errors = {};
|
|
520
553
|
this.submitted = false;
|
|
554
|
+
// Re-check DROPDOWN dependencies now that formValues are updated
|
|
555
|
+
setTimeout(() => this.emitDependentFetchAll(), 0);
|
|
521
556
|
}
|
|
522
557
|
async setFieldValue(name, value) {
|
|
523
558
|
this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
|
|
@@ -525,6 +560,45 @@ const MrdForm = class {
|
|
|
525
560
|
this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
|
|
526
561
|
}
|
|
527
562
|
}
|
|
563
|
+
/** Collect all RELATION items that use editBehavior=DROPDOWN with a commonRelation. */
|
|
564
|
+
collectDependentDropdowns() {
|
|
565
|
+
var _a, _b;
|
|
566
|
+
return this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : [])
|
|
567
|
+
.filter(item => {
|
|
568
|
+
var _a;
|
|
569
|
+
return item.type === index$1.ClientLayoutItemType.RELATION &&
|
|
570
|
+
((_a = item.relation) === null || _a === void 0 ? void 0 : _a.editBehavior) === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN &&
|
|
571
|
+
!!item.relation.commonRelation;
|
|
572
|
+
})
|
|
573
|
+
.map(item => item.relation);
|
|
574
|
+
}
|
|
575
|
+
/** Emit mrdFetchAll for every dependent DROPDOWN whose filter value is currently set. */
|
|
576
|
+
emitDependentFetchAll() {
|
|
577
|
+
for (const rel of this.collectDependentDropdowns()) {
|
|
578
|
+
const filterValue = this.getHref(this.formValues[rel.commonRelation]);
|
|
579
|
+
if (filterValue) {
|
|
580
|
+
this.mrdFetchAll.emit({
|
|
581
|
+
name: rel.name,
|
|
582
|
+
relatedClass: rel.relatedClass,
|
|
583
|
+
mostSignificantClass: rel.mostSignificantClass,
|
|
584
|
+
commonRelation: rel.commonRelation,
|
|
585
|
+
filter: rel.commonRelation,
|
|
586
|
+
filterValue,
|
|
587
|
+
});
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
/** Extract a plain href string from a form value, which can be a string or
|
|
592
|
+
* a RelationSearchResult-like object with an `id` field. */
|
|
593
|
+
getHref(value) {
|
|
594
|
+
if (!value)
|
|
595
|
+
return '';
|
|
596
|
+
if (typeof value === 'string')
|
|
597
|
+
return value;
|
|
598
|
+
if (typeof value === 'object' && 'id' in value)
|
|
599
|
+
return value.id;
|
|
600
|
+
return '';
|
|
601
|
+
}
|
|
528
602
|
collectFields(items) {
|
|
529
603
|
const fields = [];
|
|
530
604
|
for (const item of items) {
|
|
@@ -594,7 +668,7 @@ const MrdForm = class {
|
|
|
594
668
|
}
|
|
595
669
|
const fieldName = (_d = (_b = (_a = item.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = item.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
|
|
596
670
|
const fieldValue = this.formValues[fieldName];
|
|
597
|
-
return (index.h("div", { class: "mrd-form__field" }, index.h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch }), this.errors[fieldName] && (index.h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
|
|
671
|
+
return (index.h("div", { class: "mrd-form__field" }, index.h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll }), this.errors[fieldName] && (index.h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
|
|
598
672
|
});
|
|
599
673
|
}
|
|
600
674
|
render() {
|
|
@@ -918,6 +992,7 @@ const MrdRelationField = class {
|
|
|
918
992
|
this.mrdChange = index.createEvent(this, "mrdChange");
|
|
919
993
|
this.mrdBlur = index.createEvent(this, "mrdBlur");
|
|
920
994
|
this.mrdSearch = index.createEvent(this, "mrdSearch");
|
|
995
|
+
this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
|
|
921
996
|
this.name = '';
|
|
922
997
|
this.label = '';
|
|
923
998
|
this.required = false;
|
|
@@ -933,6 +1008,7 @@ const MrdRelationField = class {
|
|
|
933
1008
|
this.value = null;
|
|
934
1009
|
this.searchQuery = '';
|
|
935
1010
|
this.searchResults = [];
|
|
1011
|
+
this.allRecords = [];
|
|
936
1012
|
this.isLoading = false;
|
|
937
1013
|
this.selectedItems = [];
|
|
938
1014
|
this.showResults = false;
|
|
@@ -1041,6 +1117,9 @@ const MrdRelationField = class {
|
|
|
1041
1117
|
this.mrdBlur.emit({ name: this.name, value: val });
|
|
1042
1118
|
};
|
|
1043
1119
|
}
|
|
1120
|
+
async setAllRecords(records) {
|
|
1121
|
+
this.allRecords = records;
|
|
1122
|
+
}
|
|
1044
1123
|
async setSearchResults(results) {
|
|
1045
1124
|
this.searchResults = results;
|
|
1046
1125
|
this.isLoading = false;
|
|
@@ -1054,24 +1133,41 @@ const MrdRelationField = class {
|
|
|
1054
1133
|
var _a;
|
|
1055
1134
|
// Pre-fill selectedItems when value is passed as { id, label } objects
|
|
1056
1135
|
// (e.g. when editing an existing record fetched from the API).
|
|
1057
|
-
if (
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1136
|
+
if (this.value) {
|
|
1137
|
+
if (Array.isArray(this.value)) {
|
|
1138
|
+
if (this.value.length > 0 && typeof this.value[0] === 'object') {
|
|
1139
|
+
this.selectedItems = this.value;
|
|
1140
|
+
this.searchQuery = '';
|
|
1141
|
+
}
|
|
1142
|
+
}
|
|
1143
|
+
else if (typeof this.value === 'object') {
|
|
1144
|
+
this.selectedItems = [this.value];
|
|
1145
|
+
this.searchQuery = (_a = this.value.label) !== null && _a !== void 0 ? _a : '';
|
|
1063
1146
|
}
|
|
1064
1147
|
}
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1148
|
+
}
|
|
1149
|
+
componentDidLoad() {
|
|
1150
|
+
// Only emit when there is no commonRelation dependency — the form orchestrates those.
|
|
1151
|
+
if (this.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN && !this.commonRelation) {
|
|
1152
|
+
// Defer to next tick so parent event listeners are registered after DOM patching
|
|
1153
|
+
setTimeout(() => {
|
|
1154
|
+
this.mrdFetchAll.emit({
|
|
1155
|
+
name: this.name,
|
|
1156
|
+
relatedClass: this.relatedClass,
|
|
1157
|
+
mostSignificantClass: this.mostSignificantClass || undefined,
|
|
1158
|
+
});
|
|
1159
|
+
}, 0);
|
|
1068
1160
|
}
|
|
1069
1161
|
}
|
|
1070
1162
|
render() {
|
|
1071
|
-
var _a, _b;
|
|
1163
|
+
var _a, _b, _c, _d;
|
|
1072
1164
|
const hasError = !!this.error;
|
|
1073
|
-
if (this.
|
|
1165
|
+
if (this.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN) {
|
|
1074
1166
|
const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
|
|
1167
|
+
return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.allRecords.map(record => (index.h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
|
|
1168
|
+
}
|
|
1169
|
+
if (this.displayType === index$1.ClientLayoutItemRelationDisplayType.DROPDOWN) {
|
|
1170
|
+
const currentValue = Array.isArray(this.value) ? ((_c = this.value[0]) !== null && _c !== void 0 ? _c : '') : ((_d = this.value) !== null && _d !== void 0 ? _d : '');
|
|
1075
1171
|
return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (index.h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
|
|
1076
1172
|
}
|
|
1077
1173
|
// SEARCH mode
|
|
@@ -15,13 +15,17 @@ export class MrdField {
|
|
|
15
15
|
e.stopPropagation();
|
|
16
16
|
this.mrdSearch.emit(e.detail);
|
|
17
17
|
};
|
|
18
|
+
this.handleFetchAll = (e) => {
|
|
19
|
+
e.stopPropagation();
|
|
20
|
+
this.mrdFetchAll.emit(e.detail);
|
|
21
|
+
};
|
|
18
22
|
}
|
|
19
23
|
render() {
|
|
20
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
|
|
24
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
|
|
21
25
|
const { item, locale, value } = this;
|
|
22
26
|
if (item.type === ClientLayoutItemType.RELATION && item.relation) {
|
|
23
27
|
const rel = item.relation;
|
|
24
|
-
return (h(Host, null, h("mrd-relation-field", { name: rel.name, label: rel.label, required: rel.required, disabled: (_a = rel.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: rel.relatedClass, mostSignificantClass: (_b = rel.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = rel.displayType) !== null && _c !== void 0 ? _c : ClientLayoutItemRelationDisplayType.SEARCH,
|
|
28
|
+
return (h(Host, null, h("mrd-relation-field", { name: rel.name, label: rel.label, required: rel.required, disabled: (_a = rel.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: rel.relatedClass, mostSignificantClass: (_b = rel.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = rel.displayType) !== null && _c !== void 0 ? _c : ClientLayoutItemRelationDisplayType.SEARCH, editBehavior: (_d = rel.editBehavior) !== null && _d !== void 0 ? _d : null, commonRelation: rel.commonRelation, multiple: (_e = rel.multiple) !== null && _e !== void 0 ? _e : false, dropdownValues: (_f = rel.dropdownValues) !== null && _f !== void 0 ? _f : [], value: value, onMrdChange: this.handleChange, onMrdBlur: this.handleBlur, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll })));
|
|
25
29
|
}
|
|
26
30
|
if (item.type !== ClientLayoutItemType.FIELD || !item.field) {
|
|
27
31
|
return h(Host, null);
|
|
@@ -31,40 +35,40 @@ export class MrdField {
|
|
|
31
35
|
name: field.name,
|
|
32
36
|
label: field.label,
|
|
33
37
|
required: field.required,
|
|
34
|
-
disabled: (
|
|
38
|
+
disabled: (_g = field.disabled) !== null && _g !== void 0 ? _g : false,
|
|
35
39
|
locale,
|
|
36
40
|
onMrdChange: this.handleChange,
|
|
37
41
|
onMrdBlur: this.handleBlur,
|
|
38
42
|
};
|
|
39
43
|
switch (field.dataType) {
|
|
40
44
|
case ClientLayoutItemFieldDataType.TEXT:
|
|
41
|
-
return (h(Host, null, h("mrd-text-field", Object.assign({}, commonProps, { value: (
|
|
45
|
+
return (h(Host, null, h("mrd-text-field", Object.assign({}, commonProps, { value: (_h = value) !== null && _h !== void 0 ? _h : '', placeholder: (_j = field.placeholder) !== null && _j !== void 0 ? _j : '' }))));
|
|
42
46
|
case ClientLayoutItemFieldDataType.TEXTBLOCK:
|
|
43
|
-
return (h(Host, null, h("mrd-textarea-field", Object.assign({}, commonProps, { value: (
|
|
47
|
+
return (h(Host, null, h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_k = value) !== null && _k !== void 0 ? _k : '', placeholder: (_l = field.placeholder) !== null && _l !== void 0 ? _l : '' }))));
|
|
44
48
|
case ClientLayoutItemFieldDataType.INTEGER:
|
|
45
49
|
case ClientLayoutItemFieldDataType.DECIMAL:
|
|
46
50
|
case ClientLayoutItemFieldDataType.PERCENTAGE:
|
|
47
|
-
return (h(Host, null, h("mrd-number-field", Object.assign({}, commonProps, { value: (
|
|
51
|
+
return (h(Host, null, h("mrd-number-field", Object.assign({}, commonProps, { value: (_m = value) !== null && _m !== void 0 ? _m : null, dataType: field.dataType, decimalPrecision: (_o = field.decimalPrecision) !== null && _o !== void 0 ? _o : 2, placeholder: (_p = field.placeholder) !== null && _p !== void 0 ? _p : '' }))));
|
|
48
52
|
case ClientLayoutItemFieldDataType.CURRENCY:
|
|
49
|
-
return (h(Host, null, h("mrd-currency-field", Object.assign({}, commonProps, { value: (
|
|
53
|
+
return (h(Host, null, h("mrd-currency-field", Object.assign({}, commonProps, { value: (_q = value) !== null && _q !== void 0 ? _q : { amount: null, currency: (_r = field.currencyCode) !== null && _r !== void 0 ? _r : 'EUR' } }))));
|
|
50
54
|
case ClientLayoutItemFieldDataType.BOOLEAN:
|
|
51
|
-
return (h(Host, null, h("mrd-boolean-field", Object.assign({}, commonProps, { value: (
|
|
55
|
+
return (h(Host, null, h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_s = value) !== null && _s !== void 0 ? _s : false }))));
|
|
52
56
|
case ClientLayoutItemFieldDataType.DATE:
|
|
53
|
-
return (h(Host, null, h("mrd-date-field", Object.assign({}, commonProps, { value: (
|
|
57
|
+
return (h(Host, null, h("mrd-date-field", Object.assign({}, commonProps, { value: (_t = value) !== null && _t !== void 0 ? _t : '' }))));
|
|
54
58
|
case ClientLayoutItemFieldDataType.DATETIME:
|
|
55
|
-
return (h(Host, null, h("mrd-datetime-field", Object.assign({}, commonProps, { value: (
|
|
59
|
+
return (h(Host, null, h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_u = value) !== null && _u !== void 0 ? _u : '' }))));
|
|
56
60
|
case ClientLayoutItemFieldDataType.TIME:
|
|
57
|
-
return (h(Host, null, h("mrd-time-field", Object.assign({}, commonProps, { value: (
|
|
61
|
+
return (h(Host, null, h("mrd-time-field", Object.assign({}, commonProps, { value: (_v = value) !== null && _v !== void 0 ? _v : '' }))));
|
|
58
62
|
case ClientLayoutItemFieldDataType.EMAIL:
|
|
59
|
-
return (h(Host, null, h("mrd-email-field", Object.assign({}, commonProps, { value: (
|
|
63
|
+
return (h(Host, null, h("mrd-email-field", Object.assign({}, commonProps, { value: (_w = value) !== null && _w !== void 0 ? _w : '', placeholder: (_x = field.placeholder) !== null && _x !== void 0 ? _x : '' }))));
|
|
60
64
|
case ClientLayoutItemFieldDataType.HYPERLINK:
|
|
61
|
-
return (h(Host, null, h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (
|
|
65
|
+
return (h(Host, null, h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', placeholder: (_z = field.placeholder) !== null && _z !== void 0 ? _z : '' }))));
|
|
62
66
|
case ClientLayoutItemFieldDataType.LIST:
|
|
63
|
-
return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (
|
|
67
|
+
return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (_0 = value) !== null && _0 !== void 0 ? _0 : '', multiple: (_1 = field.multiple) !== null && _1 !== void 0 ? _1 : false, listItems: (_2 = field.listItems) !== null && _2 !== void 0 ? _2 : [] }))));
|
|
64
68
|
case ClientLayoutItemFieldDataType.FILE:
|
|
65
|
-
return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { accept: (
|
|
69
|
+
return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0 }))));
|
|
66
70
|
case ClientLayoutItemFieldDataType.IMAGE:
|
|
67
|
-
return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { accept: (
|
|
71
|
+
return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 0 }))));
|
|
68
72
|
default:
|
|
69
73
|
return h(Host, null);
|
|
70
74
|
}
|
|
@@ -182,6 +186,21 @@ export class MrdField {
|
|
|
182
186
|
"resolved": "{ query: string; relatedClass: string; }",
|
|
183
187
|
"references": {}
|
|
184
188
|
}
|
|
189
|
+
}, {
|
|
190
|
+
"method": "mrdFetchAll",
|
|
191
|
+
"name": "mrdFetchAll",
|
|
192
|
+
"bubbles": true,
|
|
193
|
+
"cancelable": true,
|
|
194
|
+
"composed": true,
|
|
195
|
+
"docs": {
|
|
196
|
+
"tags": [],
|
|
197
|
+
"text": ""
|
|
198
|
+
},
|
|
199
|
+
"complexType": {
|
|
200
|
+
"original": "{ name: string; relatedClass: string; mostSignificantClass?: string; commonRelation?: string; filter?: string; filterValue?: string }",
|
|
201
|
+
"resolved": "{ name: string; relatedClass: string; mostSignificantClass?: string | undefined; commonRelation?: string | undefined; filter?: string | undefined; filterValue?: string | undefined; }",
|
|
202
|
+
"references": {}
|
|
203
|
+
}
|
|
185
204
|
}];
|
|
186
205
|
}
|
|
187
206
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
|
-
import { ClientLayoutItemType } from "../../types";
|
|
2
|
+
import { ClientLayoutItemType, ClientLayoutItemRelationEditBehavior } from "../../types";
|
|
3
3
|
import { t } from "../../utils/i18n";
|
|
4
4
|
import { validateRequired } from "../../utils/validation";
|
|
5
5
|
export class MrdForm {
|
|
@@ -15,11 +15,32 @@ export class MrdForm {
|
|
|
15
15
|
if (this.errors[name]) {
|
|
16
16
|
this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
|
|
17
17
|
}
|
|
18
|
+
// When a field changes, check if it is the commonRelation dependency for any
|
|
19
|
+
// DROPDOWN relation. If so, reset the dependent field and re-fetch its options.
|
|
20
|
+
for (const rel of this.collectDependentDropdowns()) {
|
|
21
|
+
if (rel.commonRelation !== name)
|
|
22
|
+
continue;
|
|
23
|
+
// Clear the dependent field's current selection (options have changed)
|
|
24
|
+
this.formValues = Object.assign(Object.assign({}, this.formValues), { [rel.name]: null });
|
|
25
|
+
const filterValue = this.getHref(value);
|
|
26
|
+
this.mrdFetchAll.emit({
|
|
27
|
+
name: rel.name,
|
|
28
|
+
relatedClass: rel.relatedClass,
|
|
29
|
+
mostSignificantClass: rel.mostSignificantClass,
|
|
30
|
+
commonRelation: rel.commonRelation,
|
|
31
|
+
filter: rel.commonRelation,
|
|
32
|
+
filterValue, // empty string when dependency was cleared → host should clear the list
|
|
33
|
+
});
|
|
34
|
+
}
|
|
18
35
|
};
|
|
19
36
|
this.handleSearch = (e) => {
|
|
20
37
|
e.stopPropagation();
|
|
21
38
|
this.mrdSearch.emit(e.detail);
|
|
22
39
|
};
|
|
40
|
+
this.handleFetchAll = (e) => {
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
this.mrdFetchAll.emit(e.detail);
|
|
43
|
+
};
|
|
23
44
|
this.handleSubmit = (e) => {
|
|
24
45
|
e.preventDefault();
|
|
25
46
|
this.submitted = true;
|
|
@@ -32,12 +53,20 @@ export class MrdForm {
|
|
|
32
53
|
var _a;
|
|
33
54
|
this.formValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
|
|
34
55
|
}
|
|
56
|
+
componentDidLoad() {
|
|
57
|
+
// Emit mrdFetchAll for DROPDOWN fields with commonRelation whose dependency
|
|
58
|
+
// already has a value — this handles the edit-mode case where values are set
|
|
59
|
+
// as a prop before mount.
|
|
60
|
+
setTimeout(() => this.emitDependentFetchAll(), 0);
|
|
61
|
+
}
|
|
35
62
|
/** Sync formValues when the values prop is set from outside after mount
|
|
36
63
|
* (e.g. when pre-filling an existing record in edit mode). */
|
|
37
64
|
valuesChanged(newValues) {
|
|
38
65
|
this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
|
|
39
66
|
this.errors = {};
|
|
40
67
|
this.submitted = false;
|
|
68
|
+
// Re-check DROPDOWN dependencies now that formValues are updated
|
|
69
|
+
setTimeout(() => this.emitDependentFetchAll(), 0);
|
|
41
70
|
}
|
|
42
71
|
async setFieldValue(name, value) {
|
|
43
72
|
this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
|
|
@@ -45,6 +74,45 @@ export class MrdForm {
|
|
|
45
74
|
this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
|
|
46
75
|
}
|
|
47
76
|
}
|
|
77
|
+
/** Collect all RELATION items that use editBehavior=DROPDOWN with a commonRelation. */
|
|
78
|
+
collectDependentDropdowns() {
|
|
79
|
+
var _a, _b;
|
|
80
|
+
return this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : [])
|
|
81
|
+
.filter(item => {
|
|
82
|
+
var _a;
|
|
83
|
+
return item.type === ClientLayoutItemType.RELATION &&
|
|
84
|
+
((_a = item.relation) === null || _a === void 0 ? void 0 : _a.editBehavior) === ClientLayoutItemRelationEditBehavior.DROPDOWN &&
|
|
85
|
+
!!item.relation.commonRelation;
|
|
86
|
+
})
|
|
87
|
+
.map(item => item.relation);
|
|
88
|
+
}
|
|
89
|
+
/** Emit mrdFetchAll for every dependent DROPDOWN whose filter value is currently set. */
|
|
90
|
+
emitDependentFetchAll() {
|
|
91
|
+
for (const rel of this.collectDependentDropdowns()) {
|
|
92
|
+
const filterValue = this.getHref(this.formValues[rel.commonRelation]);
|
|
93
|
+
if (filterValue) {
|
|
94
|
+
this.mrdFetchAll.emit({
|
|
95
|
+
name: rel.name,
|
|
96
|
+
relatedClass: rel.relatedClass,
|
|
97
|
+
mostSignificantClass: rel.mostSignificantClass,
|
|
98
|
+
commonRelation: rel.commonRelation,
|
|
99
|
+
filter: rel.commonRelation,
|
|
100
|
+
filterValue,
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
/** Extract a plain href string from a form value, which can be a string or
|
|
106
|
+
* a RelationSearchResult-like object with an `id` field. */
|
|
107
|
+
getHref(value) {
|
|
108
|
+
if (!value)
|
|
109
|
+
return '';
|
|
110
|
+
if (typeof value === 'string')
|
|
111
|
+
return value;
|
|
112
|
+
if (typeof value === 'object' && 'id' in value)
|
|
113
|
+
return value.id;
|
|
114
|
+
return '';
|
|
115
|
+
}
|
|
48
116
|
collectFields(items) {
|
|
49
117
|
const fields = [];
|
|
50
118
|
for (const item of items) {
|
|
@@ -114,7 +182,7 @@ export class MrdForm {
|
|
|
114
182
|
}
|
|
115
183
|
const fieldName = (_d = (_b = (_a = item.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = item.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
|
|
116
184
|
const fieldValue = this.formValues[fieldName];
|
|
117
|
-
return (h("div", { class: "mrd-form__field" }, h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
|
|
185
|
+
return (h("div", { class: "mrd-form__field" }, h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
|
|
118
186
|
});
|
|
119
187
|
}
|
|
120
188
|
render() {
|
|
@@ -250,6 +318,21 @@ export class MrdForm {
|
|
|
250
318
|
"resolved": "{ query: string; relatedClass: string; }",
|
|
251
319
|
"references": {}
|
|
252
320
|
}
|
|
321
|
+
}, {
|
|
322
|
+
"method": "mrdFetchAll",
|
|
323
|
+
"name": "mrdFetchAll",
|
|
324
|
+
"bubbles": true,
|
|
325
|
+
"cancelable": true,
|
|
326
|
+
"composed": true,
|
|
327
|
+
"docs": {
|
|
328
|
+
"tags": [],
|
|
329
|
+
"text": ""
|
|
330
|
+
},
|
|
331
|
+
"complexType": {
|
|
332
|
+
"original": "{ name: string; relatedClass: string; mostSignificantClass?: string; commonRelation?: string; filter?: string; filterValue?: string }",
|
|
333
|
+
"resolved": "{ name: string; relatedClass: string; mostSignificantClass?: string | undefined; commonRelation?: string | undefined; filter?: string | undefined; filterValue?: string | undefined; }",
|
|
334
|
+
"references": {}
|
|
335
|
+
}
|
|
253
336
|
}];
|
|
254
337
|
}
|
|
255
338
|
static get methods() {
|