datasync-dynamic-form 1.0.11 → 1.0.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.
|
@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
26
26
|
|
|
27
27
|
// reactstrap components
|
|
28
28
|
|
|
29
|
-
const debugging =
|
|
29
|
+
const debugging = false;
|
|
30
30
|
const local = true;
|
|
31
31
|
const production = !local;
|
|
32
32
|
const globals = {
|
|
@@ -75,7 +75,8 @@ class DsDynamicForm extends _react.Component {
|
|
|
75
75
|
this.clearForm();
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
|
-
|
|
78
|
+
clearForm_OBSOLETE = () => {
|
|
79
|
+
console.log("27:ClearForm");
|
|
79
80
|
/** Duplicate props.form */
|
|
80
81
|
let clearObject2 = JSON.parse(JSON.stringify(this.props.form));
|
|
81
82
|
|
|
@@ -115,6 +116,36 @@ class DsDynamicForm extends _react.Component {
|
|
|
115
116
|
form: clearObject2
|
|
116
117
|
});
|
|
117
118
|
});
|
|
119
|
+
|
|
120
|
+
//Real clear fix
|
|
121
|
+
//this.data_blob.data_tier = Object.assign(clearObject2);
|
|
122
|
+
this.data_blob.data_tier = {};
|
|
123
|
+
console.log("27:this.data_blob.data_tier ->", this.data_blob.data_tier);
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Prototype : clearForm
|
|
128
|
+
*/
|
|
129
|
+
clearForm = () => {
|
|
130
|
+
console.log("27:ClearForm");
|
|
131
|
+
this.setState({
|
|
132
|
+
fieldError: [],
|
|
133
|
+
form: {},
|
|
134
|
+
captcha1: (0, _datasyncCommonLibrary.Randomize)(0, 5),
|
|
135
|
+
captcha2: (0, _datasyncCommonLibrary.Randomize)(0, 5)
|
|
136
|
+
},
|
|
137
|
+
//Clear forced
|
|
138
|
+
() => {
|
|
139
|
+
if (globals.parameters.debugging) console.log("27:DynamicForm3Tiers2 state cleansed 2:", this.state);
|
|
140
|
+
this.setState({
|
|
141
|
+
form: this.props.form,
|
|
142
|
+
fieldError: []
|
|
143
|
+
}); //No need to override form property with clearObject2 anymore because data are written outside form.
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
//Real clear fix
|
|
147
|
+
this.data_blob.data_tier = {};
|
|
148
|
+
console.log("27:this.data_blob.data_tier ->", this.data_blob.data_tier);
|
|
118
149
|
};
|
|
119
150
|
getFieldData = pFieldObject => {
|
|
120
151
|
/** Return data value form field object */
|
|
@@ -366,7 +397,7 @@ class DsDynamicForm extends _react.Component {
|
|
|
366
397
|
if (this.props.onFormSubmit) {
|
|
367
398
|
if (globals.parameters.debugging) alert("onFormSubmit => filter log with AsyncDebug:: prefixe");
|
|
368
399
|
//If props function return false then cancel form submit and do not save !
|
|
369
|
-
this.props.onFormSubmit(this.data_blob
|
|
400
|
+
this.props.onFormSubmit(this.data_blob);
|
|
370
401
|
} else {
|
|
371
402
|
//Call save anyway
|
|
372
403
|
this.saveFormToDatasyncProcess();
|
|
@@ -0,0 +1,665 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _Globals = require("../../components/Globals/Globals");
|
|
9
|
+
var _Blob = _interopRequireDefault(require("components/Blob/Blob"));
|
|
10
|
+
var _multiselectReactDropdown = _interopRequireDefault(require("multiselect-react-dropdown"));
|
|
11
|
+
var _DataSync = require("../DataSync3/DataSync3.jsx");
|
|
12
|
+
require("./DynamicForm3Tiers2.css");
|
|
13
|
+
var _reactstrap = require("reactstrap");
|
|
14
|
+
var _reactRouterDom = require("react-router-dom");
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
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); }
|
|
17
|
+
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; }
|
|
18
|
+
// react plugin that creates an input with badges
|
|
19
|
+
|
|
20
|
+
// reactstrap components
|
|
21
|
+
|
|
22
|
+
class DynamicForm3Tiers2 extends _react.Component {
|
|
23
|
+
constructor(props) {
|
|
24
|
+
super(props);
|
|
25
|
+
if (_Globals.globals.parameters.debugging) {
|
|
26
|
+
console.log("30:DynamicForm3Tiers2::this.props.data_blob", this.props.data_blob);
|
|
27
|
+
console.log("30DynamicForm3Tiers::this.props.form", this.props.form);
|
|
28
|
+
}
|
|
29
|
+
this.state = {
|
|
30
|
+
form: {}
|
|
31
|
+
};
|
|
32
|
+
//this.data_blob = {data_tier:{}}
|
|
33
|
+
//2DO debug this.data_tier = (this.props.data_blob && this.props.data_blob.data_tier)?this.props.data_blob.data_tier:{}
|
|
34
|
+
this.data_blob = this.props.data_blob && this.props.data_blob.data_tier ? this.props.data_blob : {
|
|
35
|
+
data_tier: {}
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
componentDidMount = () => {
|
|
39
|
+
//Component initialization in edit mode
|
|
40
|
+
if (this.props.form) {
|
|
41
|
+
this.clearForm();
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
componentDidUpdate(prevProps) {
|
|
45
|
+
// Typical usage (don't forget to compare props):
|
|
46
|
+
if (this.props.form !== prevProps.form) {
|
|
47
|
+
//Lookup field props has changed
|
|
48
|
+
if (_Globals.globals.parameters.debugging) console.log("09/07:componentDidUpdate -> props.form:has changed", this.props.form);
|
|
49
|
+
this.clearForm();
|
|
50
|
+
}
|
|
51
|
+
if (this.props.data_blob !== prevProps.data_blob) {
|
|
52
|
+
//Lookup field props has changed
|
|
53
|
+
if (_Globals.globals.parameters.debugging) console.log("09/07:componentDidUpdate -> props.data_blob.data_tier:has changed", this.props.data_blob.data_tier);
|
|
54
|
+
this.clearForm();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
clearForm = () => {
|
|
58
|
+
/** Duplicate props.form */
|
|
59
|
+
let clearObject2 = JSON.parse(JSON.stringify(this.props.form));
|
|
60
|
+
|
|
61
|
+
/** set data_tier with (props.foreign_keys + props.data_tier) */
|
|
62
|
+
if (this.props.data_blob) {
|
|
63
|
+
//Set internal data_tier component property
|
|
64
|
+
//OBSOLETE this.data_tier = this.props.data_blob.data_tier
|
|
65
|
+
if (_Globals.globals.parameters.debugging) console.log("01:this.props.data_blob ->", this.props.data_blob);
|
|
66
|
+
clearObject2.data_tier = this.props.data_blob.data_tier;
|
|
67
|
+
} else {
|
|
68
|
+
if (_Globals.globals.parameters.debugging) console.log("01:this.props.data_blob.data_tier unDefined");
|
|
69
|
+
clearObject2.data_tier = {}; //Set empty data_tier
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/** Override data with foreign keys wne props.foreign_key is available */
|
|
73
|
+
if (this.props.foreign_keys) {
|
|
74
|
+
clearObject2.data_tier = Object.assign(clearObject2.data_tier, this.props.foreign_keys); //Dead code to be checked !!!
|
|
75
|
+
this.data_blob.data_tier = Object.assign(clearObject2.data_tier, this.props.foreign_keys); //Dead code to be checked !!!
|
|
76
|
+
}
|
|
77
|
+
if (_Globals.globals.parameters.debugging) {
|
|
78
|
+
console.log("01:----- clearForm -----");
|
|
79
|
+
console.log("01:clearForm::this.props.form->", this.props.form);
|
|
80
|
+
console.log("01:clearForm::clearObject2 mixed with data_tier ->", clearObject2);
|
|
81
|
+
console.log("01:clearForm::internal this.data_blob ->", this.data_blob);
|
|
82
|
+
}
|
|
83
|
+
this.setState({
|
|
84
|
+
fieldError: [],
|
|
85
|
+
form: {},
|
|
86
|
+
captcha1: (0, _Globals.randomize)(0, 5),
|
|
87
|
+
captcha2: (0, _Globals.randomize)(0, 5)
|
|
88
|
+
},
|
|
89
|
+
//Clear forced
|
|
90
|
+
() => {
|
|
91
|
+
if (_Globals.globals.parameters.debugging) console.log("09/07:DynamicForm3Tiers2 state cleansed 2:", this.state);
|
|
92
|
+
this.setState({
|
|
93
|
+
fieldError: [],
|
|
94
|
+
form: clearObject2
|
|
95
|
+
});
|
|
96
|
+
});
|
|
97
|
+
};
|
|
98
|
+
getFieldData = pFieldObject => {
|
|
99
|
+
/** Return data value form field object */
|
|
100
|
+
let nextFieldData = this.data_blob.data_tier[pFieldObject.name] ? this.data_blob.data_tier[pFieldObject.name] : "";
|
|
101
|
+
if (_Globals.globals.parameters.debugging) console.log("01:getFieldData[", pFieldObject.name, "] nextFieldData->", nextFieldData);
|
|
102
|
+
return nextFieldData;
|
|
103
|
+
};
|
|
104
|
+
setFieldData = (pFieldObject, value) => {
|
|
105
|
+
this.data_blob.data_tier[pFieldObject.name] = value;
|
|
106
|
+
if (_Globals.globals.parameters.debugging) console.log("01:setFieldData[", pFieldObject.name, "] value->", value);
|
|
107
|
+
console.log("01:setFieldData[", pFieldObject.name, "] this.data_blob.data_tier ->", this.data_blob.data_tier);
|
|
108
|
+
console.log("01:setFieldData[", pFieldObject.name, "] this.data_blob ->", this.data_blob);
|
|
109
|
+
};
|
|
110
|
+
getSelectedFieldValues_V1 = pFieldObject => {
|
|
111
|
+
return pFieldObject.selected_values ? pFieldObject.selected_values : "";
|
|
112
|
+
};
|
|
113
|
+
setFieldError = (pFieldObject, value) => {
|
|
114
|
+
try {
|
|
115
|
+
pFieldObject.err = value;
|
|
116
|
+
let nextFieldError = this.state.fieldError;
|
|
117
|
+
nextFieldError[pFieldObject.name] = value;
|
|
118
|
+
this.setState({
|
|
119
|
+
fieldError: nextFieldError
|
|
120
|
+
});
|
|
121
|
+
//Scroll form to first erroneous field
|
|
122
|
+
(0, _Globals.wScrollTo)(pFieldObject.name);
|
|
123
|
+
} catch (e) {
|
|
124
|
+
console.log(`Error caught on ${e}`);
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
getFieldError = pFieldObject => {
|
|
128
|
+
/** Return data value form field object */
|
|
129
|
+
try {
|
|
130
|
+
return pFieldObject.err ? pFieldObject.err : "";
|
|
131
|
+
} catch (e) {
|
|
132
|
+
return "";
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
_error_label = field => {
|
|
136
|
+
return /*#__PURE__*/_react.default.createElement("label", {
|
|
137
|
+
className: "dynamic-form-error"
|
|
138
|
+
}, this.getfieldErrorLabel(field));
|
|
139
|
+
};
|
|
140
|
+
getfieldErrorLabel = pFieldObject => {
|
|
141
|
+
return this.getFieldError(pFieldObject);
|
|
142
|
+
};
|
|
143
|
+
getFieldLabelTitle = pFieldObject => {
|
|
144
|
+
return /*#__PURE__*/_react.default.createElement("h6", {
|
|
145
|
+
id: pFieldObject.name
|
|
146
|
+
}, pFieldObject.title ? pFieldObject.title : pFieldObject.placeholder, pFieldObject.required && !this.props.read_only && /*#__PURE__*/_react.default.createElement("span", {
|
|
147
|
+
className: "icon-danger"
|
|
148
|
+
}, "*"));
|
|
149
|
+
};
|
|
150
|
+
getCaptchaFieldLabelTitle = pFieldObject => {
|
|
151
|
+
return /*#__PURE__*/_react.default.createElement("h6", {
|
|
152
|
+
id: pFieldObject.name
|
|
153
|
+
}, `${this.state.captcha1} + ${this.state.captcha2}`, pFieldObject.required && /*#__PURE__*/_react.default.createElement("span", {
|
|
154
|
+
className: "icon-danger"
|
|
155
|
+
}, "*"));
|
|
156
|
+
};
|
|
157
|
+
getFieldData_V1 = pFieldObject => {
|
|
158
|
+
return pFieldObject.value ? pFieldObject.value : pFieldObject.default_value ? pFieldObject.default_value : "";
|
|
159
|
+
};
|
|
160
|
+
getFieldPrompt = pFieldObject => {
|
|
161
|
+
return pFieldObject.placeholder ? pFieldObject.placeholder : pFieldObject.title;
|
|
162
|
+
};
|
|
163
|
+
_numeric_field_with_add_on = (field, fa_symbol) => {
|
|
164
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroup, {
|
|
165
|
+
className: "border-input"
|
|
166
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
167
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
168
|
+
type: field.input_type,
|
|
169
|
+
value: this.getFieldData(field),
|
|
170
|
+
placeholder: field.placeholder,
|
|
171
|
+
autocomplete: "on",
|
|
172
|
+
id: field.name,
|
|
173
|
+
name: field.name,
|
|
174
|
+
onChange: e => {
|
|
175
|
+
e.preventDefault();
|
|
176
|
+
this.dynamicInputNumericChangeHandler({
|
|
177
|
+
event: e,
|
|
178
|
+
fieldObject: field
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
}), fa_symbol && /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroupAddon, {
|
|
182
|
+
addonType: "append"
|
|
183
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroupText, null, /*#__PURE__*/_react.default.createElement("i", {
|
|
184
|
+
className: `fa ${fa_symbol}`
|
|
185
|
+
})))), this._error_label(field));
|
|
186
|
+
};
|
|
187
|
+
_captcha_field = (field, fa_symbol) => {
|
|
188
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getCaptchaFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroup, {
|
|
189
|
+
className: "border-input"
|
|
190
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
191
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
192
|
+
type: field.input_type,
|
|
193
|
+
value: this.getFieldData(field),
|
|
194
|
+
placeholder: field.placeholder,
|
|
195
|
+
autocomplete: "on",
|
|
196
|
+
id: field.name,
|
|
197
|
+
name: field.name,
|
|
198
|
+
onChange: e => {
|
|
199
|
+
e.preventDefault();
|
|
200
|
+
this.dynamicInputNumericChangeHandler({
|
|
201
|
+
event: e,
|
|
202
|
+
fieldObject: field
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
})), this._error_label(field));
|
|
206
|
+
};
|
|
207
|
+
_text_field = field => {
|
|
208
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
209
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
210
|
+
type: field.input_type,
|
|
211
|
+
value: this.getFieldData(field),
|
|
212
|
+
placeholder: field.placeholder,
|
|
213
|
+
autocomplete: "off",
|
|
214
|
+
onChange: e => {
|
|
215
|
+
e.preventDefault();
|
|
216
|
+
this.dynamicInputTextChangeHandler({
|
|
217
|
+
event: e,
|
|
218
|
+
fieldObject: field
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
}), this._error_label(field));
|
|
222
|
+
};
|
|
223
|
+
_email_field = field => {
|
|
224
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
225
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
226
|
+
type: field.input_type,
|
|
227
|
+
value: this.getFieldData(field),
|
|
228
|
+
placeholder: field.placeholder,
|
|
229
|
+
pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$",
|
|
230
|
+
autocomplete: "on",
|
|
231
|
+
id: field.name,
|
|
232
|
+
name: field.name,
|
|
233
|
+
onChange: e => {
|
|
234
|
+
e.preventDefault();
|
|
235
|
+
this.dynamicInputTextChangeHandler({
|
|
236
|
+
event: e,
|
|
237
|
+
fieldObject: field
|
|
238
|
+
});
|
|
239
|
+
}
|
|
240
|
+
}), this._error_label(field));
|
|
241
|
+
};
|
|
242
|
+
_memo_field = field => {
|
|
243
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("textarea", {
|
|
244
|
+
className: "form-control",
|
|
245
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
246
|
+
type: field.input_type,
|
|
247
|
+
value: this.getFieldData(field),
|
|
248
|
+
placeholder: field.placeholder,
|
|
249
|
+
rows: field.rows,
|
|
250
|
+
onChange: e => {
|
|
251
|
+
e.preventDefault();
|
|
252
|
+
this.dynamicInputTextChangeHandler({
|
|
253
|
+
event: e,
|
|
254
|
+
fieldObject: field
|
|
255
|
+
});
|
|
256
|
+
}
|
|
257
|
+
}), this._error_label(field));
|
|
258
|
+
};
|
|
259
|
+
_combo_field = field => {
|
|
260
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
|
|
261
|
+
showArrow: true,
|
|
262
|
+
options: field.combo_list,
|
|
263
|
+
isObject: false,
|
|
264
|
+
displayValue: "key",
|
|
265
|
+
selectedValues: this.getFieldData(field) ? this.getFieldData(field).split(";") : [],
|
|
266
|
+
placeholder: field.placeholder,
|
|
267
|
+
emptyRecordMsg: "",
|
|
268
|
+
onSelect: (selectedList, selectedItem) => {
|
|
269
|
+
this.setFieldData(field, selectedList.join(";"));
|
|
270
|
+
},
|
|
271
|
+
onRemove: (selectedList, selectedItem) => {
|
|
272
|
+
this.setFieldData(field, selectedList.join(";"));
|
|
273
|
+
},
|
|
274
|
+
disable: this.props.read_only,
|
|
275
|
+
singleSelect: true
|
|
276
|
+
}), this._error_label(field));
|
|
277
|
+
};
|
|
278
|
+
_multi_field = field => {
|
|
279
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
|
|
280
|
+
showArrow: true,
|
|
281
|
+
options: field.combo_list,
|
|
282
|
+
isObject: false,
|
|
283
|
+
displayValue: "key",
|
|
284
|
+
selectedValues: this.getFieldData(field) ? this.getFieldData(field).split(";") : [],
|
|
285
|
+
placeholder: field.placeholder,
|
|
286
|
+
emptyRecordMsg: "",
|
|
287
|
+
onSelect: (selectedList, selectedItem) => {
|
|
288
|
+
this.setFieldData(field, selectedList.join(";"));
|
|
289
|
+
},
|
|
290
|
+
onRemove: (selectedList, selectedItem) => {
|
|
291
|
+
this.setFieldData(field, selectedList.join(";"));
|
|
292
|
+
},
|
|
293
|
+
disable: this.props.read_only,
|
|
294
|
+
singleSelect: false
|
|
295
|
+
}), this._error_label(field));
|
|
296
|
+
};
|
|
297
|
+
saveFormToDatasyncProcess = () => {
|
|
298
|
+
//Everything sounds ok in Form, Go ahead
|
|
299
|
+
let hasDataGuid = this.props.datasync_object && this.props.datasync_object.data_guid;
|
|
300
|
+
(0, _DataSync.saveDataTierToDatasync)(hasDataGuid ? this.props.datasync_object.data_guid : null,
|
|
301
|
+
//data_guid
|
|
302
|
+
this.data_blob,
|
|
303
|
+
//p_o_data_blob,
|
|
304
|
+
this.props.company_guid,
|
|
305
|
+
//p_s_company_guid,
|
|
306
|
+
this.props.table_guid,
|
|
307
|
+
//p_s_table_guid,
|
|
308
|
+
hasDataGuid ? this.props.datasync_object.createstamp : (0, _Globals.cTimeStamp)(),
|
|
309
|
+
//p_dt_createstamp,
|
|
310
|
+
hasDataGuid ? (0, _Globals.cTimeStamp)() : null,
|
|
311
|
+
//p_dt_updatestamp,
|
|
312
|
+
null,
|
|
313
|
+
//p_dt_deletestamp,
|
|
314
|
+
this.onFormSavedLocalHandler, this.onFormUpdatedLocalHandler, this.onFormFailedLocalHandler, null);
|
|
315
|
+
};
|
|
316
|
+
|
|
317
|
+
/** Form Handlers */
|
|
318
|
+
onClickSubmitFormHandler = async event => {
|
|
319
|
+
if (event) event.preventDefault();
|
|
320
|
+
|
|
321
|
+
//Force all fields check
|
|
322
|
+
let canSubmit = true;
|
|
323
|
+
let iRow = 0;
|
|
324
|
+
while (iRow < this.state.form.Rows.length && canSubmit) {
|
|
325
|
+
let iCol = 0;
|
|
326
|
+
while (iCol < this.state.form.Rows[iRow].Cols.length && canSubmit) {
|
|
327
|
+
let ii = 0;
|
|
328
|
+
while (ii < this.state.form.Rows[iRow].Cols[iCol].Fields.length && (canSubmit &= this.checkValidation(this.state.form.Rows[iRow].Cols[iCol].Fields[ii]))) {
|
|
329
|
+
if (_Globals.globals.parameters.debugging) console.log(`Fields[${ii}]|${this.state.form.Rows[iRow].Cols[iCol].Fields[ii].name}| canSubmit=${canSubmit}`);
|
|
330
|
+
ii++;
|
|
331
|
+
}
|
|
332
|
+
iCol++;
|
|
333
|
+
}
|
|
334
|
+
iRow++;
|
|
335
|
+
}
|
|
336
|
+
if (_Globals.globals.parameters.debugging) console.log("canSubmit:", canSubmit);
|
|
337
|
+
if (!canSubmit) {
|
|
338
|
+
let err_message = "Le formulaire comporte des erreurs !";
|
|
339
|
+
if (this.props.onFormFailed) this.props.onFormFailed(err_message);else alert(`${err_message}`);
|
|
340
|
+
return false;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
//Invoke onFormSubmit props
|
|
344
|
+
|
|
345
|
+
if (this.props.onFormSubmit) {
|
|
346
|
+
if (_Globals.globals.parameters.debugging) alert("onFormSubmit => filter log with AsyncDebug:: prefixe");
|
|
347
|
+
//If props function return false then cancel form submit and do not save !
|
|
348
|
+
this.props.onFormSubmit(this.data_blob, this.saveFormToDatasyncProcess);
|
|
349
|
+
} else {
|
|
350
|
+
//Call save anyway
|
|
351
|
+
this.saveFormToDatasyncProcess();
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
//this.saveFormToDatasync_OLD((this.props.datasync_object && this.props.datasync_object.data_guid)?this.props.datasync_object.data_guid:null);
|
|
355
|
+
};
|
|
356
|
+
onFormSavedLocalHandler = blob => {
|
|
357
|
+
if (this.props.onFormSaved) this.props.onFormSaved(blob);else console.error("DynamicForm3Tiers2.onFormSaved props is not defined !");
|
|
358
|
+
//clear form
|
|
359
|
+
if (this.props.clearOnSave) this.clearForm();
|
|
360
|
+
//Call onTerminated if set by user
|
|
361
|
+
if (this.props.onTerminated) this.props.onTerminated();
|
|
362
|
+
};
|
|
363
|
+
onFormUpdatedLocalHandler = blob => {
|
|
364
|
+
if (this.props.onFormUpdated) this.props.onFormUpdated(blob);else console.error("DynamicForm3Tiers2.onFormUpdated props is not defined !");
|
|
365
|
+
//clear form
|
|
366
|
+
if (this.props.clearOnUpdate) this.clearForm();
|
|
367
|
+
//Call onTerminated if set by user
|
|
368
|
+
if (this.props.onTerminated) this.props.onTerminated();
|
|
369
|
+
};
|
|
370
|
+
onFormFailedLocalHandler = err => {
|
|
371
|
+
if (this.props.onFormFailed) this.props.onFormFailed(err);else {
|
|
372
|
+
console.error("DynamicForm3Tiers2.onFormFailed props is not defined !");
|
|
373
|
+
alert("Erreur de sauvegarde !!!");
|
|
374
|
+
}
|
|
375
|
+
};
|
|
376
|
+
checkValidation = pFieldObject => {
|
|
377
|
+
let fieldName = pFieldObject.name;
|
|
378
|
+
|
|
379
|
+
/** Get field properties */
|
|
380
|
+
let min = pFieldObject.min_length;
|
|
381
|
+
let max = pFieldObject.max_length;
|
|
382
|
+
let fieldValue = this.getFieldData(pFieldObject);
|
|
383
|
+
console.log("d3t3:checkValidation fieldValue->", fieldValue);
|
|
384
|
+
let errorsFieldName = `err_${fieldName}`; /** Error data displayed in dedicated error label, beside input field in Form */
|
|
385
|
+
let nextErrors = [];
|
|
386
|
+
if (_Globals.globals.parameters.debugging) console.log(`d3t:min:${min} - max:${max}`);
|
|
387
|
+
|
|
388
|
+
/** Check basic field validity except combo and radio */
|
|
389
|
+
if (pFieldObject.required && fieldValue.trim().length <= 0) nextErrors.push(`obligatoire`);
|
|
390
|
+
if (min > 0 && pFieldObject.required && fieldValue.trim().length < min) nextErrors.push(`trop court.`);
|
|
391
|
+
|
|
392
|
+
//Captcha check
|
|
393
|
+
if (pFieldObject.input_type.toLowerCase() == "captcha") {
|
|
394
|
+
if (parseInt(fieldValue) !== this.state.captcha1 + this.state.captcha2) nextErrors.push(`calcul faux !`);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
//Email check
|
|
398
|
+
if (pFieldObject.input_type.toLowerCase() == "email") {
|
|
399
|
+
if (!fieldValue.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) nextErrors.push(`Format de mail incorrect !`);
|
|
400
|
+
}
|
|
401
|
+
if (max > 0 && fieldValue.trim().length > max) nextErrors.push(`trop long, ${fieldValue.trim().length - max} caractères en trop.`);
|
|
402
|
+
/* Special validation handlers
|
|
403
|
+
if (parseInt(this.state[fieldName]) !== (this.state.v1 + this.state.v2))
|
|
404
|
+
nextErrors.push(`calcul faux !`)*/
|
|
405
|
+
|
|
406
|
+
if (_Globals.globals.parameters.debugging) {
|
|
407
|
+
console.log(`d3t:-----------------`);
|
|
408
|
+
console.log(`d3t:fieldName => ${fieldName}`);
|
|
409
|
+
console.log(`d3t:value => ${fieldValue}`);
|
|
410
|
+
console.log(`errorsFieldName => ${errorsFieldName}`);
|
|
411
|
+
console.log(`nextErrors => ${nextErrors}`);
|
|
412
|
+
console.log(`nextErrors.length => ${nextErrors.length}`);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
//update error field
|
|
416
|
+
if (_Globals.globals.parameters.debugging) {
|
|
417
|
+
console.log("nextFieldsErrorsArray=>", nextErrors);
|
|
418
|
+
}
|
|
419
|
+
this.setFieldError(pFieldObject, nextErrors.join("/"));
|
|
420
|
+
if (_Globals.globals.parameters.debugging) {
|
|
421
|
+
console.log(`new fieldError : ${this.getFieldError(pFieldObject)}`);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
//set change flag
|
|
425
|
+
//nextState.has_changed = true
|
|
426
|
+
|
|
427
|
+
//Return validation predicate
|
|
428
|
+
return nextErrors.length === 0; //returns true if no error occurs
|
|
429
|
+
};
|
|
430
|
+
dynamicInputTextChangeHandler = eventObject => {
|
|
431
|
+
if (eventObject && eventObject.event) eventObject.event.preventDefault();
|
|
432
|
+
if (_Globals.globals.parameters.debugging) console.log(`d3t:dynamicInputTextChangeHandler eventObject -> `, eventObject);
|
|
433
|
+
this.setFieldData(eventObject.fieldObject, eventObject.event.target.value);
|
|
434
|
+
|
|
435
|
+
//Validate field
|
|
436
|
+
this.checkValidation(eventObject.fieldObject);
|
|
437
|
+
};
|
|
438
|
+
dynamicInputNumericChangeHandler = eventObject => {
|
|
439
|
+
if (eventObject && eventObject.event) eventObject.event.preventDefault();
|
|
440
|
+
if (_Globals.globals.parameters.debugging) console.log(`d3t:dynamicInputNumericChangeHandler ${eventObject.fieldObject.name} Input field has changed`);
|
|
441
|
+
if (eventObject.event.target.value.length == 0 || !isNaN(eventObject.event.target.value) && !isNaN(parseFloat(eventObject.event.target.value))) this.setFieldData(eventObject.fieldObject, eventObject.event.target.value);else {
|
|
442
|
+
if (_Globals.globals.parameters.debugging) console.log(`d3t:Value rejected -> ${eventObject.event.target.value}`);
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
//Validate field
|
|
446
|
+
if (_Globals.globals.parameters.debugging) console.log(`#${eventObject.fieldObject.name} => ${this.getFieldData(eventObject.fieldObject)}`);
|
|
447
|
+
this.checkValidation(eventObject.fieldObject);
|
|
448
|
+
};
|
|
449
|
+
_colRendering = col => {
|
|
450
|
+
try {
|
|
451
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, col.Fields.map((field, ii) => {
|
|
452
|
+
return this._fieldRendering(field, ii);
|
|
453
|
+
}));
|
|
454
|
+
} catch (err) {
|
|
455
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, "Error ", err.message);
|
|
456
|
+
}
|
|
457
|
+
};
|
|
458
|
+
_rowRendering = row => {
|
|
459
|
+
try {
|
|
460
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.Row, null, row.Cols.map((col, ii) => {
|
|
461
|
+
return this._colRendering(col);
|
|
462
|
+
}));
|
|
463
|
+
} catch (err) {
|
|
464
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, "Error ", err.message);
|
|
465
|
+
}
|
|
466
|
+
};
|
|
467
|
+
migrate_field = (pFieldObject, migrated_value) => {
|
|
468
|
+
//Set data_tier property with former form value
|
|
469
|
+
this.data_blob.data_tier[pFieldObject.name] = migrated_value;
|
|
470
|
+
if (_Globals.globals.parameters.debugging) console.log("09/07:migrate_field -> pFieldObject.name=", pFieldObject.name);
|
|
471
|
+
};
|
|
472
|
+
data_tier_migration = (field, ii) => {
|
|
473
|
+
if (!this.props.data_blob) return; //Discard migration
|
|
474
|
+
return;
|
|
475
|
+
//data_tier_migration disbled
|
|
476
|
+
console.log("09/07:data_tier_migration ### Migration check !!!");
|
|
477
|
+
console.log("09/07:this.data_blob.modified ->", this.data_blob && this.data_blob.modified ? this.data_blob.modified : "null");
|
|
478
|
+
//Check if migration required
|
|
479
|
+
if (this.data_blob && this.data_blob.modified && this.data_blob.modified < _Globals.globals.parameters.form_modified_version) if (_Globals.globals.parameters.debugging) console.log("09/07:field needs migration from version 1 to version 2");else {
|
|
480
|
+
if (_Globals.globals.parameters.debugging) console.log("09/07:Field is up to date");
|
|
481
|
+
//Don't care migration process
|
|
482
|
+
return;
|
|
483
|
+
}
|
|
484
|
+
if (_Globals.globals.parameters.debugging) {
|
|
485
|
+
console.log("09/07:data_tier_migration ->", field.input_type);
|
|
486
|
+
}
|
|
487
|
+
switch (field.input_type.toLowerCase()) {
|
|
488
|
+
/** Dynamic fields */
|
|
489
|
+
case "checkbox-DISABLED":
|
|
490
|
+
case "checkbox":
|
|
491
|
+
case "blob":
|
|
492
|
+
case "email":
|
|
493
|
+
case "text":
|
|
494
|
+
case "memo":
|
|
495
|
+
case "multi":
|
|
496
|
+
case "numeric":
|
|
497
|
+
case "amount":
|
|
498
|
+
case "percent":
|
|
499
|
+
case "captcha":
|
|
500
|
+
case "textarea":
|
|
501
|
+
//Migrate single field
|
|
502
|
+
if (_Globals.globals.parameters.debugging) {
|
|
503
|
+
console.log("09/07:data_tier_migration single field ->", field.name);
|
|
504
|
+
}
|
|
505
|
+
this.migrate_field(field, this.getFieldData_V1(field));
|
|
506
|
+
break;
|
|
507
|
+
case "combo":
|
|
508
|
+
case "radio":
|
|
509
|
+
//Migrate selected field
|
|
510
|
+
if (_Globals.globals.parameters.debugging) {
|
|
511
|
+
console.log("09/07:data_tier_migration selected field ->", field.name);
|
|
512
|
+
}
|
|
513
|
+
this.migrate_field(field, this.getSelectedFieldValues_V1(field));
|
|
514
|
+
break;
|
|
515
|
+
default:
|
|
516
|
+
alert("data_tier_migration --> Field type not supported ->" + field.input_type);
|
|
517
|
+
}
|
|
518
|
+
};
|
|
519
|
+
_fieldRendering = (field, ii) => {
|
|
520
|
+
console.log("09/07:_fieldRendering -> data_tier_migration call");
|
|
521
|
+
this.data_tier_migration(field, ii);
|
|
522
|
+
//Do not display field if empty in read only mode
|
|
523
|
+
if (this.props.read_only && (this.getFieldData(field) == null || !this.getFieldData(field) || this.getFieldData(field).trim().length == 0)) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
524
|
+
|
|
525
|
+
//Do not display hidden field
|
|
526
|
+
if (field.hidden && !this.props.show_hidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
527
|
+
switch (field.input_type.toLowerCase()) {
|
|
528
|
+
/** Dynamic fields */
|
|
529
|
+
case "checkbox-DISABLED":
|
|
530
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
|
|
531
|
+
check: true
|
|
532
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
|
|
533
|
+
check: true
|
|
534
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
535
|
+
defaultValue: "",
|
|
536
|
+
type: "checkbox",
|
|
537
|
+
readOnly: this.props.read_only ? this.props.read_only : false
|
|
538
|
+
}), field.placeholder, /*#__PURE__*/_react.default.createElement("span", {
|
|
539
|
+
className: "form-check-sign"
|
|
540
|
+
})));
|
|
541
|
+
case "checkbox":
|
|
542
|
+
/* Checkbox is override with combobox */
|
|
543
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
|
|
544
|
+
showArrow: true,
|
|
545
|
+
options: ["Oui", "Non"],
|
|
546
|
+
isObject: false,
|
|
547
|
+
displayValue: "key",
|
|
548
|
+
selectedValues: this.getFieldData(field) ? this.getFieldData(field).split(";") : [],
|
|
549
|
+
placeholder: field.placeholder,
|
|
550
|
+
emptyRecordMsg: "",
|
|
551
|
+
onSelect: (selectedList, selectedItem) => {
|
|
552
|
+
this.setFieldData(field, selectedList.join(";"));
|
|
553
|
+
},
|
|
554
|
+
onRemove: (selectedList, selectedItem) => {
|
|
555
|
+
this.setFieldData(field, selectedList.join(";"));
|
|
556
|
+
},
|
|
557
|
+
disable: this.props.read_only,
|
|
558
|
+
singleSelect: true
|
|
559
|
+
}), this._error_label(field));
|
|
560
|
+
case "blob":
|
|
561
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("div", {
|
|
562
|
+
className: "col-md-10"
|
|
563
|
+
}, /*#__PURE__*/_react.default.createElement(_Blob.default, {
|
|
564
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
565
|
+
Caption: `${this.getFieldPrompt(field)} ...`,
|
|
566
|
+
data: field.value,
|
|
567
|
+
uploadPicture: UploadFile => {
|
|
568
|
+
field.value = UploadFile.data;
|
|
569
|
+
this.checkValidation(field);
|
|
570
|
+
},
|
|
571
|
+
pictureStyle: "pic",
|
|
572
|
+
buttonStyle: "btn btn-secondary"
|
|
573
|
+
}), this._error_label(field)));
|
|
574
|
+
case "email":
|
|
575
|
+
return this._email_field(field);
|
|
576
|
+
case "text":
|
|
577
|
+
return this._text_field(field);
|
|
578
|
+
case "memo":
|
|
579
|
+
return this._memo_field(field);
|
|
580
|
+
case "combo":
|
|
581
|
+
case "radio":
|
|
582
|
+
return this._combo_field(field);
|
|
583
|
+
case "multi":
|
|
584
|
+
return this._multi_field(field);
|
|
585
|
+
case "numeric":
|
|
586
|
+
return this._numeric_field_with_add_on(field, "*");
|
|
587
|
+
case "amount":
|
|
588
|
+
return this._numeric_field_with_add_on(field, "fa-euro");
|
|
589
|
+
case "percent":
|
|
590
|
+
return this._numeric_field_with_add_on(field, "%");
|
|
591
|
+
case "captcha":
|
|
592
|
+
return this._captcha_field(field);
|
|
593
|
+
default:
|
|
594
|
+
console.log("alert à Malibu");
|
|
595
|
+
}
|
|
596
|
+
};
|
|
597
|
+
_cancelButton = () => {
|
|
598
|
+
let buttonIsHidden = this.props.read_only || this.props.buttons_options && this.props.buttons_options.cancel_button_hidden;
|
|
599
|
+
let buttonCaption = this.props.buttons_options && this.props.buttons_options.cancel_button_caption ? this.props.buttons_options.cancel_button_caption : "Annuler";
|
|
600
|
+
if (buttonIsHidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);else {
|
|
601
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
|
|
602
|
+
md: "4",
|
|
603
|
+
sm: "4"
|
|
604
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
605
|
+
block: true,
|
|
606
|
+
className: "btn-round",
|
|
607
|
+
color: "danger",
|
|
608
|
+
outline: true,
|
|
609
|
+
type: "reset",
|
|
610
|
+
onClick: () => {
|
|
611
|
+
this.clearForm();
|
|
612
|
+
}
|
|
613
|
+
}, buttonCaption));
|
|
614
|
+
}
|
|
615
|
+
};
|
|
616
|
+
_submitButton = () => {
|
|
617
|
+
let buttonIsHidden = this.props.read_only || this.props.buttons_options && this.props.buttons_options.submit_button_hidden;
|
|
618
|
+
let buttonCaption = this.props.buttons_options && this.props.buttons_options.submit_button_caption ? this.props.buttons_options.submit_button_caption : "Soumettre";
|
|
619
|
+
if (buttonIsHidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);else {
|
|
620
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
|
|
621
|
+
md: "4",
|
|
622
|
+
sm: "4"
|
|
623
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
624
|
+
block: true,
|
|
625
|
+
className: "btn-round",
|
|
626
|
+
color: "danger",
|
|
627
|
+
outline: true,
|
|
628
|
+
type: "submit",
|
|
629
|
+
onClick: () => {
|
|
630
|
+
this.onClickSubmitFormHandler();
|
|
631
|
+
}
|
|
632
|
+
}, buttonCaption));
|
|
633
|
+
}
|
|
634
|
+
};
|
|
635
|
+
render = () => {
|
|
636
|
+
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 => {
|
|
637
|
+
return this._rowRendering(row);
|
|
638
|
+
})), /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
|
|
639
|
+
className: "buttons-row"
|
|
640
|
+
}, this._cancelButton(), this._submitButton(), this.props.custom_button_caption && /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
|
|
641
|
+
md: "4",
|
|
642
|
+
sm: "4"
|
|
643
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
644
|
+
block: true,
|
|
645
|
+
className: "btn-round",
|
|
646
|
+
color: "primary",
|
|
647
|
+
type: "submit",
|
|
648
|
+
onClick: e => {
|
|
649
|
+
if (this.props.custom_button_handler) this.props.custom_button_handler(this.state.form);else console.error("custom_button_handler unset !");
|
|
650
|
+
}
|
|
651
|
+
}, this.props.custom_button_caption)), this.props.custom_button_caption2 && /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
|
|
652
|
+
md: "4",
|
|
653
|
+
sm: "4"
|
|
654
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
655
|
+
block: true,
|
|
656
|
+
className: "btn-round",
|
|
657
|
+
color: "primary",
|
|
658
|
+
type: "submit",
|
|
659
|
+
onClick: e => {
|
|
660
|
+
if (this.props.custom_button_handler2) this.props.custom_button_handler2(this.state.form);else console.error("custom_button_handler2 unset !");
|
|
661
|
+
}
|
|
662
|
+
}, this.props.custom_button_caption2))));
|
|
663
|
+
};
|
|
664
|
+
}
|
|
665
|
+
var _default = exports.default = DynamicForm3Tiers2;
|
|
@@ -0,0 +1,617 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _Globals = require("../../components/Globals/Globals");
|
|
9
|
+
var _datasyncBlob = require("datasync-blob");
|
|
10
|
+
var _multiselectReactDropdown = _interopRequireDefault(require("multiselect-react-dropdown"));
|
|
11
|
+
var _datasyncCore = require("datasync-core");
|
|
12
|
+
require("./DynamicFormContact.css");
|
|
13
|
+
var _reactstrap = require("reactstrap");
|
|
14
|
+
var _reactRouterDom = require("react-router-dom");
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
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); }
|
|
17
|
+
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; }
|
|
18
|
+
// react plugin that creates an input with badges
|
|
19
|
+
|
|
20
|
+
// reactstrap components
|
|
21
|
+
|
|
22
|
+
class DynamicFormContact extends _react.Component {
|
|
23
|
+
constructor(props) {
|
|
24
|
+
super(props);
|
|
25
|
+
this.state = {
|
|
26
|
+
form: {}
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
componentDidMount = () => {
|
|
30
|
+
//Component initialization in edit mode
|
|
31
|
+
if (this.props.form) {
|
|
32
|
+
this.clearForm();
|
|
33
|
+
}
|
|
34
|
+
//this.state = {fieldError:[], form:{}}
|
|
35
|
+
};
|
|
36
|
+
componentDidUpdate(prevProps) {
|
|
37
|
+
// Typical usage (don't forget to compare props):
|
|
38
|
+
if (this.props.form !== prevProps.form) {
|
|
39
|
+
//Lookup field props has changed
|
|
40
|
+
if (_Globals.globals.parameters.debugging) console.log("componentDidUpdate -> has changed", this.props.form);
|
|
41
|
+
this.clearForm();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
clearForm = () => {
|
|
45
|
+
/** Duplicate props.form */
|
|
46
|
+
let clearObject2 = JSON.parse(JSON.stringify(this.props.form));
|
|
47
|
+
let l_user_guid = (0, _Globals.getConnectedUserGuid)();
|
|
48
|
+
/*
|
|
49
|
+
if (l_user_guid == null ){
|
|
50
|
+
alert("Vous devez vous reconnecter")
|
|
51
|
+
Redirect.toString("/")
|
|
52
|
+
}
|
|
53
|
+
*/
|
|
54
|
+
/** Override user-guid wit a given props */
|
|
55
|
+
clearObject2.user_guid = l_user_guid;
|
|
56
|
+
if (_Globals.globals.parameters.debugging) {
|
|
57
|
+
console.log("----- clearForm -----");
|
|
58
|
+
console.log("clearForm::this.props.form->", this.props.form);
|
|
59
|
+
console.log("clearForm::clearObject2->", clearObject2);
|
|
60
|
+
}
|
|
61
|
+
this.setState({
|
|
62
|
+
fieldError: [],
|
|
63
|
+
form: {},
|
|
64
|
+
captcha1: (0, _Globals.randomize)(0, 5),
|
|
65
|
+
captcha2: (0, _Globals.randomize)(0, 5)
|
|
66
|
+
},
|
|
67
|
+
//Clear forced
|
|
68
|
+
() => {
|
|
69
|
+
if (_Globals.globals.parameters.debugging) console.log("DynamicFormContact state cleansed 2:", this.state);
|
|
70
|
+
this.setState({
|
|
71
|
+
fieldError: [],
|
|
72
|
+
form: clearObject2
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
*
|
|
79
|
+
* @param {*} pFieldObject
|
|
80
|
+
* @param {*} value
|
|
81
|
+
* Purpose : compute a special tag to facilitate SQL requests
|
|
82
|
+
*/
|
|
83
|
+
setFieldTag = (pFieldObject, value) => {
|
|
84
|
+
pFieldObject.tag = `${pFieldObject.name}${value}`;
|
|
85
|
+
if (false && _Globals.globals.parameters.debugging) console.log(`pFieldObject.tag => ${pFieldObject.tag}`);
|
|
86
|
+
};
|
|
87
|
+
setFieldData = (pFieldObject, value) => {
|
|
88
|
+
pFieldObject.value = value;
|
|
89
|
+
this.setFieldTag(pFieldObject, value);
|
|
90
|
+
};
|
|
91
|
+
getSelectedFieldValues = pFieldObject => {
|
|
92
|
+
return pFieldObject.selected_values ? pFieldObject.selected_values : "";
|
|
93
|
+
};
|
|
94
|
+
setSelectedFieldValues = (pFieldObject, selectedValues) => {
|
|
95
|
+
pFieldObject.selected_values = selectedValues;
|
|
96
|
+
this.setFieldTag(pFieldObject, selectedValues);
|
|
97
|
+
};
|
|
98
|
+
getFieldData = pFieldObject => {
|
|
99
|
+
/** Return data value form field object */
|
|
100
|
+
return pFieldObject.value ? pFieldObject.value : "";
|
|
101
|
+
};
|
|
102
|
+
setFieldError = (pFieldObject, value) => {
|
|
103
|
+
try {
|
|
104
|
+
pFieldObject.err = value;
|
|
105
|
+
let nextFieldError = this.state.fieldError;
|
|
106
|
+
nextFieldError[pFieldObject.name] = value;
|
|
107
|
+
this.setState({
|
|
108
|
+
fieldError: nextFieldError
|
|
109
|
+
});
|
|
110
|
+
//Scroll form to first erroneous field
|
|
111
|
+
(0, _Globals.wScrollTo)(pFieldObject.name);
|
|
112
|
+
} catch (e) {
|
|
113
|
+
console.log(`Error caught on ${e}`);
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
getFieldError = pFieldObject => {
|
|
117
|
+
/** Return data value form field object */
|
|
118
|
+
try {
|
|
119
|
+
return pFieldObject.err ? pFieldObject.err : "";
|
|
120
|
+
} catch (e) {
|
|
121
|
+
return "";
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
_error_label = field => {
|
|
125
|
+
return /*#__PURE__*/_react.default.createElement("label", {
|
|
126
|
+
className: "dynamic-form-error"
|
|
127
|
+
}, this.getfieldErrorLabel(field));
|
|
128
|
+
};
|
|
129
|
+
getfieldErrorLabel = pFieldObject => {
|
|
130
|
+
return this.getFieldError(pFieldObject);
|
|
131
|
+
};
|
|
132
|
+
getFieldLabelTitle = pFieldObject => {
|
|
133
|
+
return /*#__PURE__*/_react.default.createElement("h6", {
|
|
134
|
+
id: pFieldObject.name
|
|
135
|
+
}, pFieldObject.title ? pFieldObject.title : pFieldObject.placeholder, pFieldObject.required && !this.props.read_only && /*#__PURE__*/_react.default.createElement("span", {
|
|
136
|
+
className: "icon-danger"
|
|
137
|
+
}, "*"));
|
|
138
|
+
};
|
|
139
|
+
getCaptchaFieldLabelTitle = pFieldObject => {
|
|
140
|
+
return /*#__PURE__*/_react.default.createElement("h6", {
|
|
141
|
+
id: pFieldObject.name
|
|
142
|
+
}, `${this.state.captcha1} + ${this.state.captcha2}`, pFieldObject.required && /*#__PURE__*/_react.default.createElement("span", {
|
|
143
|
+
className: "icon-danger"
|
|
144
|
+
}, "*"));
|
|
145
|
+
};
|
|
146
|
+
getFielValue = pFieldObject => {
|
|
147
|
+
return pFieldObject.value ? pFieldObject.value : pFieldObject.default_value ? pFieldObject.default_value : "";
|
|
148
|
+
};
|
|
149
|
+
getFieldPrompt = pFieldObject => {
|
|
150
|
+
return pFieldObject.placeholder ? pFieldObject.placeholder : pFieldObject.title;
|
|
151
|
+
};
|
|
152
|
+
_numeric_field_with_add_on = (field, fa_symbol) => {
|
|
153
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroup, {
|
|
154
|
+
className: "border-input"
|
|
155
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
156
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
157
|
+
type: field.input_type,
|
|
158
|
+
value: this.getFielValue(field),
|
|
159
|
+
placeholder: field.placeholder,
|
|
160
|
+
onChange: e => {
|
|
161
|
+
e.preventDefault();
|
|
162
|
+
this.dynamicInputNumericChangeHandler({
|
|
163
|
+
event: e,
|
|
164
|
+
fieldObject: field
|
|
165
|
+
});
|
|
166
|
+
}
|
|
167
|
+
}), fa_symbol && /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroupAddon, {
|
|
168
|
+
addonType: "append"
|
|
169
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroupText, null, /*#__PURE__*/_react.default.createElement("i", {
|
|
170
|
+
className: `fa ${fa_symbol}`
|
|
171
|
+
})))), this._error_label(field));
|
|
172
|
+
};
|
|
173
|
+
_captcha_field = (field, fa_symbol) => {
|
|
174
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getCaptchaFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroup, {
|
|
175
|
+
className: "border-input"
|
|
176
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
177
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
178
|
+
type: field.input_type,
|
|
179
|
+
value: this.getFielValue(field),
|
|
180
|
+
placeholder: field.placeholder,
|
|
181
|
+
onChange: e => {
|
|
182
|
+
e.preventDefault();
|
|
183
|
+
this.dynamicInputNumericChangeHandler({
|
|
184
|
+
event: e,
|
|
185
|
+
fieldObject: field
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
})), this._error_label(field));
|
|
189
|
+
};
|
|
190
|
+
_text_field = field => {
|
|
191
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
192
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
193
|
+
type: field.input_type,
|
|
194
|
+
value: this.getFielValue(field),
|
|
195
|
+
placeholder: field.placeholder,
|
|
196
|
+
onChange: e => {
|
|
197
|
+
e.preventDefault();
|
|
198
|
+
this.dynamicInputTextChangeHandler({
|
|
199
|
+
event: e,
|
|
200
|
+
fieldObject: field
|
|
201
|
+
});
|
|
202
|
+
}
|
|
203
|
+
}), this._error_label(field));
|
|
204
|
+
};
|
|
205
|
+
_email_field = field => {
|
|
206
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
207
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
208
|
+
type: field.input_type,
|
|
209
|
+
value: this.getFielValue(field),
|
|
210
|
+
placeholder: field.placeholder,
|
|
211
|
+
pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$",
|
|
212
|
+
onChange: e => {
|
|
213
|
+
e.preventDefault();
|
|
214
|
+
this.dynamicInputTextChangeHandler({
|
|
215
|
+
event: e,
|
|
216
|
+
fieldObject: field
|
|
217
|
+
});
|
|
218
|
+
}
|
|
219
|
+
}), this._error_label(field));
|
|
220
|
+
};
|
|
221
|
+
_memo_field = field => {
|
|
222
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("textarea", {
|
|
223
|
+
className: "form-control",
|
|
224
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
225
|
+
type: field.input_type,
|
|
226
|
+
value: this.getFielValue(field),
|
|
227
|
+
placeholder: field.placeholder,
|
|
228
|
+
rows: field.rows,
|
|
229
|
+
onChange: e => {
|
|
230
|
+
e.preventDefault();
|
|
231
|
+
this.dynamicInputTextChangeHandler({
|
|
232
|
+
event: e,
|
|
233
|
+
fieldObject: field
|
|
234
|
+
});
|
|
235
|
+
}
|
|
236
|
+
}), this._error_label(field));
|
|
237
|
+
};
|
|
238
|
+
_combo_field = field => {
|
|
239
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
|
|
240
|
+
showArrow: true,
|
|
241
|
+
options: field.combo_list,
|
|
242
|
+
isObject: false,
|
|
243
|
+
displayValue: "key",
|
|
244
|
+
selectedValues: field.selected_values ? field.selected_values.split(";") : [],
|
|
245
|
+
placeholder: field.placeholder,
|
|
246
|
+
emptyRecordMsg: "",
|
|
247
|
+
onSelect: (selectedList, selectedItem) => {
|
|
248
|
+
this.setSelectedFieldValues(field, selectedList.join(";"));
|
|
249
|
+
if (_Globals.globals.parameters.debugging) console.log("field.selected_values->", field.selected_values);
|
|
250
|
+
},
|
|
251
|
+
onRemove: (selectedList, selectedItem) => {
|
|
252
|
+
this.setSelectedFieldValues(field, selectedList.join(";"));
|
|
253
|
+
if (_Globals.globals.parameters.debugging) console.log("field.selected_values->", field.selected_values);
|
|
254
|
+
},
|
|
255
|
+
disable: this.props.read_only,
|
|
256
|
+
singleSelect: true
|
|
257
|
+
}), this._error_label(field));
|
|
258
|
+
};
|
|
259
|
+
_multi_field = field => {
|
|
260
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
|
|
261
|
+
showArrow: true,
|
|
262
|
+
options: field.combo_list,
|
|
263
|
+
isObject: false,
|
|
264
|
+
displayValue: "key",
|
|
265
|
+
selectedValues: field.selected_values ? field.selected_values.split(";") : [],
|
|
266
|
+
placeholder: field.placeholder,
|
|
267
|
+
emptyRecordMsg: "",
|
|
268
|
+
onSelect: (selectedList, selectedItem) => {
|
|
269
|
+
this.setSelectedFieldValues(field, selectedList.join(";"));
|
|
270
|
+
if (_Globals.globals.parameters.debugging) console.log("field.selected_values->", field.selected_values);
|
|
271
|
+
},
|
|
272
|
+
onRemove: (selectedList, selectedItem) => {
|
|
273
|
+
this.setSelectedFieldValues(field, selectedList.join(";"));
|
|
274
|
+
if (_Globals.globals.parameters.debugging) console.log("field.selected_values->", field.selected_values);
|
|
275
|
+
},
|
|
276
|
+
disable: this.props.read_only,
|
|
277
|
+
singleSelect: false
|
|
278
|
+
}), this._error_label(field));
|
|
279
|
+
};
|
|
280
|
+
SaveDataTierToDatasyncProcess = () => {
|
|
281
|
+
//Everything sounds ok in Form, Go ahead
|
|
282
|
+
let hasDataGuid = this.props.datasync_object && this.props.datasync_object.data_guid;
|
|
283
|
+
(0, _datasyncCore.SaveDataTierToDatasync)(hasDataGuid ? this.props.datasync_object.data_guid : null,
|
|
284
|
+
//data_guid
|
|
285
|
+
this.state.form,
|
|
286
|
+
//p_o_form,
|
|
287
|
+
this.props.company_guid,
|
|
288
|
+
//p_s_company_guid,
|
|
289
|
+
this.props.table_guid,
|
|
290
|
+
//p_s_table_guid,
|
|
291
|
+
hasDataGuid ? this.props.datasync_object.createstamp : (0, _Globals.cTimeStamp)(),
|
|
292
|
+
//p_dt_createstamp,
|
|
293
|
+
hasDataGuid ? (0, _Globals.cTimeStamp)() : null,
|
|
294
|
+
//p_dt_updatestamp,
|
|
295
|
+
null,
|
|
296
|
+
//p_dt_deletestamp,
|
|
297
|
+
this.onFormSavedLocalHandler, this.onFormUpdatedLocalHandler, this.onFormFailedLocalHandler, null);
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
/** Form Handlers */
|
|
301
|
+
onClickSubmitFormHandler = async event => {
|
|
302
|
+
if (event) event.preventDefault();
|
|
303
|
+
|
|
304
|
+
//Force all fields check
|
|
305
|
+
let canSubmit = true;
|
|
306
|
+
let iRow = 0;
|
|
307
|
+
while (iRow < this.state.form.Rows.length && canSubmit) {
|
|
308
|
+
let iCol = 0;
|
|
309
|
+
while (iCol < this.state.form.Rows[iRow].Cols.length && canSubmit) {
|
|
310
|
+
let ii = 0;
|
|
311
|
+
while (ii < this.state.form.Rows[iRow].Cols[iCol].Fields.length && (canSubmit &= this.checkValidation(this.state.form.Rows[iRow].Cols[iCol].Fields[ii]))) {
|
|
312
|
+
if (_Globals.globals.parameters.debugging) console.log(`Fields[${ii}]|${this.state.form.Rows[iRow].Cols[iCol].Fields[ii].name}| canSubmit=${canSubmit}`);
|
|
313
|
+
ii++;
|
|
314
|
+
}
|
|
315
|
+
iCol++;
|
|
316
|
+
}
|
|
317
|
+
iRow++;
|
|
318
|
+
}
|
|
319
|
+
if (_Globals.globals.parameters.debugging) console.log("canSubmit:", canSubmit);
|
|
320
|
+
if (!canSubmit) {
|
|
321
|
+
let err_message = "Le formulaire comporte des erreurs !";
|
|
322
|
+
if (this.props.onFormFailed) this.props.onFormFailed(err_message);else alert(`${err_message}`);
|
|
323
|
+
return false;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
//Invoke onFormSubmit props
|
|
327
|
+
|
|
328
|
+
if (this.props.onFormSubmit) {
|
|
329
|
+
if (_Globals.globals.parameters.debugging) alert("onFormSubmit => filter log with AsyncDebug:: prefixe");
|
|
330
|
+
//If props function return false then cancel form submit and do not save !
|
|
331
|
+
this.props.onFormSubmit(this.state.form, this.SaveDataTierToDatasyncProcess);
|
|
332
|
+
} else {
|
|
333
|
+
//Call save anyway
|
|
334
|
+
this.SaveDataTierToDatasyncProcess();
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
//this.SaveDataTierToDatasync_OLD((this.props.datasync_object && this.props.datasync_object.data_guid)?this.props.datasync_object.data_guid:null);
|
|
338
|
+
};
|
|
339
|
+
onFormSavedLocalHandler = blob => {
|
|
340
|
+
if (this.props.onFormSaved) this.props.onFormSaved(blob);else console.error("DynamicFormContact.onFormSaved props is not defined !");
|
|
341
|
+
//clear form
|
|
342
|
+
if (this.props.clearOnSave) this.clearForm();
|
|
343
|
+
//Call onTerminated if set by user
|
|
344
|
+
if (this.props.onTerminated) this.props.onTerminated();
|
|
345
|
+
};
|
|
346
|
+
onFormUpdatedLocalHandler = blob => {
|
|
347
|
+
if (this.props.onFormUpdated) this.props.onFormUpdated(blob);else console.error("DynamicFormContact.onFormUpdated props is not defined !");
|
|
348
|
+
//clear form
|
|
349
|
+
if (this.props.clearOnUpdate) this.clearForm();
|
|
350
|
+
//Call onTerminated if set by user
|
|
351
|
+
if (this.props.onTerminated) this.props.onTerminated();
|
|
352
|
+
};
|
|
353
|
+
onFormFailedLocalHandler = err => {
|
|
354
|
+
if (this.props.onFormFailed) this.props.onFormFailed(err);else {
|
|
355
|
+
console.error("DynamicFormContact.onFormFailed props is not defined !");
|
|
356
|
+
alert("Erreur de sauvegarde !!!");
|
|
357
|
+
}
|
|
358
|
+
};
|
|
359
|
+
checkValidation = pFieldObject => {
|
|
360
|
+
let fieldName = pFieldObject.name;
|
|
361
|
+
|
|
362
|
+
/** Get field properties */
|
|
363
|
+
let min = pFieldObject.min_length;
|
|
364
|
+
let max = pFieldObject.max_length;
|
|
365
|
+
let fieldValue = this.getFieldData(pFieldObject);
|
|
366
|
+
let selectedFieldValues = this.getSelectedFieldValues(pFieldObject);
|
|
367
|
+
let errorsFieldName = `err_${fieldName}`; /** Error data displayed in dedicated error label, beside input field in Form */
|
|
368
|
+
let nextErrors = [];
|
|
369
|
+
if (_Globals.globals.parameters.debugging) console.log(`min:${min} - max:${max}`);
|
|
370
|
+
|
|
371
|
+
/** Check basic field validity except combo and radio */
|
|
372
|
+
if (pFieldObject.input_type.toLowerCase() != "combo" && pFieldObject.input_type.toLowerCase() != "radio") {
|
|
373
|
+
if (pFieldObject.required && fieldValue.trim().length <= 0) nextErrors.push(`obligatoire`);
|
|
374
|
+
}
|
|
375
|
+
if (pFieldObject.input_type.toLowerCase() == "combo" || pFieldObject.input_type.toLowerCase() == "radio") {
|
|
376
|
+
if (pFieldObject.required && selectedFieldValues.trim().length <= 0) nextErrors.push(`obligatoire`);
|
|
377
|
+
}
|
|
378
|
+
if (min > 0 && fieldValue.trim().length < min) nextErrors.push(`trop court.`);
|
|
379
|
+
|
|
380
|
+
//Captcha check
|
|
381
|
+
if (pFieldObject.input_type.toLowerCase() == "captcha") {
|
|
382
|
+
if (parseInt(fieldValue) !== this.state.captcha1 + this.state.captcha2) nextErrors.push(`calcul faux !`);
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
//Email check
|
|
386
|
+
if (pFieldObject.input_type.toLowerCase() == "email") {
|
|
387
|
+
if (!fieldValue.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) nextErrors.push(`Format de mail incorrect !`);
|
|
388
|
+
}
|
|
389
|
+
if (max > 0 && fieldValue.trim().length > max) nextErrors.push(`trop long, ${fieldValue.trim().length - max} caractères en trop.`);
|
|
390
|
+
/* Special validation handlers
|
|
391
|
+
if (parseInt(this.state[fieldName]) !== (this.state.v1 + this.state.v2))
|
|
392
|
+
nextErrors.push(`calcul faux !`)*/
|
|
393
|
+
|
|
394
|
+
if (_Globals.globals.parameters.debugging) {
|
|
395
|
+
console.log(`-----------------`);
|
|
396
|
+
console.log(`fieldName => ${fieldName}`);
|
|
397
|
+
console.log(`value => ${fieldValue}`);
|
|
398
|
+
console.log(`errorsFieldName => ${errorsFieldName}`);
|
|
399
|
+
console.log(`nextErrors => ${nextErrors}`);
|
|
400
|
+
console.log(`nextErrors.length => ${nextErrors.length}`);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
//update error field
|
|
404
|
+
if (_Globals.globals.parameters.debugging) {
|
|
405
|
+
console.log("nextFieldsErrorsArray=>", nextErrors);
|
|
406
|
+
}
|
|
407
|
+
this.setFieldError(pFieldObject, nextErrors.join("/"));
|
|
408
|
+
if (_Globals.globals.parameters.debugging) {
|
|
409
|
+
console.log(`new fieldError : ${this.getFieldError(pFieldObject)}`);
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
//set change flag
|
|
413
|
+
//nextState.has_changed = true
|
|
414
|
+
|
|
415
|
+
//Return validation predicate
|
|
416
|
+
return nextErrors.length === 0; //returns true if no error occurs
|
|
417
|
+
};
|
|
418
|
+
dynamicInputTextChangeHandler = eventObject => {
|
|
419
|
+
if (eventObject && eventObject.event) eventObject.event.preventDefault();
|
|
420
|
+
if (_Globals.globals.parameters.debugging) console.log(`#${eventObject.fieldObject.name} Input field has changed`);
|
|
421
|
+
this.setFieldData(eventObject.fieldObject, eventObject.event.target.value);
|
|
422
|
+
|
|
423
|
+
//Validate field
|
|
424
|
+
if (_Globals.globals.parameters.debugging) console.log(`#${eventObject.fieldObject.name} => ${this.getFieldData(eventObject.fieldObject)}`);
|
|
425
|
+
this.checkValidation(eventObject.fieldObject);
|
|
426
|
+
};
|
|
427
|
+
dynamicInputNumericChangeHandler = eventObject => {
|
|
428
|
+
if (eventObject && eventObject.event) eventObject.event.preventDefault();
|
|
429
|
+
if (_Globals.globals.parameters.debugging) console.log(`#${eventObject.fieldObject.name} Input field has changed`);
|
|
430
|
+
if (eventObject.event.target.value.length == 0 || !isNaN(eventObject.event.target.value) && !isNaN(parseFloat(eventObject.event.target.value))) this.setFieldData(eventObject.fieldObject, eventObject.event.target.value);else {
|
|
431
|
+
if (_Globals.globals.parameters.debugging) console.log(`Value rejected -> ${eventObject.event.target.value}`);
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
//Validate field
|
|
435
|
+
if (_Globals.globals.parameters.debugging) console.log(`#${eventObject.fieldObject.name} => ${this.getFieldData(eventObject.fieldObject)}`);
|
|
436
|
+
this.checkValidation(eventObject.fieldObject);
|
|
437
|
+
};
|
|
438
|
+
_colRendering = col => {
|
|
439
|
+
try {
|
|
440
|
+
return (
|
|
441
|
+
/*#__PURE__*/
|
|
442
|
+
/*div className={(false ? 'col-form' : 'tabular')}>*/
|
|
443
|
+
_react.default.createElement(_reactstrap.Col, null, col.Fields.map((field, ii) => {
|
|
444
|
+
return this._fieldRendering(field, ii);
|
|
445
|
+
}))
|
|
446
|
+
/*</div>*/
|
|
447
|
+
/*</div>*/
|
|
448
|
+
);
|
|
449
|
+
} catch (err) {
|
|
450
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, "Error ", err.message);
|
|
451
|
+
}
|
|
452
|
+
};
|
|
453
|
+
_rowRendering = row => {
|
|
454
|
+
try {
|
|
455
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.Row, null, row.Cols.map((col, ii) => {
|
|
456
|
+
return this._colRendering(col);
|
|
457
|
+
}));
|
|
458
|
+
} catch (err) {
|
|
459
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, "Error ", err.message);
|
|
460
|
+
}
|
|
461
|
+
};
|
|
462
|
+
_fieldRendering = (field, ii) => {
|
|
463
|
+
//Do not display field if empty in read only mode
|
|
464
|
+
if (this.props.read_only && (field.value == null || !field.value || field.value.trim().length == 0) && (field.selected_values == null || !field.selected_values || field.selected_values.trim().length == 0)) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
465
|
+
|
|
466
|
+
//Do not display hidden field
|
|
467
|
+
if (field.hidden && !this.props.show_hidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
468
|
+
switch (field.input_type.toLowerCase()) {
|
|
469
|
+
/** Dynamic fields */
|
|
470
|
+
case "checkbox-DISABLED":
|
|
471
|
+
return /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
|
|
472
|
+
check: true
|
|
473
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
|
|
474
|
+
check: true
|
|
475
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
476
|
+
defaultValue: "",
|
|
477
|
+
type: "checkbox",
|
|
478
|
+
readOnly: this.props.read_only ? this.props.read_only : false
|
|
479
|
+
}), field.placeholder, /*#__PURE__*/_react.default.createElement("span", {
|
|
480
|
+
className: "form-check-sign"
|
|
481
|
+
})));
|
|
482
|
+
case "checkbox":
|
|
483
|
+
/* Checkbox is override with combobox */
|
|
484
|
+
return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
|
|
485
|
+
showArrow: true,
|
|
486
|
+
options: ["Oui", "Non"],
|
|
487
|
+
isObject: false,
|
|
488
|
+
displayValue: "key",
|
|
489
|
+
selectedValues: field.selected_values ? field.selected_values.split(";") : [],
|
|
490
|
+
placeholder: field.placeholder,
|
|
491
|
+
emptyRecordMsg: "",
|
|
492
|
+
onSelect: (selectedList, selectedItem) => {
|
|
493
|
+
this.setSelectedFieldValues(field, selectedList.join(";"));
|
|
494
|
+
if (_Globals.globals.parameters.debugging) console.log("field.selected_values->", field.selected_values);
|
|
495
|
+
},
|
|
496
|
+
onRemove: (selectedList, selectedItem) => {
|
|
497
|
+
this.setSelectedFieldValues(field, selectedList.join(";"));
|
|
498
|
+
if (_Globals.globals.parameters.debugging) console.log("field.selected_values->", field.selected_values);
|
|
499
|
+
},
|
|
500
|
+
disable: this.props.read_only,
|
|
501
|
+
singleSelect: true
|
|
502
|
+
}), this._error_label(field));
|
|
503
|
+
case "blob":
|
|
504
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("div", {
|
|
505
|
+
className: "col-md-10"
|
|
506
|
+
}, /*#__PURE__*/_react.default.createElement(_datasyncBlob.DsBlob, {
|
|
507
|
+
readOnly: this.props.read_only ? this.props.read_only : false,
|
|
508
|
+
Caption: `${this.getFieldPrompt(field)} ...`,
|
|
509
|
+
data: field.value,
|
|
510
|
+
uploadPicture: UploadFile => {
|
|
511
|
+
field.value = UploadFile.data;
|
|
512
|
+
this.checkValidation(field);
|
|
513
|
+
},
|
|
514
|
+
pictureStyle: "pic",
|
|
515
|
+
buttonStyle: "btn btn-secondary"
|
|
516
|
+
}), this._error_label(field)));
|
|
517
|
+
case "email":
|
|
518
|
+
return this._email_field(field);
|
|
519
|
+
case "text":
|
|
520
|
+
return this._text_field(field);
|
|
521
|
+
case "memo":
|
|
522
|
+
return this._memo_field(field);
|
|
523
|
+
case "combo":
|
|
524
|
+
case "radio":
|
|
525
|
+
return this._combo_field(field);
|
|
526
|
+
case "multi":
|
|
527
|
+
return this._multi_field(field);
|
|
528
|
+
case "numeric":
|
|
529
|
+
return this._numeric_field_with_add_on(field, "*");
|
|
530
|
+
case "amount":
|
|
531
|
+
return this._numeric_field_with_add_on(field, "fa-euro");
|
|
532
|
+
case "percent":
|
|
533
|
+
return this._numeric_field_with_add_on(field, "%");
|
|
534
|
+
case "captcha":
|
|
535
|
+
return this._captcha_field(field);
|
|
536
|
+
default:
|
|
537
|
+
console.log("alert à Malibu");
|
|
538
|
+
}
|
|
539
|
+
};
|
|
540
|
+
render = () => {
|
|
541
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _Globals.globals.parameters.cookie_debugging && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Cookies Debugging"), /*#__PURE__*/_react.default.createElement(_reactstrap.Row, null, !(0, _Globals.getConnectedUser)() && /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
542
|
+
onClick: () => {
|
|
543
|
+
alert("getCookies()");
|
|
544
|
+
(0, _Globals.getCookies)();
|
|
545
|
+
}
|
|
546
|
+
}, "Get cookies")), /*#__PURE__*/_react.default.createElement(_reactstrap.Row, null, !(0, _Globals.getConnectedUser)() && /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
547
|
+
onClick: () => {
|
|
548
|
+
alert("getCookies()");
|
|
549
|
+
console.log("getCookies() ->", (0, _Globals.getCookies)());
|
|
550
|
+
}
|
|
551
|
+
}, "Log Get cookies")), /*#__PURE__*/_react.default.createElement(_reactstrap.Row, null, !(0, _Globals.getConnectedUser)() && /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
552
|
+
onClick: () => {
|
|
553
|
+
alert("getCookies().current_user.data_guid->" + (0, _Globals.getCookies)().current_user.data_guid);
|
|
554
|
+
}
|
|
555
|
+
}, "Get cookies().current_user.data_guid"))), !this.state.form && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Form loading...")), /*#__PURE__*/_react.default.createElement("div", null, this.state.form && this.state.form.Rows && this.state.form.Rows.map(row => {
|
|
556
|
+
return this._rowRendering(row);
|
|
557
|
+
})), /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
|
|
558
|
+
className: "buttons-row"
|
|
559
|
+
}, !this.props.read_only && /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
|
|
560
|
+
md: "4",
|
|
561
|
+
sm: "4"
|
|
562
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
563
|
+
block: true,
|
|
564
|
+
className: "btn-round",
|
|
565
|
+
color: "danger",
|
|
566
|
+
outline: true,
|
|
567
|
+
type: "reset",
|
|
568
|
+
onClick: () => {
|
|
569
|
+
this.clearForm();
|
|
570
|
+
}
|
|
571
|
+
}, "Annuler")), !this.props.read_only && /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
|
|
572
|
+
md: "4",
|
|
573
|
+
sm: "4"
|
|
574
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
575
|
+
block: true,
|
|
576
|
+
className: "btn-round",
|
|
577
|
+
color: "primary",
|
|
578
|
+
outline: true,
|
|
579
|
+
type: "submit",
|
|
580
|
+
onClick: e => {
|
|
581
|
+
this.onClickSubmitFormHandler();
|
|
582
|
+
}
|
|
583
|
+
}, "Soumettre"), this.props.sticky_button && !this.props.read_only && /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
584
|
+
block: true,
|
|
585
|
+
className: "btn-sticky",
|
|
586
|
+
color: "primary",
|
|
587
|
+
outline: true,
|
|
588
|
+
type: "submit",
|
|
589
|
+
onClick: e => {
|
|
590
|
+
this.onClickSubmitFormHandler();
|
|
591
|
+
}
|
|
592
|
+
}, "Ok")), this.props.custom_button_caption && /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
|
|
593
|
+
md: "4",
|
|
594
|
+
sm: "4"
|
|
595
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
596
|
+
block: true,
|
|
597
|
+
className: "btn-round",
|
|
598
|
+
color: "primary",
|
|
599
|
+
type: "submit",
|
|
600
|
+
onClick: e => {
|
|
601
|
+
if (this.props.custom_button_handler) this.props.custom_button_handler(this.state.form);else console.error("custom_button_handler unset !");
|
|
602
|
+
}
|
|
603
|
+
}, this.props.custom_button_caption)), this.props.custom_button_caption2 && /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
|
|
604
|
+
md: "4",
|
|
605
|
+
sm: "4"
|
|
606
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
|
|
607
|
+
block: true,
|
|
608
|
+
className: "btn-round",
|
|
609
|
+
color: "primary",
|
|
610
|
+
type: "submit",
|
|
611
|
+
onClick: e => {
|
|
612
|
+
if (this.props.custom_button_handler2) this.props.custom_button_handler2(this.state.form);else console.error("custom_button_handler2 unset !");
|
|
613
|
+
}
|
|
614
|
+
}, this.props.custom_button_caption2))));
|
|
615
|
+
};
|
|
616
|
+
}
|
|
617
|
+
var _default = exports.default = DynamicFormContact;
|