tuain-ng-forms-lib 14.1.2 → 14.2.14
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 +20 -15
- 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 +65 -37
- package/esm2020/lib/tuain-ng-forms-lib.module.mjs +7 -9
- package/fesm2015/tuain-ng-forms-lib.mjs +479 -357
- package/fesm2015/tuain-ng-forms-lib.mjs.map +1 -1
- package/fesm2020/tuain-ng-forms-lib.mjs +474 -354
- 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 +5 -5
- 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 +8 -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,25 +66,30 @@ 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
78
|
if (this.field) {
|
|
71
79
|
this.formConfig = this.field?._formConfig;
|
|
72
80
|
// Inicialización
|
|
73
|
-
const mapping =
|
|
81
|
+
const mapping = this.formConfig.fieldPropagateAttributes;
|
|
74
82
|
for (let index = 0; index < mapping.length; index++) {
|
|
75
|
-
const
|
|
76
|
-
const
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
this.dafaultProcessFieldChange(compAttr, attributeValue);
|
|
80
|
-
this.processFieldChange(compAttr, attributeValue);
|
|
83
|
+
const attrName = mapping[index].toString();
|
|
84
|
+
const attributeValue = this.field?.[attrName];
|
|
85
|
+
this.dafaultProcessFieldChange(attrName, attributeValue);
|
|
86
|
+
this.processFieldChange(attrName, attributeValue);
|
|
81
87
|
}
|
|
82
88
|
// Subscripción a cambios en atributos
|
|
83
89
|
this.field.attributeChange.subscribe(event => {
|
|
84
|
-
const { name:
|
|
85
|
-
|
|
86
|
-
this.
|
|
87
|
-
this.processFieldChange(compAttr, value);
|
|
90
|
+
const { name: attrName, value } = event;
|
|
91
|
+
this.dafaultProcessFieldChange(attrName, value);
|
|
92
|
+
this.processFieldChange(attrName, value);
|
|
88
93
|
});
|
|
89
94
|
}
|
|
90
95
|
this.start();
|
|
@@ -137,9 +142,9 @@ class FieldComponent {
|
|
|
137
142
|
return !this.field?.enabledOn(this.state);
|
|
138
143
|
}
|
|
139
144
|
}
|
|
140
|
-
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
141
|
-
FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
145
|
+
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
146
|
+
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 });
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FieldComponent, decorators: [{
|
|
143
148
|
type: Component,
|
|
144
149
|
args: [{
|
|
145
150
|
selector: 'lib-field',
|
|
@@ -164,9 +169,9 @@ class ElementComponent {
|
|
|
164
169
|
return !this.element?.enabledOn(this.state);
|
|
165
170
|
}
|
|
166
171
|
}
|
|
167
|
-
ElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
168
|
-
ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
172
|
+
ElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
173
|
+
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 });
|
|
174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ElementComponent, decorators: [{
|
|
170
175
|
type: Component,
|
|
171
176
|
args: [{
|
|
172
177
|
selector: 'lib-element',
|
|
@@ -182,9 +187,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
|
|
|
182
187
|
|
|
183
188
|
class FormErrorComponent {
|
|
184
189
|
}
|
|
185
|
-
FormErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
186
|
-
FormErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
190
|
+
FormErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
191
|
+
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 });
|
|
192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormErrorComponent, decorators: [{
|
|
188
193
|
type: Component,
|
|
189
194
|
args: [{
|
|
190
195
|
selector: 'lib-form-error',
|
|
@@ -207,9 +212,9 @@ class FormHeaderComponent {
|
|
|
207
212
|
this.goBackEvent.emit();
|
|
208
213
|
}
|
|
209
214
|
}
|
|
210
|
-
FormHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
211
|
-
FormHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
215
|
+
FormHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
216
|
+
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 });
|
|
217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormHeaderComponent, decorators: [{
|
|
213
218
|
type: Component,
|
|
214
219
|
args: [{
|
|
215
220
|
selector: 'lib-form-header',
|
|
@@ -233,9 +238,9 @@ class SectionComponent {
|
|
|
233
238
|
}
|
|
234
239
|
start() { }
|
|
235
240
|
}
|
|
236
|
-
SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
237
|
-
SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
241
|
+
SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
242
|
+
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 });
|
|
243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SectionComponent, decorators: [{
|
|
239
244
|
type: Component,
|
|
240
245
|
args: [{
|
|
241
246
|
selector: 'lib-section',
|
|
@@ -253,9 +258,9 @@ class SubSectionComponent {
|
|
|
253
258
|
}
|
|
254
259
|
start() { }
|
|
255
260
|
}
|
|
256
|
-
SubSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
257
|
-
SubSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
261
|
+
SubSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SubSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
262
|
+
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 });
|
|
263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SubSectionComponent, decorators: [{
|
|
259
264
|
type: Component,
|
|
260
265
|
args: [{
|
|
261
266
|
selector: 'lib-subsection',
|
|
@@ -288,9 +293,9 @@ class LibTableRecordActionComponent {
|
|
|
288
293
|
}
|
|
289
294
|
class() { }
|
|
290
295
|
}
|
|
291
|
-
LibTableRecordActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
292
|
-
LibTableRecordActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
293
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
296
|
+
LibTableRecordActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
297
|
+
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 });
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordActionComponent, decorators: [{
|
|
294
299
|
type: Component,
|
|
295
300
|
args: [{
|
|
296
301
|
selector: 'lib-table-record-action',
|
|
@@ -313,9 +318,9 @@ class LibTableRecordFieldComponent {
|
|
|
313
318
|
}
|
|
314
319
|
start() { }
|
|
315
320
|
}
|
|
316
|
-
LibTableRecordFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
317
|
-
LibTableRecordFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
321
|
+
LibTableRecordFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
322
|
+
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 });
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableRecordFieldComponent, decorators: [{
|
|
319
324
|
type: Component,
|
|
320
325
|
args: [{
|
|
321
326
|
selector: 'lib-table-record-field',
|
|
@@ -404,9 +409,9 @@ class LibTableComponent {
|
|
|
404
409
|
}
|
|
405
410
|
}
|
|
406
411
|
}
|
|
407
|
-
LibTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
408
|
-
LibTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
409
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
412
|
+
LibTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
413
|
+
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 });
|
|
414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: LibTableComponent, decorators: [{
|
|
410
415
|
type: Component,
|
|
411
416
|
args: [{
|
|
412
417
|
selector: 'lib-table',
|
|
@@ -453,6 +458,10 @@ const operators = {
|
|
|
453
458
|
|
|
454
459
|
class FormElement {
|
|
455
460
|
constructor(elementDefinition, formConfig) {
|
|
461
|
+
this._visible = true;
|
|
462
|
+
this.visibleStates = null;
|
|
463
|
+
this.enabledStates = null;
|
|
464
|
+
this.elementType = null;
|
|
456
465
|
this._formConfig = formConfig;
|
|
457
466
|
this._isForced = false;
|
|
458
467
|
this.setVisibleStates(elementDefinition.visibleStates);
|
|
@@ -462,6 +471,7 @@ class FormElement {
|
|
|
462
471
|
this.setVisibility(elementDefinition?.visible ?? true);
|
|
463
472
|
this.customAttributes = elementDefinition?.customAttributes ?? {};
|
|
464
473
|
}
|
|
474
|
+
;
|
|
465
475
|
getCustomAttribute(name) { return this.customAttributes?.[name] ?? null; }
|
|
466
476
|
setCustomAttribute(name, value) { if (name) {
|
|
467
477
|
this.customAttributes[name] = value;
|
|
@@ -506,14 +516,14 @@ class FormElement {
|
|
|
506
516
|
this._isForced = forced;
|
|
507
517
|
}
|
|
508
518
|
}
|
|
509
|
-
show(forced) {
|
|
519
|
+
show(forced = null) {
|
|
510
520
|
this._visible = true;
|
|
511
521
|
if (forced !== null) {
|
|
512
522
|
this._isForced = forced;
|
|
513
523
|
this._visibleForced = true;
|
|
514
524
|
}
|
|
515
525
|
}
|
|
516
|
-
hide(forced) {
|
|
526
|
+
hide(forced = null) {
|
|
517
527
|
this._visible = false;
|
|
518
528
|
if (forced !== null) {
|
|
519
529
|
this._isForced = forced;
|
|
@@ -524,6 +534,7 @@ class FormElement {
|
|
|
524
534
|
disable() { this.disabled = true; }
|
|
525
535
|
get enabled() { return !this.disabled; }
|
|
526
536
|
get editable() { return !this.disabled; }
|
|
537
|
+
set editable(editable) { this.disabled = !editable; }
|
|
527
538
|
}
|
|
528
539
|
|
|
529
540
|
const HEADER = 'HEADER';
|
|
@@ -564,35 +575,40 @@ const DEFAULT_CAPTURE_TYPE = 'INPUT';
|
|
|
564
575
|
const DEFAULT_ALIGNMENT = 'left';
|
|
565
576
|
const STD_MAX_LENGTH = 50;
|
|
566
577
|
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
|
-
|
|
578
|
+
const directChanges = [
|
|
579
|
+
'defaultEditable', 'defaultValue', 'alignment', 'required', 'errorCode', 'errorMessage', 'errorType',
|
|
580
|
+
'tooltip', 'info', 'format', 'intrinsicErrorMessage', 'outputOnly', 'captureType', 'title', 'type',
|
|
581
|
+
'maxLength', 'maxValue', 'minLength', 'minValue', 'validateOnServer', 'serverAction', 'visibleLabel',
|
|
582
|
+
'options',
|
|
583
|
+
];
|
|
584
|
+
const attrs = {
|
|
585
|
+
_captureType: { name: '_captureType', propagate: 'captureType' },
|
|
586
|
+
_errorCode: { name: '_errorCode', propagate: 'errorCode' },
|
|
587
|
+
_errorMessage: { name: '_errorMessage', propagate: 'errorMessage' },
|
|
588
|
+
_errorType: { name: '_errorType', propagate: 'errorType' },
|
|
589
|
+
_defaultValue: { name: '_defaultValue', propagate: 'defaultValue' },
|
|
590
|
+
_defaultEditable: { name: '_defaultEditable', propagate: 'defaultEditable' },
|
|
591
|
+
_fieldAlignment: { name: '_fieldAlignment', propagate: 'alignment' },
|
|
592
|
+
_fieldCode: { name: '_fieldCode', propagate: 'code' },
|
|
593
|
+
_fieldInfo: { name: '_fieldInfo', propagate: 'info' },
|
|
594
|
+
_fieldRequired: { name: '_fieldRequired', propagate: 'required' },
|
|
595
|
+
_fieldTitle: { name: '_fieldTitle', propagate: 'title' },
|
|
596
|
+
_fieldType: { name: '_fieldType', propagate: 'type' },
|
|
597
|
+
_fieldFormat: { name: '_fieldFormat', propagate: 'format' },
|
|
598
|
+
_fieldOptions: { name: '_fieldOptions', propagate: 'options' },
|
|
599
|
+
_focus: { name: '_focus', propagate: 'focus' },
|
|
600
|
+
_hasChanged: { name: '_hasChanged', propagate: 'hasChanged' },
|
|
601
|
+
_intrinsicErrorMessage: { name: '_intrinsicErrorMessage', propagate: null },
|
|
602
|
+
_maxLength: { name: '_maxLength', propagate: 'maxLength' },
|
|
603
|
+
_maxValue: { name: '_maxValue', propagate: 'maxValue' },
|
|
604
|
+
_minLength: { name: '_minLength', propagate: 'minLength' },
|
|
605
|
+
_minValue: { name: '_minValue', propagate: 'minValue' },
|
|
606
|
+
_onValidation: { name: '_onValidation', propagate: 'onValidation' },
|
|
607
|
+
_outputOnly: { name: '_outputOnly', propagate: 'outputOnly' },
|
|
608
|
+
_tooltipText: { name: '_tooltipText', propagate: 'tooltip' },
|
|
609
|
+
_validateOnServer: { name: '_validateOnServer', propagate: 'validateOnServer' },
|
|
610
|
+
_value: { name: '_value', propagate: 'value' },
|
|
611
|
+
_visibleLabel: { name: '_visibleLabel', propagate: 'visibleLabel' },
|
|
596
612
|
};
|
|
597
613
|
class FieldDescriptor extends FormElement {
|
|
598
614
|
constructor(inputFieldReceived, formConfig) {
|
|
@@ -601,48 +617,48 @@ class FieldDescriptor extends FormElement {
|
|
|
601
617
|
this._editionPartial = new Subject();
|
|
602
618
|
this._detailRequest = new Subject();
|
|
603
619
|
this._attributeChange = new Subject();
|
|
604
|
-
this.
|
|
605
|
-
this.
|
|
620
|
+
this._errorType = '';
|
|
621
|
+
this._errorCode = '';
|
|
622
|
+
this._errorMessage = '';
|
|
623
|
+
this._fieldCode = '';
|
|
624
|
+
this._intrinsicErrorMessage = '';
|
|
606
625
|
this._maxLength = 0;
|
|
607
626
|
this._minLength = 0;
|
|
627
|
+
this._focus = false;
|
|
608
628
|
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;
|
|
629
|
+
this._validateOnServer = false;
|
|
630
|
+
this._visibleLabel = false;
|
|
631
|
+
this._captureType = '';
|
|
632
|
+
this._defaultValue = '';
|
|
633
|
+
this._defaultEditable = false;
|
|
634
|
+
this._fieldAlignment = '';
|
|
635
|
+
this._fieldInfo = '';
|
|
636
|
+
this._fieldRequired = false;
|
|
637
|
+
this._fieldTitle = '';
|
|
638
|
+
this._fieldType = '';
|
|
639
|
+
this._fieldFormat = null;
|
|
640
|
+
this._fieldOptions = null;
|
|
641
|
+
this._hasChanged = false;
|
|
642
|
+
this._outputOnly = false;
|
|
643
|
+
this._tooltipText = '';
|
|
628
644
|
this.elementType = elementTypes.field;
|
|
629
645
|
const fld = (inputFieldReceived) ? inputFieldReceived : {};
|
|
630
|
-
this.setAttr(
|
|
631
|
-
this.
|
|
632
|
-
this.
|
|
633
|
-
this.
|
|
646
|
+
this.setAttr(attrs._fieldCode, fld.fieldCode);
|
|
647
|
+
this.title = fld.fieldTitle ?? this._fieldCode;
|
|
648
|
+
this.type = fld.fieldTypeCode;
|
|
649
|
+
this.captureType = fld.captureType ?? DEFAULT_CAPTURE_TYPE;
|
|
634
650
|
const defaultValue = fld.defaultValue ?? null;
|
|
635
|
-
if (this.
|
|
636
|
-
this.
|
|
651
|
+
if (this._fieldType === this._formConfig.fieldTypes.boolean) {
|
|
652
|
+
this.defaultValue = defaultValue ?? false;
|
|
637
653
|
}
|
|
638
654
|
else {
|
|
639
|
-
this.
|
|
655
|
+
this.defaultValue = defaultValue;
|
|
640
656
|
}
|
|
641
|
-
const defaultTypeAlignment = (this._formConfig.tableFieldStyles[this.
|
|
642
|
-
? this._formConfig.tableFieldStyles[this.
|
|
657
|
+
const defaultTypeAlignment = (this._formConfig.tableFieldStyles[this._fieldType] != null)
|
|
658
|
+
? this._formConfig.tableFieldStyles[this._fieldType]['text-align'] : DEFAULT_ALIGNMENT;
|
|
643
659
|
const fieldAlignment = (fld.alignment != null) ? fld.alignment.toLowerCase() : defaultTypeAlignment;
|
|
644
|
-
this.
|
|
645
|
-
this.
|
|
660
|
+
this.alignment = fieldAlignment;
|
|
661
|
+
this.info = fld.info || '';
|
|
646
662
|
let fieldFormat;
|
|
647
663
|
try {
|
|
648
664
|
fieldFormat = (fld.format) ? new RegExp(fld.format) : null;
|
|
@@ -650,70 +666,254 @@ class FieldDescriptor extends FormElement {
|
|
|
650
666
|
catch (e) {
|
|
651
667
|
fieldFormat = null;
|
|
652
668
|
}
|
|
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
|
|
669
|
+
this.format = fieldFormat;
|
|
670
|
+
this.validateOnServer = fld.serverAction ?? false;
|
|
671
|
+
this.tooltip = fld.tooltip || '';
|
|
672
|
+
this.defaultEditable = this.enabled;
|
|
673
|
+
this.required = fld.required ?? false;
|
|
674
|
+
this.outputOnly = fld.outputOnly ?? false;
|
|
675
|
+
this.maxLength = fld.maxLength ?? (this._captureType === 'TEXTAREA' ? BIG_MAX_LENGTH : STD_MAX_LENGTH);
|
|
676
|
+
this.intrinsicErrorMessage = this._formConfig?.fieldValidations?.[this._fieldType]?.message
|
|
663
677
|
?? this._formConfig?.fieldValidations?.DEFAULT?.message ?? '';
|
|
664
|
-
this.
|
|
678
|
+
this.setError(fld.errorCode, fld.errorMessage, fld.errorType ?? DEFAULT_ERROR_TYPE);
|
|
665
679
|
this.setEditable(fld.editable ?? true);
|
|
666
|
-
this.
|
|
680
|
+
this.visibleLabel = fld.visibleLabel ?? true;
|
|
667
681
|
this.setVisibility(fld.visible);
|
|
668
|
-
this.
|
|
669
|
-
this.
|
|
682
|
+
this.options = fld.fieldOptions;
|
|
683
|
+
this._setValue(fld.fieldValue ?? this._defaultValue ?? '');
|
|
670
684
|
}
|
|
671
|
-
get
|
|
672
|
-
|
|
685
|
+
get alignment() { return this._fieldAlignment; }
|
|
686
|
+
set alignment(alignment) { this.setAttr(attrs._fieldAlignment, alignment); }
|
|
673
687
|
get attributeChange() { return this._attributeChange; }
|
|
674
|
-
get
|
|
688
|
+
get backend() { return this._validateOnServer; }
|
|
689
|
+
get captureType() { return this._captureType; }
|
|
690
|
+
set captureType(captureType) { this.setAttr(attrs._captureType, captureType); }
|
|
691
|
+
get code() { return this._fieldCode; }
|
|
692
|
+
get fieldCode() { return this._fieldCode; }
|
|
693
|
+
get defaultValue() { return this._defaultValue; }
|
|
694
|
+
set defaultValue(defaultValue) { this.setAttr(attrs._defaultValue, defaultValue); }
|
|
695
|
+
get defaultEditable() { return this._defaultEditable; }
|
|
696
|
+
set defaultEditable(editable) { this.setAttr(attrs._defaultEditable, editable); }
|
|
675
697
|
get detailRequest() { return this._detailRequest; }
|
|
676
|
-
get
|
|
677
|
-
get
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
698
|
+
get editionFinish() { return this._editionFinish; }
|
|
699
|
+
get editionPartial() { return this._editionPartial; }
|
|
700
|
+
get empty() {
|
|
701
|
+
const fieldCurrentValue = this.value;
|
|
702
|
+
if (fieldCurrentValue === undefined || fieldCurrentValue === null) {
|
|
703
|
+
return true;
|
|
704
|
+
}
|
|
705
|
+
if (this._fieldType === this._formConfig.fieldTypes.array
|
|
706
|
+
&& Array.isArray(fieldCurrentValue) && fieldCurrentValue.length === 0) {
|
|
707
|
+
return true;
|
|
708
|
+
}
|
|
709
|
+
;
|
|
710
|
+
if (this._fieldType === this._formConfig.fieldTypes.phone) {
|
|
711
|
+
if (!Array.isArray(fieldCurrentValue)) {
|
|
712
|
+
return true;
|
|
713
|
+
}
|
|
714
|
+
if (fieldCurrentValue.length !== 2 || !fieldCurrentValue[0] || !fieldCurrentValue[1]) {
|
|
715
|
+
return true;
|
|
716
|
+
}
|
|
717
|
+
return false;
|
|
718
|
+
}
|
|
719
|
+
;
|
|
720
|
+
return fieldCurrentValue === '';
|
|
690
721
|
}
|
|
722
|
+
get error() { return { type: this._errorType, code: this._errorCode, message: this._errorMessage }; }
|
|
723
|
+
set error(errorObj) { this.setError(errorObj.code, errorObj.message, errorObj.type ?? DEFAULT_ERROR_TYPE); }
|
|
724
|
+
get errorCode() { return this._errorCode; }
|
|
725
|
+
set errorCode(code) { this.setError(code, this._errorMessage); }
|
|
726
|
+
get errorMessage() { return this._errorMessage; }
|
|
727
|
+
set errorMessage(msg) { this.setError(this._errorCode, msg); }
|
|
728
|
+
get errorType() { return this._errorType; }
|
|
729
|
+
get externalValue() { return this._externalValue; }
|
|
730
|
+
get format() { return this._fieldFormat; }
|
|
731
|
+
set format(format) { this.setAttr(attrs._fieldFormat, format); }
|
|
732
|
+
get hasChanged() { return this._hasChanged; }
|
|
733
|
+
set hasChanged(hasChanged) { this.setAttr(attrs._hasChanged, hasChanged); }
|
|
734
|
+
get info() { return this._fieldInfo; }
|
|
735
|
+
set info(newInfo) { this.setAttr(attrs._fieldInfo, newInfo); }
|
|
736
|
+
set intrinsicErrorMessage(message) { this.setAttr(attrs._intrinsicErrorMessage, message); }
|
|
691
737
|
get maxLength() { return (this._maxLength > 0) ? this._maxLength.toString() : ''; }
|
|
692
|
-
set maxLength(requiredMaxLength) {
|
|
693
|
-
|
|
694
|
-
|
|
738
|
+
set maxLength(requiredMaxLength) { this.setAttr(attrs._maxLength, +requiredMaxLength); }
|
|
739
|
+
get maxValue() { return this._maxValue; }
|
|
740
|
+
set maxValue(inputMaxValue) {
|
|
741
|
+
let maxValue = inputMaxValue;
|
|
742
|
+
if (this._fieldType === this._formConfig.fieldTypes.date) {
|
|
743
|
+
maxValue = new Date(maxValue);
|
|
744
|
+
}
|
|
745
|
+
this.setAttr(attrs._maxValue, maxValue);
|
|
746
|
+
}
|
|
747
|
+
get minLength() { return this._minLength; }
|
|
748
|
+
set minLength(requiredMinLength) { this.setAttr(attrs._minLength, +requiredMinLength); }
|
|
749
|
+
get minValue() { return this._minValue; }
|
|
750
|
+
set minValue(inputMinValue) {
|
|
751
|
+
let minValue = inputMinValue;
|
|
752
|
+
if (this._fieldType === this._formConfig.fieldTypes.date) {
|
|
753
|
+
minValue = new Date(minValue);
|
|
754
|
+
}
|
|
755
|
+
this.setAttr(attrs._minValue, minValue);
|
|
756
|
+
}
|
|
757
|
+
get name() { return this._fieldCode; }
|
|
758
|
+
get options() {
|
|
759
|
+
return this._fieldOptions?.map(option => {
|
|
760
|
+
const optionCopy = { ...option };
|
|
761
|
+
return optionCopy;
|
|
762
|
+
}) ?? null;
|
|
763
|
+
}
|
|
764
|
+
set options(newOptions) {
|
|
765
|
+
if ((!this._formConfig.captureTypesWithOptions.includes(this._captureType))
|
|
766
|
+
|| typeof newOptions === UNDEFINED || !newOptions
|
|
767
|
+
|| !Array.isArray(newOptions)) {
|
|
768
|
+
return;
|
|
769
|
+
}
|
|
770
|
+
let fieldOptions = newOptions.map((option) => {
|
|
771
|
+
if (option.text !== undefined && option.text !== null
|
|
772
|
+
&& option.value !== undefined && option.value !== null) {
|
|
773
|
+
return { fieldOptionValue: option.text, fieldOptionId: option.value };
|
|
774
|
+
}
|
|
775
|
+
return option;
|
|
776
|
+
});
|
|
777
|
+
fieldOptions = (fieldOptions && Array.isArray(fieldOptions)
|
|
778
|
+
&& fieldOptions.length > 0) ? fieldOptions : [];
|
|
779
|
+
this.setAttr(attrs._fieldOptions, fieldOptions);
|
|
780
|
+
if (this._value) {
|
|
781
|
+
if (this._fieldType === this._formConfig.fieldTypes.array && Array.isArray(this._value)) {
|
|
782
|
+
const fieldValue = this._value?.filter(item => this._fieldOptions?.find(opt => opt.fieldOptionId === item));
|
|
783
|
+
this.setAttr(attrs._value, fieldValue);
|
|
784
|
+
}
|
|
785
|
+
else {
|
|
786
|
+
const valInOptions = this._fieldOptions?.find(item => item.fieldOptionId === this._value);
|
|
787
|
+
if (!valInOptions) {
|
|
788
|
+
this._setValue('');
|
|
789
|
+
}
|
|
790
|
+
}
|
|
695
791
|
}
|
|
696
|
-
|
|
697
|
-
this.
|
|
792
|
+
if (this._fieldRequired && this._fieldOptions?.length === 1) {
|
|
793
|
+
this._setValue(this._fieldOptions?.[0].fieldOptionId);
|
|
794
|
+
this.notifyEditionFinish();
|
|
698
795
|
}
|
|
699
796
|
}
|
|
700
|
-
get
|
|
701
|
-
|
|
797
|
+
get optionText() { return this._fieldOptions?.find(item => item.fieldOptionId === this._value)?.fieldOptionValue ?? null; }
|
|
798
|
+
get outputOnly() { return this._outputOnly; }
|
|
799
|
+
set outputOnly(outputOnly) { this.setAttr(attrs._outputOnly, outputOnly); }
|
|
800
|
+
get required() { return this._fieldRequired; }
|
|
801
|
+
set required(required) { this.setAttr(attrs._fieldRequired, required ?? false); }
|
|
802
|
+
get title() { return this._fieldTitle; }
|
|
803
|
+
set title(title) { this.setAttr(attrs._fieldTitle, title.toString()); }
|
|
804
|
+
get tooltip() { return this._tooltipText; }
|
|
805
|
+
set tooltip(tooltip) { this.setAttr(attrs._tooltipText, tooltip); }
|
|
806
|
+
get type() { return this._fieldType; }
|
|
807
|
+
set type(fieldType) { this.setAttr(attrs._fieldType, fieldType); }
|
|
808
|
+
get validating() { return this._onValidation; }
|
|
809
|
+
set validating(isValidating) { this.setAttr(attrs._onValidation, isValidating); }
|
|
810
|
+
get value() {
|
|
811
|
+
return (this._fieldType === this._formConfig.fieldTypes.boolean
|
|
812
|
+
|| this._fieldType === this._formConfig.fieldTypes.check) ? yn(this._value) : this._value;
|
|
813
|
+
}
|
|
814
|
+
get validateOnServer() { return this._validateOnServer; }
|
|
815
|
+
set validateOnServer(validateOnServer) { this.setAttr(attrs._validateOnServer, validateOnServer); }
|
|
816
|
+
get serverAction() { return this._validateOnServer; }
|
|
817
|
+
set serverAction(validateOnServer) { this.validateOnServer = validateOnServer; }
|
|
818
|
+
set value(newValue) { this._setValue(newValue); }
|
|
819
|
+
get visibleLabel() { return this._visibleLabel; }
|
|
820
|
+
set visibleLabel(visibleLabel) { this.setAttr(attrs._visibleLabel, visibleLabel); }
|
|
821
|
+
/**
|
|
822
|
+
* @deprecated Use options
|
|
823
|
+
*/
|
|
824
|
+
get fieldOptions() { return this._fieldOptions; }
|
|
825
|
+
/**
|
|
826
|
+
* @deprecated Use options
|
|
827
|
+
*/
|
|
828
|
+
set fieldOptions(options) { this.options = options; }
|
|
829
|
+
/**
|
|
830
|
+
* @deprecated Use value
|
|
831
|
+
*/
|
|
832
|
+
get fieldValue() { return this.value; }
|
|
833
|
+
/**
|
|
834
|
+
* @deprecated Use hasChanged
|
|
835
|
+
*/
|
|
836
|
+
changed(hasChanged = true) { this.hasChanged = hasChanged; }
|
|
837
|
+
clean() { this._setValue(this._defaultValue || ''); this.resetError(); }
|
|
838
|
+
focus() { this.setAttr(attrs._focus, true); }
|
|
839
|
+
getErrorCode() { return this.error.code; }
|
|
840
|
+
setErrorCode(code) { this.setError(code, this._errorMessage); }
|
|
841
|
+
getErrorMessage() { return this.error.message; }
|
|
842
|
+
setErrorMessage(msg) { this.setError(this._errorCode, msg); }
|
|
843
|
+
getRequired() { return this.required; }
|
|
844
|
+
hasError() { return this._errorCode !== NO_ERROR; }
|
|
845
|
+
hideLabel() { this.visibleLabel = false; }
|
|
846
|
+
resetError() { (this._errorCode !== NO_ERROR) && this.setError(NO_ERROR, null); }
|
|
847
|
+
setEditable(editable = true) { (editable) ? this.enable() : this.disable(); }
|
|
848
|
+
setValue(newValue, widgetUpdate = true) { this._setValue(newValue, widgetUpdate); }
|
|
849
|
+
showLabel() { this.visibleLabel = true; }
|
|
850
|
+
/**
|
|
851
|
+
* @deprecated Use title
|
|
852
|
+
*/
|
|
853
|
+
setLabel(label) { this.title = label; }
|
|
854
|
+
/**
|
|
855
|
+
* @deprecated Use required
|
|
856
|
+
*/
|
|
857
|
+
setRequired(required) { this.required = required; }
|
|
858
|
+
/**
|
|
859
|
+
* @deprecated Use changed
|
|
860
|
+
*/
|
|
861
|
+
setChanged(hasChanged) { this.changed(hasChanged); }
|
|
862
|
+
/**
|
|
863
|
+
* @deprecated Use value
|
|
864
|
+
*/
|
|
865
|
+
getValue() { return this.value; }
|
|
866
|
+
/**
|
|
867
|
+
* @deprecated Use empty
|
|
868
|
+
*/
|
|
869
|
+
isEmpty() { return this.empty; }
|
|
870
|
+
/**
|
|
871
|
+
* @deprecated Use error
|
|
872
|
+
*/
|
|
873
|
+
getError() { return this.error; }
|
|
874
|
+
/**
|
|
875
|
+
* @deprecated Use optionText
|
|
876
|
+
*/
|
|
877
|
+
getOptionText() { return this.optionText; }
|
|
878
|
+
/**
|
|
879
|
+
* @deprecated Use options
|
|
880
|
+
*/
|
|
881
|
+
getFieldOptions() { return this.options; }
|
|
882
|
+
/**
|
|
883
|
+
* @deprecated Use options
|
|
884
|
+
*/
|
|
885
|
+
setFieldOptions(newOptions) { return this.options = newOptions; }
|
|
886
|
+
/**
|
|
887
|
+
* @deprecated Use intrinsicErrorMessage
|
|
888
|
+
*/
|
|
889
|
+
setIntrinsicErrorMessage(message) { this.intrinsicErrorMessage = message; }
|
|
890
|
+
/**
|
|
891
|
+
* @deprecated Use maxValue
|
|
892
|
+
*/
|
|
893
|
+
setMaxValue(inputMaxValue) { this.maxValue = inputMaxValue; }
|
|
894
|
+
/**
|
|
895
|
+
* @deprecated Use minValue
|
|
896
|
+
*/
|
|
897
|
+
setMinValue(inputMinValue) { this.minValue = inputMinValue; }
|
|
898
|
+
/**
|
|
899
|
+
* @deprecated Use showLabel
|
|
900
|
+
*/
|
|
901
|
+
setVisibleLabel(visibleLabel) { this.visibleLabel = visibleLabel; }
|
|
702
902
|
notifyEditionPartial() {
|
|
703
903
|
this.resetError();
|
|
704
|
-
this._editionPartial.next({ code: this.
|
|
904
|
+
this._editionPartial.next({ code: this._fieldCode, intrinsicValidation: true });
|
|
705
905
|
}
|
|
706
906
|
notifyEditionFinish() {
|
|
707
|
-
const fieldValue = this.
|
|
907
|
+
const fieldValue = this.value;
|
|
708
908
|
this.resetError();
|
|
709
|
-
const validationConfig = this._formConfig.fieldValidations?.[this.
|
|
909
|
+
const validationConfig = this._formConfig.fieldValidations?.[this._fieldType] ?? {};
|
|
710
910
|
const { type, validation } = validationConfig;
|
|
711
911
|
let message = validationConfig?.message;
|
|
712
912
|
let intrinsicValidation = true;
|
|
713
|
-
if (fieldValue && (validation || this.
|
|
913
|
+
if (fieldValue && (validation || this._fieldFormat)) {
|
|
714
914
|
if (type === 'regexp') {
|
|
715
915
|
intrinsicValidation = (validation?.test(fieldValue) ?? true)
|
|
716
|
-
&& (this.
|
|
916
|
+
&& (this._fieldFormat?.test(fieldValue) ?? true);
|
|
717
917
|
}
|
|
718
918
|
else if (type === 'function' && typeof validation === 'function') {
|
|
719
919
|
const { valid, message: customMessage } = validation(fieldValue, this);
|
|
@@ -735,155 +935,48 @@ class FieldDescriptor extends FormElement {
|
|
|
735
935
|
if (intrinsicValidation && fieldValue && typeof fieldValue === 'string'
|
|
736
936
|
&& this._minLength && fieldValue?.length < this._minLength) {
|
|
737
937
|
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 });
|
|
938
|
+
this.setError('99', `Longitud de ${this._fieldTitle} debe ser de al menos ${this._minLength}`);
|
|
746
939
|
}
|
|
940
|
+
this._editionFinish.next({ code: this._fieldCode, intrinsicValidation });
|
|
747
941
|
}
|
|
748
942
|
notifyEditionDetailRequest(detail) {
|
|
749
|
-
const detailEvent = {
|
|
750
|
-
code: this.fieldCode,
|
|
751
|
-
detail,
|
|
752
|
-
};
|
|
943
|
+
const detailEvent = { code: this._fieldCode, detail };
|
|
753
944
|
this._detailRequest.next(detailEvent);
|
|
754
945
|
}
|
|
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 ?? '');
|
|
946
|
+
setAttr(attr, value) {
|
|
947
|
+
const { name: attrName, propagate: name } = attr;
|
|
948
|
+
this[attrName] = value;
|
|
949
|
+
name && this._attributeChange.next({ name, value });
|
|
770
950
|
}
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
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;
|
|
807
|
-
}
|
|
808
|
-
getOptionText() {
|
|
809
|
-
return this.fieldOptions?.find(item => item.fieldOptionId === this._value)?.fieldOptionValue ?? null;
|
|
951
|
+
setError(code, message, type = DEFAULT_ERROR_TYPE) {
|
|
952
|
+
this.setAttr(attrs._errorCode, code ?? NO_ERROR);
|
|
953
|
+
this.setAttr(attrs._errorType, (this._errorCode === NO_ERROR) ? '' : type);
|
|
954
|
+
this.setAttr(attrs._errorMessage, message ?? '');
|
|
810
955
|
}
|
|
811
956
|
updateFromServer(fld) {
|
|
812
957
|
const fieldKeys = Object.keys(fld);
|
|
813
958
|
for (let index = 0; index < fieldKeys.length; index++) {
|
|
814
959
|
const attrName = fieldKeys[index];
|
|
815
960
|
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);
|
|
961
|
+
if (directChanges.includes(attrName)) {
|
|
962
|
+
this[attrName] = attrValue;
|
|
872
963
|
}
|
|
873
964
|
else {
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
965
|
+
(attrName === 'label') && (this.title = attrValue);
|
|
966
|
+
(attrName === 'labelVisible') && (this.visibleLabel = attrValue);
|
|
967
|
+
(attrName === 'editable') && this.setEditable(attrValue);
|
|
968
|
+
(attrName === 'visible') && this.setVisibility(attrValue);
|
|
969
|
+
(attrName === 'value') && (this._setValue(attrValue) && (this.hasChanged = false));
|
|
970
|
+
(attrName === 'fieldValue') && (this._setValue(attrValue) && (this.hasChanged = false));
|
|
971
|
+
(attrName === 'fieldOptions') && (this.options = attrValue);
|
|
972
|
+
(attrName === 'fieldTitle') && (this.title = attrValue);
|
|
973
|
+
(attrName === 'fieldTypeCode') && (this.type = attrValue);
|
|
974
|
+
(attrName === 'fieldType') && (this.type = attrValue);
|
|
975
|
+
(attrName === 'tooltipText') && (this.tooltip = attrValue);
|
|
879
976
|
}
|
|
880
977
|
}
|
|
881
|
-
if (this.fieldRequired && this.fieldOptions.length === 1) {
|
|
882
|
-
this.setValue(this.fieldOptions[0].fieldOptionId);
|
|
883
|
-
this.notifyEditionFinish();
|
|
884
|
-
}
|
|
885
978
|
}
|
|
886
|
-
|
|
979
|
+
_setValue(newValue, widgetUpdate = true) {
|
|
887
980
|
if (typeof newValue === UNDEFINED) {
|
|
888
981
|
return true;
|
|
889
982
|
}
|
|
@@ -891,12 +984,12 @@ class FieldDescriptor extends FormElement {
|
|
|
891
984
|
return true;
|
|
892
985
|
}
|
|
893
986
|
let newFinalValue;
|
|
894
|
-
if (this.
|
|
895
|
-
|| this.
|
|
987
|
+
if (this._fieldType === this._formConfig.fieldTypes.boolean
|
|
988
|
+
|| this._fieldType === this._formConfig.fieldTypes.check) {
|
|
896
989
|
newFinalValue = yn(newValue) ?? false;
|
|
897
990
|
}
|
|
898
|
-
else if (this.
|
|
899
|
-
|| this.
|
|
991
|
+
else if (this._fieldType === this._formConfig.fieldTypes.array
|
|
992
|
+
|| this._fieldType === this._formConfig.fieldTypes.map) {
|
|
900
993
|
if (newValue === null || newValue === '') {
|
|
901
994
|
newFinalValue = [];
|
|
902
995
|
}
|
|
@@ -911,9 +1004,9 @@ class FieldDescriptor extends FormElement {
|
|
|
911
1004
|
newFinalValue = newValue;
|
|
912
1005
|
}
|
|
913
1006
|
if (this._value !== newFinalValue) {
|
|
914
|
-
this.
|
|
1007
|
+
this.hasChanged = true;
|
|
915
1008
|
if (widgetUpdate) {
|
|
916
|
-
this.setAttr(
|
|
1009
|
+
this.setAttr(attrs._value, newFinalValue);
|
|
917
1010
|
}
|
|
918
1011
|
else {
|
|
919
1012
|
this._value = newFinalValue;
|
|
@@ -1553,7 +1646,7 @@ class RecordFormSubSection {
|
|
|
1553
1646
|
return this.subSectionFields;
|
|
1554
1647
|
}
|
|
1555
1648
|
getFieldNames() {
|
|
1556
|
-
return this.subSectionFields.map(field => field.
|
|
1649
|
+
return this.subSectionFields.map(field => field.code);
|
|
1557
1650
|
}
|
|
1558
1651
|
getActions() {
|
|
1559
1652
|
return this.subSectionActions;
|
|
@@ -1770,7 +1863,7 @@ class FormStructureAndData {
|
|
|
1770
1863
|
});
|
|
1771
1864
|
for (const fieldReceived of formFields) {
|
|
1772
1865
|
const fieldToAdd = new FieldDescriptor(fieldReceived, this._formConfig);
|
|
1773
|
-
const fieldCode = fieldToAdd.
|
|
1866
|
+
const fieldCode = fieldToAdd.code;
|
|
1774
1867
|
if (fieldCode) {
|
|
1775
1868
|
this._fieldArray.push(fieldToAdd);
|
|
1776
1869
|
this._fields[fieldCode] = fieldToAdd;
|
|
@@ -1865,13 +1958,13 @@ class FormStructureAndData {
|
|
|
1865
1958
|
get fields() { return this._fields; }
|
|
1866
1959
|
get fieldNames() { return this.getFieldNames(); }
|
|
1867
1960
|
getFields() { return this._fieldArray; }
|
|
1868
|
-
getFieldNames() { return this._fieldArray.map(field => field.
|
|
1961
|
+
getFieldNames() { return this._fieldArray.map(field => field.code); }
|
|
1869
1962
|
getField(code) { return (code && this._fields?.[code]) ? this._fields[code] : null; }
|
|
1870
1963
|
enableField(code) { this.getField(code)?.enable(); }
|
|
1871
1964
|
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)?.
|
|
1965
|
+
getFieldValue(code) { return this.getField(code)?.value; }
|
|
1966
|
+
getFieldOptionText(code) { return this.getField(code)?.optionText; }
|
|
1967
|
+
getFieldOptions(code) { return this.getField(code)?.options ?? null; }
|
|
1875
1968
|
setFieldValue(code, value) { this.getField(code)?.setValue(value); }
|
|
1876
1969
|
setFieldError(code, errorCode, message, type = 'error') { this.getField(code)?.setError(errorCode, message, type); }
|
|
1877
1970
|
setFieldIntrinsicErrorMessage(code, message) { this.getField(code)?.setIntrinsicErrorMessage(message); }
|
|
@@ -1879,7 +1972,8 @@ class FormStructureAndData {
|
|
|
1879
1972
|
const codes = this.getFieldSet(null, inputCodes ?? null);
|
|
1880
1973
|
for (const code of codes) {
|
|
1881
1974
|
try {
|
|
1882
|
-
this.getField(code)
|
|
1975
|
+
const field = this.getField(code) ?? null;
|
|
1976
|
+
field && (field.required = required);
|
|
1883
1977
|
}
|
|
1884
1978
|
catch (e) {
|
|
1885
1979
|
console.log(`Error modificando campo ${code}: ${e}`);
|
|
@@ -1939,28 +2033,28 @@ class FormStructureAndData {
|
|
|
1939
2033
|
return processedFields;
|
|
1940
2034
|
}
|
|
1941
2035
|
enableFields(codes, secCode, subCode) {
|
|
1942
|
-
return this.applyOnFields(fld => fld
|
|
2036
|
+
return this.applyOnFields(fld => fld?.enable(), codes, secCode, subCode);
|
|
1943
2037
|
}
|
|
1944
2038
|
showFields(codes, secCode, subCode) {
|
|
1945
|
-
return this.applyOnFields(fld => fld
|
|
2039
|
+
return this.applyOnFields(fld => fld?.show(), codes, secCode, subCode);
|
|
1946
2040
|
}
|
|
1947
2041
|
hideFields(codes, secCode, subCode) {
|
|
1948
|
-
return this.applyOnFields(fld => fld
|
|
2042
|
+
return this.applyOnFields(fld => fld?.hide(), codes, secCode, subCode);
|
|
1949
2043
|
}
|
|
1950
2044
|
showLabelFields(codes, secCode, subCode) {
|
|
1951
|
-
return this.applyOnFields(fld => fld
|
|
2045
|
+
return this.applyOnFields(fld => fld?.showLablel(), codes, secCode, subCode);
|
|
1952
2046
|
}
|
|
1953
2047
|
hideLabelFields(codes, secCode, subCode) {
|
|
1954
|
-
return this.applyOnFields(fld => fld
|
|
2048
|
+
return this.applyOnFields(fld => fld?.hideLabel(), codes, secCode, subCode);
|
|
1955
2049
|
}
|
|
1956
2050
|
disableFields(codes, secCode, subCode) {
|
|
1957
|
-
return this.applyOnFields(fld => fld
|
|
2051
|
+
return this.applyOnFields(fld => fld?.disable(), codes, secCode, subCode);
|
|
1958
2052
|
}
|
|
1959
2053
|
cleanFields(codes, secCode, subCode) {
|
|
1960
|
-
return this.applyOnFields(fld => fld
|
|
2054
|
+
return this.applyOnFields(fld => fld?.clean(), codes, secCode, subCode);
|
|
1961
2055
|
}
|
|
1962
2056
|
tagFieldsWithError(message, codes, secCode, subCode) {
|
|
1963
|
-
return this.applyOnFields(fld => fld
|
|
2057
|
+
return this.applyOnFields(fld => fld?.setErrorMessage(message), codes, secCode, subCode);
|
|
1964
2058
|
}
|
|
1965
2059
|
cleanErrorFields(codes, secCode, subCode) {
|
|
1966
2060
|
return this.tagFieldsWithError('', codes, secCode, subCode);
|
|
@@ -1969,16 +2063,16 @@ class FormStructureAndData {
|
|
|
1969
2063
|
return this.tagFieldsWithError(message, this.getRequiredEmptyFields(codes, secCode, subCode)) > 0;
|
|
1970
2064
|
}
|
|
1971
2065
|
getRequiredFields(codes, secCode, subCode) {
|
|
1972
|
-
return this.getFieldSet(fld => fld
|
|
2066
|
+
return this.getFieldSet(fld => fld?.required, codes ?? null, secCode, subCode);
|
|
1973
2067
|
}
|
|
1974
2068
|
getRequiredEmptyFields(codes, secCode, subCode) {
|
|
1975
|
-
return this.getFieldSet(fld => fld
|
|
2069
|
+
return this.getFieldSet(fld => fld?.required && fld?.empty, codes ?? null, secCode, subCode);
|
|
1976
2070
|
}
|
|
1977
2071
|
getChangedFields(codes, secCode, subCode) {
|
|
1978
|
-
return this.getFieldSet(fld => !fld
|
|
2072
|
+
return this.getFieldSet(fld => !fld?.outputOnly && fld?.hasChanged(), codes ?? null, secCode, subCode);
|
|
1979
2073
|
}
|
|
1980
2074
|
getFieldsWithValidationIssues(codes, secCode, subCode) {
|
|
1981
|
-
return this.getFieldSet(fld => fld
|
|
2075
|
+
return this.getFieldSet(fld => fld?.hasError(), codes ?? null, secCode, subCode);
|
|
1982
2076
|
}
|
|
1983
2077
|
getFieldsValues(inputCodes, secCode, subCode) {
|
|
1984
2078
|
const codes = this.getFieldSet(null, inputCodes ?? null, secCode, subCode);
|
|
@@ -2090,14 +2184,14 @@ class FormStructureAndData {
|
|
|
2090
2184
|
fields: [],
|
|
2091
2185
|
tables: [],
|
|
2092
2186
|
};
|
|
2093
|
-
formData.fields = this.getFields().filter(fld => !fld
|
|
2187
|
+
formData.fields = this.getFields().filter(fld => !fld?.outputOnly)
|
|
2094
2188
|
.map(fld => {
|
|
2095
2189
|
const fieldPayload = {
|
|
2096
|
-
fieldCode: fld
|
|
2097
|
-
fieldValue: fld
|
|
2098
|
-
editable: !fld
|
|
2099
|
-
visible: fld
|
|
2100
|
-
required: fld
|
|
2190
|
+
fieldCode: fld?.code,
|
|
2191
|
+
fieldValue: fld?.value,
|
|
2192
|
+
editable: !fld?.disabled,
|
|
2193
|
+
visible: fld?.visible,
|
|
2194
|
+
required: fld?.required,
|
|
2101
2195
|
fieldOptions: '',
|
|
2102
2196
|
};
|
|
2103
2197
|
return fieldPayload;
|
|
@@ -2238,6 +2332,7 @@ class BasicFormComponent {
|
|
|
2238
2332
|
this._formRoute = null;
|
|
2239
2333
|
this._definitionObtained = false;
|
|
2240
2334
|
// Eventos de acciones y campos
|
|
2335
|
+
this._formSectionsCanDeactivate = {};
|
|
2241
2336
|
this._formSectionsActivate = {};
|
|
2242
2337
|
this._formSectionsInactivate = {};
|
|
2243
2338
|
this._formActionsStart = {};
|
|
@@ -2485,6 +2580,7 @@ class BasicFormComponent {
|
|
|
2485
2580
|
// Se limpian los manejadores de eventos
|
|
2486
2581
|
this.visible = false;
|
|
2487
2582
|
this.busy = false;
|
|
2583
|
+
this._formSectionsCanDeactivate = {};
|
|
2488
2584
|
this._formSectionsActivate = {};
|
|
2489
2585
|
this._formSectionsInactivate = {};
|
|
2490
2586
|
this._formActionsStart = {};
|
|
@@ -2527,7 +2623,7 @@ class BasicFormComponent {
|
|
|
2527
2623
|
displayActionServerError() { }
|
|
2528
2624
|
displayValidationServerError() { }
|
|
2529
2625
|
displayTableServerError() { }
|
|
2530
|
-
showFieldInfo(
|
|
2626
|
+
showFieldInfo(code, detail) { }
|
|
2531
2627
|
showModalDialog(title, body, options, callback, params) { }
|
|
2532
2628
|
openUploadDialog(title, body, options, callback, params) { }
|
|
2533
2629
|
/**
|
|
@@ -2695,9 +2791,9 @@ class BasicFormComponent {
|
|
|
2695
2791
|
this._formStructure?.changeState(initialState || this._formStructure?.defaultState);
|
|
2696
2792
|
const inputFieldNames = Object.keys(this.inputDataFields);
|
|
2697
2793
|
for (let index = 0; index < inputFieldNames.length; index++) {
|
|
2698
|
-
const
|
|
2699
|
-
const fieldValue = this.inputDataFields[
|
|
2700
|
-
this.setFieldValue(
|
|
2794
|
+
const code = inputFieldNames[index];
|
|
2795
|
+
const fieldValue = this.inputDataFields[code];
|
|
2796
|
+
this.setFieldValue(code, fieldValue);
|
|
2701
2797
|
}
|
|
2702
2798
|
const recordResponse = await this.requestFormAction(formActions.getData);
|
|
2703
2799
|
this.checkErrorRecordReceived(recordResponse);
|
|
@@ -2821,6 +2917,15 @@ class BasicFormComponent {
|
|
|
2821
2917
|
/**
|
|
2822
2918
|
* Manejo de event handlers para acciones sobre el formulario
|
|
2823
2919
|
*/
|
|
2920
|
+
onSectionCanDeactivate(codes, callback, properties = null) {
|
|
2921
|
+
const sectionSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
|
|
2922
|
+
sectionSet.forEach((sectionName) => {
|
|
2923
|
+
if (!this._formSectionsCanDeactivate[sectionName]) {
|
|
2924
|
+
this._formSectionsCanDeactivate[sectionName] = [];
|
|
2925
|
+
}
|
|
2926
|
+
this._formSectionsCanDeactivate[sectionName].push({ callback, properties });
|
|
2927
|
+
});
|
|
2928
|
+
}
|
|
2824
2929
|
onSectionActivation(codes, callback, properties = null) {
|
|
2825
2930
|
const sectionSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
|
|
2826
2931
|
sectionSet.forEach((sectionName) => {
|
|
@@ -2857,6 +2962,23 @@ class BasicFormComponent {
|
|
|
2857
2962
|
this._formActionsFinish[actionName].push({ callback, properties });
|
|
2858
2963
|
});
|
|
2859
2964
|
}
|
|
2965
|
+
async verifySectionActivation(code) {
|
|
2966
|
+
const sectionObject = this._formStructure?.getSection(code);
|
|
2967
|
+
if (!sectionObject) {
|
|
2968
|
+
return false;
|
|
2969
|
+
}
|
|
2970
|
+
const clientSectionMethods = this._formSectionsCanDeactivate[code];
|
|
2971
|
+
if (clientSectionMethods) {
|
|
2972
|
+
for (const clientSectionMethod of clientSectionMethods) {
|
|
2973
|
+
const { callback, properties } = clientSectionMethod;
|
|
2974
|
+
const canActivate = callback(sectionObject);
|
|
2975
|
+
if (canActivate === false) {
|
|
2976
|
+
return false;
|
|
2977
|
+
}
|
|
2978
|
+
}
|
|
2979
|
+
}
|
|
2980
|
+
return true;
|
|
2981
|
+
}
|
|
2860
2982
|
async launchSectionActivation(code) {
|
|
2861
2983
|
const sectionObject = this._formStructure?.getSection(code);
|
|
2862
2984
|
if (!sectionObject) {
|
|
@@ -2950,37 +3072,37 @@ class BasicFormComponent {
|
|
|
2950
3072
|
*/
|
|
2951
3073
|
onFieldInput(codes, callback, properties = null) {
|
|
2952
3074
|
const fieldSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
|
|
2953
|
-
fieldSet.forEach((
|
|
2954
|
-
if (!this._fieldInputValidation[
|
|
2955
|
-
this._fieldInputValidation[
|
|
3075
|
+
fieldSet.forEach((code) => {
|
|
3076
|
+
if (!this._fieldInputValidation[code]) {
|
|
3077
|
+
this._fieldInputValidation[code] = [];
|
|
2956
3078
|
}
|
|
2957
|
-
this._fieldInputValidation[
|
|
3079
|
+
this._fieldInputValidation[code].push({ callback, properties });
|
|
2958
3080
|
});
|
|
2959
3081
|
}
|
|
2960
3082
|
onFieldValidationStart(codes, callback, properties = null) {
|
|
2961
3083
|
const fieldSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
|
|
2962
|
-
fieldSet.forEach((
|
|
2963
|
-
if (!this._fieldValidationsStart[
|
|
2964
|
-
this._fieldValidationsStart[
|
|
3084
|
+
fieldSet.forEach((code) => {
|
|
3085
|
+
if (!this._fieldValidationsStart[code]) {
|
|
3086
|
+
this._fieldValidationsStart[code] = [];
|
|
2965
3087
|
}
|
|
2966
|
-
this._fieldValidationsStart[
|
|
3088
|
+
this._fieldValidationsStart[code].push({ callback, properties });
|
|
2967
3089
|
});
|
|
2968
3090
|
}
|
|
2969
3091
|
onFieldValidationFinish(codes, callback, properties = null) {
|
|
2970
3092
|
const fieldSet = (Array.isArray(codes)) ? codes : (codes ? [codes] : []);
|
|
2971
|
-
fieldSet.forEach((
|
|
2972
|
-
if (!this._fieldValidationsFinish[
|
|
2973
|
-
this._fieldValidationsFinish[
|
|
3093
|
+
fieldSet.forEach((code) => {
|
|
3094
|
+
if (!this._fieldValidationsFinish[code]) {
|
|
3095
|
+
this._fieldValidationsFinish[code] = [];
|
|
2974
3096
|
}
|
|
2975
|
-
this._fieldValidationsFinish[
|
|
3097
|
+
this._fieldValidationsFinish[code].push({ callback, properties });
|
|
2976
3098
|
});
|
|
2977
3099
|
}
|
|
2978
|
-
async startFieldInputValidation(
|
|
2979
|
-
const fieldToValidate = this.getField(
|
|
3100
|
+
async startFieldInputValidation(code, intrinsicValidation = true) {
|
|
3101
|
+
const fieldToValidate = this.getField(code);
|
|
2980
3102
|
if (!fieldToValidate) {
|
|
2981
3103
|
return false;
|
|
2982
3104
|
}
|
|
2983
|
-
const validationCallbacks = this._fieldInputValidation[
|
|
3105
|
+
const validationCallbacks = this._fieldInputValidation[code];
|
|
2984
3106
|
if (validationCallbacks) {
|
|
2985
3107
|
const clientValidationPromises = [];
|
|
2986
3108
|
for (const validationMethod of validationCallbacks) {
|
|
@@ -2992,12 +3114,12 @@ class BasicFormComponent {
|
|
|
2992
3114
|
}
|
|
2993
3115
|
return true;
|
|
2994
3116
|
}
|
|
2995
|
-
async startFieldValidation(
|
|
2996
|
-
const fieldToValidate = this.getField(
|
|
3117
|
+
async startFieldValidation(code, intrinsicValidation = true) {
|
|
3118
|
+
const fieldToValidate = this.getField(code);
|
|
2997
3119
|
if (!fieldToValidate) {
|
|
2998
3120
|
return;
|
|
2999
3121
|
}
|
|
3000
|
-
const validationCallbacks = this._fieldValidationsStart[
|
|
3122
|
+
const validationCallbacks = this._fieldValidationsStart[code];
|
|
3001
3123
|
if (validationCallbacks) {
|
|
3002
3124
|
const clientValidationPromises = [];
|
|
3003
3125
|
for (const validationMethod of validationCallbacks) {
|
|
@@ -3026,10 +3148,9 @@ class BasicFormComponent {
|
|
|
3026
3148
|
if (fieldObj.backend) {
|
|
3027
3149
|
fieldObj.validating = true;
|
|
3028
3150
|
validationResult = await this
|
|
3029
|
-
.requestFormAction(formActions.validate, fieldObj.
|
|
3151
|
+
.requestFormAction(formActions.validate, fieldObj.code);
|
|
3030
3152
|
serverError = !!this.errorOccured();
|
|
3031
3153
|
}
|
|
3032
|
-
await this.finishFieldValidation(fieldObj, validationResult, serverError);
|
|
3033
3154
|
if (serverError) {
|
|
3034
3155
|
fieldObj?.setErrorCode(this.errorCode);
|
|
3035
3156
|
fieldObj?.setErrorMessage(this.errorMessage);
|
|
@@ -3038,10 +3159,11 @@ class BasicFormComponent {
|
|
|
3038
3159
|
callback(fieldObj);
|
|
3039
3160
|
}
|
|
3040
3161
|
}
|
|
3162
|
+
await this.finishFieldValidation(fieldObj, validationResult, serverError);
|
|
3041
3163
|
fieldObj.validating = false;
|
|
3042
3164
|
}
|
|
3043
3165
|
async finishFieldValidation(fieldObject, validationResult, serverError = false) {
|
|
3044
|
-
const validationCallbacks = this._fieldValidationsFinish[fieldObject.
|
|
3166
|
+
const validationCallbacks = this._fieldValidationsFinish[fieldObject.code];
|
|
3045
3167
|
if (validationCallbacks) {
|
|
3046
3168
|
const clientActionPromises = [];
|
|
3047
3169
|
for (const validationMethod of validationCallbacks) {
|
|
@@ -3054,8 +3176,8 @@ class BasicFormComponent {
|
|
|
3054
3176
|
await Promise.all(clientActionPromises);
|
|
3055
3177
|
}
|
|
3056
3178
|
}
|
|
3057
|
-
async continueFieldValidation(
|
|
3058
|
-
return this.startServerFieldValidation(
|
|
3179
|
+
async continueFieldValidation(code) {
|
|
3180
|
+
return this.startServerFieldValidation(code);
|
|
3059
3181
|
}
|
|
3060
3182
|
/**
|
|
3061
3183
|
* Manejadores de eventos para acciones sobre Tablas
|
|
@@ -3553,8 +3675,8 @@ class BasicFormComponent {
|
|
|
3553
3675
|
validationError = true;
|
|
3554
3676
|
this.setError(this.formConfig.formStandardErrors.typeWarning, this.formConfig.formStandardErrors.validationTitle, this.formConfig.formStandardErrors.requiredFields);
|
|
3555
3677
|
this.tagFieldsWithError(this.formConfig.formStandardErrors.requiredField, requiredEmptyFields);
|
|
3556
|
-
for (const
|
|
3557
|
-
const requiredEmptyField = this.getField(
|
|
3678
|
+
for (const code of requiredEmptyFields) {
|
|
3679
|
+
const requiredEmptyField = this.getField(code);
|
|
3558
3680
|
requiredEmptyField?.focus();
|
|
3559
3681
|
break;
|
|
3560
3682
|
}
|
|
@@ -3563,8 +3685,8 @@ class BasicFormComponent {
|
|
|
3563
3685
|
if (!validationError && validationIssueFields.length > 0) {
|
|
3564
3686
|
validationError = true;
|
|
3565
3687
|
this.setError(this.formConfig.formStandardErrors.typeWarning, this.formConfig.formStandardErrors.validationTitle, this.formConfig.formStandardErrors.validationFields);
|
|
3566
|
-
for (const
|
|
3567
|
-
const validationIssueField = this.getField(
|
|
3688
|
+
for (const code of validationIssueFields) {
|
|
3689
|
+
const validationIssueField = this.getField(code);
|
|
3568
3690
|
if (validationIssueField) {
|
|
3569
3691
|
validationIssueField.focus();
|
|
3570
3692
|
}
|
|
@@ -3580,8 +3702,8 @@ class BasicFormComponent {
|
|
|
3580
3702
|
if (tableRecord && columnNames) {
|
|
3581
3703
|
for (const columnName of columnNames) {
|
|
3582
3704
|
const columnValue = tableRecord.getFieldValue(columnName) ?? '';
|
|
3583
|
-
const
|
|
3584
|
-
this.setFieldValue(
|
|
3705
|
+
const code = mappingTable?.[columnName] ?? columnName;
|
|
3706
|
+
this.setFieldValue(code, columnValue);
|
|
3585
3707
|
}
|
|
3586
3708
|
return true;
|
|
3587
3709
|
}
|
|
@@ -3669,9 +3791,9 @@ class BasicFormComponent {
|
|
|
3669
3791
|
return this.onTableGetDataFinish(code, callback, properties);
|
|
3670
3792
|
}
|
|
3671
3793
|
}
|
|
3672
|
-
BasicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3673
|
-
BasicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3674
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3794
|
+
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 });
|
|
3795
|
+
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 });
|
|
3796
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: BasicFormComponent, decorators: [{
|
|
3675
3797
|
type: Component,
|
|
3676
3798
|
args: [{
|
|
3677
3799
|
template: `<ng-content></ng-content>`
|
|
@@ -3693,8 +3815,8 @@ const COMPONENTS = [
|
|
|
3693
3815
|
];
|
|
3694
3816
|
class TuainNgFormsLibModule {
|
|
3695
3817
|
}
|
|
3696
|
-
TuainNgFormsLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3697
|
-
TuainNgFormsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
3818
|
+
TuainNgFormsLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: TuainNgFormsLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3819
|
+
TuainNgFormsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.6", ngImport: i0, type: TuainNgFormsLibModule, declarations: [BasicFormComponent,
|
|
3698
3820
|
ActionComponent,
|
|
3699
3821
|
FieldComponent,
|
|
3700
3822
|
ElementComponent,
|
|
@@ -3717,12 +3839,10 @@ TuainNgFormsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
|
|
|
3717
3839
|
LibTableRecordActionComponent,
|
|
3718
3840
|
LibTableRecordFieldComponent,
|
|
3719
3841
|
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: [{
|
|
3842
|
+
TuainNgFormsLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: TuainNgFormsLibModule, imports: [CommonModule,
|
|
3843
|
+
RouterModule,
|
|
3844
|
+
FormsModule] });
|
|
3845
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: TuainNgFormsLibModule, decorators: [{
|
|
3726
3846
|
type: NgModule,
|
|
3727
3847
|
args: [{
|
|
3728
3848
|
declarations: COMPONENTS,
|