@mmlogic/components 0.1.30 → 0.2.0
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/mrd-boolean-field_19.cjs.entry.js +147 -164
- package/dist/collection/components/mrd-field/mrd-field.js +18 -20
- package/dist/collection/components/mrd-form/mrd-form.js +38 -46
- package/dist/collection/components/mrd-layout-section/mrd-layout-section.js +51 -60
- package/dist/collection/components/mrd-table/mrd-table.js +33 -33
- package/dist/collection/dev/api.js +9 -97
- package/dist/collection/dev/app.js +23 -17
- package/dist/collection/dev/example-data.js +111 -299
- package/dist/collection/utils/cell-renderer.js +7 -5
- package/dist/components/mrd-field2.js +1 -1
- package/dist/components/mrd-form.js +1 -1
- package/dist/components/mrd-layout-section.js +1 -1
- package/dist/components/mrd-table2.js +1 -1
- package/dist/esm/mrd-boolean-field_19.entry.js +147 -164
- package/dist/mosterdcomponents/mosterdcomponents.esm.js +1 -1
- package/dist/mosterdcomponents/p-61ef0232.entry.js +1 -0
- package/dist/types/types/client-layout.d.ts +25 -0
- package/package.json +1 -1
- package/dist/mosterdcomponents/p-9ecefa81.entry.js +0 -1
|
@@ -27,34 +27,32 @@ export class MrdField {
|
|
|
27
27
|
render() {
|
|
28
28
|
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, _7, _8;
|
|
29
29
|
const { item, locale, value } = this;
|
|
30
|
-
if (item.type === ClientLayoutItemType.RELATION
|
|
31
|
-
|
|
32
|
-
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 })));
|
|
30
|
+
if (item.type === ClientLayoutItemType.RELATION) {
|
|
31
|
+
return (h(Host, null, h("mrd-relation-field", { name: item.name, label: item.label, required: item.required, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: item.relatedClass, mostSignificantClass: (_b = item.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = item.displayType) !== null && _c !== void 0 ? _c : ClientLayoutItemRelationDisplayType.SEARCH, editBehavior: (_d = item.editBehavior) !== null && _d !== void 0 ? _d : null, commonRelation: item.commonRelation, multiple: (_e = item.multiple) !== null && _e !== void 0 ? _e : false, dropdownValues: (_f = item.dropdownValues) !== null && _f !== void 0 ? _f : [], value: value, onMrdChange: this.handleChange, onMrdBlur: this.handleBlur, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll })));
|
|
33
32
|
}
|
|
34
|
-
if (item.type !== ClientLayoutItemType.FIELD
|
|
33
|
+
if (item.type !== ClientLayoutItemType.FIELD) {
|
|
35
34
|
return h(Host, null);
|
|
36
35
|
}
|
|
37
|
-
const field = item.field;
|
|
38
36
|
const commonProps = {
|
|
39
|
-
name:
|
|
40
|
-
label:
|
|
41
|
-
required:
|
|
42
|
-
disabled: (_g =
|
|
37
|
+
name: item.name,
|
|
38
|
+
label: item.label,
|
|
39
|
+
required: item.required,
|
|
40
|
+
disabled: (_g = item.disabled) !== null && _g !== void 0 ? _g : false,
|
|
43
41
|
locale,
|
|
44
42
|
onMrdChange: this.handleChange,
|
|
45
43
|
onMrdBlur: this.handleBlur,
|
|
46
44
|
};
|
|
47
|
-
switch (
|
|
45
|
+
switch (item.dataType) {
|
|
48
46
|
case ClientLayoutItemFieldDataType.TEXT:
|
|
49
|
-
return (h(Host, null, h("mrd-text-field", Object.assign({}, commonProps, { value: (_h = value) !== null && _h !== void 0 ? _h : '', placeholder: (_j =
|
|
47
|
+
return (h(Host, null, h("mrd-text-field", Object.assign({}, commonProps, { value: (_h = value) !== null && _h !== void 0 ? _h : '', placeholder: (_j = item.placeholder) !== null && _j !== void 0 ? _j : '' }))));
|
|
50
48
|
case ClientLayoutItemFieldDataType.TEXTBLOCK:
|
|
51
|
-
return (h(Host, null, h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_k = value) !== null && _k !== void 0 ? _k : '', placeholder: (_l =
|
|
49
|
+
return (h(Host, null, h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_k = value) !== null && _k !== void 0 ? _k : '', placeholder: (_l = item.placeholder) !== null && _l !== void 0 ? _l : '' }))));
|
|
52
50
|
case ClientLayoutItemFieldDataType.INTEGER:
|
|
53
51
|
case ClientLayoutItemFieldDataType.DECIMAL:
|
|
54
52
|
case ClientLayoutItemFieldDataType.PERCENTAGE:
|
|
55
|
-
return (h(Host, null, h("mrd-number-field", Object.assign({}, commonProps, { value: (_m = value) !== null && _m !== void 0 ? _m : null, dataType:
|
|
53
|
+
return (h(Host, null, h("mrd-number-field", Object.assign({}, commonProps, { value: (_m = value) !== null && _m !== void 0 ? _m : null, dataType: item.dataType, decimalPrecision: (_o = item.decimalPrecision) !== null && _o !== void 0 ? _o : 2, placeholder: (_p = item.placeholder) !== null && _p !== void 0 ? _p : '' }))));
|
|
56
54
|
case ClientLayoutItemFieldDataType.CURRENCY:
|
|
57
|
-
return (h(Host, null, h("mrd-currency-field", Object.assign({}, commonProps, { value: (_q = value) !== null && _q !== void 0 ? _q : { amount: null, currency: (_r =
|
|
55
|
+
return (h(Host, null, h("mrd-currency-field", Object.assign({}, commonProps, { value: (_q = value) !== null && _q !== void 0 ? _q : { amount: null, currency: (_r = item.currencyCode) !== null && _r !== void 0 ? _r : 'EUR' } }))));
|
|
58
56
|
case ClientLayoutItemFieldDataType.BOOLEAN:
|
|
59
57
|
return (h(Host, null, h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_s = value) !== null && _s !== void 0 ? _s : false }))));
|
|
60
58
|
case ClientLayoutItemFieldDataType.DATE:
|
|
@@ -64,17 +62,17 @@ export class MrdField {
|
|
|
64
62
|
case ClientLayoutItemFieldDataType.TIME:
|
|
65
63
|
return (h(Host, null, h("mrd-time-field", Object.assign({}, commonProps, { value: (_v = value) !== null && _v !== void 0 ? _v : '' }))));
|
|
66
64
|
case ClientLayoutItemFieldDataType.EMAIL:
|
|
67
|
-
return (h(Host, null, h("mrd-email-field", Object.assign({}, commonProps, { value: (_w = value) !== null && _w !== void 0 ? _w : '', placeholder: (_x =
|
|
65
|
+
return (h(Host, null, h("mrd-email-field", Object.assign({}, commonProps, { value: (_w = value) !== null && _w !== void 0 ? _w : '', placeholder: (_x = item.placeholder) !== null && _x !== void 0 ? _x : '' }))));
|
|
68
66
|
case ClientLayoutItemFieldDataType.HYPERLINK:
|
|
69
|
-
return (h(Host, null, h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', placeholder: (_z =
|
|
67
|
+
return (h(Host, null, h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', placeholder: (_z = item.placeholder) !== null && _z !== void 0 ? _z : '' }))));
|
|
70
68
|
case ClientLayoutItemFieldDataType.LIST:
|
|
71
|
-
return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (_0 = value) !== null && _0 !== void 0 ? _0 : '', multiple: (_1 =
|
|
69
|
+
return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (_0 = value) !== null && _0 !== void 0 ? _0 : '', multiple: (_1 = item.multiple) !== null && _1 !== void 0 ? _1 : false, listItems: (_2 = item.listItems) !== null && _2 !== void 0 ? _2 : [] }))));
|
|
72
70
|
case ClientLayoutItemFieldDataType.FILE:
|
|
73
|
-
return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { value: value, accept: (_3 =
|
|
71
|
+
return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { value: value, accept: (_3 = item.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = item.maxSize) !== null && _4 !== void 0 ? _4 : 0, onMrdUpload: this.handleUpload }))));
|
|
74
72
|
case ClientLayoutItemFieldDataType.IMAGE:
|
|
75
|
-
return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { value: value, accept: (_5 =
|
|
73
|
+
return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { value: value, accept: (_5 = item.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = item.maxSize) !== null && _6 !== void 0 ? _6 : 0, onMrdUpload: this.handleUpload }))));
|
|
76
74
|
case ClientLayoutItemFieldDataType.LONGTEXT:
|
|
77
|
-
return (h(Host, null, h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_7 = value) !== null && _7 !== void 0 ? _7 : '', placeholder: (_8 =
|
|
75
|
+
return (h(Host, null, h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_7 = value) !== null && _7 !== void 0 ? _7 : '', placeholder: (_8 = item.placeholder) !== null && _8 !== void 0 ? _8 : '' }))));
|
|
78
76
|
case ClientLayoutItemFieldDataType.JSON:
|
|
79
77
|
return h(Host, null);
|
|
80
78
|
default:
|
|
@@ -45,17 +45,17 @@ export class MrdForm {
|
|
|
45
45
|
const newHref = this.getHref(value);
|
|
46
46
|
if (newHref === prevHref)
|
|
47
47
|
return;
|
|
48
|
-
for (const
|
|
49
|
-
if (
|
|
48
|
+
for (const item of this.collectDependentDropdowns()) {
|
|
49
|
+
if (item.commonRelation !== name)
|
|
50
50
|
continue;
|
|
51
51
|
// Clear the dependent field's current selection (options have changed)
|
|
52
|
-
this.formValues = Object.assign(Object.assign({}, this.formValues), { [
|
|
52
|
+
this.formValues = Object.assign(Object.assign({}, this.formValues), { [item.name]: null });
|
|
53
53
|
this.mrdFetchAll.emit({
|
|
54
|
-
name:
|
|
55
|
-
relatedClass:
|
|
56
|
-
mostSignificantClass:
|
|
57
|
-
commonRelation:
|
|
58
|
-
filter:
|
|
54
|
+
name: item.name,
|
|
55
|
+
relatedClass: item.relatedClass,
|
|
56
|
+
mostSignificantClass: item.mostSignificantClass,
|
|
57
|
+
commonRelation: item.commonRelation,
|
|
58
|
+
filter: item.commonRelation + '_href',
|
|
59
59
|
filterValue: newHref, // empty string when dependency was cleared → host should clear the list
|
|
60
60
|
});
|
|
61
61
|
}
|
|
@@ -130,24 +130,20 @@ export class MrdForm {
|
|
|
130
130
|
var _a, _b;
|
|
131
131
|
const allItems = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
|
|
132
132
|
// Strategy 1: direct match on mostSignificantClass
|
|
133
|
-
const direct = allItems.find(item =>
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
});
|
|
138
|
-
if (direct === null || direct === void 0 ? void 0 : direct.relation)
|
|
139
|
-
return direct.relation.name;
|
|
133
|
+
const direct = allItems.find(item => item.type === ClientLayoutItemType.RELATION &&
|
|
134
|
+
item.mostSignificantClass === this.referenceClass);
|
|
135
|
+
if (direct === null || direct === void 0 ? void 0 : direct.name)
|
|
136
|
+
return direct.name;
|
|
140
137
|
// Strategy 2: a DROPDOWN whose commonRelation field was omitted from the layout
|
|
141
138
|
const layoutRelationNames = new Set(allItems
|
|
142
139
|
.filter(item => item.type === ClientLayoutItemType.RELATION)
|
|
143
|
-
.map(item => item.
|
|
140
|
+
.map(item => item.name));
|
|
144
141
|
for (const item of allItems) {
|
|
145
|
-
const rel = item.relation;
|
|
146
142
|
if (item.type === ClientLayoutItemType.RELATION &&
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
!layoutRelationNames.has(
|
|
150
|
-
return
|
|
143
|
+
item.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN &&
|
|
144
|
+
item.commonRelation &&
|
|
145
|
+
!layoutRelationNames.has(item.commonRelation)) {
|
|
146
|
+
return item.commonRelation;
|
|
151
147
|
}
|
|
152
148
|
}
|
|
153
149
|
return null;
|
|
@@ -162,25 +158,21 @@ export class MrdForm {
|
|
|
162
158
|
collectDependentDropdowns() {
|
|
163
159
|
var _a, _b;
|
|
164
160
|
return this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : [])
|
|
165
|
-
.filter(item =>
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
((_a = item.relation) === null || _a === void 0 ? void 0 : _a.editBehavior) === ClientLayoutItemRelationEditBehavior.DROPDOWN &&
|
|
169
|
-
!!item.relation.commonRelation;
|
|
170
|
-
})
|
|
171
|
-
.map(item => item.relation);
|
|
161
|
+
.filter(item => item.type === ClientLayoutItemType.RELATION &&
|
|
162
|
+
item.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN &&
|
|
163
|
+
!!item.commonRelation);
|
|
172
164
|
}
|
|
173
165
|
/** Emit mrdFetchAll for every dependent DROPDOWN whose filter value is currently set. */
|
|
174
166
|
emitDependentFetchAll() {
|
|
175
|
-
for (const
|
|
176
|
-
const filterValue = this.getHref(this.formValues[
|
|
167
|
+
for (const item of this.collectDependentDropdowns()) {
|
|
168
|
+
const filterValue = this.getHref(this.formValues[item.commonRelation]);
|
|
177
169
|
if (filterValue) {
|
|
178
170
|
this.mrdFetchAll.emit({
|
|
179
|
-
name:
|
|
180
|
-
relatedClass:
|
|
181
|
-
mostSignificantClass:
|
|
182
|
-
commonRelation:
|
|
183
|
-
filter:
|
|
171
|
+
name: item.name,
|
|
172
|
+
relatedClass: item.relatedClass,
|
|
173
|
+
mostSignificantClass: item.mostSignificantClass,
|
|
174
|
+
commonRelation: item.commonRelation,
|
|
175
|
+
filter: item.commonRelation + '_href',
|
|
184
176
|
filterValue,
|
|
185
177
|
});
|
|
186
178
|
}
|
|
@@ -210,15 +202,14 @@ export class MrdForm {
|
|
|
210
202
|
return fields;
|
|
211
203
|
}
|
|
212
204
|
validate() {
|
|
213
|
-
var _a, _b
|
|
205
|
+
var _a, _b;
|
|
214
206
|
const newErrors = {};
|
|
215
207
|
const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
|
|
216
208
|
for (const item of allFields) {
|
|
217
|
-
|
|
218
|
-
if (!def)
|
|
209
|
+
if (!item.name)
|
|
219
210
|
continue;
|
|
220
|
-
if (
|
|
221
|
-
newErrors[
|
|
211
|
+
if (item.required && !validateRequired(this.formValues[item.name])) {
|
|
212
|
+
newErrors[item.name] = t('required', this.locale);
|
|
222
213
|
}
|
|
223
214
|
}
|
|
224
215
|
this.errors = newErrors;
|
|
@@ -266,8 +257,10 @@ export class MrdForm {
|
|
|
266
257
|
const payload = {};
|
|
267
258
|
const allFields = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
|
|
268
259
|
for (const item of allFields) {
|
|
269
|
-
if (item.
|
|
270
|
-
|
|
260
|
+
if (!item.name)
|
|
261
|
+
continue;
|
|
262
|
+
const name = item.name;
|
|
263
|
+
if (item.type === ClientLayoutItemType.FIELD) {
|
|
271
264
|
const value = this.formValues[name];
|
|
272
265
|
if (value instanceof File)
|
|
273
266
|
continue;
|
|
@@ -277,8 +270,7 @@ export class MrdForm {
|
|
|
277
270
|
continue;
|
|
278
271
|
payload[name] = current;
|
|
279
272
|
}
|
|
280
|
-
else if (item.type === ClientLayoutItemType.RELATION
|
|
281
|
-
const name = item.relation.name;
|
|
273
|
+
else if (item.type === ClientLayoutItemType.RELATION) {
|
|
282
274
|
const current = this.normalizeRelationValue(this.formValues[name]);
|
|
283
275
|
const initial = this.normalizeRelationValue(this.initialValues[name]);
|
|
284
276
|
if (this.deepEqual(current, initial))
|
|
@@ -290,14 +282,14 @@ export class MrdForm {
|
|
|
290
282
|
}
|
|
291
283
|
renderItems(items) {
|
|
292
284
|
return items.map(item => {
|
|
293
|
-
var _a
|
|
285
|
+
var _a;
|
|
294
286
|
if (item.type === ClientLayoutItemType.SECTION) {
|
|
295
287
|
return (h("fieldset", { class: "mrd-form__section" }, item.label && h("legend", { class: "mrd-form__section-legend" }, item.label), h("div", { class: "mrd-form__section-body" }, item.items && this.renderItems(item.items))));
|
|
296
288
|
}
|
|
297
289
|
if (item.type === ClientLayoutItemType.GROUP) {
|
|
298
290
|
return (h("div", { class: "mrd-form__group" }, item.label && h("div", { class: "mrd-form__group-label" }, item.label), h("div", { class: "mrd-form__group-body" }, item.items && this.renderItems(item.items))));
|
|
299
291
|
}
|
|
300
|
-
const fieldName = (
|
|
292
|
+
const fieldName = (_a = item.name) !== null && _a !== void 0 ? _a : '';
|
|
301
293
|
const fieldValue = this.formValues[fieldName];
|
|
302
294
|
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, onMrdUpload: this.handleUpload }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
|
|
303
295
|
});
|
|
@@ -73,34 +73,32 @@ export class MrdLayoutSection {
|
|
|
73
73
|
});
|
|
74
74
|
}
|
|
75
75
|
emitLoadViews() {
|
|
76
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
76
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
77
77
|
const dataLinks = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
|
|
78
78
|
for (const item of this.flattenItems(this.items)) {
|
|
79
|
-
if (item.type === ClientLayoutItemType.RELATED_VIEW && item.
|
|
80
|
-
const
|
|
81
|
-
const viewConfig = this.views[rv.name];
|
|
79
|
+
if (item.type === ClientLayoutItemType.RELATED_VIEW && item.name) {
|
|
80
|
+
const viewConfig = this.views[item.name];
|
|
82
81
|
if (!viewConfig)
|
|
83
82
|
continue;
|
|
84
|
-
const href = (
|
|
85
|
-
this.mrdLoadView.emit({ name:
|
|
83
|
+
const href = (_d = dataLinks[(_c = item.relatedClass) !== null && _c !== void 0 ? _c : '']) === null || _d === void 0 ? void 0 : _d.href;
|
|
84
|
+
this.mrdLoadView.emit({ name: item.name, href, viewConfig, sort: (_e = viewConfig.defaultSort) !== null && _e !== void 0 ? _e : '', filters: this.resolveViewFilters(viewConfig) });
|
|
86
85
|
}
|
|
87
86
|
else if (item.type === ClientLayoutItemType.VIEW) {
|
|
88
|
-
const viewName =
|
|
87
|
+
const viewName = item.name;
|
|
89
88
|
if (!viewName)
|
|
90
89
|
continue;
|
|
91
90
|
const viewConfig = this.views[viewName];
|
|
92
91
|
if (!viewConfig)
|
|
93
92
|
continue;
|
|
94
|
-
const href = (
|
|
95
|
-
this.mrdLoadView.emit({ name: viewName, href, viewConfig, sort: (
|
|
93
|
+
const href = (_f = this.links[viewName]) === null || _f === void 0 ? void 0 : _f.href;
|
|
94
|
+
this.mrdLoadView.emit({ name: viewName, href, viewConfig, sort: (_g = viewConfig.defaultSort) !== null && _g !== void 0 ? _g : '', filters: this.resolveViewFilters(viewConfig) });
|
|
96
95
|
}
|
|
97
96
|
}
|
|
98
97
|
}
|
|
99
98
|
emitLoadImages() {
|
|
100
|
-
var _a;
|
|
101
99
|
for (const item of this.flattenItems(this.items)) {
|
|
102
|
-
if (item.type === ClientLayoutItemType.FIELD &&
|
|
103
|
-
const fieldName = item.
|
|
100
|
+
if (item.type === ClientLayoutItemType.FIELD && item.dataType === ClientLayoutItemFieldDataType.IMAGE) {
|
|
101
|
+
const fieldName = item.name;
|
|
104
102
|
const raw = this.data[fieldName];
|
|
105
103
|
const href = raw === null || raw === void 0 ? void 0 : raw.href;
|
|
106
104
|
if (href)
|
|
@@ -158,15 +156,15 @@ export class MrdLayoutSection {
|
|
|
158
156
|
this.imagePreviewUrl = url;
|
|
159
157
|
}
|
|
160
158
|
resolveSearchKey() {
|
|
159
|
+
var _a;
|
|
161
160
|
const items = this.flattenItems(this.items).filter(i => i.type === ClientLayoutItemType.SEARCH);
|
|
162
|
-
if (items.length === 1
|
|
163
|
-
return items[0].
|
|
161
|
+
if (items.length === 1)
|
|
162
|
+
return (_a = items[0].dataClass) !== null && _a !== void 0 ? _a : null;
|
|
164
163
|
return null;
|
|
165
164
|
}
|
|
166
165
|
renderSingleFieldValue(item, value) {
|
|
167
166
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
168
|
-
const
|
|
169
|
-
const dt = field.dataType;
|
|
167
|
+
const dt = item.dataType;
|
|
170
168
|
switch (dt) {
|
|
171
169
|
case ClientLayoutItemFieldDataType.HYPERLINK: {
|
|
172
170
|
const v = value;
|
|
@@ -190,7 +188,7 @@ export class MrdLayoutSection {
|
|
|
190
188
|
const v = value;
|
|
191
189
|
const href = (_f = v === null || v === void 0 ? void 0 : v.href) !== null && _f !== void 0 ? _f : '';
|
|
192
190
|
const fileName = (_g = v === null || v === void 0 ? void 0 : v.fileName) !== null && _g !== void 0 ? _g : '';
|
|
193
|
-
const previewUrl = this.imagePreviews[
|
|
191
|
+
const previewUrl = this.imagePreviews[item.name];
|
|
194
192
|
if (previewUrl) {
|
|
195
193
|
return (h("button", { class: "mrd-layout-section__image-thumb-btn", onClick: () => { this.imagePreviewUrl = previewUrl; }, title: fileName || undefined }, h("img", { class: "mrd-layout-section__image-thumb", src: previewUrl, alt: fileName })));
|
|
196
194
|
}
|
|
@@ -199,7 +197,7 @@ export class MrdLayoutSection {
|
|
|
199
197
|
case ClientLayoutItemFieldDataType.BOOLEAN:
|
|
200
198
|
return (h("span", { class: `mrd-layout-section__boolean mrd-layout-section__boolean--${value ? 'true' : 'false'}` }, value ? t('yes', this.locale) : t('no', this.locale)));
|
|
201
199
|
case ClientLayoutItemFieldDataType.LIST: {
|
|
202
|
-
const listItem = ((_h =
|
|
200
|
+
const listItem = ((_h = item.listItems) !== null && _h !== void 0 ? _h : []).find(li => li.key === String(value));
|
|
203
201
|
const label = (_j = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _j !== void 0 ? _j : String(value);
|
|
204
202
|
const color = listItem === null || listItem === void 0 ? void 0 : listItem.color;
|
|
205
203
|
const bg = listItem === null || listItem === void 0 ? void 0 : listItem.backgroundColor;
|
|
@@ -212,7 +210,7 @@ export class MrdLayoutSection {
|
|
|
212
210
|
return label;
|
|
213
211
|
}
|
|
214
212
|
default: {
|
|
215
|
-
const text = CellRenderer.renderValue(dt, value, (_k =
|
|
213
|
+
const text = CellRenderer.renderValue(dt, value, (_k = item.listItems) !== null && _k !== void 0 ? _k : [], this.locale);
|
|
216
214
|
return text || null;
|
|
217
215
|
}
|
|
218
216
|
}
|
|
@@ -220,8 +218,7 @@ export class MrdLayoutSection {
|
|
|
220
218
|
renderFieldValue(item, rawValue) {
|
|
221
219
|
if (rawValue == null || rawValue === '')
|
|
222
220
|
return null;
|
|
223
|
-
|
|
224
|
-
if (field.multiple && Array.isArray(rawValue)) {
|
|
221
|
+
if (item.multiple && Array.isArray(rawValue)) {
|
|
225
222
|
const rendered = rawValue.map(v => this.renderSingleFieldValue(item, v));
|
|
226
223
|
if (rendered.every(r => typeof r === 'string' || r == null)) {
|
|
227
224
|
return rendered.filter(Boolean).join(', ') || null;
|
|
@@ -231,27 +228,26 @@ export class MrdLayoutSection {
|
|
|
231
228
|
return this.renderSingleFieldValue(item, rawValue);
|
|
232
229
|
}
|
|
233
230
|
renderField(item) {
|
|
234
|
-
if (!item.
|
|
231
|
+
if (!item.name)
|
|
235
232
|
return null;
|
|
236
|
-
const
|
|
237
|
-
const rawValue = this.data[field.name];
|
|
233
|
+
const rawValue = this.data[item.name];
|
|
238
234
|
const renderedValue = this.renderFieldValue(item, rawValue);
|
|
239
|
-
if (
|
|
240
|
-
return (h("h1", { class: "mrd-layout-section__field-header", key:
|
|
235
|
+
if (item.header) {
|
|
236
|
+
return (h("h1", { class: "mrd-layout-section__field-header", key: item.name }, typeof renderedValue === 'string' ? renderedValue : rawValue != null ? String(rawValue) : item.label));
|
|
241
237
|
}
|
|
242
238
|
if (renderedValue == null)
|
|
243
239
|
return null;
|
|
244
|
-
const isBlock =
|
|
245
|
-
||
|
|
246
|
-
||
|
|
247
|
-
return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key:
|
|
240
|
+
const isBlock = item.dataType === ClientLayoutItemFieldDataType.TEXTBLOCK
|
|
241
|
+
|| item.dataType === ClientLayoutItemFieldDataType.LONGTEXT
|
|
242
|
+
|| item.dataType === ClientLayoutItemFieldDataType.JSON;
|
|
243
|
+
return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, renderedValue)));
|
|
248
244
|
}
|
|
249
245
|
renderRelation(item) {
|
|
250
246
|
var _a, _b, _c;
|
|
251
|
-
if (!item.
|
|
247
|
+
if (!item.name)
|
|
252
248
|
return null;
|
|
253
249
|
const links = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
|
|
254
|
-
const link = links[item.
|
|
250
|
+
const link = links[item.name];
|
|
255
251
|
if (!link)
|
|
256
252
|
return null;
|
|
257
253
|
const makeBtn = (href, name) => (h("button", { key: href, class: "mrd-layout-section__relation-link", onClick: () => this.mrdNavigate.emit({ href, label: name }) }, name));
|
|
@@ -264,41 +260,36 @@ export class MrdLayoutSection {
|
|
|
264
260
|
}
|
|
265
261
|
if (!valueContent)
|
|
266
262
|
return null;
|
|
267
|
-
return (h("div", { class: "mrd-layout-section__field", key: item.
|
|
263
|
+
return (h("div", { class: "mrd-layout-section__field", key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, valueContent)));
|
|
268
264
|
}
|
|
269
265
|
renderSearch(item) {
|
|
270
266
|
var _a, _b, _c;
|
|
271
|
-
if (!item.
|
|
267
|
+
if (!item.dataClass)
|
|
272
268
|
return null;
|
|
273
|
-
const dataClass = item.
|
|
269
|
+
const dataClass = item.dataClass;
|
|
274
270
|
const query = (_a = this.searchQueryMap[dataClass]) !== null && _a !== void 0 ? _a : '';
|
|
275
271
|
const results = (_b = this.searchResultsMap[dataClass]) !== null && _b !== void 0 ? _b : [];
|
|
276
272
|
return (h("div", { class: "mrd-layout-section__search", key: `search-${dataClass}` }, h("div", { class: "mrd-layout-section__search-wrap" }, h("svg", { class: "mrd-layout-section__search-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", "clip-rule": "evenodd" })), h("input", { class: "mrd-layout-section__search-input", type: "text", value: query, placeholder: (_c = item.label) !== null && _c !== void 0 ? _c : '', onInput: e => this.handleSearchInput(dataClass, e.target.value) })), results.length > 0 && (h("ul", { class: "mrd-layout-section__search-results" }, results.map(r => (h("li", { key: r.id, class: "mrd-layout-section__search-result" }, h("button", { class: "mrd-layout-section__search-result-btn", onClick: () => this.mrdNavigate.emit({ href: r.id, label: r.label }) }, h("span", { class: "mrd-layout-section__search-result-label" }, r.label), r.description && h("span", { class: "mrd-layout-section__search-result-desc" }, r.description)))))))));
|
|
277
273
|
}
|
|
278
274
|
renderRelatedView(item) {
|
|
279
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m
|
|
275
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
280
276
|
const isRelated = item.type === ClientLayoutItemType.RELATED_VIEW;
|
|
281
|
-
|
|
282
|
-
const name = isRelated
|
|
283
|
-
? (_a = item.relatedView) === null || _a === void 0 ? void 0 : _a.name
|
|
284
|
-
: ((_c = (_b = item.view) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : item.name);
|
|
277
|
+
const name = item.name;
|
|
285
278
|
if (!name)
|
|
286
279
|
return null;
|
|
287
280
|
const viewConfig = this.views[name];
|
|
288
281
|
if (!viewConfig)
|
|
289
282
|
return null;
|
|
290
|
-
const showTitle =
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
const activeName = (_h = this.activeViewMap[name]) !== null && _h !== void 0 ? _h : name;
|
|
294
|
-
const activeViewConfig = (_j = this.views[activeName]) !== null && _j !== void 0 ? _j : viewConfig;
|
|
283
|
+
const showTitle = (_a = item.showTitle) !== null && _a !== void 0 ? _a : false;
|
|
284
|
+
const activeName = (_b = this.activeViewMap[name]) !== null && _b !== void 0 ? _b : name;
|
|
285
|
+
const activeViewConfig = (_c = this.views[activeName]) !== null && _c !== void 0 ? _c : viewConfig;
|
|
295
286
|
// Build the full view list (original + alternatives) so the switcher can always go back.
|
|
296
|
-
const originalLabel = (
|
|
297
|
-
const allViews = [{ name, label: originalLabel }, ...((
|
|
287
|
+
const originalLabel = (_f = (_e = (_d = viewConfig.pluralLabel) !== null && _d !== void 0 ? _d : viewConfig.singularLabel) !== null && _e !== void 0 ? _e : item.label) !== null && _f !== void 0 ? _f : name;
|
|
288
|
+
const allViews = [{ name, label: originalLabel }, ...((_g = item.alternativeViews) !== null && _g !== void 0 ? _g : [])];
|
|
298
289
|
const activeEntry = allViews.find(v => v.name === activeName);
|
|
299
|
-
const viewLabel = (
|
|
290
|
+
const viewLabel = (_k = (_j = (_h = activeEntry === null || activeEntry === void 0 ? void 0 : activeEntry.label) !== null && _h !== void 0 ? _h : activeViewConfig.pluralLabel) !== null && _j !== void 0 ? _j : activeViewConfig.singularLabel) !== null && _k !== void 0 ? _k : '';
|
|
300
291
|
const altViews = allViews.filter(v => v.name !== activeName);
|
|
301
|
-
const rawActions = (
|
|
292
|
+
const rawActions = (_l = item.actions) !== null && _l !== void 0 ? _l : ['NEW', 'EXPORT'];
|
|
302
293
|
const tableActions = rawActions.reduce((acc, a) => {
|
|
303
294
|
if (a === 'NEW')
|
|
304
295
|
acc.push({ action: 'create', label: t('table_new_record', this.locale), icon: 'assets/sprites.svg#icon-plus', variant: 'primary' });
|
|
@@ -306,8 +297,8 @@ export class MrdLayoutSection {
|
|
|
306
297
|
acc.push({ action: 'export', label: t('table_export_excel', this.locale), icon: 'assets/sprites.svg#icon-file-excel' });
|
|
307
298
|
return acc;
|
|
308
299
|
}, []);
|
|
309
|
-
return (h("div", { class: "mrd-layout-section__related-view", key: `view-${name}` }, showTitle && item.label && h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), h("mrd-table", { "data-view": name, columns: activeViewConfig.values, locale: this.locale, defaultSort: (
|
|
310
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
300
|
+
return (h("div", { class: "mrd-layout-section__related-view", key: `view-${name}` }, showTitle && item.label && h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), h("mrd-table", { "data-view": name, columns: activeViewConfig.values, locale: this.locale, defaultSort: (_m = activeViewConfig.defaultSort) !== null && _m !== void 0 ? _m : '', viewLabel: viewLabel, alternativeViews: altViews, actions: tableActions, onMrdLoadPage: (e) => this.handleViewLoadPage(e, name), onMrdSwitchView: (e) => {
|
|
301
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
311
302
|
e.stopPropagation();
|
|
312
303
|
const newViewName = e.detail.name;
|
|
313
304
|
const newViewConfig = this.views[newViewName];
|
|
@@ -317,20 +308,20 @@ export class MrdLayoutSection {
|
|
|
317
308
|
this.activeFiltersMap = Object.assign(Object.assign({}, this.activeFiltersMap), { [name]: [] });
|
|
318
309
|
const dataLinks = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
|
|
319
310
|
const href = isRelated
|
|
320
|
-
? (
|
|
321
|
-
: ((
|
|
322
|
-
this.mrdLoadView.emit({ name, href, viewConfig: newViewConfig, sort: (
|
|
311
|
+
? (_d = dataLinks[(_c = item.relatedClass) !== null && _c !== void 0 ? _c : '']) === null || _d === void 0 ? void 0 : _d.href
|
|
312
|
+
: ((_f = (_e = this.links[newViewName]) === null || _e === void 0 ? void 0 : _e.href) !== null && _f !== void 0 ? _f : (_g = this.links[name]) === null || _g === void 0 ? void 0 : _g.href);
|
|
313
|
+
this.mrdLoadView.emit({ name, href, viewConfig: newViewConfig, sort: (_h = newViewConfig.defaultSort) !== null && _h !== void 0 ? _h : '', filters: this.resolveViewFilters(newViewConfig) });
|
|
323
314
|
}, onMrdFilter: (e) => {
|
|
324
315
|
e.stopPropagation();
|
|
325
316
|
this.activeFiltersMap = Object.assign(Object.assign({}, this.activeFiltersMap), { [name]: e.detail.filters });
|
|
326
317
|
}, onMrdLoadAggregations: (e) => {
|
|
327
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
318
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
328
319
|
e.stopPropagation();
|
|
329
320
|
const dataLinks = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
|
|
330
321
|
const href = isRelated
|
|
331
|
-
? (
|
|
332
|
-
: ((
|
|
333
|
-
const filters = (
|
|
322
|
+
? (_d = dataLinks[(_c = item.relatedClass) !== null && _c !== void 0 ? _c : '']) === null || _d === void 0 ? void 0 : _d.href
|
|
323
|
+
: ((_g = (_f = this.links[(_e = this.activeViewMap[name]) !== null && _e !== void 0 ? _e : name]) === null || _f === void 0 ? void 0 : _f.href) !== null && _g !== void 0 ? _g : (_h = this.links[name]) === null || _h === void 0 ? void 0 : _h.href);
|
|
324
|
+
const filters = (_j = this.activeFiltersMap[name]) !== null && _j !== void 0 ? _j : [];
|
|
334
325
|
this.mrdLoadViewAggregations.emit(Object.assign({ name, href, filters }, e.detail));
|
|
335
326
|
}, onMrdAction: (e) => {
|
|
336
327
|
var _a, _b, _c;
|
|
@@ -352,7 +343,7 @@ export class MrdLayoutSection {
|
|
|
352
343
|
case ClientLayoutItemType.TEXT:
|
|
353
344
|
return h("div", { class: "mrd-layout-section__text", key: `text-${item.label}`, innerHTML: (_a = item.label) !== null && _a !== void 0 ? _a : '' });
|
|
354
345
|
case ClientLayoutItemType.NAVIGATE:
|
|
355
|
-
return (h("button", { class: "mrd-layout-section__navigate", key: `nav-${item.label}`, onClick: () => { var _a; return this.mrdNavigate.emit({ label: (_a = item.label) !== null && _a !== void 0 ? _a : '', navigate: item.navigate }); } }, item.label));
|
|
346
|
+
return (h("button", { class: "mrd-layout-section__navigate", key: `nav-${item.label}`, onClick: () => { var _a, _b, _c; return this.mrdNavigate.emit({ label: (_a = item.label) !== null && _a !== void 0 ? _a : '', navigate: (_b = item.navigate) !== null && _b !== void 0 ? _b : { dataClass: (_c = item.dataClass) !== null && _c !== void 0 ? _c : '', icon: item.icon, navigationType: item.navigationType } }); } }, item.label));
|
|
356
347
|
case ClientLayoutItemType.SEARCH:
|
|
357
348
|
return this.renderSearch(item);
|
|
358
349
|
case ClientLayoutItemType.SECTION:
|
|
@@ -371,7 +362,7 @@ export class MrdLayoutSection {
|
|
|
371
362
|
return (h("div", { class: "mrd-layout-section__modal-backdrop", onClick: () => { this.imagePreviewUrl = null; } }, h("div", { class: "mrd-layout-section__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-layout-section__modal-close", onClick: () => { this.imagePreviewUrl = null; } }, "\u2715"), h("img", { class: "mrd-layout-section__modal-image", src: this.imagePreviewUrl, alt: "" }))));
|
|
372
363
|
}
|
|
373
364
|
render() {
|
|
374
|
-
return (h(Host, { key: '
|
|
365
|
+
return (h(Host, { key: '7a91a541e056965dc79d74a50827e8c270c33a0d' }, h("div", { key: 'bcf4a2e81e704d136fb437cd2cb22acb4a05a8b3', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
|
|
375
366
|
}
|
|
376
367
|
static get is() { return "mrd-layout-section"; }
|
|
377
368
|
static get encapsulation() { return "scoped"; }
|