datasync-dynamic-form 1.1.18 → 1.1.22

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 (6) hide show
  1. package/dist/DsDynamicForm.js +490 -0
  2. package/dist/index.js +1 -0
  3. package/dist/types/DsDynamicForm.d.ts +153 -0
  4. package/dist/types/index.d.ts +1 -0
  5. package/package.json +11 -21
  6. package/dist/components/DsDynamicForm.js +0 -818
package/dist/DsDynamicForm.js ADDED
@@ -0,0 +1,490 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
11
+ import { Component } from "react";
12
+ import Multiselect from 'multiselect-react-dropdown';
13
+ import { CTimeStamp, Randomize, SaveDataTierToDatasync, WScrollTo } from "datasync-core";
14
+ import { DsBlob } from "datasync-blob";
15
+ // reactstrap components
16
+ import { Button, Label, FormGroup, Input, InputGroupText, InputGroup, Row as ReactstrapRow, Col as ReactstrapCol, } from "reactstrap";
17
+ const debugging = true;
18
+ const local = true;
19
+ const production = !local;
20
+ const globals = {
21
+ parameters: {
22
+ debugging: debugging,
23
+ local: true,
24
+ production: false,
25
+ use_navigate: false,
26
+ save_failed_alert: false,
27
+ form_version: "1.0",
28
+ form_modified_version: 2
29
+ }
30
+ };
31
+ export class DsDynamicForm extends Component {
32
+ constructor(props) {
33
+ super(props);
34
+ this.componentDidMount = () => {
35
+ //Component initialization in edit mode
36
+ if (this.props.form) {
37
+ this.clearForm();
38
+ }
39
+ };
40
+ /**
41
+ * Prototype : clearForm
42
+ */
43
+ this.clearForm = () => {
44
+ this.setState({ fieldError: {}, form: { Rows: [] }, captcha1: Randomize(0, 5), captcha2: Randomize(0, 5) }, //Clear forced
45
+ () => {
46
+ this.setState({ form: this.props.form || { Rows: [] }, fieldError: {} }); //No need to override form property with clearObject2 anymore because data are written outside form.
47
+ });
48
+ //Real efficient fix
49
+ let duplicate_data_tier = (this.props.data_blob && this.props.data_blob.data_tier) ? JSON.parse(JSON.stringify(this.props.data_blob.data_tier)) : {};
50
+ //duplicate_data_tier = Object.assign(duplicate_data_tier, (this.props.data_blob && this.props.data_blob.data_tier)?this.props.data_blob.data_tier:{})
51
+ this.local_data_blob = { data_tier: {} };
52
+ //this.local_data_blob.data_tier = Object.assign({}, duplicate_data_tier);
53
+ //Ensure props.foreign_keys is a json object - PMAB on 2025-04-10
54
+ if (this.props.foreign_keys && typeof this.props.foreign_keys !== "object")
55
+ throw new Error("foreign_keys must be a json object !");
56
+ this.local_data_blob.data_tier = Object.assign(this.props.foreign_keys ? this.props.foreign_keys : {}, duplicate_data_tier);
57
+ if (globals.parameters.debugging)
58
+ console.log("clearForm->this.local_data_blob.data_tier =>", this.local_data_blob.data_tier);
59
+ };
60
+ this.getFieldData = (fieldName) => {
61
+ /** Return data value form field object */
62
+ let nextFieldData = this.local_data_blob.data_tier[fieldName] ? this.local_data_blob.data_tier[fieldName] : "";
63
+ return nextFieldData;
64
+ };
65
+ this.setFieldData = (fieldName, value) => {
66
+ try {
67
+ if (globals.parameters.debugging)
68
+ console.log("setFieldData:fieldName ->", fieldName, " value ->", value);
69
+ let duplicate_data_tier = JSON.parse(JSON.stringify(this.local_data_blob.data_tier));
70
+ duplicate_data_tier[fieldName] = value;
71
+ this.local_data_blob.data_tier = duplicate_data_tier;
72
+ //this.local_data_blob.data_tier[fieldName] = value
73
+ }
74
+ catch (error) {
75
+ alert(error);
76
+ }
77
+ //onFormChange handler return current form value to caller - PMAB on 2025-02-03
78
+ if (this.props.onFormChange)
79
+ this.props.onFormChange(this.local_data_blob.data_tier);
80
+ };
81
+ this.setFieldError = (pFieldObject, value) => {
82
+ try {
83
+ let nextFieldError = this.state.fieldError || {};
84
+ nextFieldError[pFieldObject.name] = value;
85
+ this.setState({ fieldError: nextFieldError });
86
+ //Scroll form to first erroneous field
87
+ WScrollTo(pFieldObject.name);
88
+ }
89
+ catch (e) {
90
+ console.error(`Error caught on ${e}`);
91
+ }
92
+ };
93
+ this.getFieldError = (pFieldObject) => {
94
+ /** Return data value form field object */
95
+ try {
96
+ if (globals.parameters.debugging)
97
+ console.log(`getFieldError(${JSON.stringify(pFieldObject)}) -> ${this.state.fieldError}`);
98
+ let dbg = (this.state.fieldError && this.state.fieldError[pFieldObject.name]) ? this.state.fieldError[pFieldObject.name] : "";
99
+ return `${dbg}`;
100
+ }
101
+ catch (e) {
102
+ console.error(`getFieldError raises -> ${e}`);
103
+ return (``);
104
+ }
105
+ };
106
+ this._error_label = (field) => {
107
+ return (_jsx("label", { className: "dynamic-form-error", children: this.getFieldError(field) }));
108
+ };
109
+ this.getFieldLabelTitle = (pFieldObject) => {
110
+ return (_jsxs("h6", { id: pFieldObject.name, children: [pFieldObject.title ? pFieldObject.title : pFieldObject.placeholder, (pFieldObject.required && !this.props.read_only) && _jsx("span", { className: "icon-danger", children: "*" })] }));
111
+ };
112
+ this.getCaptchaFieldLabelTitle = (pFieldObject) => {
113
+ return (_jsxs("h6", { id: pFieldObject.name, children: [`${this.state.captcha1} + ${this.state.captcha2}`, pFieldObject.required && _jsx("span", { className: "icon-danger", children: "*" })] }));
114
+ };
115
+ this.getFieldPrompt = (pFieldObject) => {
116
+ return (pFieldObject.placeholder ? pFieldObject.placeholder : pFieldObject.title || "");
117
+ };
118
+ this._numeric_field_with_add_on = (field, fa_symbol) => {
119
+ return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs(InputGroup, { className: "border-input", children: [_jsx(Input, { readOnly: this.props.read_only ? this.props.read_only : false, type: field.input_type, value: this.getFieldData(field.name), placeholder: field.placeholder, autoComplete: "on", id: field.name, name: field.name, onChange: (e) => {
120
+ e.preventDefault();
121
+ this.dynamicInputNumericChangeHandler({ event: e, fieldObject: field });
122
+ } }), fa_symbol &&
123
+ _jsx("div", { className: "input-group-append", children: _jsx(InputGroupText, { children: _jsx("i", { className: `fa ${fa_symbol}` }) }) })] }), this._error_label(field)] }));
124
+ };
125
+ this._captcha_field = (field, fa_symbol) => {
126
+ return (_jsxs(_Fragment, { children: [this.getCaptchaFieldLabelTitle(field), _jsx(InputGroup, { className: "border-input", children: _jsx(Input, { readOnly: this.props.read_only ? this.props.read_only : false, type: field.input_type, value: this.getFieldData(field.name), placeholder: field.placeholder, autoComplete: "on", id: field.name, name: field.name, onChange: (e) => {
127
+ e.preventDefault();
128
+ this.dynamicInputNumericChangeHandler({ event: e, fieldObject: field });
129
+ } }) }), this._error_label(field)] }));
130
+ };
131
+ this._text_field = (field) => {
132
+ return (_jsxs("div", { children: [this.getFieldLabelTitle(field), _jsx(Input, { readOnly: this.props.read_only ? this.props.read_only : false, type: field.input_type, value: this.getFieldData(field.name), placeholder: field.placeholder, autoComplete: "off", onChange: (e) => {
133
+ e.preventDefault();
134
+ this.dynamicInputTextChangeHandler({ event: e, fieldObject: field });
135
+ } }), this._error_label(field)] }));
136
+ };
137
+ this._email_field = (field) => {
138
+ return (_jsxs("div", { children: [this.getFieldLabelTitle(field), _jsx(Input, { readOnly: this.props.read_only ? this.props.read_only : false, type: field.input_type, value: this.getFieldData(field.name), placeholder: field.placeholder, pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$", autoComplete: "on", id: field.name, name: field.name, onChange: (e) => {
139
+ e.preventDefault();
140
+ this.dynamicInputTextChangeHandler({ event: e, fieldObject: field });
141
+ } }), this._error_label(field)] }));
142
+ };
143
+ this._memo_field = (field) => {
144
+ return (_jsxs("div", { children: [this.getFieldLabelTitle(field), _jsx("textarea", { className: "form-control", readOnly: this.props.read_only ? this.props.read_only : false, value: this.getFieldData(field.name), placeholder: field.placeholder, rows: field.rows, onChange: (e) => {
145
+ e.preventDefault();
146
+ this.dynamicInputTextChangeHandler({ event: e, fieldObject: field });
147
+ } }), this._error_label(field)] }));
148
+ };
149
+ this._combo_field = (field) => {
150
+ return (_jsxs("div", { children: [this.getFieldLabelTitle(field), _jsx(Multiselect, { showArrow: true, options: field.combo_list || [], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, onRemove: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, disable: this.props.read_only, singleSelect: true }), this._error_label(field)] }));
151
+ };
152
+ this._multi_field = (field) => {
153
+ return (_jsxs("div", { children: [this.getFieldLabelTitle(field), _jsx(Multiselect, { showArrow: true, options: field.combo_list || [], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, onRemove: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, disable: this.props.read_only, singleSelect: false }), this._error_label(field)] }));
154
+ };
155
+ this._date_field = (field) => {
156
+ return (_jsxs("div", { className: "date-div", children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "date-day-month-year-container-div", children: [_jsx("div", { className: "date-day-div", children: _jsx(Multiselect, { showArrow: true, options: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name_hour || "") ? this.getFieldData(field.name_hour || "").split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.handle_date_picker({ fieldObject: field, sub_field_name: field.name_day || "", value: selectedList.join(";") }); }, onRemove: (selectedList, selectedItem) => { this.handle_date_picker({ fieldObject: field, sub_field_name: field.name_day || "", value: selectedList.join(";") }); }, disable: this.props.read_only, singleSelect: true }) }), _jsx("div", { className: "date-month-div", children: _jsx(Multiselect, { showArrow: false, options: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name_min || "") ? this.getFieldData(field.name_min || "").split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.handle_date_picker({ fieldObject: field, sub_field_name: field.name_month || "", value: selectedList.join(";") }); }, onRemove: (selectedList, selectedItem) => { this.handle_date_picker({ fieldObject: field, sub_field_name: field.name_month || "", value: selectedList.join(";") }); }, disable: this.props.read_only, singleSelect: true }) }), _jsx("div", { className: "date-year-div", children: _jsx(Multiselect, { showArrow: false, options: ["2025", "2026", "2027", "2028", "2030"], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name_min || "") ? this.getFieldData(field.name_min || "").split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.handle_date_picker({ fieldObject: field, sub_field_name: field.name_year || "", value: selectedList.join(";") }); }, onRemove: (selectedList, selectedItem) => { this.handle_date_picker({ fieldObject: field, sub_field_name: field.name_year || "", value: selectedList.join(";") }); }, disable: this.props.read_only, singleSelect: true }) })] }), this._error_label(field)] }));
157
+ };
158
+ this._time_field = (field) => {
159
+ return (_jsxs("div", { className: "time-div", children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "time-hour-and-min-container-div", children: [_jsx("div", { className: "time-hour-div", children: _jsx(Multiselect, { showArrow: true, options: ["07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22"], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name_hour || "") ? this.getFieldData(field.name_hour || "").split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.handle_time_picker({ fieldObject: field, sub_field_name: field.name_hour || "", value: selectedList.join(";") }); }, onRemove: (selectedList, selectedItem) => { this.handle_time_picker({ fieldObject: field, sub_field_name: field.name_hour || "", value: selectedList.join(";") }); }, disable: this.props.read_only, singleSelect: true }) }), _jsx("div", { className: "time-min-div", children: _jsx(Multiselect, { showArrow: false, options: ["00", "15", "20", "25", "30", "35", "40", "45", "50", "55"], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name_min || "") ? this.getFieldData(field.name_min || "").split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.handle_time_picker({ fieldObject: field, sub_field_name: field.name_min || "", value: selectedList.join(";") }); }, onRemove: (selectedList, selectedItem) => { this.handle_time_picker({ fieldObject: field, sub_field_name: field.name_min || "", value: selectedList.join(";") }); }, disable: this.props.read_only, singleSelect: true }) })] }), this._error_label(field)] }));
160
+ };
161
+ this.saveFormToDatasyncProcess = () => {
162
+ //Everything sounds ok in Form, Go ahead
163
+ let hasDataGuid = (this.props.datasync_object && this.props.datasync_object.data_guid) ? true : false;
164
+ SaveDataTierToDatasync(this.props.datasync_url || "", hasDataGuid ? this.props.datasync_object.data_guid : null, //data_guid
165
+ this.local_data_blob, //p_o_data_blob,
166
+ this.props.company_guid || "", //p_s_company_guid,
167
+ this.props.table_guid || "", //p_s_table_guid,
168
+ hasDataGuid ? this.props.datasync_object.createstamp : CTimeStamp(), //p_dt_createstamp,
169
+ hasDataGuid ? CTimeStamp() : undefined, //p_dt_updatestamp,
170
+ undefined, //p_dt_deletestamp,
171
+ this.onFormSavedLocalHandler, this.onFormUpdatedLocalHandler, this.onFormFailedLocalHandler, null);
172
+ };
173
+ /** Form Handlers */
174
+ this.onClickSubmitFormHandler = (event) => __awaiter(this, void 0, void 0, function* () {
175
+ try {
176
+ if (event)
177
+ event.preventDefault();
178
+ //Force all fields check
179
+ let canSubmit = true;
180
+ let iRow = 0;
181
+ while ((iRow < this.state.form.Rows.length)
182
+ && (canSubmit)) {
183
+ let iCol = 0;
184
+ while ((iCol < this.state.form.Rows[iRow].Cols.length) && canSubmit) {
185
+ let ii = 0;
186
+ while ((ii < this.state.form.Rows[iRow].Cols[iCol].Fields.length)
187
+ && (canSubmit && (canSubmit = this.checkValidation(this.state.form.Rows[iRow].Cols[iCol].Fields[ii])))) {
188
+ ii++;
189
+ }
190
+ iCol++;
191
+ }
192
+ iRow++;
193
+ }
194
+ if (!canSubmit) {
195
+ let err_message = "Le formulaire comporte des erreurs !";
196
+ if (this.props.onFormFailed)
197
+ this.props.onFormFailed(err_message);
198
+ else
199
+ alert(`${err_message}`);
200
+ return false;
201
+ }
202
+ //Invoke onFormSubmit props
203
+ if (this.props.onFormSubmit) {
204
+ if (globals.parameters.debugging)
205
+ alert("onFormSubmit => filter log with AsyncDebug:: prefixe");
206
+ //If props function return false then cancel form submit and do not save !
207
+ this.props.onFormSubmit(this.local_data_blob);
208
+ }
209
+ else {
210
+ //Call save anyway
211
+ this.saveFormToDatasyncProcess();
212
+ }
213
+ return true;
214
+ }
215
+ catch (error) {
216
+ console.error(`onClickSubmitFormHandler raises "${error}"`);
217
+ return false;
218
+ }
219
+ });
220
+ this.onFormSavedLocalHandler = (blob) => {
221
+ if (this.props.onFormSaved)
222
+ this.props.onFormSaved(blob);
223
+ else
224
+ console.error("DynamicForm3Tiers2.onFormSaved props is not defined !");
225
+ //clear form
226
+ if (this.props.clearOnSave)
227
+ this.clearForm();
228
+ //Call onTerminated if set by user
229
+ if (this.props.onTerminated)
230
+ this.props.onTerminated();
231
+ };
232
+ this.onFormUpdatedLocalHandler = (blob) => {
233
+ try {
234
+ if (this.props.onFormUpdated)
235
+ this.props.onFormUpdated(blob);
236
+ else
237
+ console.error("DynamicForm3Tiers2.onFormUpdated props is not defined !");
238
+ //clear form
239
+ if (this.props.clearOnUpdate)
240
+ this.clearForm();
241
+ //Call onTerminated if set by user
242
+ if (this.props.onTerminated)
243
+ this.props.onTerminated();
244
+ }
245
+ catch (error) {
246
+ console.error(`onFormUpdatedLocalHandler raises "${error}"`);
247
+ }
248
+ };
249
+ this.onFormFailedLocalHandler = (err) => {
250
+ if (this.props.onFormFailed)
251
+ this.props.onFormFailed(err);
252
+ else {
253
+ console.error("DynamicForm3Tiers2.onFormFailed props is not defined !");
254
+ alert("Erreur de sauvegarde !!!");
255
+ }
256
+ };
257
+ this.checkValidation = (pFieldObject) => {
258
+ /** Get field properties */
259
+ let min = pFieldObject.min_length || 0;
260
+ let max = pFieldObject.max_length || 0;
261
+ let fieldValue = this.getFieldData(pFieldObject.name);
262
+ let nextErrors = [];
263
+ /** Check basic field validity except combo and radio */
264
+ if ((pFieldObject.required) && (fieldValue.trim().length <= 0))
265
+ nextErrors.push(`obligatoire`);
266
+ if ((min > 0) && (pFieldObject.required) && (fieldValue.trim().length < min))
267
+ nextErrors.push(`trop court.`);
268
+ //Captcha check
269
+ if (pFieldObject.input_type.toLowerCase() == "captcha") {
270
+ if (parseInt(fieldValue) !== ((this.state.captcha1 || 0) + (this.state.captcha2 || 0)))
271
+ nextErrors.push(`calcul faux !`);
272
+ }
273
+ //Email check
274
+ if (pFieldObject.input_type.toLowerCase() == "email") {
275
+ if (!fieldValue.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i))
276
+ nextErrors.push(`Format de mail incorrect !`);
277
+ }
278
+ //Date check
279
+ if (pFieldObject.input_type.toLowerCase() == "date") {
280
+ if (!fieldValue.match(/^(\d{2}\/\d{2}\/\d{4})$/i))
281
+ nextErrors.push(`Format de date incorrect !`);
282
+ }
283
+ if ((max > 0) && (fieldValue.trim().length > max))
284
+ nextErrors.push(`trop long, ${fieldValue.trim().length - max} caractères en trop.`);
285
+ if (globals.parameters.debugging) {
286
+ console.log(`pFieldObject.name->`, JSON.stringify(pFieldObject.name));
287
+ console.log(`nextErrors->`, JSON.stringify(nextErrors));
288
+ console.log(`-----------`);
289
+ }
290
+ //update error field
291
+ this.setFieldError(pFieldObject, nextErrors.join("/"));
292
+ //Return validation predicate
293
+ return (nextErrors.length === 0); //returns true if no error occurs
294
+ };
295
+ this.dynamicInputTextChangeHandler = (eventObject) => {
296
+ if (eventObject && eventObject.event)
297
+ eventObject.event.preventDefault();
298
+ this.setFieldData(eventObject.fieldObject.name, eventObject.event.target.value);
299
+ //Validate field
300
+ this.checkValidation(eventObject.fieldObject);
301
+ };
302
+ this.dynamicInputNumericChangeHandler = (eventObject) => {
303
+ if (eventObject && eventObject.event)
304
+ eventObject.event.preventDefault();
305
+ if (eventObject.event.target.value.length == 0 ||
306
+ !isNaN(Number(eventObject.event.target.value)) &&
307
+ !isNaN(parseFloat(eventObject.event.target.value)))
308
+ this.setFieldData(eventObject.fieldObject.name, eventObject.event.target.value);
309
+ else {
310
+ if (globals.parameters.debugging)
311
+ console.error(`Value rejected -> ${eventObject.event.target.value}`);
312
+ }
313
+ this.checkValidation(eventObject.fieldObject);
314
+ };
315
+ this.convertDate = (p_o_day_month_year) => {
316
+ function pad(s) { return (s < 10) ? '0' + s : s.toString(); }
317
+ return {
318
+ asString: [pad(p_o_day_month_year.day), pad(p_o_day_month_year.month), p_o_day_month_year.year].join('/'),
319
+ asDate: {
320
+ day: p_o_day_month_year.day,
321
+ month: p_o_day_month_year.month,
322
+ year: p_o_day_month_year.year
323
+ },
324
+ };
325
+ };
326
+ this.OLD_handle_date_picker = (eventObject) => {
327
+ let p_oDate = eventObject.selection;
328
+ //Convert date picker string as day month year object
329
+ let dateConvertedObject = this.convertDate({ day: p_oDate.getDate(), month: 1 + p_oDate.getMonth(), year: p_oDate.getFullYear() });
330
+ this.setFieldData(eventObject.fieldObject.name, dateConvertedObject.asString);
331
+ this.setFieldData(eventObject.fieldObject.name_day || "", dateConvertedObject.asDate.day.toString());
332
+ this.setFieldData(eventObject.fieldObject.name_month || "", dateConvertedObject.asDate.month.toString());
333
+ this.setFieldData(eventObject.fieldObject.name_year || "", dateConvertedObject.asDate.year.toString());
334
+ //Validate field
335
+ this.checkValidation(eventObject.fieldObject);
336
+ };
337
+ this.handle_date_picker = (eventObject) => {
338
+ //Set date
339
+ this.setFieldData(eventObject.sub_field_name, eventObject.value);
340
+ //update full date field
341
+ this.setFieldData(eventObject.fieldObject.name, this.getFieldData(eventObject.fieldObject.name_day || "")
342
+ + "/" + this.getFieldData(eventObject.fieldObject.name_month || "")
343
+ + "/" + this.getFieldData(eventObject.fieldObject.name_year || ""));
344
+ //Validate field
345
+ this.checkValidation(eventObject.fieldObject);
346
+ };
347
+ this.handle_time_picker = (eventObject) => {
348
+ //Set hour or min
349
+ this.setFieldData(eventObject.sub_field_name, eventObject.value);
350
+ //update fulll time field
351
+ this.setFieldData(eventObject.fieldObject.name, this.getFieldData(eventObject.fieldObject.name_hour || "") + ":" + this.getFieldData(eventObject.fieldObject.name_min || ""));
352
+ //Validate field
353
+ this.checkValidation(eventObject.fieldObject);
354
+ };
355
+ this._rowRendering = (row) => {
356
+ try {
357
+ return (_jsx(ReactstrapRow, { children: row.Cols.map((col, ii) => {
358
+ return (this._colRendering(col));
359
+ }) }));
360
+ }
361
+ catch (err) {
362
+ return (_jsxs(ReactstrapCol, { children: ["Error ", err.message] }));
363
+ }
364
+ };
365
+ this._colRendering = (col) => {
366
+ try {
367
+ return (_jsx(ReactstrapCol, { children: col.Fields.map((field, ii) => {
368
+ return this._fieldRendering(field, ii);
369
+ }) }));
370
+ }
371
+ catch (err) {
372
+ return (_jsxs(ReactstrapCol, { children: ["Error ", err.message] }));
373
+ }
374
+ };
375
+ this._fieldRendering = (field, ii) => {
376
+ try {
377
+ //Do not display field if empty in read only mode
378
+ if (this.props.read_only &&
379
+ ((this.getFieldData(field.name) == null) || (!this.getFieldData(field.name)) || (this.getFieldData(field.name).trim().length == 0)))
380
+ return (_jsx(_Fragment, {}));
381
+ //Do not display hidden field
382
+ if (field.hidden && !this.props.show_hidden)
383
+ return (_jsx(_Fragment, {}));
384
+ switch (field.input_type.toLowerCase()) {
385
+ /** Dynamic fields */
386
+ case "checkbox-DISABLED":
387
+ return (_jsx(FormGroup, { check: true, children: _jsxs(Label, { check: true, children: [_jsx(Input, { defaultValue: "", type: "checkbox", readOnly: this.props.read_only ? this.props.read_only : false }), field.placeholder, _jsx("span", { className: "form-check-sign" })] }) }));
388
+ case "checkbox":
389
+ /* Checkbox is override with combobox */
390
+ return (_jsxs("div", { children: [this.getFieldLabelTitle(field), _jsx(Multiselect, { showArrow: true, options: ["Oui", "Non"], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, onRemove: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, disable: this.props.read_only, singleSelect: true }), this._error_label(field)] }));
391
+ case "blob":
392
+ return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "col-md-10", children: [_jsx(DsBlob, { item_id: field.name, readOnly: this.props.read_only ? this.props.read_only : false, Caption: `${this.getFieldPrompt(field)} ...`, data: this.getFieldData(field.name), uploadPicture: (UploadFile) => { this.setFieldData(field.name, UploadFile.data); this.checkValidation(field); }, pictureStyle: "pic", buttonStyle: "btn btn-secondary", width: field.width ? field.width : undefined, height: field.height ? field.height : undefined, maxWidth: field.maxWidth ? field.maxWidth : undefined, maxHeight: field.maxHeight ? field.maxHeight : undefined, reduceImage: field.reduceImage ? field.reduceImage : undefined }), this._error_label(field)] })] }));
393
+ case "email":
394
+ return this._email_field(field);
395
+ case "text":
396
+ return this._text_field(field);
397
+ case "memo":
398
+ return this._memo_field(field);
399
+ case "combo":
400
+ case "radio":
401
+ return this._combo_field(field);
402
+ case "multi":
403
+ return this._multi_field(field);
404
+ case "date":
405
+ //set day month and year fields
406
+ if (!field.name_day)
407
+ field.name_day = "__day";
408
+ if (!field.name_month)
409
+ field.name_month = "__month";
410
+ if (!field.name_year)
411
+ field.name_year = "__year";
412
+ return this._date_field(field);
413
+ case "time":
414
+ //set day month and year fields
415
+ if (!field.name_hour)
416
+ field.name_hour = "__hour";
417
+ if (!field.name_min)
418
+ field.name_min = "__min";
419
+ return this._time_field(field);
420
+ case "numeric":
421
+ return this._numeric_field_with_add_on(field, "*");
422
+ case "amount":
423
+ return this._numeric_field_with_add_on(field, "fa-euro");
424
+ case "percent":
425
+ return this._numeric_field_with_add_on(field, "%");
426
+ case "captcha":
427
+ return this._captcha_field(field);
428
+ default:
429
+ console.error("alert incorrect field type");
430
+ return (_jsx(_Fragment, {}));
431
+ }
432
+ }
433
+ catch (error) {
434
+ console.error(`_fieldRendering raises "${error}"`);
435
+ return (_jsx(_Fragment, {}));
436
+ }
437
+ };
438
+ this._cancelButton = () => {
439
+ let buttonIsHidden = (this.props.read_only || (this.props.buttons_options && this.props.buttons_options.cancel_button_hidden)) ? true : false;
440
+ let buttonCaption = (this.props.buttons_options && this.props.buttons_options.cancel_button_caption) ? this.props.buttons_options.cancel_button_caption : "Annuler";
441
+ if (buttonIsHidden)
442
+ return (_jsx(_Fragment, {}));
443
+ else {
444
+ return (_jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { block: true, className: "btn-round", color: "danger", outline: true, type: "reset", onClick: () => { this.clearForm(); }, children: buttonCaption }) }));
445
+ }
446
+ };
447
+ this._submitButton = () => {
448
+ let buttonIsHidden = (this.props.read_only || (this.props.buttons_options && this.props.buttons_options.submit_button_hidden)) ? true : false;
449
+ let buttonCaption = (this.props.buttons_options && this.props.buttons_options.submit_button_caption) ? this.props.buttons_options.submit_button_caption : "Soumettre";
450
+ if (buttonIsHidden)
451
+ return (_jsx(_Fragment, {}));
452
+ else {
453
+ return (_jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { block: true, className: "btn-round", color: "danger", outline: true, type: "submit", onClick: () => { this.onClickSubmitFormHandler(); }, children: buttonCaption }) }));
454
+ }
455
+ };
456
+ this.render = () => {
457
+ return (_jsxs(_Fragment, { children: [!this.state.form &&
458
+ _jsx("div", { children: _jsx("h1", { children: "Form loading..." }) }), _jsx("form", { children: this.state.form &&
459
+ this.state.form.Rows &&
460
+ this.state.form.Rows.map(row => {
461
+ return (this._rowRendering(row));
462
+ }) }), _jsxs(ReactstrapRow, { className: "buttons-row", children: [this._cancelButton(), this._submitButton(), this.props.custom_button_caption &&
463
+ _jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler)
464
+ this.props.custom_button_handler(this.state.form);
465
+ else
466
+ console.error("custom_button_handler unset !"); }, children: this.props.custom_button_caption }) }), this.props.custom_button_caption2 &&
467
+ _jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler2)
468
+ this.props.custom_button_handler2(this.state.form);
469
+ else
470
+ console.error("custom_button_handler2 unset !"); }, children: this.props.custom_button_caption2 }) })] })] }));
471
+ };
472
+ if (globals.parameters.debugging) {
473
+ console.log("30:DynamicForm3Tiers2::this.props.data_blob", this.props.data_blob);
474
+ console.log("30DynamicForm3Tiers::this.props.form", this.props.form);
475
+ }
476
+ this.state = { form: { Rows: [] } };
477
+ this.local_data_blob = { data_tier: {} };
478
+ }
479
+ componentDidUpdate(prevProps) {
480
+ // Typical usage (don't forget to compare props):
481
+ if (this.props.form !== prevProps.form) {
482
+ //Lookup field props has changed
483
+ this.clearForm();
484
+ }
485
+ if (this.props.data_blob !== prevProps.data_blob) {
486
+ //Lookup field props has changed
487
+ this.clearForm();
488
+ }
489
+ }
490
+ }
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ export { DsDynamicForm } from './components/DsDynamicForm';
package/dist/types/DsDynamicForm.d.ts ADDED
@@ -0,0 +1,153 @@
1
+ import React, { Component, ChangeEvent } from "react";
2
+ interface Field {
3
+ name: string;
4
+ input_type: string;
5
+ placeholder?: string;
6
+ title?: string;
7
+ required?: boolean;
8
+ min_length?: number;
9
+ max_length?: number;
10
+ combo_list?: string[];
11
+ rows?: number;
12
+ hidden?: boolean;
13
+ width?: number;
14
+ height?: number;
15
+ maxWidth?: number;
16
+ maxHeight?: number;
17
+ reduceImage?: boolean;
18
+ name_day?: string;
19
+ name_month?: string;
20
+ name_year?: string;
21
+ name_hour?: string;
22
+ name_min?: string;
23
+ }
24
+ interface Col {
25
+ Fields: Field[];
26
+ }
27
+ interface Row {
28
+ Cols: Col[];
29
+ }
30
+ interface Form {
31
+ Rows: Row[];
32
+ }
33
+ interface DataTier {
34
+ [key: string]: any;
35
+ }
36
+ interface DataBlob {
37
+ data_tier: DataTier;
38
+ }
39
+ interface DatasyncObject {
40
+ data_guid: string;
41
+ createstamp: string;
42
+ }
43
+ interface ButtonsOptions {
44
+ cancel_button_hidden?: boolean;
45
+ cancel_button_caption?: string;
46
+ submit_button_hidden?: boolean;
47
+ submit_button_caption?: string;
48
+ }
49
+ interface EventObject {
50
+ event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;
51
+ fieldObject: Field;
52
+ }
53
+ interface DatePickerEventObject {
54
+ fieldObject: Field;
55
+ sub_field_name: string;
56
+ value: string;
57
+ }
58
+ interface TimePickerEventObject {
59
+ fieldObject: Field;
60
+ sub_field_name: string;
61
+ value: string;
62
+ }
63
+ interface DateObject {
64
+ day: number;
65
+ month: number;
66
+ year: number;
67
+ }
68
+ interface ConvertedDate {
69
+ asString: string;
70
+ asDate: DateObject;
71
+ }
72
+ interface DsDynamicFormProps {
73
+ data_blob?: DataBlob;
74
+ form?: Form;
75
+ read_only?: boolean;
76
+ foreign_keys?: DataTier;
77
+ onFormChange?: (data: DataTier) => void;
78
+ onFormSubmit?: (data: DataBlob) => void;
79
+ onFormSaved?: (blob: DataBlob) => void;
80
+ onFormUpdated?: (blob: DataBlob) => void;
81
+ onFormFailed?: (error: string) => void;
82
+ clearOnSave?: boolean;
83
+ clearOnUpdate?: boolean;
84
+ onTerminated?: () => void;
85
+ datasync_url?: string;
86
+ datasync_object?: DatasyncObject;
87
+ company_guid?: string;
88
+ table_guid?: string;
89
+ buttons_options?: ButtonsOptions;
90
+ custom_button_caption?: string;
91
+ custom_button_handler?: (form: Form) => void;
92
+ custom_button_caption2?: string;
93
+ custom_button_handler2?: (form: Form) => void;
94
+ show_hidden?: boolean;
95
+ }
96
+ interface DsDynamicFormState {
97
+ form: Form;
98
+ fieldError?: {
99
+ [key: string]: string;
100
+ };
101
+ captcha1?: number;
102
+ captcha2?: number;
103
+ }
104
+ export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynamicFormState> {
105
+ private local_data_blob;
106
+ constructor(props: DsDynamicFormProps);
107
+ componentDidMount: () => void;
108
+ componentDidUpdate(prevProps: DsDynamicFormProps): void;
109
+ /**
110
+ * Prototype : clearForm
111
+ */
112
+ clearForm: () => void;
113
+ getFieldData: (fieldName: string) => string;
114
+ setFieldData: (fieldName: string, value: string) => void;
115
+ setFieldError: (pFieldObject: Field, value: string) => void;
116
+ getFieldError: (pFieldObject: Field) => string;
117
+ _error_label: (field: Field) => JSX.Element;
118
+ getFieldLabelTitle: (pFieldObject: Field) => JSX.Element;
119
+ getCaptchaFieldLabelTitle: (pFieldObject: Field) => JSX.Element;
120
+ getFieldPrompt: (pFieldObject: Field) => string;
121
+ _numeric_field_with_add_on: (field: Field, fa_symbol: string) => JSX.Element;
122
+ _captcha_field: (field: Field, fa_symbol?: string) => JSX.Element;
123
+ _text_field: (field: Field) => JSX.Element;
124
+ _email_field: (field: Field) => JSX.Element;
125
+ _memo_field: (field: Field) => JSX.Element;
126
+ _combo_field: (field: Field) => JSX.Element;
127
+ _multi_field: (field: Field) => JSX.Element;
128
+ _date_field: (field: Field) => JSX.Element;
129
+ _time_field: (field: Field) => JSX.Element;
130
+ saveFormToDatasyncProcess: () => void;
131
+ /** Form Handlers */
132
+ onClickSubmitFormHandler: (event?: React.MouseEvent<HTMLButtonElement>) => Promise<boolean>;
133
+ onFormSavedLocalHandler: (blob: DataBlob) => void;
134
+ onFormUpdatedLocalHandler: (blob: DataBlob) => void;
135
+ onFormFailedLocalHandler: (err: string) => void;
136
+ checkValidation: (pFieldObject: Field) => boolean;
137
+ dynamicInputTextChangeHandler: (eventObject: EventObject) => void;
138
+ dynamicInputNumericChangeHandler: (eventObject: EventObject) => void;
139
+ convertDate: (p_o_day_month_year: DateObject) => ConvertedDate;
140
+ OLD_handle_date_picker: (eventObject: {
141
+ selection: Date;
142
+ fieldObject: Field;
143
+ }) => void;
144
+ handle_date_picker: (eventObject: DatePickerEventObject) => void;
145
+ handle_time_picker: (eventObject: TimePickerEventObject) => void;
146
+ _rowRendering: (row: Row) => JSX.Element;
147
+ _colRendering: (col: Col) => JSX.Element;
148
+ _fieldRendering: (field: Field, ii: number) => JSX.Element;
149
+ _cancelButton: () => JSX.Element;
150
+ _submitButton: () => JSX.Element;
151
+ render: () => JSX.Element;
152
+ }
153
+ export {};
package/dist/types/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { DsDynamicForm } from './components/DsDynamicForm';