datasync-dynamic-form 1.0.29 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DsDynamicForm.js +147 -181
- package/package.json +1 -1
|
@@ -338,22 +338,20 @@ class DsDynamicForm extends _react.Component {
|
|
|
338
338
|
options: ["07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22"],
|
|
339
339
|
isObject: false,
|
|
340
340
|
displayValue: "key",
|
|
341
|
-
selectedValues: this.getFieldData(field.
|
|
341
|
+
selectedValues: this.getFieldData(field.name_hour) ? this.getFieldData(field.name_hour).split(";") : [],
|
|
342
342
|
placeholder: field.placeholder,
|
|
343
343
|
emptyRecordMsg: "",
|
|
344
344
|
onSelect: (selectedList, selectedItem) => {
|
|
345
345
|
this.handle_time_picker({
|
|
346
346
|
fieldObject: field,
|
|
347
|
-
|
|
348
|
-
sub_name: "__hour",
|
|
347
|
+
sub_field_name: field.name_hour,
|
|
349
348
|
value: selectedList.join(";")
|
|
350
349
|
});
|
|
351
350
|
},
|
|
352
351
|
onRemove: (selectedList, selectedItem) => {
|
|
353
352
|
this.handle_time_picker({
|
|
354
353
|
fieldObject: field,
|
|
355
|
-
|
|
356
|
-
sub_name: "__hour",
|
|
354
|
+
sub_field_name: field.name_hour,
|
|
357
355
|
value: selectedList.join(";")
|
|
358
356
|
});
|
|
359
357
|
},
|
|
@@ -366,22 +364,20 @@ class DsDynamicForm extends _react.Component {
|
|
|
366
364
|
options: ["00", "15", "20", "25", "30", "35", "40", "45", "50", "55"],
|
|
367
365
|
isObject: false,
|
|
368
366
|
displayValue: "key",
|
|
369
|
-
selectedValues: this.getFieldData(field.
|
|
367
|
+
selectedValues: this.getFieldData(field.name_min) ? this.getFieldData(field.name_min).split(";") : [],
|
|
370
368
|
placeholder: field.placeholder,
|
|
371
369
|
emptyRecordMsg: "",
|
|
372
370
|
onSelect: (selectedList, selectedItem) => {
|
|
373
371
|
this.handle_time_picker({
|
|
374
372
|
fieldObject: field,
|
|
375
|
-
|
|
376
|
-
sub_name: "__min",
|
|
373
|
+
sub_field_name: field.name_min,
|
|
377
374
|
value: selectedList.join(";")
|
|
378
375
|
});
|
|
379
376
|
},
|
|
380
377
|
onRemove: (selectedList, selectedItem) => {
|
|
381
378
|
this.handle_time_picker({
|
|
382
379
|
fieldObject: field,
|
|
383
|
-
|
|
384
|
-
sub_name: "__min",
|
|
380
|
+
sub_field_name: field.name_min,
|
|
385
381
|
value: selectedList.join(";")
|
|
386
382
|
});
|
|
387
383
|
},
|
|
@@ -427,39 +423,43 @@ class DsDynamicForm extends _react.Component {
|
|
|
427
423
|
|
|
428
424
|
/** Form Handlers */
|
|
429
425
|
onClickSubmitFormHandler = async event => {
|
|
430
|
-
|
|
426
|
+
try {
|
|
427
|
+
if (event) event.preventDefault();
|
|
431
428
|
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
429
|
+
//Force all fields check
|
|
430
|
+
let canSubmit = true;
|
|
431
|
+
let iRow = 0;
|
|
432
|
+
while (iRow < this.state.form.Rows.length && canSubmit) {
|
|
433
|
+
let iCol = 0;
|
|
434
|
+
while (iCol < this.state.form.Rows[iRow].Cols.length && canSubmit) {
|
|
435
|
+
let ii = 0;
|
|
436
|
+
while (ii < this.state.form.Rows[iRow].Cols[iCol].Fields.length && (canSubmit &= this.checkValidation(this.state.form.Rows[iRow].Cols[iCol].Fields[ii]))) {
|
|
437
|
+
if (globals.parameters.debugging) console.log(`Fields[${ii}]|${this.state.form.Rows[iRow].Cols[iCol].Fields[ii].name}| canSubmit=${canSubmit}`);
|
|
438
|
+
ii++;
|
|
439
|
+
}
|
|
440
|
+
iCol++;
|
|
442
441
|
}
|
|
443
|
-
|
|
442
|
+
iRow++;
|
|
443
|
+
}
|
|
444
|
+
if (globals.parameters.debugging) console.log("canSubmit:", canSubmit);
|
|
445
|
+
if (!canSubmit) {
|
|
446
|
+
let err_message = "Le formulaire comporte des erreurs !";
|
|
447
|
+
if (this.props.onFormFailed) this.props.onFormFailed(err_message);else alert(`${err_message}`);
|
|
448
|
+
return false;
|
|
444
449
|
}
|
|
445
|
-
iRow++;
|
|
446
|
-
}
|
|
447
|
-
if (globals.parameters.debugging) console.log("canSubmit:", canSubmit);
|
|
448
|
-
if (!canSubmit) {
|
|
449
|
-
let err_message = "Le formulaire comporte des erreurs !";
|
|
450
|
-
if (this.props.onFormFailed) this.props.onFormFailed(err_message);else alert(`${err_message}`);
|
|
451
|
-
return false;
|
|
452
|
-
}
|
|
453
450
|
|
|
454
|
-
|
|
451
|
+
//Invoke onFormSubmit props
|
|
455
452
|
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
453
|
+
if (this.props.onFormSubmit) {
|
|
454
|
+
if (globals.parameters.debugging) alert("onFormSubmit => filter log with AsyncDebug:: prefixe");
|
|
455
|
+
//If props function return false then cancel form submit and do not save !
|
|
456
|
+
this.props.onFormSubmit(this.local_data_blob);
|
|
457
|
+
} else {
|
|
458
|
+
//Call save anyway
|
|
459
|
+
this.saveFormToDatasyncProcess();
|
|
460
|
+
}
|
|
461
|
+
} catch (error) {
|
|
462
|
+
console.error(`onClickSubmitFormHandler raises "${error}"`);
|
|
463
463
|
}
|
|
464
464
|
};
|
|
465
465
|
onFormSavedLocalHandler = blob => {
|
|
@@ -470,11 +470,15 @@ class DsDynamicForm extends _react.Component {
|
|
|
470
470
|
if (this.props.onTerminated) this.props.onTerminated();
|
|
471
471
|
};
|
|
472
472
|
onFormUpdatedLocalHandler = blob => {
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
473
|
+
try {
|
|
474
|
+
if (this.props.onFormUpdated) this.props.onFormUpdated(blob);else console.error("DynamicForm3Tiers2.onFormUpdated props is not defined !");
|
|
475
|
+
//clear form
|
|
476
|
+
if (this.props.clearOnUpdate) this.clearForm();
|
|
477
|
+
//Call onTerminated if set by user
|
|
478
|
+
if (this.props.onTerminated) this.props.onTerminated();
|
|
479
|
+
} catch (error) {
|
|
480
|
+
console.error(`onFormUpdatedLocalHandler raises "${error}"`);
|
|
481
|
+
}
|
|
478
482
|
};
|
|
479
483
|
onFormFailedLocalHandler = err => {
|
|
480
484
|
if (this.props.onFormFailed) this.props.onFormFailed(err);else {
|
|
@@ -587,23 +591,23 @@ class DsDynamicForm extends _react.Component {
|
|
|
587
591
|
console.log("dateConvertedObject.asString =>", dateConvertedObject.asString);
|
|
588
592
|
}
|
|
589
593
|
this.setFieldData(eventObject.fieldObject.name, dateConvertedObject.asString);
|
|
590
|
-
this.setFieldData(eventObject.fieldObject.
|
|
591
|
-
this.setFieldData(eventObject.fieldObject.
|
|
592
|
-
this.setFieldData(eventObject.fieldObject.
|
|
594
|
+
this.setFieldData(eventObject.fieldObject.name_day, dateConvertedObject.asDate.day);
|
|
595
|
+
this.setFieldData(eventObject.fieldObject.name_month, dateConvertedObject.asDate.month);
|
|
596
|
+
this.setFieldData(eventObject.fieldObject.name_year, dateConvertedObject.asDate.year);
|
|
593
597
|
|
|
594
598
|
//Validate field
|
|
595
599
|
this.checkValidation(eventObject.fieldObject);
|
|
596
600
|
};
|
|
597
601
|
handle_time_picker = eventObject => {
|
|
598
602
|
//Set hour or min
|
|
599
|
-
this.setFieldData(eventObject.
|
|
603
|
+
this.setFieldData(eventObject.sub_field_name, eventObject.value);
|
|
600
604
|
//update fulll time field
|
|
601
|
-
this.setFieldData(eventObject.name, this.getFieldData(eventObject.
|
|
605
|
+
this.setFieldData(eventObject.fieldObject.name, this.getFieldData(eventObject.fieldObject.name_hour) + ":" + this.getFieldData(eventObject.fieldObject.name_min));
|
|
602
606
|
if (true) {
|
|
603
607
|
console.clear();
|
|
604
|
-
console.log("
|
|
605
|
-
console.log("
|
|
606
|
-
console.log(eventObject.name, " ->", this.getFieldData(eventObject.name));
|
|
608
|
+
console.log(eventObject.fieldObject.name_hour, " ->", this.getFieldData(eventObject.fieldObject.name_hour));
|
|
609
|
+
console.log(eventObject.fieldObject.name_min, "->", this.getFieldData(eventObject.fieldObject.name_min));
|
|
610
|
+
console.log(eventObject.fieldObject.name, " ->", this.getFieldData(eventObject.fieldObject.name));
|
|
607
611
|
}
|
|
608
612
|
|
|
609
613
|
//Validate field
|
|
@@ -632,138 +636,100 @@ class DsDynamicForm extends _react.Component {
|
|
|
632
636
|
this.local_data_blob.data_tier[pFieldObject.name] = migrated_value;
|
|
633
637
|
if (globals.parameters.debugging) console.log("09/07:migrate_field -> pFieldObject.name=", pFieldObject.name);
|
|
634
638
|
};
|
|
635
|
-
data_tier_migration = (field, ii) => {
|
|
636
|
-
if (!this.props.data_blob) return; //Discard migration
|
|
637
|
-
return;
|
|
638
|
-
//data_tier_migration disabled
|
|
639
|
-
console.log("09/07:data_tier_migration ### Migration check !!!");
|
|
640
|
-
console.log("09/07:this.data_blob.modified ->", this.local_data_blob && this.local_data_blob.modified ? this.local_data_blob.modified : "null");
|
|
641
|
-
//Check if migration required
|
|
642
|
-
if (this.local_data_blob && this.local_data_blob.modified && this.local_data_blob.modified < globals.parameters.form_modified_version) if (globals.parameters.debugging) console.log("09/07:field needs migration from version 1 to version 2");else {
|
|
643
|
-
if (globals.parameters.debugging) console.log("09/07:Field is up to date");
|
|
644
|
-
//Don't care migration process
|
|
645
|
-
return;
|
|
646
|
-
}
|
|
647
|
-
if (globals.parameters.debugging) {
|
|
648
|
-
console.log("09/07:data_tier_migration ->", field.input_type);
|
|
649
|
-
}
|
|
650
|
-
switch (field.input_type.toLowerCase()) {
|
|
651
|
-
/** Dynamic fields */
|
|
652
|
-
case "checkbox-DISABLED":
|
|
653
|
-
case "checkbox":
|
|
654
|
-
case "blob":
|
|
655
|
-
case "email":
|
|
656
|
-
case "text":
|
|
657
|
-
case "memo":
|
|
658
|
-
case "multi":
|
|
659
|
-
case "numeric":
|
|
660
|
-
case "amount":
|
|
661
|
-
case "percent":
|
|
662
|
-
case "captcha":
|
|
663
|
-
case "textarea":
|
|
664
|
-
//Migrate single field
|
|
665
|
-
if (globals.parameters.debugging) {
|
|
666
|
-
console.log("09/07:data_tier_migration single field ->", field.name);
|
|
667
|
-
}
|
|
668
|
-
this.migrate_field(field, this.getFieldData_V1(field));
|
|
669
|
-
break;
|
|
670
|
-
case "combo":
|
|
671
|
-
case "radio":
|
|
672
|
-
//Migrate selected field
|
|
673
|
-
if (globals.parameters.debugging) {
|
|
674
|
-
console.log("09/07:data_tier_migration selected field ->", field.name);
|
|
675
|
-
}
|
|
676
|
-
this.migrate_field(field, this.getSelectedFieldValues_V1(field));
|
|
677
|
-
break;
|
|
678
|
-
default:
|
|
679
|
-
alert("data_tier_migration --> Field type not supported ->" + field.input_type);
|
|
680
|
-
}
|
|
681
|
-
};
|
|
682
639
|
_fieldRendering = (field, ii) => {
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
if (this.props.read_only && (this.getFieldData(field.name) == null || !this.getFieldData(field.name) || this.getFieldData(field.name).trim().length == 0)) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
640
|
+
try {
|
|
641
|
+
//Do not display field if empty in read only mode
|
|
642
|
+
if (this.props.read_only && (this.getFieldData(field.name) == null || !this.getFieldData(field.name) || this.getFieldData(field.name).trim().length == 0)) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
687
643
|
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
644
|
+
//Do not display hidden field
|
|
645
|
+
if (field.hidden && !this.props.show_hidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
646
|
+
switch (field.input_type.toLowerCase()) {
|
|
647
|
+
/** Dynamic fields */
|
|
648
|
+
case "checkbox-DISABLED":
|
|
649
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
|
|
650
|
+
check: true
|
|
651
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
|
|
652
|
+
check: true
|
|
653
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
654
|
+
defaultValue: "",
|
|
655
|
+
type: "checkbox",
|
|
656
|
+
readOnly: this.props.read_only ? this.props.read_only : false
|
|
657
|
+
}), field.placeholder, /*#__PURE__*/_react.default.createElement("span", {
|
|
658
|
+
className: "form-check-sign"
|
|
659
|
+
})));
|
|
660
|
+
case "checkbox":
|
|
661
|
+
/* Checkbox is override with combobox */
|
|
662
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
|
|
663
|
+
showArrow: true,
|
|
664
|
+
options: ["Oui", "Non"],
|
|
665
|
+
isObject: false,
|
|
666
|
+
displayValue: "key",
|
|
667
|
+
selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [],
|
|
668
|
+
placeholder: field.placeholder,
|
|
669
|
+
emptyRecordMsg: "",
|
|
670
|
+
onSelect: (selectedList, selectedItem) => {
|
|
671
|
+
this.setFieldData(field.name, selectedList.join(";"));
|
|
672
|
+
},
|
|
673
|
+
onRemove: (selectedList, selectedItem) => {
|
|
674
|
+
this.setFieldData(field.name, selectedList.join(";"));
|
|
675
|
+
},
|
|
676
|
+
disable: this.props.read_only,
|
|
677
|
+
singleSelect: true
|
|
678
|
+
}), this._error_label(field));
|
|
679
|
+
case "blob":
|
|
680
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("div", {
|
|
681
|
+
className: "col-md-10"
|
|
682
|
+
}, /*#__PURE__*/_react.default.createElement(_datasyncBlob.DsBlob, {
|
|
683
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
684
|
+
Caption: `${this.getFieldPrompt(field)} ...`,
|
|
685
|
+
data: this.getFieldData(field.name),
|
|
686
|
+
uploadPicture: UploadFile => {
|
|
687
|
+
this.setFieldData(field.name, UploadFile.data);
|
|
688
|
+
this.checkValidation(field);
|
|
689
|
+
},
|
|
690
|
+
pictureStyle: "pic",
|
|
691
|
+
buttonStyle: "btn btn-secondary",
|
|
692
|
+
width: field.width ? field.width : null,
|
|
693
|
+
height: field.height ? field.height : null,
|
|
694
|
+
maxWidth: field.maxWidth ? field.maxWidth : null,
|
|
695
|
+
maxHeight: field.maxHeight ? field.maxHeight : null,
|
|
696
|
+
reduceImage: field.reduceImage ? field.reduceImage : null
|
|
697
|
+
}), this._error_label(field)));
|
|
698
|
+
case "email":
|
|
699
|
+
return this._email_field(field);
|
|
700
|
+
case "text":
|
|
701
|
+
return this._text_field(field);
|
|
702
|
+
case "memo":
|
|
703
|
+
return this._memo_field(field);
|
|
704
|
+
case "combo":
|
|
705
|
+
case "radio":
|
|
706
|
+
return this._combo_field(field);
|
|
707
|
+
case "multi":
|
|
708
|
+
return this._multi_field(field);
|
|
709
|
+
case "date":
|
|
710
|
+
//set day month and year fields
|
|
711
|
+
if (!field.name_day) field.name_day = "__day";
|
|
712
|
+
if (!field.name_month) field.name_month = "__month";
|
|
713
|
+
if (!field.name_year) field.name_year = "__year";
|
|
714
|
+
return this._date_field(field);
|
|
715
|
+
case "time":
|
|
716
|
+
//set day month and year fields
|
|
717
|
+
if (!field.name_hour) field.name_hour = "__hour";
|
|
718
|
+
if (!field.name_min) field.name_min = "__min";
|
|
719
|
+
return this._time_field(field);
|
|
720
|
+
case "numeric":
|
|
721
|
+
return this._numeric_field_with_add_on(field, "*");
|
|
722
|
+
case "amount":
|
|
723
|
+
return this._numeric_field_with_add_on(field, "fa-euro");
|
|
724
|
+
case "percent":
|
|
725
|
+
return this._numeric_field_with_add_on(field, "%");
|
|
726
|
+
case "captcha":
|
|
727
|
+
return this._captcha_field(field);
|
|
728
|
+
default:
|
|
729
|
+
console.log("alert incorrect field type");
|
|
730
|
+
}
|
|
731
|
+
} catch (error) {
|
|
732
|
+
console.error(`_fieldRendering raises "${error}"`);
|
|
767
733
|
}
|
|
768
734
|
};
|
|
769
735
|
_cancelButton = () => {
|