tuain-ng-forms-lib 14.1.2 → 14.3.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/esm2020/lib/classes/forms/element.mjs +9 -3
- package/esm2020/lib/classes/forms/field.mjs +325 -243
- package/esm2020/lib/classes/forms/form.mjs +26 -26
- package/esm2020/lib/classes/forms/subsection.mjs +2 -2
- package/esm2020/lib/components/elements/action.component.mjs +3 -3
- package/esm2020/lib/components/elements/field.component.mjs +38 -46
- package/esm2020/lib/components/elements/layout/element.component.mjs +3 -3
- package/esm2020/lib/components/elements/layout/form-error.component.mjs +3 -3
- package/esm2020/lib/components/elements/layout/form-header.component.mjs +3 -3
- package/esm2020/lib/components/elements/layout/section.component.mjs +3 -3
- package/esm2020/lib/components/elements/layout/sub-section.component.mjs +3 -3
- package/esm2020/lib/components/elements/tables/table-record-action.component.mjs +3 -3
- package/esm2020/lib/components/elements/tables/table-record-field.component.mjs +3 -3
- package/esm2020/lib/components/elements/tables/table.component.mjs +3 -3
- package/esm2020/lib/components/forms/basic-form.mjs +76 -37
- package/esm2020/lib/tuain-ng-forms-lib.module.mjs +7 -9
- package/fesm2015/tuain-ng-forms-lib.mjs +511 -391
- package/fesm2015/tuain-ng-forms-lib.mjs.map +1 -1
- package/fesm2020/tuain-ng-forms-lib.mjs +503 -385
- package/fesm2020/tuain-ng-forms-lib.mjs.map +1 -1
- package/lib/classes/forms/element.d.ts +7 -6
- package/lib/classes/forms/field.d.ts +168 -72
- package/lib/classes/forms/form.d.ts +1 -1
- package/lib/components/elements/action.component.d.ts +1 -1
- package/lib/components/elements/field.component.d.ts +11 -11
- package/lib/components/elements/layout/element.component.d.ts +1 -1
- package/lib/components/elements/layout/form-error.component.d.ts +1 -1
- package/lib/components/elements/layout/form-header.component.d.ts +1 -1
- package/lib/components/elements/layout/section.component.d.ts +1 -1
- package/lib/components/elements/layout/sub-section.component.d.ts +1 -1
- package/lib/components/elements/tables/table-record-action.component.d.ts +1 -1
- package/lib/components/elements/tables/table-record-field.component.d.ts +1 -1
- package/lib/components/elements/tables/table.component.d.ts +1 -1
- package/lib/components/forms/basic-form.d.ts +9 -5
- package/package.json +1 -1
|
@@ -41,9 +41,9 @@ class ActionComponent {
|
|
|
41
41
|
return !(this.action?.enabledOn(this.state));
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
-
ActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
45
|
-
ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
44
|
+
ActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45
|
+
ActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: ActionComponent, selector: "lib-action", inputs: { action: "action", busy: "busy", relatedField: "relatedField", state: "state", style: "style", showLabel: "showLabel" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ActionComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
48
48
|
args: [{
|
|
49
49
|
selector: 'lib-action',
|
|
@@ -66,27 +66,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
66
66
|
const VALUE = 'value';
|
|
67
67
|
const FOCUS = 'focus';
|
|
68
68
|
class FieldComponent {
|
|
69
|
+
constructor() {
|
|
70
|
+
// Atributos obtenidos estáticamente
|
|
71
|
+
this.code = '';
|
|
72
|
+
this.info = '';
|
|
73
|
+
this.alignment = '';
|
|
74
|
+
this.tooltip = '';
|
|
75
|
+
this.field = null;
|
|
76
|
+
}
|
|
69
77
|
ngOnInit() {
|
|
70
|
-
if (this.field) {
|
|
71
|
-
|
|
72
|
-
// Inicialización
|
|
73
|
-
const mapping = Object.entries(this.formConfig.componentFieldAttrMap);
|
|
74
|
-
for (let index = 0; index < mapping.length; index++) {
|
|
75
|
-
const [fieldAttr1, compAttr1] = mapping[index];
|
|
76
|
-
const compAttr = compAttr1.toString();
|
|
77
|
-
const fieldAttr = fieldAttr1.toString();
|
|
78
|
-
const attributeValue = this.field?.[fieldAttr];
|
|
79
|
-
this.dafaultProcessFieldChange(compAttr, attributeValue);
|
|
80
|
-
this.processFieldChange(compAttr, attributeValue);
|
|
81
|
-
}
|
|
82
|
-
// Subscripción a cambios en atributos
|
|
83
|
-
this.field.attributeChange.subscribe(event => {
|
|
84
|
-
const { name: fieldAttr, value } = event;
|
|
85
|
-
const compAttr = this.formConfig.componentFieldAttrMap[fieldAttr];
|
|
86
|
-
this.dafaultProcessFieldChange(compAttr, value);
|
|
87
|
-
this.processFieldChange(compAttr, value);
|
|
88
|
-
});
|
|
78
|
+
if (!this.field) {
|
|
79
|
+
return;
|
|
89
80
|
}
|
|
81
|
+
this.formConfig = this.field?._formConfig;
|
|
82
|
+
// Inicialización
|
|
83
|
+
const mapping = this.formConfig.fieldPropagateAttributes;
|
|
84
|
+
for (let index = 0; index < mapping.length; index++) {
|
|
85
|
+
const attrName = mapping[index].toString();
|
|
86
|
+
const attributeValue = this.field?.[attrName];
|
|
87
|
+
this.dafaultProcessFieldChange(attrName, attributeValue);
|
|
88
|
+
this.processFieldChange(attrName, attributeValue);
|
|
89
|
+
}
|
|
90
|
+
// Subscripción a cambios en atributos
|
|
91
|
+
this.field?.attributeChange.subscribe(event => {
|
|
92
|
+
const { name: attrName, value } = event;
|
|
93
|
+
this.dafaultProcessFieldChange(attrName, value);
|
|
94
|
+
this.processFieldChange(attrName, value);
|
|
95
|
+
});
|
|
90
96
|
this.start();
|
|
91
97
|
}
|
|
92
98
|
dafaultProcessFieldChange(attribute, value) {
|
|
@@ -100,46 +106,32 @@ class FieldComponent {
|
|
|
100
106
|
this[attribute] = value;
|
|
101
107
|
}
|
|
102
108
|
}
|
|
109
|
+
get visible() { return this.field?.visibleOn(this.state); }
|
|
110
|
+
get disabled() { return !this.field?.enabledOn(this.state); }
|
|
111
|
+
updateValue() { this.value = this.field?.value; }
|
|
112
|
+
onInputChange() { setTimeout(() => this.field?.notifyEditionPartial(), 50); }
|
|
113
|
+
onChangeContent() { setTimeout(() => this.field?.notifyEditionFinish(), 50); }
|
|
114
|
+
onShowInfo(detail = null) { setTimeout(() => this.field?.notifyEditionDetailRequest(detail), 50); }
|
|
103
115
|
processFieldChange(attribute, value) { }
|
|
104
116
|
start() { }
|
|
105
117
|
focus() { }
|
|
106
|
-
updateObject() {
|
|
107
|
-
this.field.setValue(this.value);
|
|
108
|
-
}
|
|
118
|
+
updateObject() { this.field?.setValue(this.value); }
|
|
109
119
|
inputChanged() {
|
|
110
|
-
this.field
|
|
120
|
+
this.field?.setValue(this.value);
|
|
111
121
|
this.onChangeContent();
|
|
112
122
|
}
|
|
113
123
|
inputTyped() {
|
|
114
|
-
this.field
|
|
124
|
+
this.field?.setValue(this.value);
|
|
115
125
|
this.onInputChange();
|
|
116
126
|
}
|
|
117
|
-
updateValue() {
|
|
118
|
-
this.value = this.field.getValue();
|
|
119
|
-
}
|
|
120
|
-
onInputChange() {
|
|
121
|
-
setTimeout(() => this.field.notifyEditionPartial(), 50);
|
|
122
|
-
}
|
|
123
|
-
onChangeContent() {
|
|
124
|
-
setTimeout(() => this.field.notifyEditionFinish(), 50);
|
|
125
|
-
}
|
|
126
|
-
onShowInfo(detail = null) {
|
|
127
|
-
setTimeout(() => this.field.notifyEditionDetailRequest(detail), 50);
|
|
128
|
-
}
|
|
129
127
|
numberInputValidation(event) {
|
|
130
128
|
const k = event.charCode;
|
|
131
129
|
return (k > 47 && k < 58);
|
|
132
130
|
}
|
|
133
|
-
get visible() {
|
|
134
|
-
return this.field?.visibleOn(this.state);
|
|
135
|
-
}
|
|
136
|
-
get disabled() {
|
|
137
|
-
return !this.field?.enabledOn(this.state);
|
|
138
|
-
}
|
|
139
131
|
}
|
|
140
|
-
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
141
|
-
FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
132
|
+
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
133
|
+
FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: FieldComponent, selector: "lib-field", inputs: { field: "field", state: "state" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FieldComponent, decorators: [{
|
|
143
135
|
type: Component,
|
|
144
136
|
args: [{
|
|
145
137
|
selector: 'lib-field',
|
|
@@ -164,9 +156,9 @@ class ElementComponent {
|
|
|
164
156
|
return !this.element?.enabledOn(this.state);
|
|
165
157
|
}
|
|
166
158
|
}
|
|
167
|
-
ElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
168
|
-
ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
159
|
+
ElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
160
|
+
ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: ElementComponent, selector: "lib-element", inputs: { element: "element", form: "form", state: "state" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ElementComponent, decorators: [{
|
|
170
162
|
type: Component,
|
|
171
163
|
args: [{
|
|
172
164
|
selector: 'lib-element',
|
|
@@ -182,9 +174,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
182
174
|
|
|
183
175
|
class FormErrorComponent {
|
|
184
176
|
}
|
|
185
|
-
FormErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
186
|
-
FormErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
177
|
+
FormErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
178
|
+
FormErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: FormErrorComponent, selector: "lib-form-error", inputs: { errorTitle: "errorTitle", errorMessage: "errorMessage", errorType: "errorType" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormErrorComponent, decorators: [{
|
|
188
180
|
type: Component,
|
|
189
181
|
args: [{
|
|
190
182
|
selector: 'lib-form-error',
|
|
@@ -207,9 +199,9 @@ class FormHeaderComponent {
|
|
|
207
199
|
this.goBackEvent.emit();
|
|
208
200
|
}
|
|
209
201
|
}
|
|
210
|
-
FormHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
211
|
-
FormHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
202
|
+
FormHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
203
|
+
FormHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: FormHeaderComponent, selector: "lib-form-header", inputs: { formManager: "formManager", goBackAction: "goBackAction", showTitle: "showTitle", headerActions: "headerActions" }, outputs: { goBackEvent: "goBackEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormHeaderComponent, decorators: [{
|
|
213
205
|
type: Component,
|
|
214
206
|
args: [{
|
|
215
207
|
selector: 'lib-form-header',
|
|
@@ -233,9 +225,9 @@ class SectionComponent {
|
|
|
233
225
|
}
|
|
234
226
|
start() { }
|
|
235
227
|
}
|
|
236
|
-
SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
237
|
-
SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
228
|
+
SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
229
|
+
SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: SectionComponent, selector: "lib-section", inputs: { section: "section", formManager: "formManager" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SectionComponent, decorators: [{
|
|
239
231
|
type: Component,
|
|
240
232
|
args: [{
|
|
241
233
|
selector: 'lib-section',
|
|
@@ -253,9 +245,9 @@ class SubSectionComponent {
|
|
|
253
245
|
}
|
|
254
246
|
start() { }
|
|
255
247
|
}
|
|
256
|
-
SubSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
257
|
-
SubSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
248
|
+
SubSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SubSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
249
|
+
SubSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: SubSectionComponent, selector: "lib-subsection", inputs: { subSection: "subSection", showHeader: "showHeader", formManager: "formManager" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SubSectionComponent, decorators: [{
|
|
259
251
|
type: Component,
|
|
260
252
|
args: [{
|
|
261
253
|
selector: 'lib-subsection',
|
|
@@ -288,9 +280,9 @@ class LibTableRecordActionComponent {
|
|
|
288
280
|
}
|
|
289
281
|
class() { }
|
|
290
282
|
}
|
|
291
|
-
LibTableRecordActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
292
|
-
LibTableRecordActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
293
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
283
|
+
LibTableRecordActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
284
|
+
LibTableRecordActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: LibTableRecordActionComponent, selector: "lib-table-record-action", inputs: { recordId: "recordId", recordData: "recordData", action: "action" }, outputs: { actionSelected: "actionSelected" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordActionComponent, decorators: [{
|
|
294
286
|
type: Component,
|
|
295
287
|
args: [{
|
|
296
288
|
selector: 'lib-table-record-action',
|
|
@@ -313,9 +305,9 @@ class LibTableRecordFieldComponent {
|
|
|
313
305
|
}
|
|
314
306
|
start() { }
|
|
315
307
|
}
|
|
316
|
-
LibTableRecordFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
317
|
-
LibTableRecordFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
308
|
+
LibTableRecordFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
309
|
+
LibTableRecordFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: LibTableRecordFieldComponent, selector: "lib-table-record-field", inputs: { fieldCode: "fieldCode", fieldType: "fieldType", fieldValue: "fieldValue" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordFieldComponent, decorators: [{
|
|
319
311
|
type: Component,
|
|
320
312
|
args: [{
|
|
321
313
|
selector: 'lib-table-record-field',
|
|
@@ -404,9 +396,9 @@ class LibTableComponent {
|
|
|
404
396
|
}
|
|
405
397
|
}
|
|
406
398
|
}
|
|
407
|
-
LibTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
408
|
-
LibTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
409
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
399
|
+
LibTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
+
LibTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: LibTableComponent, selector: "lib-table", inputs: { table: "table", tableRecords: "tableRecords", disabled: "disabled", state: "state", waiting: "waiting" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableComponent, decorators: [{
|
|
410
402
|
type: Component,
|
|
411
403
|
args: [{
|
|
412
404
|
selector: 'lib-table',
|
|
@@ -453,6 +445,10 @@ const operators = {
|
|
|
453
445
|
|
|
454
446
|
class FormElement {
|
|
455
447
|
constructor(elementDefinition, formConfig) {
|
|
448
|
+
this._visible = true;
|
|
449
|
+
this.visibleStates = null;
|
|
450
|
+
this.enabledStates = null;
|
|
451
|
+
this.elementType = null;
|
|
456
452
|
this._formConfig = formConfig;
|
|
457
453
|
this._isForced = false;
|
|
458
454
|
this.setVisibleStates(elementDefinition.visibleStates);
|
|
@@ -462,6 +458,7 @@ class FormElement {
|
|
|
462
458
|
this.setVisibility(elementDefinition?.visible ?? true);
|
|
463
459
|
this.customAttributes = elementDefinition?.customAttributes ?? {};
|
|
464
460
|
}
|
|
461
|
+
;
|
|
465
462
|
getCustomAttribute(name) { return this.customAttributes?.[name] ?? null; }
|
|
466
463
|
setCustomAttribute(name, value) { if (name) {
|
|
467
464
|
this.customAttributes[name] = value;
|
|
@@ -506,14 +503,14 @@ class FormElement {
|
|
|
506
503
|
this._isForced = forced;
|
|
507
504
|
}
|
|
508
505
|
}
|
|
509
|
-
show(forced) {
|
|
506
|
+
show(forced = null) {
|
|
510
507
|
this._visible = true;
|
|
511
508
|
if (forced !== null) {
|
|
512
509
|
this._isForced = forced;
|
|
513
510
|
this._visibleForced = true;
|
|
514
511
|
}
|
|
515
512
|
}
|
|
516
|
-
hide(forced) {
|
|
513
|
+
hide(forced = null) {
|
|
517
514
|
this._visible = false;
|
|
518
515
|
if (forced !== null) {
|
|
519
516
|
this._isForced = forced;
|
|
@@ -524,6 +521,7 @@ class FormElement {
|
|
|
524
521
|
disable() { this.disabled = true; }
|
|
525
522
|
get enabled() { return !this.disabled; }
|
|
526
523
|
get editable() { return !this.disabled; }
|
|
524
|
+
set editable(editable) { this.disabled = !editable; }
|
|
527
525
|
}
|
|
528
526
|
|
|
529
527
|
const HEADER = 'HEADER';
|
|
@@ -564,35 +562,40 @@ const DEFAULT_CAPTURE_TYPE = 'INPUT';
|
|
|
564
562
|
const DEFAULT_ALIGNMENT = 'left';
|
|
565
563
|
const STD_MAX_LENGTH = 50;
|
|
566
564
|
const BIG_MAX_LENGTH = 500;
|
|
567
|
-
const
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
minValue
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
565
|
+
const directChanges = [
|
|
566
|
+
'defaultEditable', 'defaultValue', 'alignment', 'required', 'errorCode', 'errorMessage', 'errorType',
|
|
567
|
+
'tooltip', 'info', 'format', 'intrinsicErrorMessage', 'outputOnly', 'captureType', 'title', 'type',
|
|
568
|
+
'maxLength', 'maxValue', 'minLength', 'minValue', 'validateOnServer', 'serverAction', 'visibleLabel',
|
|
569
|
+
'options',
|
|
570
|
+
];
|
|
571
|
+
const attrs = {
|
|
572
|
+
_captureType: { name: '_captureType', propagate: 'captureType' },
|
|
573
|
+
_errorCode: { name: '_errorCode', propagate: 'errorCode' },
|
|
574
|
+
_errorMessage: { name: '_errorMessage', propagate: 'errorMessage' },
|
|
575
|
+
_errorType: { name: '_errorType', propagate: 'errorType' },
|
|
576
|
+
_defaultValue: { name: '_defaultValue', propagate: 'defaultValue' },
|
|
577
|
+
_defaultEditable: { name: '_defaultEditable', propagate: 'defaultEditable' },
|
|
578
|
+
_fieldAlignment: { name: '_fieldAlignment', propagate: 'alignment' },
|
|
579
|
+
_fieldCode: { name: '_fieldCode', propagate: 'code' },
|
|
580
|
+
_fieldInfo: { name: '_fieldInfo', propagate: 'info' },
|
|
581
|
+
_fieldRequired: { name: '_fieldRequired', propagate: 'required' },
|
|
582
|
+
_fieldTitle: { name: '_fieldTitle', propagate: 'title' },
|
|
583
|
+
_fieldType: { name: '_fieldType', propagate: 'type' },
|
|
584
|
+
_fieldFormat: { name: '_fieldFormat', propagate: 'format' },
|
|
585
|
+
_fieldOptions: { name: '_fieldOptions', propagate: 'options' },
|
|
586
|
+
_focus: { name: '_focus', propagate: 'focus' },
|
|
587
|
+
_hasChanged: { name: '_hasChanged', propagate: 'hasChanged' },
|
|
588
|
+
_intrinsicErrorMessage: { name: '_intrinsicErrorMessage', propagate: null },
|
|
589
|
+
_maxLength: { name: '_maxLength', propagate: 'maxLength' },
|
|
590
|
+
_maxValue: { name: '_maxValue', propagate: 'maxValue' },
|
|
591
|
+
_minLength: { name: '_minLength', propagate: 'minLength' },
|
|
592
|
+
_minValue: { name: '_minValue', propagate: 'minValue' },
|
|
593
|
+
_onValidation: { name: '_onValidation', propagate: 'onValidation' },
|
|
594
|
+
_outputOnly: { name: '_outputOnly', propagate: 'outputOnly' },
|
|
595
|
+
_tooltipText: { name: '_tooltipText', propagate: 'tooltip' },
|
|
596
|
+
_validateOnServer: { name: '_validateOnServer', propagate: 'validateOnServer' },
|
|
597
|
+
_value: { name: '_value', propagate: 'value' },
|
|
598
|
+
_visibleLabel: { name: '_visibleLabel', propagate: 'visibleLabel' },
|
|
596
599
|
};
|
|
597
600
|
class FieldDescriptor extends FormElement {
|
|
598
601
|
constructor(inputFieldReceived, formConfig) {
|
|
@@ -601,48 +604,48 @@ class FieldDescriptor extends FormElement {
|
|
|
601
604
|
this._editionPartial = new Subject();
|
|
602
605
|
this._detailRequest = new Subject();
|
|
603
606
|
this._attributeChange = new Subject();
|
|
604
|
-
this.
|
|
605
|
-
this.
|
|
607
|
+
this._errorType = '';
|
|
608
|
+
this._errorCode = '';
|
|
609
|
+
this._errorMessage = '';
|
|
610
|
+
this._fieldCode = '';
|
|
611
|
+
this._intrinsicErrorMessage = '';
|
|
606
612
|
this._maxLength = 0;
|
|
607
613
|
this._minLength = 0;
|
|
614
|
+
this._focus = false;
|
|
608
615
|
this._onValidation = false;
|
|
609
|
-
this.
|
|
610
|
-
this.
|
|
611
|
-
this.
|
|
612
|
-
this.
|
|
613
|
-
this.
|
|
614
|
-
this.
|
|
615
|
-
this.
|
|
616
|
-
this.
|
|
617
|
-
this.
|
|
618
|
-
this.
|
|
619
|
-
this.
|
|
620
|
-
this.
|
|
621
|
-
this.
|
|
622
|
-
this.
|
|
623
|
-
this.
|
|
624
|
-
this.errorType = '';
|
|
625
|
-
this.errorCode = '';
|
|
626
|
-
this.errorMessage = '';
|
|
627
|
-
this.fieldOptions = null;
|
|
616
|
+
this._validateOnServer = false;
|
|
617
|
+
this._visibleLabel = false;
|
|
618
|
+
this._captureType = '';
|
|
619
|
+
this._defaultValue = '';
|
|
620
|
+
this._defaultEditable = false;
|
|
621
|
+
this._fieldAlignment = '';
|
|
622
|
+
this._fieldInfo = '';
|
|
623
|
+
this._fieldRequired = false;
|
|
624
|
+
this._fieldTitle = '';
|
|
625
|
+
this._fieldType = '';
|
|
626
|
+
this._fieldFormat = null;
|
|
627
|
+
this._fieldOptions = null;
|
|
628
|
+
this._hasChanged = false;
|
|
629
|
+
this._outputOnly = false;
|
|
630
|
+
this._tooltipText = '';
|
|
628
631
|
this.elementType = elementTypes.field;
|
|
629
632
|
const fld = (inputFieldReceived) ? inputFieldReceived : {};
|
|
630
|
-
this.setAttr(
|
|
631
|
-
this.
|
|
632
|
-
this.
|
|
633
|
-
this.
|
|
633
|
+
this.setAttr(attrs._fieldCode, fld.fieldCode);
|
|
634
|
+
this.title = fld.fieldTitle ?? this._fieldCode;
|
|
635
|
+
this.type = fld.fieldTypeCode;
|
|
636
|
+
this.captureType = fld.captureType ?? DEFAULT_CAPTURE_TYPE;
|
|
634
637
|
const defaultValue = fld.defaultValue ?? null;
|
|
635
|
-
if (this.
|
|
636
|
-
this.
|
|
638
|
+
if (this._fieldType === this._formConfig.fieldTypes.boolean) {
|
|
639
|
+
this.defaultValue = defaultValue ?? false;
|
|
637
640
|
}
|
|
638
641
|
else {
|
|
639
|
-
this.
|
|
642
|
+
this.defaultValue = defaultValue;
|
|
640
643
|
}
|
|
641
|
-
const defaultTypeAlignment = (this._formConfig.tableFieldStyles[this.
|
|
642
|
-
? this._formConfig.tableFieldStyles[this.
|
|
644
|
+
const defaultTypeAlignment = (this._formConfig.tableFieldStyles[this._fieldType] != null)
|
|
645
|
+
? this._formConfig.tableFieldStyles[this._fieldType]['text-align'] : DEFAULT_ALIGNMENT;
|
|
643
646
|
const fieldAlignment = (fld.alignment != null) ? fld.alignment.toLowerCase() : defaultTypeAlignment;
|
|
644
|
-
this.
|
|
645
|
-
this.
|
|
647
|
+
this.alignment = fieldAlignment;
|
|
648
|
+
this.info = fld.info || '';
|
|
646
649
|
let fieldFormat;
|
|
647
650
|
try {
|
|
648
651
|
fieldFormat = (fld.format) ? new RegExp(fld.format) : null;
|
|
@@ -650,70 +653,254 @@ class FieldDescriptor extends FormElement {
|
|
|
650
653
|
catch (e) {
|
|
651
654
|
fieldFormat = null;
|
|
652
655
|
}
|
|
653
|
-
this.
|
|
654
|
-
this.
|
|
655
|
-
this.
|
|
656
|
-
this.
|
|
657
|
-
this.
|
|
658
|
-
this.
|
|
659
|
-
this.
|
|
660
|
-
|
|
661
|
-
this.setAttr(fldAttr.maxLength, maxLength);
|
|
662
|
-
const intrinsicErrorMessage = this._formConfig?.fieldValidations?.[this.fieldType]?.message
|
|
656
|
+
this.format = fieldFormat;
|
|
657
|
+
this.validateOnServer = fld.serverAction ?? false;
|
|
658
|
+
this.tooltip = fld.tooltip || '';
|
|
659
|
+
this.defaultEditable = this.enabled;
|
|
660
|
+
this.required = fld.required ?? false;
|
|
661
|
+
this.outputOnly = fld.outputOnly ?? false;
|
|
662
|
+
this.maxLength = fld.maxLength ?? (this._captureType === 'TEXTAREA' ? BIG_MAX_LENGTH : STD_MAX_LENGTH);
|
|
663
|
+
this.intrinsicErrorMessage = this._formConfig?.fieldValidations?.[this._fieldType]?.message
|
|
663
664
|
?? this._formConfig?.fieldValidations?.DEFAULT?.message ?? '';
|
|
664
|
-
this.
|
|
665
|
+
this.setError(fld.errorCode, fld.errorMessage, fld.errorType ?? DEFAULT_ERROR_TYPE);
|
|
665
666
|
this.setEditable(fld.editable ?? true);
|
|
666
|
-
this.
|
|
667
|
+
this.visibleLabel = fld.visibleLabel ?? true;
|
|
667
668
|
this.setVisibility(fld.visible);
|
|
668
|
-
this.
|
|
669
|
-
this.
|
|
669
|
+
this.options = fld.fieldOptions;
|
|
670
|
+
this._setValue(fld.fieldValue ?? this._defaultValue ?? '');
|
|
670
671
|
}
|
|
671
|
-
get
|
|
672
|
-
|
|
672
|
+
get alignment() { return this._fieldAlignment; }
|
|
673
|
+
set alignment(alignment) { this.setAttr(attrs._fieldAlignment, alignment); }
|
|
673
674
|
get attributeChange() { return this._attributeChange; }
|
|
674
|
-
get
|
|
675
|
+
get backend() { return this._validateOnServer; }
|
|
676
|
+
get captureType() { return this._captureType; }
|
|
677
|
+
set captureType(captureType) { this.setAttr(attrs._captureType, captureType); }
|
|
678
|
+
get code() { return this._fieldCode; }
|
|
679
|
+
get fieldCode() { return this._fieldCode; }
|
|
680
|
+
get defaultValue() { return this._defaultValue; }
|
|
681
|
+
set defaultValue(defaultValue) { this.setAttr(attrs._defaultValue, defaultValue); }
|
|
682
|
+
get defaultEditable() { return this._defaultEditable; }
|
|
683
|
+
set defaultEditable(editable) { this.setAttr(attrs._defaultEditable, editable); }
|
|
675
684
|
get detailRequest() { return this._detailRequest; }
|
|
676
|
-
get
|
|
677
|
-
get
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
685
|
+
get editionFinish() { return this._editionFinish; }
|
|
686
|
+
get editionPartial() { return this._editionPartial; }
|
|
687
|
+
get empty() {
|
|
688
|
+
const fieldCurrentValue = this.value;
|
|
689
|
+
if (fieldCurrentValue === undefined || fieldCurrentValue === null) {
|
|
690
|
+
return true;
|
|
691
|
+
}
|
|
692
|
+
if (this._fieldType === this._formConfig.fieldTypes.array
|
|
693
|
+
&& Array.isArray(fieldCurrentValue) && fieldCurrentValue.length === 0) {
|
|
694
|
+
return true;
|
|
695
|
+
}
|
|
696
|
+
;
|
|
697
|
+
if (this._fieldType === this._formConfig.fieldTypes.phone) {
|
|
698
|
+
if (!Array.isArray(fieldCurrentValue)) {
|
|
699
|
+
return true;
|
|
700
|
+
}
|
|
701
|
+
if (fieldCurrentValue.length !== 2 || !fieldCurrentValue[0] || !fieldCurrentValue[1]) {
|
|
702
|
+
return true;
|
|
703
|
+
}
|
|
704
|
+
return false;
|
|
705
|
+
}
|
|
706
|
+
;
|
|
707
|
+
return fieldCurrentValue === '';
|
|
690
708
|
}
|
|
709
|
+
get error() { return { type: this._errorType, code: this._errorCode, message: this._errorMessage }; }
|
|
710
|
+
set error(errorObj) { this.setError(errorObj.code, errorObj.message, errorObj.type ?? DEFAULT_ERROR_TYPE); }
|
|
711
|
+
get errorCode() { return this._errorCode; }
|
|
712
|
+
set errorCode(code) { this.setError(code, this._errorMessage); }
|
|
713
|
+
get errorMessage() { return this._errorMessage; }
|
|
714
|
+
set errorMessage(msg) { this.setError(this._errorCode, msg); }
|
|
715
|
+
get errorType() { return this._errorType; }
|
|
716
|
+
get externalValue() { return this._externalValue; }
|
|
717
|
+
get format() { return this._fieldFormat; }
|
|
718
|
+
set format(format) { this.setAttr(attrs._fieldFormat, format); }
|
|
719
|
+
get hasChanged() { return this._hasChanged; }
|
|
720
|
+
set hasChanged(hasChanged) { this.setAttr(attrs._hasChanged, hasChanged); }
|
|
721
|
+
get info() { return this._fieldInfo; }
|
|
722
|
+
set info(newInfo) { this.setAttr(attrs._fieldInfo, newInfo); }
|
|
723
|
+
set intrinsicErrorMessage(message) { this.setAttr(attrs._intrinsicErrorMessage, message); }
|
|
691
724
|
get maxLength() { return (this._maxLength > 0) ? this._maxLength.toString() : ''; }
|
|
692
|
-
set maxLength(requiredMaxLength) {
|
|
693
|
-
|
|
694
|
-
|
|
725
|
+
set maxLength(requiredMaxLength) { this.setAttr(attrs._maxLength, +requiredMaxLength); }
|
|
726
|
+
get maxValue() { return this._maxValue; }
|
|
727
|
+
set maxValue(inputMaxValue) {
|
|
728
|
+
let maxValue = inputMaxValue;
|
|
729
|
+
if (this._fieldType === this._formConfig.fieldTypes.date) {
|
|
730
|
+
maxValue = new Date(maxValue);
|
|
731
|
+
}
|
|
732
|
+
this.setAttr(attrs._maxValue, maxValue);
|
|
733
|
+
}
|
|
734
|
+
get minLength() { return this._minLength; }
|
|
735
|
+
set minLength(requiredMinLength) { this.setAttr(attrs._minLength, +requiredMinLength); }
|
|
736
|
+
get minValue() { return this._minValue; }
|
|
737
|
+
set minValue(inputMinValue) {
|
|
738
|
+
let minValue = inputMinValue;
|
|
739
|
+
if (this._fieldType === this._formConfig.fieldTypes.date) {
|
|
740
|
+
minValue = new Date(minValue);
|
|
741
|
+
}
|
|
742
|
+
this.setAttr(attrs._minValue, minValue);
|
|
743
|
+
}
|
|
744
|
+
get name() { return this._fieldCode; }
|
|
745
|
+
get options() {
|
|
746
|
+
return this._fieldOptions?.map(option => {
|
|
747
|
+
const optionCopy = { ...option };
|
|
748
|
+
return optionCopy;
|
|
749
|
+
}) ?? null;
|
|
750
|
+
}
|
|
751
|
+
set options(newOptions) {
|
|
752
|
+
if ((!this._formConfig.captureTypesWithOptions.includes(this._captureType))
|
|
753
|
+
|| typeof newOptions === UNDEFINED || !newOptions
|
|
754
|
+
|| !Array.isArray(newOptions)) {
|
|
755
|
+
return;
|
|
756
|
+
}
|
|
757
|
+
let fieldOptions = newOptions.map((option) => {
|
|
758
|
+
if (option.text !== undefined && option.text !== null
|
|
759
|
+
&& option.value !== undefined && option.value !== null) {
|
|
760
|
+
return { fieldOptionValue: option.text, fieldOptionId: option.value };
|
|
761
|
+
}
|
|
762
|
+
return option;
|
|
763
|
+
});
|
|
764
|
+
fieldOptions = (fieldOptions && Array.isArray(fieldOptions)
|
|
765
|
+
&& fieldOptions.length > 0) ? fieldOptions : [];
|
|
766
|
+
this.setAttr(attrs._fieldOptions, fieldOptions);
|
|
767
|
+
if (this._value) {
|
|
768
|
+
if (this._fieldType === this._formConfig.fieldTypes.array && Array.isArray(this._value)) {
|
|
769
|
+
const fieldValue = this._value?.filter(item => this._fieldOptions?.find(opt => opt.fieldOptionId === item));
|
|
770
|
+
this.setAttr(attrs._value, fieldValue);
|
|
771
|
+
}
|
|
772
|
+
else {
|
|
773
|
+
const valInOptions = this._fieldOptions?.find(item => item.fieldOptionId === this._value);
|
|
774
|
+
if (!valInOptions) {
|
|
775
|
+
this._setValue('');
|
|
776
|
+
}
|
|
777
|
+
}
|
|
695
778
|
}
|
|
696
|
-
|
|
697
|
-
this.
|
|
779
|
+
if (this._fieldRequired && this._fieldOptions?.length === 1) {
|
|
780
|
+
this._setValue(this._fieldOptions?.[0].fieldOptionId);
|
|
781
|
+
this.notifyEditionFinish();
|
|
698
782
|
}
|
|
699
783
|
}
|
|
700
|
-
get
|
|
701
|
-
|
|
784
|
+
get optionText() { return this._fieldOptions?.find(item => item.fieldOptionId === this._value)?.fieldOptionValue ?? null; }
|
|
785
|
+
get outputOnly() { return this._outputOnly; }
|
|
786
|
+
set outputOnly(outputOnly) { this.setAttr(attrs._outputOnly, outputOnly); }
|
|
787
|
+
get required() { return this._fieldRequired; }
|
|
788
|
+
set required(required) { this.setAttr(attrs._fieldRequired, required ?? false); }
|
|
789
|
+
get title() { return this._fieldTitle; }
|
|
790
|
+
set title(title) { this.setAttr(attrs._fieldTitle, title.toString()); }
|
|
791
|
+
get tooltip() { return this._tooltipText; }
|
|
792
|
+
set tooltip(tooltip) { this.setAttr(attrs._tooltipText, tooltip); }
|
|
793
|
+
get type() { return this._fieldType; }
|
|
794
|
+
set type(fieldType) { this.setAttr(attrs._fieldType, fieldType); }
|
|
795
|
+
get validating() { return this._onValidation; }
|
|
796
|
+
set validating(isValidating) { this.setAttr(attrs._onValidation, isValidating); }
|
|
797
|
+
get value() {
|
|
798
|
+
return (this._fieldType === this._formConfig.fieldTypes.boolean
|
|
799
|
+
|| this._fieldType === this._formConfig.fieldTypes.check) ? yn(this._value) : this._value;
|
|
800
|
+
}
|
|
801
|
+
get validateOnServer() { return this._validateOnServer; }
|
|
802
|
+
set validateOnServer(validateOnServer) { this.setAttr(attrs._validateOnServer, validateOnServer); }
|
|
803
|
+
get serverAction() { return this._validateOnServer; }
|
|
804
|
+
set serverAction(validateOnServer) { this.validateOnServer = validateOnServer; }
|
|
805
|
+
set value(newValue) { this._setValue(newValue); }
|
|
806
|
+
get visibleLabel() { return this._visibleLabel; }
|
|
807
|
+
set visibleLabel(visibleLabel) { this.setAttr(attrs._visibleLabel, visibleLabel); }
|
|
808
|
+
/**
|
|
809
|
+
* @deprecated Use options
|
|
810
|
+
*/
|
|
811
|
+
get fieldOptions() { return this._fieldOptions; }
|
|
812
|
+
/**
|
|
813
|
+
* @deprecated Use options
|
|
814
|
+
*/
|
|
815
|
+
set fieldOptions(options) { this.options = options; }
|
|
816
|
+
/**
|
|
817
|
+
* @deprecated Use value
|
|
818
|
+
*/
|
|
819
|
+
get fieldValue() { return this.value; }
|
|
820
|
+
/**
|
|
821
|
+
* @deprecated Use hasChanged
|
|
822
|
+
*/
|
|
823
|
+
changed(hasChanged = true) { this.hasChanged = hasChanged; }
|
|
824
|
+
clean() { this._setValue(this._defaultValue || ''); this.resetError(); }
|
|
825
|
+
focus() { this.setAttr(attrs._focus, true); }
|
|
826
|
+
getErrorCode() { return this.error.code; }
|
|
827
|
+
setErrorCode(code) { this.setError(code, this._errorMessage); }
|
|
828
|
+
getErrorMessage() { return this.error.message; }
|
|
829
|
+
setErrorMessage(msg) { this.setError(this._errorCode, msg); }
|
|
830
|
+
getRequired() { return this.required; }
|
|
831
|
+
hasError() { return this._errorCode !== NO_ERROR; }
|
|
832
|
+
hideLabel() { this.visibleLabel = false; }
|
|
833
|
+
resetError() { (this._errorCode !== NO_ERROR) && this.setError(NO_ERROR, null); }
|
|
834
|
+
setEditable(editable = true) { (editable) ? this.enable() : this.disable(); }
|
|
835
|
+
setValue(newValue, widgetUpdate = true) { this._setValue(newValue, widgetUpdate); }
|
|
836
|
+
showLabel() { this.visibleLabel = true; }
|
|
837
|
+
/**
|
|
838
|
+
* @deprecated Use title
|
|
839
|
+
*/
|
|
840
|
+
setLabel(label) { this.title = label; }
|
|
841
|
+
/**
|
|
842
|
+
* @deprecated Use required
|
|
843
|
+
*/
|
|
844
|
+
setRequired(required) { this.required = required; }
|
|
845
|
+
/**
|
|
846
|
+
* @deprecated Use changed
|
|
847
|
+
*/
|
|
848
|
+
setChanged(hasChanged) { this.changed(hasChanged); }
|
|
849
|
+
/**
|
|
850
|
+
* @deprecated Use value
|
|
851
|
+
*/
|
|
852
|
+
getValue() { return this.value; }
|
|
853
|
+
/**
|
|
854
|
+
* @deprecated Use empty
|
|
855
|
+
*/
|
|
856
|
+
isEmpty() { return this.empty; }
|
|
857
|
+
/**
|
|
858
|
+
* @deprecated Use error
|
|
859
|
+
*/
|
|
860
|
+
getError() { return this.error; }
|
|
861
|
+
/**
|
|
862
|
+
* @deprecated Use optionText
|
|
863
|
+
*/
|
|
864
|
+
getOptionText() { return this.optionText; }
|
|
865
|
+
/**
|
|
866
|
+
* @deprecated Use options
|
|
867
|
+
*/
|
|
868
|
+
getFieldOptions() { return this.options; }
|
|
869
|
+
/**
|
|
870
|
+
* @deprecated Use options
|
|
871
|
+
*/
|
|
872
|
+
setFieldOptions(newOptions) { return this.options = newOptions; }
|
|
873
|
+
/**
|
|
874
|
+
* @deprecated Use intrinsicErrorMessage
|
|
875
|
+
*/
|
|
876
|
+
setIntrinsicErrorMessage(message) { this.intrinsicErrorMessage = message; }
|
|
877
|
+
/**
|
|
878
|
+
* @deprecated Use maxValue
|
|
879
|
+
*/
|
|
880
|
+
setMaxValue(inputMaxValue) { this.maxValue = inputMaxValue; }
|
|
881
|
+
/**
|
|
882
|
+
* @deprecated Use minValue
|
|
883
|
+
*/
|
|
884
|
+
setMinValue(inputMinValue) { this.minValue = inputMinValue; }
|
|
885
|
+
/**
|
|
886
|
+
* @deprecated Use showLabel
|
|
887
|
+
*/
|
|
888
|
+
setVisibleLabel(visibleLabel) { this.visibleLabel = visibleLabel; }
|
|
702
889
|
notifyEditionPartial() {
|
|
703
890
|
this.resetError();
|
|
704
|
-
this._editionPartial.next({ code: this.
|
|
891
|
+
this._editionPartial.next({ code: this._fieldCode, intrinsicValidation: true });
|
|
705
892
|
}
|
|
706
893
|
notifyEditionFinish() {
|
|
707
|
-
const fieldValue = this.
|
|
894
|
+
const fieldValue = this.value;
|
|
708
895
|
this.resetError();
|
|
709
|
-
const validationConfig = this._formConfig.fieldValidations?.[this.
|
|
896
|
+
const validationConfig = this._formConfig.fieldValidations?.[this._fieldType] ?? {};
|
|
710
897
|
const { type, validation } = validationConfig;
|
|
711
898
|
let message = validationConfig?.message;
|
|
712
899
|
let intrinsicValidation = true;
|
|
713
|
-
if (fieldValue && (validation || this.
|
|
900
|
+
if (fieldValue && (validation || this._fieldFormat)) {
|
|
714
901
|
if (type === 'regexp') {
|
|
715
902
|
intrinsicValidation = (validation?.test(fieldValue) ?? true)
|
|
716
|
-
&& (this.
|
|
903
|
+
&& (this._fieldFormat?.test(fieldValue) ?? true);
|
|
717
904
|
}
|
|
718
905
|
else if (type === 'function' && typeof validation === 'function') {
|
|
719
906
|
const { valid, message: customMessage } = validation(fieldValue, this);
|
|
@@ -735,155 +922,48 @@ class FieldDescriptor extends FormElement {
|
|
|
735
922
|
if (intrinsicValidation && fieldValue && typeof fieldValue === 'string'
|
|
736
923
|
&& this._minLength && fieldValue?.length < this._minLength) {
|
|
737
924
|
intrinsicValidation = false;
|
|
738
|
-
this.setError('99', `Longitud de ${this.
|
|
739
|
-
}
|
|
740
|
-
this._editionFinish.next({ code: this.fieldCode, intrinsicValidation });
|
|
741
|
-
}
|
|
742
|
-
setAttr(name, value) {
|
|
743
|
-
this[name] = value;
|
|
744
|
-
if (this._formConfig.monitoredFieldAttributes.includes(name)) {
|
|
745
|
-
this._attributeChange.next({ name, value });
|
|
925
|
+
this.setError('99', `Longitud de ${this._fieldTitle} debe ser de al menos ${this._minLength}`);
|
|
746
926
|
}
|
|
927
|
+
this._editionFinish.next({ code: this._fieldCode, intrinsicValidation });
|
|
747
928
|
}
|
|
748
929
|
notifyEditionDetailRequest(detail) {
|
|
749
|
-
const detailEvent = {
|
|
750
|
-
code: this.fieldCode,
|
|
751
|
-
detail,
|
|
752
|
-
};
|
|
930
|
+
const detailEvent = { code: this._fieldCode, detail };
|
|
753
931
|
this._detailRequest.next(detailEvent);
|
|
754
932
|
}
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
changed() { this.setChanged(true); }
|
|
760
|
-
setLabel(label) { this.setAttr(fldAttr.title, label); }
|
|
761
|
-
clean() { this.setValue(this.defaultValue || ''); this.resetError(); }
|
|
762
|
-
get backend() { return this.validateOnServer; }
|
|
763
|
-
setEditable(editable = true) { (editable) ? this.enable() : this.disable(); }
|
|
764
|
-
hasError() { return this.errorCode !== NO_ERROR; }
|
|
765
|
-
resetError() { (this.errorCode !== NO_ERROR) && this.setError(NO_ERROR, null); }
|
|
766
|
-
setError(code, message, type = DEFAULT_ERROR_TYPE) {
|
|
767
|
-
this.setAttr(fldAttr.errorCode, code ?? NO_ERROR);
|
|
768
|
-
this.setAttr(fldAttr.errorType, (this.errorCode === NO_ERROR) ? '' : type);
|
|
769
|
-
this.setAttr(fldAttr.errorMessage, message ?? '');
|
|
770
|
-
}
|
|
771
|
-
getError() { return { type: this.errorType, code: this.errorCode, message: this.errorMessage }; }
|
|
772
|
-
get error() { return this.getError(); }
|
|
773
|
-
set error(errorObj) { this.setError(errorObj.code, errorObj.message, errorObj.type ?? DEFAULT_ERROR_TYPE); }
|
|
774
|
-
getErrorCode() { return this.getError().code; }
|
|
775
|
-
setErrorCode(code) { this.setError(code, this.errorMessage); }
|
|
776
|
-
getErrorMessage() { return this.getError().message; }
|
|
777
|
-
setErrorMessage(msg) { this.setError(this.errorCode, msg); }
|
|
778
|
-
get empty() { return this.isEmpty(); }
|
|
779
|
-
isEmpty() {
|
|
780
|
-
const fieldCurrentValue = this.getValue();
|
|
781
|
-
if (fieldCurrentValue === undefined || fieldCurrentValue === null) {
|
|
782
|
-
return true;
|
|
783
|
-
}
|
|
784
|
-
if (this.fieldType === this._formConfig.fieldTypes.array
|
|
785
|
-
&& Array.isArray(fieldCurrentValue) && fieldCurrentValue.length === 0) {
|
|
786
|
-
return true;
|
|
787
|
-
}
|
|
788
|
-
;
|
|
789
|
-
if (this.fieldType === this._formConfig.fieldTypes.phone) {
|
|
790
|
-
if (!Array.isArray(fieldCurrentValue)) {
|
|
791
|
-
return true;
|
|
792
|
-
}
|
|
793
|
-
if (fieldCurrentValue.length !== 2 || !fieldCurrentValue[0] || !fieldCurrentValue[1]) {
|
|
794
|
-
return true;
|
|
795
|
-
}
|
|
796
|
-
return false;
|
|
797
|
-
}
|
|
798
|
-
;
|
|
799
|
-
return fieldCurrentValue === '';
|
|
800
|
-
}
|
|
801
|
-
getValue() {
|
|
802
|
-
if (this.fieldType === this._formConfig.fieldTypes.boolean
|
|
803
|
-
|| this.fieldType === this._formConfig.fieldTypes.check) {
|
|
804
|
-
return yn(this._value);
|
|
805
|
-
}
|
|
806
|
-
return this._value;
|
|
933
|
+
setAttr(attr, value) {
|
|
934
|
+
const { name: attrName, propagate: name } = attr;
|
|
935
|
+
this[attrName] = value;
|
|
936
|
+
name && this._attributeChange.next({ name, value });
|
|
807
937
|
}
|
|
808
|
-
|
|
809
|
-
|
|
938
|
+
setError(code, message, type = DEFAULT_ERROR_TYPE) {
|
|
939
|
+
this.setAttr(attrs._errorCode, code ?? NO_ERROR);
|
|
940
|
+
this.setAttr(attrs._errorType, (this._errorCode === NO_ERROR) ? '' : type);
|
|
941
|
+
this.setAttr(attrs._errorMessage, message ?? '');
|
|
810
942
|
}
|
|
811
943
|
updateFromServer(fld) {
|
|
812
944
|
const fieldKeys = Object.keys(fld);
|
|
813
945
|
for (let index = 0; index < fieldKeys.length; index++) {
|
|
814
946
|
const attrName = fieldKeys[index];
|
|
815
947
|
const attrValue = fld[attrName];
|
|
816
|
-
(attrName
|
|
817
|
-
|
|
818
|
-
(attrName === this._formConfig.apiFieldAttrs.required) && this.setAttr(fldAttr.required, fld.required ?? false);
|
|
819
|
-
(attrName === this._formConfig.apiFieldAttrs.errorCode) && this.setAttr(fldAttr.errorCode, fld.errorCode);
|
|
820
|
-
(attrName === this._formConfig.apiFieldAttrs.errorMessage) && this.setAttr(fldAttr.errorMessage, fld.errorMessage);
|
|
821
|
-
(attrName === this._formConfig.apiFieldAttrs.tooltip) && this.setAttr(fldAttr.tooltipText, fld.tooltip);
|
|
822
|
-
(attrName === this._formConfig.apiFieldAttrs.info) && this.setAttr(fldAttr.info, fld.info);
|
|
823
|
-
(attrName === this._formConfig.apiFieldAttrs.editable) && this.setEditable(fld.editable);
|
|
824
|
-
(attrName === this._formConfig.apiFieldAttrs.title) && this.setLabel(fld.fieldTitle.toString());
|
|
825
|
-
(attrName === this._formConfig.apiFieldAttrs.value) && (this.setValue(fld.fieldValue) && this.setChanged(false));
|
|
826
|
-
(attrName === this._formConfig.apiFieldAttrs.options) && this.setFieldOptions(fld.fieldOptions);
|
|
827
|
-
(attrName === this._formConfig.apiFieldAttrs.captureType) && this.setAttr(fldAttr.captureType, fld.captureType || 'INPUT');
|
|
828
|
-
(attrName === this._formConfig.apiFieldAttrs.type) && this.setAttr(fldAttr.type, fld.fieldTypeCode);
|
|
829
|
-
(attrName === this._formConfig.apiFieldAttrs.maxLength) && this.setAttr(fldAttr.maxLength, fld.maxLength);
|
|
830
|
-
}
|
|
831
|
-
}
|
|
832
|
-
setMinValue(inputMinValue) {
|
|
833
|
-
let minValue = inputMinValue;
|
|
834
|
-
if (this.fieldType === this._formConfig.fieldTypes.date) {
|
|
835
|
-
minValue = new Date(minValue);
|
|
836
|
-
}
|
|
837
|
-
this.setAttr(fldAttr.minValue, minValue);
|
|
838
|
-
}
|
|
839
|
-
setMaxValue(inputMaxValue) {
|
|
840
|
-
let maxValue = inputMaxValue;
|
|
841
|
-
if (this.fieldType === this._formConfig.fieldTypes.date) {
|
|
842
|
-
maxValue = new Date(maxValue);
|
|
843
|
-
}
|
|
844
|
-
this.setAttr(fldAttr.maxValue, maxValue);
|
|
845
|
-
}
|
|
846
|
-
getFieldOptions() {
|
|
847
|
-
return this.fieldOptions.map(option => {
|
|
848
|
-
const optionCopy = { ...option };
|
|
849
|
-
return optionCopy;
|
|
850
|
-
});
|
|
851
|
-
}
|
|
852
|
-
setFieldOptions(newOptions) {
|
|
853
|
-
if ((!this._formConfig.captureTypesWithOptions.includes(this.captureType))
|
|
854
|
-
|| typeof newOptions === UNDEFINED || !newOptions
|
|
855
|
-
|| !Array.isArray(newOptions)) {
|
|
856
|
-
return;
|
|
857
|
-
}
|
|
858
|
-
let fieldOptions = newOptions.map(option => {
|
|
859
|
-
if (option.text !== undefined && option.text !== null
|
|
860
|
-
&& option.value !== undefined && option.value !== null) {
|
|
861
|
-
return { fieldOptionValue: option.text, fieldOptionId: option.value };
|
|
862
|
-
}
|
|
863
|
-
return { ...option };
|
|
864
|
-
});
|
|
865
|
-
fieldOptions = (fieldOptions && Array.isArray(fieldOptions)
|
|
866
|
-
&& fieldOptions.length > 0) ? fieldOptions : [];
|
|
867
|
-
this.setAttr(fldAttr.options, fieldOptions);
|
|
868
|
-
if (this._value) {
|
|
869
|
-
if (this.fieldType === this._formConfig.fieldTypes.array && Array.isArray(this._value)) {
|
|
870
|
-
const fieldValue = this._value?.filter(item => this.fieldOptions.find(opt => opt.fieldOptionId === item));
|
|
871
|
-
this.setAttr(fldAttr.value, fieldValue);
|
|
948
|
+
if (directChanges.includes(attrName)) {
|
|
949
|
+
this[attrName] = attrValue;
|
|
872
950
|
}
|
|
873
951
|
else {
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
952
|
+
(attrName === 'label') && (this.title = attrValue);
|
|
953
|
+
(attrName === 'labelVisible') && (this.visibleLabel = attrValue);
|
|
954
|
+
(attrName === 'editable') && this.setEditable(attrValue);
|
|
955
|
+
(attrName === 'visible') && this.setVisibility(attrValue);
|
|
956
|
+
(attrName === 'value') && (this._setValue(attrValue) && (this.hasChanged = false));
|
|
957
|
+
(attrName === 'fieldValue') && (this._setValue(attrValue) && (this.hasChanged = false));
|
|
958
|
+
(attrName === 'fieldOptions') && (this.options = attrValue);
|
|
959
|
+
(attrName === 'fieldTitle') && (this.title = attrValue);
|
|
960
|
+
(attrName === 'fieldTypeCode') && (this.type = attrValue);
|
|
961
|
+
(attrName === 'fieldType') && (this.type = attrValue);
|
|
962
|
+
(attrName === 'tooltipText') && (this.tooltip = attrValue);
|
|
879
963
|
}
|
|
880
964
|
}
|
|
881
|
-
if (this.fieldRequired && this.fieldOptions.length === 1) {
|
|
882
|
-
this.setValue(this.fieldOptions[0].fieldOptionId);
|
|
883
|
-
this.notifyEditionFinish();
|
|
884
|
-
}
|
|
885
965
|
}
|
|
886
|
-
|
|
966
|
+
_setValue(newValue, widgetUpdate = true) {
|
|
887
967
|
if (typeof newValue === UNDEFINED) {
|
|
888
968
|
return true;
|
|
889
969
|
}
|
|
@@ -891,12 +971,12 @@ class FieldDescriptor extends FormElement {
|
|
|
891
971
|
return true;
|
|
892
972
|
}
|
|
893
973
|
let newFinalValue;
|
|
894
|
-
if (this.
|
|
895
|
-
|| this.
|
|
974
|
+
if (this._fieldType === this._formConfig.fieldTypes.boolean
|
|
975
|
+
|| this._fieldType === this._formConfig.fieldTypes.check) {
|
|
896
976
|
newFinalValue = yn(newValue) ?? false;
|
|
897
977
|
}
|
|
898
|
-
else if (this.
|
|
899
|
-
|| this.
|
|
978
|
+
else if (this._fieldType === this._formConfig.fieldTypes.array
|
|
979
|
+
|| this._fieldType === this._formConfig.fieldTypes.map) {
|
|
900
980
|
if (newValue === null || newValue === '') {
|
|
901
981
|
newFinalValue = [];
|
|
902
982
|
}
|
|
@@ -911,9 +991,9 @@ class FieldDescriptor extends FormElement {
|
|
|
911
991
|
newFinalValue = newValue;
|
|
912
992
|
}
|
|
913
993
|
if (this._value !== newFinalValue) {
|
|
914
|
-
this.
|
|
994
|
+
this.hasChanged = true;
|
|
915
995
|
if (widgetUpdate) {
|
|
916
|
-
this.setAttr(
|
|
996
|
+
this.setAttr(attrs._value, newFinalValue);
|
|
917
997
|
}
|
|
918
998
|
else {
|
|
919
999
|
this._value = newFinalValue;
|
|
@@ -1553,7 +1633,7 @@ class RecordFormSubSection {
|
|
|
1553
1633
|
return this.subSectionFields;
|
|
1554
1634
|
}
|
|
1555
1635
|
getFieldNames() {
|
|
1556
|
-
return this.subSectionFields.map(field => field.
|
|
1636
|
+
return this.subSectionFields.map(field => field.code);
|
|
1557
1637
|
}
|
|
1558
1638
|
getActions() {
|
|
1559
1639
|
return this.subSectionActions;
|
|
@@ -1770,7 +1850,7 @@ class FormStructureAndData {
|
|
|
1770
1850
|
});
|
|
1771
1851
|
for (const fieldReceived of formFields) {
|
|
1772
1852
|
const fieldToAdd = new FieldDescriptor(fieldReceived, this._formConfig);
|
|
1773
|
-
const fieldCode = fieldToAdd.
|
|
1853
|
+
const fieldCode = fieldToAdd.code;
|
|
1774
1854
|
if (fieldCode) {
|
|
1775
1855
|
this._fieldArray.push(fieldToAdd);
|
|
1776
1856
|
this._fields[fieldCode] = fieldToAdd;
|
|
@@ -1865,13 +1945,13 @@ class FormStructureAndData {
|
|
|
1865
1945
|
get fields() { return this._fields; }
|
|
1866
1946
|
get fieldNames() { return this.getFieldNames(); }
|
|
1867
1947
|
getFields() { return this._fieldArray; }
|
|
1868
|
-
getFieldNames() { return this._fieldArray.map(field => field.
|
|
1948
|
+
getFieldNames() { return this._fieldArray.map(field => field.code); }
|
|
1869
1949
|
getField(code) { return (code && this._fields?.[code]) ? this._fields[code] : null; }
|
|
1870
1950
|
enableField(code) { this.getField(code)?.enable(); }
|
|
1871
1951
|
disableField(code) { this.getField(code)?.disable(); }
|
|
1872
|
-
getFieldValue(code) { return this.getField(code)?.
|
|
1873
|
-
getFieldOptionText(code) { return this.getField(code)?.
|
|
1874
|
-
getFieldOptions(code) { return this.getField(code)?.
|
|
1952
|
+
getFieldValue(code) { return this.getField(code)?.value; }
|
|
1953
|
+
getFieldOptionText(code) { return this.getField(code)?.optionText; }
|
|
1954
|
+
getFieldOptions(code) { return this.getField(code)?.options ?? null; }
|
|
1875
1955
|
setFieldValue(code, value) { this.getField(code)?.setValue(value); }
|
|
1876
1956
|
setFieldError(code, errorCode, message, type = 'error') { this.getField(code)?.setError(errorCode, message, type); }
|
|
1877
1957
|
setFieldIntrinsicErrorMessage(code, message) { this.getField(code)?.setIntrinsicErrorMessage(message); }
|
|
@@ -1879,7 +1959,8 @@ class FormStructureAndData {
|
|
|
1879
1959
|
const codes = this.getFieldSet(null, inputCodes ?? null);
|
|
1880
1960
|
for (const code of codes) {
|
|
1881
1961
|
try {
|
|
1882
|
-
this.getField(code)
|
|
1962
|
+
const field = this.getField(code) ?? null;
|
|
1963
|
+
field && (field.required = required);
|
|
1883
1964
|
}
|
|
1884
1965
|
catch (e) {
|
|
1885
1966
|
console.log(`Error modificando campo ${code}: ${e}`);
|
|
@@ -1939,28 +2020,28 @@ class FormStructureAndData {
|
|
|
1939
2020
|
return processedFields;
|
|
1940
2021
|
}
|
|
1941
2022
|
enableFields(codes, secCode, subCode) {
|
|
1942
|
-
return this.applyOnFields(fld => fld
|
|
2023
|
+
return this.applyOnFields(fld => fld?.enable(), codes, secCode, subCode);
|
|
1943
2024
|
}
|
|
1944
2025
|
showFields(codes, secCode, subCode) {
|
|
1945
|
-
return this.applyOnFields(fld => fld
|
|
2026
|
+
return this.applyOnFields(fld => fld?.show(), codes, secCode, subCode);
|
|
1946
2027
|
}
|
|
1947
2028
|
hideFields(codes, secCode, subCode) {
|
|
1948
|
-
return this.applyOnFields(fld => fld
|
|
2029
|
+
return this.applyOnFields(fld => fld?.hide(), codes, secCode, subCode);
|
|
1949
2030
|
}
|
|
1950
2031
|
showLabelFields(codes, secCode, subCode) {
|
|
1951
|
-
return this.applyOnFields(fld => fld
|
|
2032
|
+
return this.applyOnFields(fld => fld?.showLablel(), codes, secCode, subCode);
|
|
1952
2033
|
}
|
|
1953
2034
|
hideLabelFields(codes, secCode, subCode) {
|
|
1954
|
-
return this.applyOnFields(fld => fld
|
|
2035
|
+
return this.applyOnFields(fld => fld?.hideLabel(), codes, secCode, subCode);
|
|
1955
2036
|
}
|
|
1956
2037
|
disableFields(codes, secCode, subCode) {
|
|
1957
|
-
return this.applyOnFields(fld => fld
|
|
2038
|
+
return this.applyOnFields(fld => fld?.disable(), codes, secCode, subCode);
|
|
1958
2039
|
}
|
|
1959
2040
|
cleanFields(codes, secCode, subCode) {
|
|
1960
|
-
return this.applyOnFields(fld => fld
|
|
2041
|
+
return this.applyOnFields(fld => fld?.clean(), codes, secCode, subCode);
|
|
1961
2042
|
}
|
|
1962
2043
|
tagFieldsWithError(message, codes, secCode, subCode) {
|
|
1963
|
-
return this.applyOnFields(fld => fld
|
|
2044
|
+
return this.applyOnFields(fld => fld?.setErrorMessage(message), codes, secCode, subCode);
|
|
1964
2045
|
}
|
|
1965
2046
|
cleanErrorFields(codes, secCode, subCode) {
|
|
1966
2047
|
return this.tagFieldsWithError('', codes, secCode, subCode);
|
|
@@ -1969,16 +2050,16 @@ class FormStructureAndData {
|
|
|
1969
2050
|
return this.tagFieldsWithError(message, this.getRequiredEmptyFields(codes, secCode, subCode)) > 0;
|
|
1970
2051
|
}
|
|
1971
2052
|
getRequiredFields(codes, secCode, subCode) {
|
|
1972
|
-
return this.getFieldSet(fld => fld
|
|
2053
|
+
return this.getFieldSet(fld => fld?.required, codes ?? null, secCode, subCode);
|
|
1973
2054
|
}
|
|
1974
2055
|
getRequiredEmptyFields(codes, secCode, subCode) {
|
|
1975
|
-
return this.getFieldSet(fld => fld
|
|
2056
|
+
return this.getFieldSet(fld => fld?.required && fld?.empty, codes ?? null, secCode, subCode);
|
|
1976
2057
|
}
|
|
1977
2058
|
getChangedFields(codes, secCode, subCode) {
|
|
1978
|
-
return this.getFieldSet(fld => !fld
|
|
2059
|
+
return this.getFieldSet(fld => !fld?.outputOnly && fld?.hasChanged(), codes ?? null, secCode, subCode);
|
|
1979
2060
|
}
|
|
1980
2061
|
getFieldsWithValidationIssues(codes, secCode, subCode) {
|
|
1981
|
-
return this.getFieldSet(fld => fld
|
|
2062
|
+
return this.getFieldSet(fld => fld?.hasError(), codes ?? null, secCode, subCode);
|
|
1982
2063
|
}
|
|
1983
2064
|
getFieldsValues(inputCodes, secCode, subCode) {
|
|
1984
2065
|
const codes = this.getFieldSet(null, inputCodes ?? null, secCode, subCode);
|
|
@@ -2090,14 +2171,14 @@ class FormStructureAndData {
|
|
|
2090
2171
|
fields: [],
|
|
2091
2172
|
tables: [],
|
|
2092
2173
|
};
|
|
2093
|
-
formData.fields = this.getFields().filter(fld => !fld
|
|
2174
|
+
formData.fields = this.getFields().filter(fld => !fld?.outputOnly)
|
|
2094
2175
|
.map(fld => {
|
|
2095
2176
|
const fieldPayload = {
|
|
2096
|
-
fieldCode: fld
|
|
2097
|
-
fieldValue: fld
|
|
2098
|
-
editable: !fld
|
|
2099
|
-
visible: fld
|
|
2100
|
-
required: fld
|
|
2177
|
+
fieldCode: fld?.code,
|
|
2178
|
+
fieldValue: fld?.value,
|
|
2179
|
+
editable: !fld?.disabled,
|
|
2180
|
+
visible: fld?.visible,
|
|
2181
|
+
required: fld?.required,
|
|
2101
2182
|
fieldOptions: '',
|
|
2102
2183
|
};
|
|
2103
2184
|
return fieldPayload;
|
|
@@ -2238,6 +2319,7 @@ class BasicFormComponent {
|
|
|
2238
2319
|
this._formRoute = null;
|
|
2239
2320
|
this._definitionObtained = false;
|
|
2240
2321
|
// Eventos de acciones y campos
|
|
2322
|
+
this._formSectionsCanDeactivate = {};
|
|
2241
2323
|
this._formSectionsActivate = {};
|
|
2242
2324
|
this._formSectionsInactivate = {};
|
|
2243
2325
|
this._formActionsStart = {};
|
|
@@ -2485,6 +2567,7 @@ class BasicFormComponent {
|
|
|
2485
2567
|
// Se limpian los manejadores de eventos
|
|
2486
2568
|
this.visible = false;
|
|
2487
2569
|
this.busy = false;
|
|
2570
|
+
this._formSectionsCanDeactivate = {};
|
|
2488
2571
|
this._formSectionsActivate = {};
|
|
2489
2572
|
this._formSectionsInactivate = {};
|
|
2490
2573
|
this._formActionsStart = {};
|
|
@@ -2527,7 +2610,7 @@ class BasicFormComponent {
|
|
|
2527
2610
|
displayActionServerError() { }
|
|
2528
2611
|
displayValidationServerError() { }
|
|
2529
2612
|
displayTableServerError() { }
|
|
2530
|
-
showFieldInfo(
|
|
2613
|
+
showFieldInfo(code, detail) { }
|
|
2531
2614
|
showModalDialog(title, body, options, callback, params) { }
|
|
2532
2615
|
openUploadDialog(title, body, options, callback, params) { }
|
|
2533
2616
|
/**
|
|
@@ -2695,9 +2778,9 @@ class BasicFormComponent {
|
|
|
2695
2778
|
this._formStructure?.changeState(initialState || this._formStructure?.defaultState);
|
|
2696
2779
|
const inputFieldNames = Object.keys(this.inputDataFields);
|
|
2697
2780
|
for (let index = 0; index < inputFieldNames.length; index++) {
|
|
2698
|
-
const
|
|
2699
|
-
const fieldValue = this.inputDataFields[
|
|
2700
|
-
this.setFieldValue(
|
|
2781
|
+
const code = inputFieldNames[index];
|
|
2782
|
+
const fieldValue = this.inputDataFields[code];
|
|
2783
|
+
this.setFieldValue(code, fieldValue);
|
|
2701
2784
|
}
|
|
2702
2785
|
const recordResponse = await this.requestFormAction(formActions.getData);
|
|
2703
2786
|
this.checkErrorRecordReceived(recordResponse);
|
|
@@ -2821,6 +2904,15 @@ class BasicFormComponent {
|
|
|
2821
2904
|
/**
|
|
2822
2905
|
* Manejo de event handlers para acciones sobre el formulario
|
|
2823
2906
|
*/
|
|
2907
|
+
onSectionCanDeactivate(codes, callback, properties = null) {
|
|
2908
|
+
const sectionSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
|
|
2909
|
+
sectionSet.forEach((sectionName) => {
|
|
2910
|
+
if (!this._formSectionsCanDeactivate[sectionName]) {
|
|
2911
|
+
this._formSectionsCanDeactivate[sectionName] = [];
|
|
2912
|
+
}
|
|
2913
|
+
this._formSectionsCanDeactivate[sectionName].push({ callback, properties });
|
|
2914
|
+
});
|
|
2915
|
+
}
|
|
2824
2916
|
onSectionActivation(codes, callback, properties = null) {
|
|
2825
2917
|
const sectionSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
|
|
2826
2918
|
sectionSet.forEach((sectionName) => {
|
|
@@ -2857,7 +2949,25 @@ class BasicFormComponent {
|
|
|
2857
2949
|
this._formActionsFinish[actionName].push({ callback, properties });
|
|
2858
2950
|
});
|
|
2859
2951
|
}
|
|
2952
|
+
async verifySectionActivation(code) {
|
|
2953
|
+
const sectionObject = this._formStructure?.getSection(code);
|
|
2954
|
+
if (!sectionObject) {
|
|
2955
|
+
return false;
|
|
2956
|
+
}
|
|
2957
|
+
const clientSectionMethods = this._formSectionsCanDeactivate[code];
|
|
2958
|
+
if (clientSectionMethods) {
|
|
2959
|
+
for (const clientSectionMethod of clientSectionMethods) {
|
|
2960
|
+
const { callback, properties } = clientSectionMethod;
|
|
2961
|
+
const canActivate = callback(sectionObject);
|
|
2962
|
+
if (canActivate === false) {
|
|
2963
|
+
return false;
|
|
2964
|
+
}
|
|
2965
|
+
}
|
|
2966
|
+
}
|
|
2967
|
+
return true;
|
|
2968
|
+
}
|
|
2860
2969
|
async launchSectionActivation(code) {
|
|
2970
|
+
this.notifyFormActivity();
|
|
2861
2971
|
const sectionObject = this._formStructure?.getSection(code);
|
|
2862
2972
|
if (!sectionObject) {
|
|
2863
2973
|
return;
|
|
@@ -2871,6 +2981,7 @@ class BasicFormComponent {
|
|
|
2871
2981
|
}
|
|
2872
2982
|
}
|
|
2873
2983
|
async launchSectionInactivation(code) {
|
|
2984
|
+
this.notifyFormActivity();
|
|
2874
2985
|
const sectionObject = this._formStructure?.getSection(code);
|
|
2875
2986
|
if (!sectionObject) {
|
|
2876
2987
|
return;
|
|
@@ -2884,6 +2995,7 @@ class BasicFormComponent {
|
|
|
2884
2995
|
}
|
|
2885
2996
|
}
|
|
2886
2997
|
async startAction(code) {
|
|
2998
|
+
this.notifyFormActivity();
|
|
2887
2999
|
const actionObject = this.getAction(code);
|
|
2888
3000
|
if (!actionObject) {
|
|
2889
3001
|
return;
|
|
@@ -2950,37 +3062,38 @@ class BasicFormComponent {
|
|
|
2950
3062
|
*/
|
|
2951
3063
|
onFieldInput(codes, callback, properties = null) {
|
|
2952
3064
|
const fieldSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
|
|
2953
|
-
fieldSet.forEach((
|
|
2954
|
-
if (!this._fieldInputValidation[
|
|
2955
|
-
this._fieldInputValidation[
|
|
3065
|
+
fieldSet.forEach((code) => {
|
|
3066
|
+
if (!this._fieldInputValidation[code]) {
|
|
3067
|
+
this._fieldInputValidation[code] = [];
|
|
2956
3068
|
}
|
|
2957
|
-
this._fieldInputValidation[
|
|
3069
|
+
this._fieldInputValidation[code].push({ callback, properties });
|
|
2958
3070
|
});
|
|
2959
3071
|
}
|
|
2960
3072
|
onFieldValidationStart(codes, callback, properties = null) {
|
|
2961
3073
|
const fieldSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
|
|
2962
|
-
fieldSet.forEach((
|
|
2963
|
-
if (!this._fieldValidationsStart[
|
|
2964
|
-
this._fieldValidationsStart[
|
|
3074
|
+
fieldSet.forEach((code) => {
|
|
3075
|
+
if (!this._fieldValidationsStart[code]) {
|
|
3076
|
+
this._fieldValidationsStart[code] = [];
|
|
2965
3077
|
}
|
|
2966
|
-
this._fieldValidationsStart[
|
|
3078
|
+
this._fieldValidationsStart[code].push({ callback, properties });
|
|
2967
3079
|
});
|
|
2968
3080
|
}
|
|
2969
3081
|
onFieldValidationFinish(codes, callback, properties = null) {
|
|
2970
3082
|
const fieldSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
|
|
2971
|
-
fieldSet.forEach((
|
|
2972
|
-
if (!this._fieldValidationsFinish[
|
|
2973
|
-
this._fieldValidationsFinish[
|
|
3083
|
+
fieldSet.forEach((code) => {
|
|
3084
|
+
if (!this._fieldValidationsFinish[code]) {
|
|
3085
|
+
this._fieldValidationsFinish[code] = [];
|
|
2974
3086
|
}
|
|
2975
|
-
this._fieldValidationsFinish[
|
|
3087
|
+
this._fieldValidationsFinish[code].push({ callback, properties });
|
|
2976
3088
|
});
|
|
2977
3089
|
}
|
|
2978
|
-
async startFieldInputValidation(
|
|
2979
|
-
|
|
3090
|
+
async startFieldInputValidation(code, intrinsicValidation = true) {
|
|
3091
|
+
this.notifyFormActivity();
|
|
3092
|
+
const fieldToValidate = this.getField(code);
|
|
2980
3093
|
if (!fieldToValidate) {
|
|
2981
3094
|
return false;
|
|
2982
3095
|
}
|
|
2983
|
-
const validationCallbacks = this._fieldInputValidation[
|
|
3096
|
+
const validationCallbacks = this._fieldInputValidation[code];
|
|
2984
3097
|
if (validationCallbacks) {
|
|
2985
3098
|
const clientValidationPromises = [];
|
|
2986
3099
|
for (const validationMethod of validationCallbacks) {
|
|
@@ -2992,12 +3105,13 @@ class BasicFormComponent {
|
|
|
2992
3105
|
}
|
|
2993
3106
|
return true;
|
|
2994
3107
|
}
|
|
2995
|
-
async startFieldValidation(
|
|
2996
|
-
|
|
3108
|
+
async startFieldValidation(code, intrinsicValidation = true) {
|
|
3109
|
+
this.notifyFormActivity();
|
|
3110
|
+
const fieldToValidate = this.getField(code);
|
|
2997
3111
|
if (!fieldToValidate) {
|
|
2998
3112
|
return;
|
|
2999
3113
|
}
|
|
3000
|
-
const validationCallbacks = this._fieldValidationsStart[
|
|
3114
|
+
const validationCallbacks = this._fieldValidationsStart[code];
|
|
3001
3115
|
if (validationCallbacks) {
|
|
3002
3116
|
const clientValidationPromises = [];
|
|
3003
3117
|
for (const validationMethod of validationCallbacks) {
|
|
@@ -3026,10 +3140,9 @@ class BasicFormComponent {
|
|
|
3026
3140
|
if (fieldObj.backend) {
|
|
3027
3141
|
fieldObj.validating = true;
|
|
3028
3142
|
validationResult = await this
|
|
3029
|
-
.requestFormAction(formActions.validate, fieldObj.
|
|
3143
|
+
.requestFormAction(formActions.validate, fieldObj.code);
|
|
3030
3144
|
serverError = !!this.errorOccured();
|
|
3031
3145
|
}
|
|
3032
|
-
await this.finishFieldValidation(fieldObj, validationResult, serverError);
|
|
3033
3146
|
if (serverError) {
|
|
3034
3147
|
fieldObj?.setErrorCode(this.errorCode);
|
|
3035
3148
|
fieldObj?.setErrorMessage(this.errorMessage);
|
|
@@ -3038,10 +3151,11 @@ class BasicFormComponent {
|
|
|
3038
3151
|
callback(fieldObj);
|
|
3039
3152
|
}
|
|
3040
3153
|
}
|
|
3154
|
+
await this.finishFieldValidation(fieldObj, validationResult, serverError);
|
|
3041
3155
|
fieldObj.validating = false;
|
|
3042
3156
|
}
|
|
3043
3157
|
async finishFieldValidation(fieldObject, validationResult, serverError = false) {
|
|
3044
|
-
const validationCallbacks = this._fieldValidationsFinish[fieldObject.
|
|
3158
|
+
const validationCallbacks = this._fieldValidationsFinish[fieldObject.code];
|
|
3045
3159
|
if (validationCallbacks) {
|
|
3046
3160
|
const clientActionPromises = [];
|
|
3047
3161
|
for (const validationMethod of validationCallbacks) {
|
|
@@ -3054,8 +3168,8 @@ class BasicFormComponent {
|
|
|
3054
3168
|
await Promise.all(clientActionPromises);
|
|
3055
3169
|
}
|
|
3056
3170
|
}
|
|
3057
|
-
async continueFieldValidation(
|
|
3058
|
-
return this.startServerFieldValidation(
|
|
3171
|
+
async continueFieldValidation(code) {
|
|
3172
|
+
return this.startServerFieldValidation(code);
|
|
3059
3173
|
}
|
|
3060
3174
|
/**
|
|
3061
3175
|
* Manejadores de eventos para acciones sobre Tablas
|
|
@@ -3165,6 +3279,7 @@ class BasicFormComponent {
|
|
|
3165
3279
|
tableEventHandlers[GET_DATA_ACTION] = { callback, properties };
|
|
3166
3280
|
}
|
|
3167
3281
|
async startTableGlobalAction(tableActionEvent) {
|
|
3282
|
+
this.notifyFormActivity();
|
|
3168
3283
|
const { tableCode, actionCode } = tableActionEvent;
|
|
3169
3284
|
const tableObject = this.getTable(tableCode);
|
|
3170
3285
|
if (!tableObject || !actionCode) {
|
|
@@ -3245,6 +3360,7 @@ class BasicFormComponent {
|
|
|
3245
3360
|
}
|
|
3246
3361
|
}
|
|
3247
3362
|
async startTableAction(tableActionEvent) {
|
|
3363
|
+
this.notifyFormActivity();
|
|
3248
3364
|
const { tableCode, actionCode, actionDetail } = tableActionEvent;
|
|
3249
3365
|
const tableObject = this.getTable(tableCode);
|
|
3250
3366
|
if (!tableObject || !actionCode) {
|
|
@@ -3330,6 +3446,7 @@ class BasicFormComponent {
|
|
|
3330
3446
|
}
|
|
3331
3447
|
}
|
|
3332
3448
|
async startTableRecordSelection(tableActionEvent) {
|
|
3449
|
+
this.notifyFormActivity();
|
|
3333
3450
|
const { tableCode, actionDetail } = tableActionEvent;
|
|
3334
3451
|
const tableObject = this.getTable(tableCode);
|
|
3335
3452
|
if (!tableObject) {
|
|
@@ -3401,6 +3518,7 @@ class BasicFormComponent {
|
|
|
3401
3518
|
}
|
|
3402
3519
|
}
|
|
3403
3520
|
async startTableSelectionAction(tableActionEvent) {
|
|
3521
|
+
this.notifyFormActivity();
|
|
3404
3522
|
const { tableCode, actionCode, actionDetail } = tableActionEvent;
|
|
3405
3523
|
const tableObject = this.getTable(tableCode);
|
|
3406
3524
|
if (!tableObject || !actionCode) {
|
|
@@ -3481,6 +3599,7 @@ class BasicFormComponent {
|
|
|
3481
3599
|
}
|
|
3482
3600
|
}
|
|
3483
3601
|
async startTableGetData(tableActionEvent) {
|
|
3602
|
+
this.notifyFormActivity();
|
|
3484
3603
|
const { tableCode } = tableActionEvent;
|
|
3485
3604
|
const tableObject = this.getTable(tableCode);
|
|
3486
3605
|
const tableActionDetail = {
|
|
@@ -3553,8 +3672,8 @@ class BasicFormComponent {
|
|
|
3553
3672
|
validationError = true;
|
|
3554
3673
|
this.setError(this.formConfig.formStandardErrors.typeWarning, this.formConfig.formStandardErrors.validationTitle, this.formConfig.formStandardErrors.requiredFields);
|
|
3555
3674
|
this.tagFieldsWithError(this.formConfig.formStandardErrors.requiredField, requiredEmptyFields);
|
|
3556
|
-
for (const
|
|
3557
|
-
const requiredEmptyField = this.getField(
|
|
3675
|
+
for (const code of requiredEmptyFields) {
|
|
3676
|
+
const requiredEmptyField = this.getField(code);
|
|
3558
3677
|
requiredEmptyField?.focus();
|
|
3559
3678
|
break;
|
|
3560
3679
|
}
|
|
@@ -3563,8 +3682,8 @@ class BasicFormComponent {
|
|
|
3563
3682
|
if (!validationError && validationIssueFields.length > 0) {
|
|
3564
3683
|
validationError = true;
|
|
3565
3684
|
this.setError(this.formConfig.formStandardErrors.typeWarning, this.formConfig.formStandardErrors.validationTitle, this.formConfig.formStandardErrors.validationFields);
|
|
3566
|
-
for (const
|
|
3567
|
-
const validationIssueField = this.getField(
|
|
3685
|
+
for (const code of validationIssueFields) {
|
|
3686
|
+
const validationIssueField = this.getField(code);
|
|
3568
3687
|
if (validationIssueField) {
|
|
3569
3688
|
validationIssueField.focus();
|
|
3570
3689
|
}
|
|
@@ -3580,13 +3699,14 @@ class BasicFormComponent {
|
|
|
3580
3699
|
if (tableRecord && columnNames) {
|
|
3581
3700
|
for (const columnName of columnNames) {
|
|
3582
3701
|
const columnValue = tableRecord.getFieldValue(columnName) ?? '';
|
|
3583
|
-
const
|
|
3584
|
-
this.setFieldValue(
|
|
3702
|
+
const code = mappingTable?.[columnName] ?? columnName;
|
|
3703
|
+
this.setFieldValue(code, columnValue);
|
|
3585
3704
|
}
|
|
3586
3705
|
return true;
|
|
3587
3706
|
}
|
|
3588
3707
|
return false;
|
|
3589
3708
|
}
|
|
3709
|
+
notifyFormActivity() { this._eventEmiter.next('formActivity', { code: this.formCode }); }
|
|
3590
3710
|
/**
|
|
3591
3711
|
* Métodos Legacy de compatibilidad hacia atrás
|
|
3592
3712
|
*/
|
|
@@ -3669,9 +3789,9 @@ class BasicFormComponent {
|
|
|
3669
3789
|
return this.onTableGetDataFinish(code, callback, properties);
|
|
3670
3790
|
}
|
|
3671
3791
|
}
|
|
3672
|
-
BasicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3673
|
-
BasicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3674
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3792
|
+
BasicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: BasicFormComponent, deps: [{ token: LibFormManagerService }, { token: LibEventManagerService }, { token: LibFileManagementService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3793
|
+
BasicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: BasicFormComponent, selector: "ng-component", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
3794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: BasicFormComponent, decorators: [{
|
|
3675
3795
|
type: Component,
|
|
3676
3796
|
args: [{
|
|
3677
3797
|
template: `<ng-content></ng-content>`
|
|
@@ -3693,8 +3813,8 @@ const COMPONENTS = [
|
|
|
3693
3813
|
];
|
|
3694
3814
|
class TuainNgFormsLibModule {
|
|
3695
3815
|
}
|
|
3696
|
-
TuainNgFormsLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3697
|
-
TuainNgFormsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
3816
|
+
TuainNgFormsLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: TuainNgFormsLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3817
|
+
TuainNgFormsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.6", ngImport: i0, type: TuainNgFormsLibModule, declarations: [BasicFormComponent,
|
|
3698
3818
|
ActionComponent,
|
|
3699
3819
|
FieldComponent,
|
|
3700
3820
|
ElementComponent,
|
|
@@ -3717,12 +3837,10 @@ TuainNgFormsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
|
|
|
3717
3837
|
LibTableRecordActionComponent,
|
|
3718
3838
|
LibTableRecordFieldComponent,
|
|
3719
3839
|
LibTableComponent] });
|
|
3720
|
-
TuainNgFormsLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
]] });
|
|
3725
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: TuainNgFormsLibModule, decorators: [{
|
|
3840
|
+
TuainNgFormsLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: TuainNgFormsLibModule, imports: [CommonModule,
|
|
3841
|
+
RouterModule,
|
|
3842
|
+
FormsModule] });
|
|
3843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: TuainNgFormsLibModule, decorators: [{
|
|
3726
3844
|
type: NgModule,
|
|
3727
3845
|
args: [{
|
|
3728
3846
|
declarations: COMPONENTS,
|