datasync-dynamic-form 1.1.8 → 1.1.10

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.
@@ -0,0 +1,809 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "CGUID", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _datasyncCommonLibrary.CGUID;
10
+ }
11
+ });
12
+ exports.DsDynamicForm = void 0;
13
+ var _react = _interopRequireWildcard(require("react"));
14
+ var _multiselectReactDropdown = _interopRequireDefault(require("multiselect-react-dropdown"));
15
+ var _datasyncCore = require("datasync-core");
16
+ var _datasyncCommonLibrary = require("datasync-common-library");
17
+ var _datasyncBlob = require("datasync-blob");
18
+ var _reactstrap = require("reactstrap");
19
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
20
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
21
+ // react plugin that creates an input with badges
22
+ {/** Blob must be defined as npm component
23
+ <Blob
24
+ import Blob from "components/Blob/Blob";*/}
25
+
26
+ // reactstrap components
27
+
28
+ const debugging = true;
29
+ const local = true;
30
+ const production = !local;
31
+ const globals = {
32
+ parameters: {
33
+ debugging: debugging,
34
+ local: true,
35
+ production: false,
36
+ use_navigate: false,
37
+ save_failed_alert: false,
38
+ form_version: "1.0",
39
+ form_modified_version: 2
40
+ }
41
+ };
42
+ class DsDynamicForm extends _react.Component {
43
+ constructor(props) {
44
+ super(props);
45
+ if (globals.parameters.debugging) {
46
+ console.log("30:DynamicForm3Tiers2::this.props.data_blob", this.props.data_blob);
47
+ console.log("30DynamicForm3Tiers::this.props.form", this.props.form);
48
+ }
49
+ this.state = {
50
+ form: {}
51
+ };
52
+ }
53
+ componentDidMount = () => {
54
+ //Component initialization in edit mode
55
+ if (this.props.form) {
56
+ this.clearForm();
57
+ }
58
+ };
59
+ componentDidUpdate(prevProps) {
60
+ // Typical usage (don't forget to compare props):
61
+ if (this.props.form !== prevProps.form) {
62
+ //Lookup field props has changed
63
+ this.clearForm();
64
+ }
65
+ if (this.props.data_blob !== prevProps.data_blob) {
66
+ //Lookup field props has changed
67
+ this.clearForm();
68
+ }
69
+ }
70
+
71
+ /**
72
+ * Prototype : clearForm
73
+ */
74
+ clearForm = () => {
75
+ this.setState({
76
+ fieldError: [],
77
+ form: {},
78
+ captcha1: (0, _datasyncCommonLibrary.Randomize)(0, 5),
79
+ captcha2: (0, _datasyncCommonLibrary.Randomize)(0, 5)
80
+ },
81
+ //Clear forced
82
+ () => {
83
+ this.setState({
84
+ form: this.props.form,
85
+ fieldError: []
86
+ }); //No need to override form property with clearObject2 anymore because data are written outside form.
87
+ });
88
+
89
+ //Real efficient fix
90
+ let duplicate_data_tier = this.props.data_blob && this.props.data_blob.data_tier ? JSON.parse(JSON.stringify(this.props.data_blob.data_tier)) : {};
91
+
92
+ //duplicate_data_tier = Object.assign(duplicate_data_tier, (this.props.data_blob && this.props.data_blob.data_tier)?this.props.data_blob.data_tier:{})
93
+ this.local_data_blob = {
94
+ data_tier: {}
95
+ };
96
+ //this.local_data_blob.data_tier = Object.assign({}, duplicate_data_tier);
97
+
98
+ //Ensure props.foreign_keys is a json object - PMAB on 2025-04-10
99
+ if (this.props.foreign_keys && typeof this.props.foreign_keys !== "object") throw new Error("foreign_keys must be a json object !");
100
+ this.local_data_blob.data_tier = Object.assign(this.props.foreign_keys ? this.props.foreign_keys : {}, duplicate_data_tier);
101
+ };
102
+ getFieldData = fieldName => {
103
+ /** Return data value form field object */
104
+ let nextFieldData = this.local_data_blob.data_tier[fieldName] ? this.local_data_blob.data_tier[fieldName] : "";
105
+ return nextFieldData;
106
+ };
107
+ setFieldData = (fieldName, value) => {
108
+ this.local_data_blob.data_tier[fieldName] = value;
109
+
110
+ //onFormChange handler return current form value to caller - PMAB on 2025-02-03
111
+ if (this.props.onFormChange) this.props.onFormChange(this.local_data_blob.data_tier);
112
+ };
113
+ getSelectedFieldValues_V1 = pFieldObject => {
114
+ return pFieldObject.selected_values ? pFieldObject.selected_values : "";
115
+ };
116
+ setFieldError = (pFieldObject, value) => {
117
+ try {
118
+ pFieldObject.err = value;
119
+ let nextFieldError = this.state.fieldError;
120
+ nextFieldError[pFieldObject.name] = value;
121
+ this.setState({
122
+ fieldError: nextFieldError
123
+ });
124
+ //Scroll form to first erroneous field
125
+ (0, _datasyncCommonLibrary.WScrollTo)(pFieldObject.name);
126
+ } catch (e) {
127
+ console.error(`Error caught on ${e}`);
128
+ }
129
+ };
130
+ getFieldError = pFieldObject => {
131
+ /** Return data value form field object */
132
+ try {
133
+ return pFieldObject.err ? pFieldObject.err : "";
134
+ } catch (e) {
135
+ return "";
136
+ }
137
+ };
138
+ _error_label = field => {
139
+ return /*#__PURE__*/_react.default.createElement("label", {
140
+ className: "dynamic-form-error"
141
+ }, this.getfieldErrorLabel(field));
142
+ };
143
+ getfieldErrorLabel = pFieldObject => {
144
+ return this.getFieldError(pFieldObject);
145
+ };
146
+ getFieldLabelTitle = pFieldObject => {
147
+ return /*#__PURE__*/_react.default.createElement("h6", {
148
+ id: pFieldObject.name
149
+ }, pFieldObject.title ? pFieldObject.title : pFieldObject.placeholder, pFieldObject.required && !this.props.read_only && /*#__PURE__*/_react.default.createElement("span", {
150
+ className: "icon-danger"
151
+ }, "*"));
152
+ };
153
+ getCaptchaFieldLabelTitle = pFieldObject => {
154
+ return /*#__PURE__*/_react.default.createElement("h6", {
155
+ id: pFieldObject.name
156
+ }, `${this.state.captcha1} + ${this.state.captcha2}`, pFieldObject.required && /*#__PURE__*/_react.default.createElement("span", {
157
+ className: "icon-danger"
158
+ }, "*"));
159
+ };
160
+ getFieldData_V1 = pFieldObject => {
161
+ return pFieldObject.value ? pFieldObject.value : pFieldObject.default_value ? pFieldObject.default_value : "";
162
+ };
163
+ getFieldPrompt = pFieldObject => {
164
+ return pFieldObject.placeholder ? pFieldObject.placeholder : pFieldObject.title;
165
+ };
166
+ _numeric_field_with_add_on = (field, fa_symbol) => {
167
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroup, {
168
+ className: "border-input"
169
+ }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
170
+ readOnly: this.props.read_only ? this.props.read_only : false,
171
+ type: field.input_type,
172
+ value: this.getFieldData(field.name),
173
+ placeholder: field.placeholder,
174
+ autocomplete: "on",
175
+ id: field.name,
176
+ name: field.name,
177
+ err: "",
178
+ onChange: e => {
179
+ e.preventDefault();
180
+ this.dynamicInputNumericChangeHandler({
181
+ event: e,
182
+ fieldObject: field
183
+ });
184
+ }
185
+ }), fa_symbol && /*#__PURE__*/_react.default.createElement("div", {
186
+ className: "input-group-append"
187
+ }, /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroupText, null, /*#__PURE__*/_react.default.createElement("i", {
188
+ className: `fa ${fa_symbol}`
189
+ })))), this._error_label(field));
190
+ };
191
+ _captcha_field = (field, fa_symbol) => {
192
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getCaptchaFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroup, {
193
+ className: "border-input"
194
+ }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
195
+ readOnly: this.props.read_only ? this.props.read_only : false,
196
+ type: field.input_type,
197
+ value: this.getFieldData(field.name),
198
+ placeholder: field.placeholder,
199
+ autocomplete: "on",
200
+ id: field.name,
201
+ name: field.name,
202
+ onChange: e => {
203
+ e.preventDefault();
204
+ this.dynamicInputNumericChangeHandler({
205
+ event: e,
206
+ fieldObject: field
207
+ });
208
+ }
209
+ })), this._error_label(field));
210
+ };
211
+ _text_field = field => {
212
+ return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
213
+ readOnly: this.props.read_only ? this.props.read_only : false,
214
+ type: field.input_type,
215
+ value: this.getFieldData(field.name),
216
+ placeholder: field.placeholder,
217
+ autocomplete: "off",
218
+ onChange: e => {
219
+ e.preventDefault();
220
+ this.dynamicInputTextChangeHandler({
221
+ event: e,
222
+ fieldObject: field
223
+ });
224
+ }
225
+ }), this._error_label(field));
226
+ };
227
+ _email_field = field => {
228
+ return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
229
+ readOnly: this.props.read_only ? this.props.read_only : false,
230
+ type: field.input_type,
231
+ value: this.getFieldData(field.name),
232
+ placeholder: field.placeholder,
233
+ pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$",
234
+ autocomplete: "on",
235
+ id: field.name,
236
+ name: field.name,
237
+ onChange: e => {
238
+ e.preventDefault();
239
+ this.dynamicInputTextChangeHandler({
240
+ event: e,
241
+ fieldObject: field
242
+ });
243
+ }
244
+ }), this._error_label(field));
245
+ };
246
+ _memo_field = field => {
247
+ return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("textarea", {
248
+ className: "form-control",
249
+ readOnly: this.props.read_only ? this.props.read_only : false,
250
+ type: field.input_type,
251
+ value: this.getFieldData(field.name),
252
+ placeholder: field.placeholder,
253
+ rows: field.rows,
254
+ onChange: e => {
255
+ e.preventDefault();
256
+ this.dynamicInputTextChangeHandler({
257
+ event: e,
258
+ fieldObject: field
259
+ });
260
+ }
261
+ }), this._error_label(field));
262
+ };
263
+ _combo_field = field => {
264
+ return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
265
+ showArrow: true,
266
+ options: field.combo_list,
267
+ isObject: false,
268
+ displayValue: "key",
269
+ selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name.name).split(";") : [],
270
+ placeholder: field.placeholder,
271
+ emptyRecordMsg: "",
272
+ onSelect: (selectedList, selectedItem) => {
273
+ this.setFieldData(field.name, selectedList.join(";"));
274
+ },
275
+ onRemove: (selectedList, selectedItem) => {
276
+ this.setFieldData(field.name, selectedList.join(";"));
277
+ },
278
+ disable: this.props.read_only,
279
+ singleSelect: true
280
+ }), this._error_label(field));
281
+ };
282
+ _multi_field = field => {
283
+ return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
284
+ showArrow: true,
285
+ options: field.combo_list,
286
+ isObject: false,
287
+ displayValue: "key",
288
+ selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [],
289
+ placeholder: field.placeholder,
290
+ emptyRecordMsg: "",
291
+ onSelect: (selectedList, selectedItem) => {
292
+ this.setFieldData(field.name, selectedList.join(";"));
293
+ },
294
+ onRemove: (selectedList, selectedItem) => {
295
+ this.setFieldData(field.name, selectedList.join(";"));
296
+ },
297
+ disable: this.props.read_only,
298
+ singleSelect: false
299
+ }), this._error_label(field));
300
+ };
301
+ _date_field = field => {
302
+ return /*#__PURE__*/_react.default.createElement("div", {
303
+ className: "date-div"
304
+ }, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("div", {
305
+ className: "date-day-month-year-container-div"
306
+ }, /*#__PURE__*/_react.default.createElement("div", {
307
+ className: "date-day-div"
308
+ }, /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
309
+ showArrow: true,
310
+ options: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
311
+ isObject: false,
312
+ displayValue: "key",
313
+ selectedValues: this.getFieldData(field.name_hour) ? this.getFieldData(field.name_hour).split(";") : [],
314
+ placeholder: field.placeholder,
315
+ emptyRecordMsg: "",
316
+ onSelect: (selectedList, selectedItem) => {
317
+ this.handle_date_picker({
318
+ fieldObject: field,
319
+ sub_field_name: field.name_day,
320
+ value: selectedList.join(";")
321
+ });
322
+ },
323
+ onRemove: (selectedList, selectedItem) => {
324
+ this.handle_date_picker({
325
+ fieldObject: field,
326
+ sub_field_name: field.name_day,
327
+ value: selectedList.join(";")
328
+ });
329
+ },
330
+ disable: this.props.read_only,
331
+ singleSelect: true
332
+ })), /*#__PURE__*/_react.default.createElement("div", {
333
+ className: "date-month-div"
334
+ }, /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
335
+ showArrow: false,
336
+ options: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
337
+ isObject: false,
338
+ displayValue: "key",
339
+ selectedValues: this.getFieldData(field.name_min) ? this.getFieldData(field.name_min).split(";") : [],
340
+ placeholder: field.placeholder,
341
+ emptyRecordMsg: "",
342
+ onSelect: (selectedList, selectedItem) => {
343
+ this.handle_date_picker({
344
+ fieldObject: field,
345
+ sub_field_name: field.name_month,
346
+ value: selectedList.join(";")
347
+ });
348
+ },
349
+ onRemove: (selectedList, selectedItem) => {
350
+ this.handle_date_picker({
351
+ fieldObject: field,
352
+ sub_field_name: field.name_month,
353
+ value: selectedList.join(";")
354
+ });
355
+ },
356
+ disable: this.props.read_only,
357
+ singleSelect: true
358
+ })), /*#__PURE__*/_react.default.createElement("div", {
359
+ className: "date-year-div"
360
+ }, /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
361
+ showArrow: false,
362
+ options: ["2025", "2026", "2027", "2028", "2030"],
363
+ isObject: false,
364
+ displayValue: "key",
365
+ selectedValues: this.getFieldData(field.name_min) ? this.getFieldData(field.name_min).split(";") : [],
366
+ placeholder: field.placeholder,
367
+ emptyRecordMsg: "",
368
+ onSelect: (selectedList, selectedItem) => {
369
+ this.handle_date_picker({
370
+ fieldObject: field,
371
+ sub_field_name: field.name_year,
372
+ value: selectedList.join(";")
373
+ });
374
+ },
375
+ onRemove: (selectedList, selectedItem) => {
376
+ this.handle_date_picker({
377
+ fieldObject: field,
378
+ sub_field_name: field.name_year,
379
+ value: selectedList.join(";")
380
+ });
381
+ },
382
+ disable: this.props.read_only,
383
+ singleSelect: true
384
+ }))), this._error_label(field));
385
+ };
386
+ _time_field = field => {
387
+ return /*#__PURE__*/_react.default.createElement("div", {
388
+ className: "time-div"
389
+ }, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("div", {
390
+ className: "time-hour-and-min-container-div"
391
+ }, /*#__PURE__*/_react.default.createElement("div", {
392
+ className: "time-hour-div"
393
+ }, /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
394
+ showArrow: true,
395
+ options: ["07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22"],
396
+ isObject: false,
397
+ displayValue: "key",
398
+ selectedValues: this.getFieldData(field.name_hour) ? this.getFieldData(field.name_hour).split(";") : [],
399
+ placeholder: field.placeholder,
400
+ emptyRecordMsg: "",
401
+ onSelect: (selectedList, selectedItem) => {
402
+ this.handle_time_picker({
403
+ fieldObject: field,
404
+ sub_field_name: field.name_hour,
405
+ value: selectedList.join(";")
406
+ });
407
+ },
408
+ onRemove: (selectedList, selectedItem) => {
409
+ this.handle_time_picker({
410
+ fieldObject: field,
411
+ sub_field_name: field.name_hour,
412
+ value: selectedList.join(";")
413
+ });
414
+ },
415
+ disable: this.props.read_only,
416
+ singleSelect: true
417
+ })), /*#__PURE__*/_react.default.createElement("div", {
418
+ className: "time-min-div"
419
+ }, /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
420
+ showArrow: false,
421
+ options: ["00", "15", "20", "25", "30", "35", "40", "45", "50", "55"],
422
+ isObject: false,
423
+ displayValue: "key",
424
+ selectedValues: this.getFieldData(field.name_min) ? this.getFieldData(field.name_min).split(";") : [],
425
+ placeholder: field.placeholder,
426
+ emptyRecordMsg: "",
427
+ onSelect: (selectedList, selectedItem) => {
428
+ this.handle_time_picker({
429
+ fieldObject: field,
430
+ sub_field_name: field.name_min,
431
+ value: selectedList.join(";")
432
+ });
433
+ },
434
+ onRemove: (selectedList, selectedItem) => {
435
+ this.handle_time_picker({
436
+ fieldObject: field,
437
+ sub_field_name: field.name_min,
438
+ value: selectedList.join(";")
439
+ });
440
+ },
441
+ disable: this.props.read_only,
442
+ singleSelect: true
443
+ }))), this._error_label(field));
444
+ };
445
+ saveFormToDatasyncProcess = () => {
446
+ //Everything sounds ok in Form, Go ahead
447
+ let hasDataGuid = this.props.datasync_object && this.props.datasync_object.data_guid;
448
+ (0, _datasyncCore.SaveDataTierToDatasync)(this.props.datasync_url, hasDataGuid ? this.props.datasync_object.data_guid : null,
449
+ //data_guid
450
+ this.local_data_blob,
451
+ //p_o_data_blob,
452
+ this.props.company_guid,
453
+ //p_s_company_guid,
454
+ this.props.table_guid,
455
+ //p_s_table_guid,
456
+ hasDataGuid ? this.props.datasync_object.createstamp : (0, _datasyncCommonLibrary.CTimeStamp)(),
457
+ //p_dt_createstamp,
458
+ hasDataGuid ? (0, _datasyncCommonLibrary.CTimeStamp)() : null,
459
+ //p_dt_updatestamp,
460
+ null,
461
+ //p_dt_deletestamp,
462
+ this.onFormSavedLocalHandler, this.onFormUpdatedLocalHandler, this.onFormFailedLocalHandler, null);
463
+ };
464
+
465
+ /** Form Handlers */
466
+ onClickSubmitFormHandler = async event => {
467
+ try {
468
+ if (event) event.preventDefault();
469
+
470
+ //Force all fields check
471
+ let canSubmit = true;
472
+ let iRow = 0;
473
+ while (iRow < this.state.form.Rows.length && canSubmit) {
474
+ let iCol = 0;
475
+ while (iCol < this.state.form.Rows[iRow].Cols.length && canSubmit) {
476
+ let ii = 0;
477
+ while (ii < this.state.form.Rows[iRow].Cols[iCol].Fields.length && (canSubmit &= this.checkValidation(this.state.form.Rows[iRow].Cols[iCol].Fields[ii]))) {
478
+ ii++;
479
+ }
480
+ iCol++;
481
+ }
482
+ iRow++;
483
+ }
484
+ if (!canSubmit) {
485
+ let err_message = "Le formulaire comporte des erreurs !";
486
+ if (this.props.onFormFailed) this.props.onFormFailed(err_message);else alert(`${err_message}`);
487
+ return false;
488
+ }
489
+
490
+ //Invoke onFormSubmit props
491
+
492
+ if (this.props.onFormSubmit) {
493
+ if (globals.parameters.debugging) alert("onFormSubmit => filter log with AsyncDebug:: prefixe");
494
+ //If props function return false then cancel form submit and do not save !
495
+ this.props.onFormSubmit(this.local_data_blob);
496
+ } else {
497
+ //Call save anyway
498
+ this.saveFormToDatasyncProcess();
499
+ }
500
+ } catch (error) {
501
+ console.error(`onClickSubmitFormHandler raises "${error}"`);
502
+ }
503
+ };
504
+ onFormSavedLocalHandler = blob => {
505
+ if (this.props.onFormSaved) this.props.onFormSaved(blob);else console.error("DynamicForm3Tiers2.onFormSaved props is not defined !");
506
+ //clear form
507
+ if (this.props.clearOnSave) this.clearForm();
508
+ //Call onTerminated if set by user
509
+ if (this.props.onTerminated) this.props.onTerminated();
510
+ };
511
+ onFormUpdatedLocalHandler = blob => {
512
+ try {
513
+ if (this.props.onFormUpdated) this.props.onFormUpdated(blob);else console.error("DynamicForm3Tiers2.onFormUpdated props is not defined !");
514
+ //clear form
515
+ if (this.props.clearOnUpdate) this.clearForm();
516
+ //Call onTerminated if set by user
517
+ if (this.props.onTerminated) this.props.onTerminated();
518
+ } catch (error) {
519
+ console.error(`onFormUpdatedLocalHandler raises "${error}"`);
520
+ }
521
+ };
522
+ onFormFailedLocalHandler = err => {
523
+ if (this.props.onFormFailed) this.props.onFormFailed(err);else {
524
+ console.error("DynamicForm3Tiers2.onFormFailed props is not defined !");
525
+ alert("Erreur de sauvegarde !!!");
526
+ }
527
+ };
528
+ checkValidation = pFieldObject => {
529
+ let fieldName = pFieldObject.name;
530
+
531
+ /** Get field properties */
532
+ let min = pFieldObject.min_length;
533
+ let max = pFieldObject.max_length;
534
+ let fieldValue = this.getFieldData(pFieldObject.name);
535
+ let errorsFieldName = `err_${fieldName}`; /** Error data displayed in dedicated error label, beside input field in Form */
536
+ let nextErrors = [];
537
+
538
+ /** Check basic field validity except combo and radio */
539
+ if (pFieldObject.required && fieldValue.trim().length <= 0) nextErrors.push(`obligatoire`);
540
+ if (min > 0 && pFieldObject.required && fieldValue.trim().length < min) nextErrors.push(`trop court.`);
541
+
542
+ //Captcha check
543
+ if (pFieldObject.input_type.toLowerCase() == "captcha") {
544
+ if (parseInt(fieldValue) !== this.state.captcha1 + this.state.captcha2) nextErrors.push(`calcul faux !`);
545
+ }
546
+
547
+ //Email check
548
+ if (pFieldObject.input_type.toLowerCase() == "email") {
549
+ if (!fieldValue.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) nextErrors.push(`Format de mail incorrect !`);
550
+ }
551
+
552
+ //Date check
553
+ if (pFieldObject.input_type.toLowerCase() == "date") {
554
+ if (!fieldValue.match(/^(\d{2}\/\d{2}\/\d{4})$/i)) nextErrors.push(`Format de date incorrect !`);
555
+ }
556
+ if (max > 0 && fieldValue.trim().length > max) nextErrors.push(`trop long, ${fieldValue.trim().length - max} caractères en trop.`);
557
+
558
+ //update error field
559
+ this.setFieldError(pFieldObject, nextErrors.join("/"));
560
+
561
+ //Return validation predicate
562
+ return nextErrors.length === 0; //returns true if no error occurs
563
+ };
564
+ dynamicInputTextChangeHandler = eventObject => {
565
+ if (eventObject && eventObject.event) eventObject.event.preventDefault();
566
+ this.setFieldData(eventObject.fieldObject.name, eventObject.event.target.value);
567
+
568
+ //Validate field
569
+ this.checkValidation(eventObject.fieldObject);
570
+ };
571
+ dynamicInputNumericChangeHandler = eventObject => {
572
+ if (eventObject && eventObject.event) eventObject.event.preventDefault();
573
+ if (eventObject.event.target.value.length == 0 || !isNaN(eventObject.event.target.value) && !isNaN(parseFloat(eventObject.event.target.value))) this.setFieldData(eventObject.fieldObject.name, eventObject.event.target.value);else {
574
+ if (globals.parameters.debugging) console.error(`Value rejected -> ${eventObject.event.target.value}`);
575
+ }
576
+ this.checkValidation(eventObject.fieldObject);
577
+ };
578
+ convertDate = p_o_day_month_year => {
579
+ function pad(s) {
580
+ return s < 10 ? '0' + s : s;
581
+ }
582
+ return {
583
+ asString: [pad(p_o_day_month_year.day), pad(p_o_day_month_year.month), p_o_day_month_year.year].join('/'),
584
+ asDate: {
585
+ day: p_o_day_month_year.day,
586
+ month: p_o_day_month_year.month,
587
+ year: p_o_day_month_year.year
588
+ }
589
+ };
590
+ };
591
+ OLD_handle_date_picker = eventObject => {
592
+ let p_oDate = eventObject.selection;
593
+ //Convert date picker string as day month year object
594
+ let dateConvertedObject = this.convertDate({
595
+ day: p_oDate.getDate(),
596
+ month: 1 + p_oDate.getMonth(),
597
+ year: p_oDate.getFullYear()
598
+ });
599
+ this.setFieldData(eventObject.fieldObject.name, dateConvertedObject.asString);
600
+ this.setFieldData(eventObject.fieldObject.name_day, dateConvertedObject.asDate.day);
601
+ this.setFieldData(eventObject.fieldObject.name_month, dateConvertedObject.asDate.month);
602
+ this.setFieldData(eventObject.fieldObject.name_year, dateConvertedObject.asDate.year);
603
+
604
+ //Validate field
605
+ this.checkValidation(eventObject.fieldObject);
606
+ };
607
+ handle_date_picker = eventObject => {
608
+ //Set date
609
+ this.setFieldData(eventObject.sub_field_name, eventObject.value);
610
+ //update full date field
611
+ this.setFieldData(eventObject.fieldObject.name, this.getFieldData(eventObject.fieldObject.name_day) + "/" + this.getFieldData(eventObject.fieldObject.name_month) + "/" + this.getFieldData(eventObject.fieldObject.name_year));
612
+
613
+ //Validate field
614
+ this.checkValidation(eventObject.fieldObject);
615
+ };
616
+ handle_time_picker = eventObject => {
617
+ //Set hour or min
618
+ this.setFieldData(eventObject.sub_field_name, eventObject.value);
619
+ //update fulll time field
620
+ this.setFieldData(eventObject.fieldObject.name, this.getFieldData(eventObject.fieldObject.name_hour) + ":" + this.getFieldData(eventObject.fieldObject.name_min));
621
+
622
+ //Validate field
623
+ this.checkValidation(eventObject.fieldObject);
624
+ };
625
+ _colRendering = col => {
626
+ try {
627
+ return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, col.Fields.map((field, ii) => {
628
+ field.err = "*";
629
+ return this._fieldRendering(field, ii);
630
+ }));
631
+ } catch (err) {
632
+ return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, "Error ", err.message);
633
+ }
634
+ };
635
+ _rowRendering = row => {
636
+ try {
637
+ return /*#__PURE__*/_react.default.createElement(_reactstrap.Row, null, row.Cols.map((col, ii) => {
638
+ return this._colRendering(col);
639
+ }));
640
+ } catch (err) {
641
+ return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, "Error ", err.message);
642
+ }
643
+ };
644
+ _fieldRendering = (field, ii) => {
645
+ try {
646
+ //Do not display field if empty in read only mode
647
+ 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);
648
+
649
+ //Do not display hidden field
650
+ if (field.hidden && !this.props.show_hidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
651
+ switch (field.input_type.toLowerCase()) {
652
+ /** Dynamic fields */
653
+ case "checkbox-DISABLED":
654
+ return /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
655
+ check: true
656
+ }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
657
+ check: true
658
+ }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
659
+ defaultValue: "",
660
+ type: "checkbox",
661
+ readOnly: this.props.read_only ? this.props.read_only : false
662
+ }), field.placeholder, /*#__PURE__*/_react.default.createElement("span", {
663
+ className: "form-check-sign"
664
+ })));
665
+ case "checkbox":
666
+ /* Checkbox is override with combobox */
667
+ return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
668
+ showArrow: true,
669
+ options: ["Oui", "Non"],
670
+ isObject: false,
671
+ displayValue: "key",
672
+ selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [],
673
+ placeholder: field.placeholder,
674
+ emptyRecordMsg: "",
675
+ onSelect: (selectedList, selectedItem) => {
676
+ this.setFieldData(field.name, selectedList.join(";"));
677
+ },
678
+ onRemove: (selectedList, selectedItem) => {
679
+ this.setFieldData(field.name, selectedList.join(";"));
680
+ },
681
+ disable: this.props.read_only,
682
+ singleSelect: true
683
+ }), this._error_label(field));
684
+ case "blob":
685
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("div", {
686
+ className: "col-md-10"
687
+ }, /*#__PURE__*/_react.default.createElement(_datasyncBlob.DsBlob, {
688
+ readOnly: this.props.read_only ? this.props.read_only : false,
689
+ Caption: `${this.getFieldPrompt(field)} ...`,
690
+ data: this.getFieldData(field.name),
691
+ uploadPicture: UploadFile => {
692
+ this.setFieldData(field.name, UploadFile.data);
693
+ this.checkValidation(field);
694
+ },
695
+ pictureStyle: "pic",
696
+ buttonStyle: "btn btn-secondary",
697
+ width: field.width ? field.width : null,
698
+ height: field.height ? field.height : null,
699
+ maxWidth: field.maxWidth ? field.maxWidth : null,
700
+ maxHeight: field.maxHeight ? field.maxHeight : null,
701
+ reduceImage: field.reduceImage ? field.reduceImage : null
702
+ }), this._error_label(field)));
703
+ case "email":
704
+ return this._email_field(field);
705
+ case "text":
706
+ return this._text_field(field);
707
+ case "memo":
708
+ return this._memo_field(field);
709
+ case "combo":
710
+ case "radio":
711
+ return this._combo_field(field);
712
+ case "multi":
713
+ return this._multi_field(field);
714
+ case "date":
715
+ //set day month and year fields
716
+ if (!field.name_day) field.name_day = "__day";
717
+ if (!field.name_month) field.name_month = "__month";
718
+ if (!field.name_year) field.name_year = "__year";
719
+ return this._date_field(field);
720
+ case "time":
721
+ //set day month and year fields
722
+ if (!field.name_hour) field.name_hour = "__hour";
723
+ if (!field.name_min) field.name_min = "__min";
724
+ return this._time_field(field);
725
+ case "numeric":
726
+ return this._numeric_field_with_add_on(field, "*");
727
+ case "amount":
728
+ return this._numeric_field_with_add_on(field, "fa-euro");
729
+ case "percent":
730
+ return this._numeric_field_with_add_on(field, "%");
731
+ case "captcha":
732
+ return this._captcha_field(field);
733
+ default:
734
+ console.error("alert incorrect field type");
735
+ }
736
+ } catch (error) {
737
+ console.error(`_fieldRendering raises "${error}"`);
738
+ }
739
+ };
740
+ _cancelButton = () => {
741
+ let buttonIsHidden = this.props.read_only || this.props.buttons_options && this.props.buttons_options.cancel_button_hidden;
742
+ let buttonCaption = this.props.buttons_options && this.props.buttons_options.cancel_button_caption ? this.props.buttons_options.cancel_button_caption : "Annuler";
743
+ if (buttonIsHidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);else {
744
+ return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
745
+ md: "4",
746
+ sm: "4"
747
+ }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
748
+ block: true,
749
+ className: "btn-round",
750
+ color: "danger",
751
+ outline: true,
752
+ type: "reset",
753
+ onClick: () => {
754
+ this.clearForm();
755
+ }
756
+ }, buttonCaption));
757
+ }
758
+ };
759
+ _submitButton = () => {
760
+ let buttonIsHidden = this.props.read_only || this.props.buttons_options && this.props.buttons_options.submit_button_hidden;
761
+ let buttonCaption = this.props.buttons_options && this.props.buttons_options.submit_button_caption ? this.props.buttons_options.submit_button_caption : "Soumettre";
762
+ if (buttonIsHidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);else {
763
+ return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
764
+ md: "4",
765
+ sm: "4"
766
+ }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
767
+ block: true,
768
+ className: "btn-round",
769
+ color: "danger",
770
+ outline: true,
771
+ type: "submit",
772
+ onClick: () => {
773
+ this.onClickSubmitFormHandler();
774
+ }
775
+ }, buttonCaption));
776
+ }
777
+ };
778
+ render = () => {
779
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !this.state.form && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Form loading...")), /*#__PURE__*/_react.default.createElement("form", null, this.state.form && this.state.form.Rows && this.state.form.Rows.map(row => {
780
+ return this._rowRendering(row);
781
+ })), /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
782
+ className: "buttons-row"
783
+ }, this._cancelButton(), this._submitButton(), this.props.custom_button_caption && /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
784
+ md: "4",
785
+ sm: "4"
786
+ }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
787
+ block: true,
788
+ className: "btn-round",
789
+ color: "primary",
790
+ type: "submit",
791
+ onClick: e => {
792
+ if (this.props.custom_button_handler) this.props.custom_button_handler(this.state.form);else console.error("custom_button_handler unset !");
793
+ }
794
+ }, this.props.custom_button_caption)), this.props.custom_button_caption2 && /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
795
+ md: "4",
796
+ sm: "4"
797
+ }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
798
+ block: true,
799
+ className: "btn-round",
800
+ color: "primary",
801
+ type: "submit",
802
+ onClick: e => {
803
+ if (this.props.custom_button_handler2) this.props.custom_button_handler2(this.state.form);else console.error("custom_button_handler2 unset !");
804
+ }
805
+ }, this.props.custom_button_caption2))));
806
+ };
807
+ }
808
+ exports.DsDynamicForm = DsDynamicForm;
809
+ ;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "datasync-dynamic-form",
3
- "version": "1.1.8",
3
+ "version": "1.1.10",
4
4
  "description": "Datasync Dynamic Form component",
5
5
  "main": "./dist/components/DsDynamicForm",
6
6
  "types": "./dist/components/DsDynamicForm",