datasync-dynamic-form 1.1.5 → 1.1.8

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