datasync-dynamic-form 1.0.1 → 1.0.3

package/dist/components/DsDynamicForm.js

@@ -0,0 +1,847 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DsDynamicForm = exports.CGUID = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _multiselectReactDropdown = _interopRequireDefault(require("multiselect-react-dropdown"));
+var _reactstrap = require("reactstrap");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+// react plugin that creates an input with badges
+{/** Blob must be defined as npm component
+                  <Blob
+ import Blob from "components/Blob/Blob";*/}
+
+//Defined as const import {saveDataTierToDatasync} from '../DataSync3/DataSync3.jsx'
+//2DO disabled import "./DynamicForm3Tiers2.css"
+
+// reactstrap components
+
+const debugging = true;
+const local = true;
+const production = !local;
+const globals = {
+  parameters: {
+    root_url: "/topics-page",
+    admin_url: "/authent",
+    debugging: debugging,
+    cookie_debugging: true,
+    master_detail_debugging: true,
+    local: true,
+    production: false,
+    use_navigate: false,
+    save_failed_alert: false,
+    form_version: "1.0",
+    form_modified_version: 2
+  },
+  home: {
+    ...(local && {
+      url: 'http://localhost:3000'
+    }),
+    ...(production && {
+      url: 'https://www.chainedeprieres.com'
+    })
+  },
+  datasync: {
+    /*DATASYNC*/
+    praychain_company_guid: local ? "36178327-E810-3A73-A833-8417F639295E" : "2EA619F2-2A23-7905-69C7-6ABA65BDF585",
+    praychain_time_table_guid: local ? "CA09A7FB-431C-29A6-A974-72E4F949EC81" : "566062CD-30F8-B1E2-DF80-6AB667F466C4",
+    invitation_table_guid: local ? "AE99F45B-9D22-D280-13DA-29B4860C7FEE" : "3F92D25C-4223-E5D2-8484-4880B6B83E9A",
+    praychain_contact_table_guid: local ? "E2AEE1AB-838F-A68A-355C-C1A912698002" : "0458D1BE-3E8D-049D-09FB-5A8E14F76A53",
+    praychain_authent_table_guid: local ? "B5A0C0AA-200F-B88B-67DE-355D222A6E52" : "21A2464D-B413-6A0C-0848-EDA45266DAC0",
+    praychain_user_table_guid: local ? "7841F7FF-1BF9-8716-7C66-BD8C5634E1F6" : "1D65037E-9A04-51EB-5CAE-06BCB7BE30AF",
+    praychain_topics_table_guid: local ? "E25E87B5-5E0C-7446-AF58-ECAE4301AE40" : "CE2A92BE-47A5-8AAE-7014-64FF5986A2BD",
+    /*  MAC local */
+    ...(local && {
+      syncTestUrl: "http://localhost:8888/datasync-service/test.php",
+      syncPushUrl: "http://localhost:8888/datasync-service/Sync.php",
+      syncPushSerializedUrl: "http://localhost:8888/datasync-service/Sync.php",
+      syncStartUrl: "http://localhost:8888/datasync-service/Sync.php?action=syncStart",
+      syncDeleteUrl: "http://localhost:8888/datasync-service/Sync.php?action=syncDelete",
+      syncSeekUrl: "http://localhost:8888/datasync-service/Sync.php?action=syncSeek",
+      syncStopUrl: "http://localhost:8888/datasync-service/Sync.php?action=syncStop",
+      syncPullUrl: "http://localhost:8888/datasync-service/Sync.php?action=syncPull",
+      syncPullSerializedUrl: "http://localhost:8888/datasync-service/Sync.php?action=syncPullSerialized",
+      syncMobilePullUrl: "http://localhost:8888/datasync-service/Sync.php?action=syncMobilePull",
+      syncPassThruUrl: "http://localhost:8888/datasync-service/Sync.php?action=syncPassThru"
+    }),
+    /* chainedeprieres.com Production Server */
+    ...(production && {
+      syncTestUrl: "https://rest.datasync.ovh/test.php",
+      syncPushUrl: "https://rest.datasync.ovh/Sync.php",
+      syncPushSerializedUrl: "https://rest.datasync.ovh/Sync.php",
+      syncStartUrl: "https://rest.datasync.ovh/Sync.php?action=syncStart",
+      syncDeleteUrl: "http://rest.datasync.ovh/Sync.php?action=syncDelete",
+      syncSeekUrl: "https://rest.datasync.ovh/Sync.php?action=syncSeek",
+      syncStopUrl: "https://rest.datasync.ovh/Sync.php?action=syncStop",
+      syncPullUrl: "https://rest.datasync.ovh/Sync.php?action=syncPull",
+      syncPullSerializedUrl: "https://rest.datasync.ovh/Sync.php?action=syncPullSerialized",
+      syncMobilePullUrl: "https://rest.datasync.ovh/Sync.php?action=syncMobilePull",
+      syncPassThruUrl: "https://rest.datasync.ovh/Sync.php?action=syncPassThru"
+    })
+  }
+};
+const randomize = (min, max) => {
+  return Math.floor(min + Math.random() * (max - min));
+};
+const cTimeStamp = () => {
+  let lDate = new Date();
+  let l_sTimeStamp = '';
+  l_sTimeStamp = 1900 + lDate.getYear();
+  l_sTimeStamp += '-';
+  l_sTimeStamp += ('0' + (lDate.getMonth() + 1)).slice(-2);
+  l_sTimeStamp += '-';
+  l_sTimeStamp += ('0' + lDate.getDate()).slice(-2);
+  l_sTimeStamp += ' ';
+  l_sTimeStamp += ('0' + lDate.getHours()).slice(-2);
+  l_sTimeStamp += ('0' + lDate.getMinutes()).slice(-2);
+  l_sTimeStamp += ('0' + lDate.getSeconds()).slice(-2);
+  return l_sTimeStamp;
+};
+
+/* Prototype 	: cGUID
+* Purpose 		: Generates a Global Unique ID
+* Return		  :	Return GUID
+* History   	: Created on 2015-02-06
+*
+**/
+const CGUID = () => {
+  let d = new Date().getTime();
+  let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = (d + Math.random() * 16) % 16 | 0;
+    d = Math.floor(d / 16);
+    return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
+  });
+  return uuid;
+};
+
+/**
+ * Write data_tier form to data blob
+ */
+exports.CGUID = CGUID;
+const saveDataTierToDatasync = async (p_data_guid, p_o_data_blob, p_s_company_guid, p_s_table_guid, p_dt_createstamp, p_dt_updatestamp, p_dt_deletestamp, on_save_handler, on_update_handler, on_failed_handler, p_extra_data) => {
+  if (globals.parameters.debugging_data_tier) console.log(`10/07:this.data_tier:${JSON.stringify(p_o_data_blob)}`);
+
+  //Post object using DataSyncLayer
+  //Copy datasync compliant object data from state structure
+  let formBlobObject = {
+    data_guid: p_data_guid ? p_data_guid : CGUID(),
+    data_blob: {
+      data_tier: p_o_data_blob.data_tier
+    }
+  };
+  if (p_dt_createstamp) {
+    formBlobObject.createstamp = p_dt_createstamp;
+  }
+  if (p_dt_updatestamp) {
+    formBlobObject.updatestamp = p_dt_updatestamp;
+  }
+  if (p_dt_deletestamp) {
+    formBlobObject.deletestamp = p_dt_deletestamp;
+  }
+  let l_o_datasync = Object.assign({}, formBlobObject);
+  if (globals.parameters.debugging) {
+    console.log("l_o_datasync to be stored => ", l_o_datasync);
+  }
+
+  //Set datasync container sytem properties values
+  //Set user custom data_blob properties values
+  l_o_datasync.data_blob.modified = globals.parameters.form_modified_version; //ReUse moidified flag as modified version
+  //and so on...
+
+  //Stringify whole datasync object one more time
+  let l_s_sync_object_stringified;
+  try {
+    l_s_sync_object_stringified = JSON.stringify(l_o_datasync).replace(/'/g, "'").replace(/\\n/g, '\\\\n');
+    if (globals.parameters.debugging) console.log(`l_s_sync_object_stringified succedeed :${l_s_sync_object_stringified}`);
+  } catch (err) {
+    console.error(`l_s_sync_object_stringified:${l_s_sync_object_stringified}`);
+    alert(`l_s_sync_object_stringified StringiFy failed with error:${err}`);
+  }
+
+  //Prepare datasync syncPush POST request
+  const POSTform = new FormData();
+  POSTform.append("action", "syncPushSerialized"); //
+  POSTform.append("company_guid", p_s_company_guid);
+  POSTform.append("table_guid", p_s_table_guid);
+  POSTform.append("data_sync", l_s_sync_object_stringified);
+
+  //SyncPush Data
+  fetch(`${globals.datasync.syncPushSerializedUrl}`, {
+    method: "POST",
+    body: POSTform
+  }).then(results => {
+    return results.text();
+  }).then(sync_server_response => {
+    let json_response = JSON.parse(sync_server_response);
+    if (globals.parameters.debugging) console.log("json_response ->", json_response);
+    if (json_response.data_blob) {
+      //Save succedeed
+      if (p_data_guid == null && on_save_handler) on_save_handler(json_response, p_extra_data);
+      //Update succedeed
+      if (p_data_guid != null && on_update_handler) on_update_handler(json_response, p_extra_data);
+
+      //debugging
+      if (globals.parameters.debugging) {
+        let data_blob = json_response.data_blob;
+        console.log("data_blob", data_blob);
+      }
+    } else {
+      //Save or update failed
+      console.error("DataSync::saveFormToDatasync => Save or update failed");
+      if (on_failed_handler) on_failed_handler("Internal DataSync save error", p_extra_data);
+    }
+  }).catch(err => {
+    alert(`Erreur de sauvegarde ${err}`);
+  });
+};
+const wScrollTo = pStargetAnchorId => {
+  let targetDomAnchor = document.getElementById(pStargetAnchorId);
+  if (targetDomAnchor) targetDomAnchor.scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+    inline: "nearest"
+  });else {
+    if (globals.parameters.debugging) {
+      console.log(`wScrollTo failed => ${pStargetAnchorId} not found in DOM !`);
+    }
+  }
+};
+class DsDynamicForm extends _react.Component {
+  constructor(props) {
+    super(props);
+    if (globals.parameters.debugging) {
+      console.log("30:DynamicForm3Tiers2::this.props.data_blob", this.props.data_blob);
+      console.log("30DynamicForm3Tiers::this.props.form", this.props.form);
+    }
+    this.state = {
+      form: {}
+    };
+    //this.data_blob = {data_tier:{}}
+    //2DO debug this.data_tier = (this.props.data_blob && this.props.data_blob.data_tier)?this.props.data_blob.data_tier:{}
+    this.data_blob = this.props.data_blob && this.props.data_blob.data_tier ? this.props.data_blob : {
+      data_tier: {}
+    };
+  }
+  componentDidMount = () => {
+    //Component initialization in edit mode
+    if (this.props.form) {
+      this.clearForm();
+    }
+  };
+  componentDidUpdate(prevProps) {
+    // Typical usage (don't forget to compare props):
+    if (this.props.form !== prevProps.form) {
+      //Lookup field props has changed
+      if (globals.parameters.debugging) console.log("09/07:componentDidUpdate -> props.form:has changed", this.props.form);
+      this.clearForm();
+    }
+    if (this.props.data_blob !== prevProps.data_blob) {
+      //Lookup field props has changed
+      if (globals.parameters.debugging) console.log("09/07:componentDidUpdate -> props.data_blob.data_tier:has changed", this.props.data_blob.data_tier);
+      this.clearForm();
+    }
+  }
+  clearForm = () => {
+    /** Duplicate props.form */
+    let clearObject2 = JSON.parse(JSON.stringify(this.props.form));
+
+    /** set data_tier with (props.foreign_keys + props.data_tier) */
+    if (this.props.data_blob) {
+      //Set internal data_tier component property
+      //OBSOLETE this.data_tier = this.props.data_blob.data_tier
+      if (globals.parameters.debugging) console.log("01:this.props.data_blob ->", this.props.data_blob);
+      clearObject2.data_tier = this.props.data_blob.data_tier;
+    } else {
+      if (globals.parameters.debugging) console.log("01:this.props.data_blob.data_tier unDefined");
+      clearObject2.data_tier = {}; //Set empty data_tier
+    }
+
+    /** Override data with foreign keys wne props.foreign_key is available */
+    if (this.props.foreign_keys) {
+      clearObject2.data_tier = Object.assign(clearObject2.data_tier, this.props.foreign_keys); //Dead code to be checked !!!
+      this.data_blob.data_tier = Object.assign(clearObject2.data_tier, this.props.foreign_keys); //Dead code to be checked !!!
+    }
+    if (globals.parameters.debugging) {
+      console.log("01:----- clearForm -----");
+      console.log("01:clearForm::this.props.form->", this.props.form);
+      console.log("01:clearForm::clearObject2 mixed with data_tier ->", clearObject2);
+      console.log("01:clearForm::internal this.data_blob ->", this.data_blob);
+    }
+    this.setState({
+      fieldError: [],
+      form: {},
+      captcha1: randomize(0, 5),
+      captcha2: randomize(0, 5)
+    },
+    //Clear forced
+    () => {
+      if (globals.parameters.debugging) console.log("09/07:DynamicForm3Tiers2 state cleansed 2:", this.state);
+      this.setState({
+        fieldError: [],
+        form: clearObject2
+      });
+    });
+  };
+  getFieldData = pFieldObject => {
+    /** Return data value form field object */
+    let nextFieldData = this.data_blob.data_tier[pFieldObject.name] ? this.data_blob.data_tier[pFieldObject.name] : "";
+    if (globals.parameters.debugging) console.log("01:getFieldData[", pFieldObject.name, "] nextFieldData->", nextFieldData);
+    return nextFieldData;
+  };
+  setFieldData = (pFieldObject, value) => {
+    this.data_blob.data_tier[pFieldObject.name] = value;
+    if (globals.parameters.debugging) console.log("01:setFieldData[", pFieldObject.name, "] value->", value);
+    console.log("01:setFieldData[", pFieldObject.name, "] this.data_blob.data_tier ->", this.data_blob.data_tier);
+    console.log("01:setFieldData[", pFieldObject.name, "] this.data_blob ->", this.data_blob);
+  };
+  getSelectedFieldValues_V1 = pFieldObject => {
+    return pFieldObject.selected_values ? pFieldObject.selected_values : "";
+  };
+  setFieldError = (pFieldObject, value) => {
+    try {
+      pFieldObject.err = value;
+      let nextFieldError = this.state.fieldError;
+      nextFieldError[pFieldObject.name] = value;
+      this.setState({
+        fieldError: nextFieldError
+      });
+      //Scroll form to first erroneous field
+      wScrollTo(pFieldObject.name);
+    } catch (e) {
+      console.log(`Error caught on ${e}`);
+    }
+  };
+  getFieldError = pFieldObject => {
+    /** Return data value form field object */
+    try {
+      return pFieldObject.err ? pFieldObject.err : "";
+    } catch (e) {
+      return "";
+    }
+  };
+  _error_label = field => {
+    return /*#__PURE__*/_react.default.createElement("label", {
+      className: "dynamic-form-error"
+    }, this.getfieldErrorLabel(field));
+  };
+  getfieldErrorLabel = pFieldObject => {
+    return this.getFieldError(pFieldObject);
+  };
+  getFieldLabelTitle = pFieldObject => {
+    return /*#__PURE__*/_react.default.createElement("h6", {
+      id: pFieldObject.name
+    }, pFieldObject.title ? pFieldObject.title : pFieldObject.placeholder, pFieldObject.required && !this.props.read_only && /*#__PURE__*/_react.default.createElement("span", {
+      className: "icon-danger"
+    }, "*"));
+  };
+  getCaptchaFieldLabelTitle = pFieldObject => {
+    return /*#__PURE__*/_react.default.createElement("h6", {
+      id: pFieldObject.name
+    }, `${this.state.captcha1} + ${this.state.captcha2}`, pFieldObject.required && /*#__PURE__*/_react.default.createElement("span", {
+      className: "icon-danger"
+    }, "*"));
+  };
+  getFieldData_V1 = pFieldObject => {
+    return pFieldObject.value ? pFieldObject.value : pFieldObject.default_value ? pFieldObject.default_value : "";
+  };
+  getFieldPrompt = pFieldObject => {
+    return pFieldObject.placeholder ? pFieldObject.placeholder : pFieldObject.title;
+  };
+  _numeric_field_with_add_on = (field, fa_symbol) => {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroup, {
+      className: "border-input"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      readOnly: this.props.read_only ? this.props.read_only : false,
+      type: field.input_type,
+      value: this.getFieldData(field),
+      placeholder: field.placeholder,
+      autocomplete: "on",
+      id: field.name,
+      name: field.name,
+      onChange: e => {
+        e.preventDefault();
+        this.dynamicInputNumericChangeHandler({
+          event: e,
+          fieldObject: field
+        });
+      }
+    }), fa_symbol && /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroupAddon, {
+      addonType: "append"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroupText, null, /*#__PURE__*/_react.default.createElement("i", {
+      className: `fa ${fa_symbol}`
+    })))), this._error_label(field));
+  };
+  _captcha_field = (field, fa_symbol) => {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getCaptchaFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.InputGroup, {
+      className: "border-input"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      readOnly: this.props.read_only ? this.props.read_only : false,
+      type: field.input_type,
+      value: this.getFieldData(field),
+      placeholder: field.placeholder,
+      autocomplete: "on",
+      id: field.name,
+      name: field.name,
+      onChange: e => {
+        e.preventDefault();
+        this.dynamicInputNumericChangeHandler({
+          event: e,
+          fieldObject: field
+        });
+      }
+    })), this._error_label(field));
+  };
+  _text_field = field => {
+    return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      readOnly: this.props.read_only ? this.props.read_only : false,
+      type: field.input_type,
+      value: this.getFieldData(field),
+      placeholder: field.placeholder,
+      autocomplete: "off",
+      onChange: e => {
+        e.preventDefault();
+        this.dynamicInputTextChangeHandler({
+          event: e,
+          fieldObject: field
+        });
+      }
+    }), this._error_label(field));
+  };
+  _email_field = field => {
+    return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      readOnly: this.props.read_only ? this.props.read_only : false,
+      type: field.input_type,
+      value: this.getFieldData(field),
+      placeholder: field.placeholder,
+      pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$",
+      autocomplete: "on",
+      id: field.name,
+      name: field.name,
+      onChange: e => {
+        e.preventDefault();
+        this.dynamicInputTextChangeHandler({
+          event: e,
+          fieldObject: field
+        });
+      }
+    }), this._error_label(field));
+  };
+  _memo_field = field => {
+    return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("textarea", {
+      className: "form-control",
+      readOnly: this.props.read_only ? this.props.read_only : false,
+      type: field.input_type,
+      value: this.getFieldData(field),
+      placeholder: field.placeholder,
+      rows: field.rows,
+      onChange: e => {
+        e.preventDefault();
+        this.dynamicInputTextChangeHandler({
+          event: e,
+          fieldObject: field
+        });
+      }
+    }), this._error_label(field));
+  };
+  _combo_field = field => {
+    return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
+      showArrow: true,
+      options: field.combo_list,
+      isObject: false,
+      displayValue: "key",
+      selectedValues: this.getFieldData(field) ? this.getFieldData(field).split(";") : [],
+      placeholder: field.placeholder,
+      emptyRecordMsg: "",
+      onSelect: (selectedList, selectedItem) => {
+        this.setFieldData(field, selectedList.join(";"));
+      },
+      onRemove: (selectedList, selectedItem) => {
+        this.setFieldData(field, selectedList.join(";"));
+      },
+      disable: this.props.read_only,
+      singleSelect: true
+    }), this._error_label(field));
+  };
+  _multi_field = field => {
+    return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
+      showArrow: true,
+      options: field.combo_list,
+      isObject: false,
+      displayValue: "key",
+      selectedValues: this.getFieldData(field) ? this.getFieldData(field).split(";") : [],
+      placeholder: field.placeholder,
+      emptyRecordMsg: "",
+      onSelect: (selectedList, selectedItem) => {
+        this.setFieldData(field, selectedList.join(";"));
+      },
+      onRemove: (selectedList, selectedItem) => {
+        this.setFieldData(field, selectedList.join(";"));
+      },
+      disable: this.props.read_only,
+      singleSelect: false
+    }), this._error_label(field));
+  };
+  saveFormToDatasyncProcess = () => {
+    //Everything sounds ok in Form, Go ahead
+    let hasDataGuid = this.props.datasync_object && this.props.datasync_object.data_guid;
+    saveDataTierToDatasync(hasDataGuid ? this.props.datasync_object.data_guid : null,
+    //data_guid
+    this.data_blob,
+    //p_o_data_blob,
+    this.props.company_guid,
+    //p_s_company_guid,
+    this.props.table_guid,
+    //p_s_table_guid,
+    hasDataGuid ? this.props.datasync_object.createstamp : cTimeStamp(),
+    //p_dt_createstamp,
+    hasDataGuid ? cTimeStamp() : null,
+    //p_dt_updatestamp,
+    null,
+    //p_dt_deletestamp,
+    this.onFormSavedLocalHandler, this.onFormUpdatedLocalHandler, this.onFormFailedLocalHandler, null);
+  };
+
+  /** Form Handlers */
+  onClickSubmitFormHandler = async event => {
+    if (event) event.preventDefault();
+
+    //Force all fields check    
+    let canSubmit = true;
+    let iRow = 0;
+    while (iRow < this.state.form.Rows.length && canSubmit) {
+      let iCol = 0;
+      while (iCol < this.state.form.Rows[iRow].Cols.length && canSubmit) {
+        let ii = 0;
+        while (ii < this.state.form.Rows[iRow].Cols[iCol].Fields.length && (canSubmit &= this.checkValidation(this.state.form.Rows[iRow].Cols[iCol].Fields[ii]))) {
+          if (globals.parameters.debugging) console.log(`Fields[${ii}]|${this.state.form.Rows[iRow].Cols[iCol].Fields[ii].name}| canSubmit=${canSubmit}`);
+          ii++;
+        }
+        iCol++;
+      }
+      iRow++;
+    }
+    if (globals.parameters.debugging) console.log("canSubmit:", canSubmit);
+    if (!canSubmit) {
+      let err_message = "Le formulaire comporte des erreurs !";
+      if (this.props.onFormFailed) this.props.onFormFailed(err_message);else alert(`${err_message}`);
+      return false;
+    }
+
+    //Invoke onFormSubmit props
+
+    if (this.props.onFormSubmit) {
+      if (globals.parameters.debugging) alert("onFormSubmit => filter log with AsyncDebug:: prefixe");
+      //If props function return false then cancel form submit and do not save !
+      this.props.onFormSubmit(this.data_blob, this.saveFormToDatasyncProcess);
+    } else {
+      //Call save anyway
+      this.saveFormToDatasyncProcess();
+    }
+
+    //this.saveFormToDatasync_OLD((this.props.datasync_object && this.props.datasync_object.data_guid)?this.props.datasync_object.data_guid:null);
+  };
+  onFormSavedLocalHandler = blob => {
+    if (this.props.onFormSaved) this.props.onFormSaved(blob);else console.error("DynamicForm3Tiers2.onFormSaved props is not defined !");
+    //clear form
+    if (this.props.clearOnSave) this.clearForm();
+    //Call onTerminated if set by user
+    if (this.props.onTerminated) this.props.onTerminated();
+  };
+  onFormUpdatedLocalHandler = blob => {
+    if (this.props.onFormUpdated) this.props.onFormUpdated(blob);else console.error("DynamicForm3Tiers2.onFormUpdated props is not defined !");
+    //clear form
+    if (this.props.clearOnUpdate) this.clearForm();
+    //Call onTerminated if set by user
+    if (this.props.onTerminated) this.props.onTerminated();
+  };
+  onFormFailedLocalHandler = err => {
+    if (this.props.onFormFailed) this.props.onFormFailed(err);else {
+      console.error("DynamicForm3Tiers2.onFormFailed props is not defined !");
+      alert("Erreur de sauvegarde !!!");
+    }
+  };
+  checkValidation = pFieldObject => {
+    let fieldName = pFieldObject.name;
+
+    /** Get field properties */
+    let min = pFieldObject.min_length;
+    let max = pFieldObject.max_length;
+    let fieldValue = this.getFieldData(pFieldObject);
+    console.log("d3t3:checkValidation fieldValue->", fieldValue);
+    let errorsFieldName = `err_${fieldName}`; /** Error data displayed in dedicated error label, beside input field in Form */
+    let nextErrors = [];
+    if (globals.parameters.debugging) console.log(`d3t:min:${min} - max:${max}`);
+
+    /** Check basic field validity except combo and radio */
+    if (pFieldObject.required && fieldValue.trim().length <= 0) nextErrors.push(`obligatoire`);
+    if (min > 0 && pFieldObject.required && fieldValue.trim().length < min) nextErrors.push(`trop court.`);
+
+    //Captcha check
+    if (pFieldObject.input_type.toLowerCase() == "captcha") {
+      if (parseInt(fieldValue) !== this.state.captcha1 + this.state.captcha2) nextErrors.push(`calcul faux !`);
+    }
+
+    //Email check
+    if (pFieldObject.input_type.toLowerCase() == "email") {
+      if (!fieldValue.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) nextErrors.push(`Format de mail incorrect !`);
+    }
+    if (max > 0 && fieldValue.trim().length > max) nextErrors.push(`trop long, ${fieldValue.trim().length - max} caractères en trop.`);
+    /* Special validation handlers
+    if (parseInt(this.state[fieldName]) !== (this.state.v1 + this.state.v2))
+        nextErrors.push(`calcul faux !`)*/
+
+    if (globals.parameters.debugging) {
+      console.log(`d3t:-----------------`);
+      console.log(`d3t:fieldName => ${fieldName}`);
+      console.log(`d3t:value => ${fieldValue}`);
+      console.log(`errorsFieldName => ${errorsFieldName}`);
+      console.log(`nextErrors => ${nextErrors}`);
+      console.log(`nextErrors.length => ${nextErrors.length}`);
+    }
+
+    //update error field
+    if (globals.parameters.debugging) {
+      console.log("nextFieldsErrorsArray=>", nextErrors);
+    }
+    this.setFieldError(pFieldObject, nextErrors.join("/"));
+    if (globals.parameters.debugging) {
+      console.log(`new fieldError : ${this.getFieldError(pFieldObject)}`);
+    }
+
+    //set change flag
+    //nextState.has_changed = true
+
+    //Return validation predicate
+    return nextErrors.length === 0; //returns true if no error occurs
+  };
+  dynamicInputTextChangeHandler = eventObject => {
+    if (eventObject && eventObject.event) eventObject.event.preventDefault();
+    if (globals.parameters.debugging) console.log(`d3t:dynamicInputTextChangeHandler eventObject -> `, eventObject);
+    this.setFieldData(eventObject.fieldObject, eventObject.event.target.value);
+
+    //Validate field
+    this.checkValidation(eventObject.fieldObject);
+  };
+  dynamicInputNumericChangeHandler = eventObject => {
+    if (eventObject && eventObject.event) eventObject.event.preventDefault();
+    if (globals.parameters.debugging) console.log(`d3t:dynamicInputNumericChangeHandler ${eventObject.fieldObject.name} Input field has changed`);
+    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 {
+      if (globals.parameters.debugging) console.log(`d3t:Value rejected -> ${eventObject.event.target.value}`);
+    }
+
+    //Validate field
+    if (globals.parameters.debugging) console.log(`#${eventObject.fieldObject.name} => ${this.getFieldData(eventObject.fieldObject)}`);
+    this.checkValidation(eventObject.fieldObject);
+  };
+  _colRendering = col => {
+    try {
+      return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, col.Fields.map((field, ii) => {
+        return this._fieldRendering(field, ii);
+      }));
+    } catch (err) {
+      return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, "Error ", err.message);
+    }
+  };
+  _rowRendering = row => {
+    try {
+      return /*#__PURE__*/_react.default.createElement(_reactstrap.Row, null, row.Cols.map((col, ii) => {
+        return this._colRendering(col);
+      }));
+    } catch (err) {
+      return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, "Error ", err.message);
+    }
+  };
+  migrate_field = (pFieldObject, migrated_value) => {
+    //Set data_tier property with former form value
+    this.data_blob.data_tier[pFieldObject.name] = migrated_value;
+    if (globals.parameters.debugging) console.log("09/07:migrate_field -> pFieldObject.name=", pFieldObject.name);
+  };
+  data_tier_migration = (field, ii) => {
+    if (!this.props.data_blob) return; //Discard migration 
+    return;
+    //data_tier_migration disbled
+    console.log("09/07:data_tier_migration ### Migration check  !!!");
+    console.log("09/07:this.data_blob.modified ->", this.data_blob && this.data_blob.modified ? this.data_blob.modified : "null");
+    //Check if migration required
+    if (this.data_blob && this.data_blob.modified && this.data_blob.modified < globals.parameters.form_modified_version) if (globals.parameters.debugging) console.log("09/07:field needs migration from version 1 to version 2");else {
+      if (globals.parameters.debugging) console.log("09/07:Field is up to date");
+      //Don't care migration process
+      return;
+    }
+    if (globals.parameters.debugging) {
+      console.log("09/07:data_tier_migration ->", field.input_type);
+    }
+    switch (field.input_type.toLowerCase()) {
+      /** Dynamic fields */
+      case "checkbox-DISABLED":
+      case "checkbox":
+      case "blob":
+      case "email":
+      case "text":
+      case "memo":
+      case "multi":
+      case "numeric":
+      case "amount":
+      case "percent":
+      case "captcha":
+      case "textarea":
+        //Migrate single field
+        if (globals.parameters.debugging) {
+          console.log("09/07:data_tier_migration single field ->", field.name);
+        }
+        this.migrate_field(field, this.getFieldData_V1(field));
+        break;
+      case "combo":
+      case "radio":
+        //Migrate selected field
+        if (globals.parameters.debugging) {
+          console.log("09/07:data_tier_migration selected field ->", field.name);
+        }
+        this.migrate_field(field, this.getSelectedFieldValues_V1(field));
+        break;
+      default:
+        alert("data_tier_migration --> Field type not supported ->" + field.input_type);
+    }
+  };
+  _fieldRendering = (field, ii) => {
+    console.log("09/07:_fieldRendering -> data_tier_migration call");
+    this.data_tier_migration(field, ii);
+    //Do not display field if empty in read only mode
+    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);
+
+    //Do not display hidden field
+    if (field.hidden && !this.props.show_hidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    switch (field.input_type.toLowerCase()) {
+      /** Dynamic fields */
+      case "checkbox-DISABLED":
+        return /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+          check: true
+        }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+          check: true
+        }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+          defaultValue: "",
+          type: "checkbox",
+          readOnly: this.props.read_only ? this.props.read_only : false
+        }), field.placeholder, /*#__PURE__*/_react.default.createElement("span", {
+          className: "form-check-sign"
+        })));
+      case "checkbox":
+        /* Checkbox is override with combobox */
+        return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
+          showArrow: true,
+          options: ["Oui", "Non"],
+          isObject: false,
+          displayValue: "key",
+          selectedValues: this.getFieldData(field) ? this.getFieldData(field).split(";") : [],
+          placeholder: field.placeholder,
+          emptyRecordMsg: "",
+          onSelect: (selectedList, selectedItem) => {
+            this.setFieldData(field, selectedList.join(";"));
+          },
+          onRemove: (selectedList, selectedItem) => {
+            this.setFieldData(field, selectedList.join(";"));
+          },
+          disable: this.props.read_only,
+          singleSelect: true
+        }), this._error_label(field));
+      case "blob":
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement("div", {
+          className: "col-md-10"
+        }, this._error_label(field)));
+      case "email":
+        return this._email_field(field);
+      case "text":
+        return this._text_field(field);
+      case "memo":
+        return this._memo_field(field);
+      case "combo":
+      case "radio":
+        return this._combo_field(field);
+      case "multi":
+        return this._multi_field(field);
+      case "numeric":
+        return this._numeric_field_with_add_on(field, "*");
+      case "amount":
+        return this._numeric_field_with_add_on(field, "fa-euro");
+      case "percent":
+        return this._numeric_field_with_add_on(field, "%");
+      case "captcha":
+        return this._captcha_field(field);
+      default:
+        console.log("alert à Malibu");
+    }
+  };
+  _cancelButton = () => {
+    let buttonIsHidden = this.props.read_only || this.props.buttons_options && this.props.buttons_options.cancel_button_hidden;
+    let buttonCaption = this.props.buttons_options && this.props.buttons_options.cancel_button_caption ? this.props.buttons_options.cancel_button_caption : "Annuler";
+    if (buttonIsHidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);else {
+      return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
+        md: "4",
+        sm: "4"
+      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+        block: true,
+        className: "btn-round",
+        color: "danger",
+        outline: true,
+        type: "reset",
+        onClick: () => {
+          this.clearForm();
+        }
+      }, buttonCaption));
+    }
+  };
+  _submitButton = () => {
+    let buttonIsHidden = this.props.read_only || this.props.buttons_options && this.props.buttons_options.submit_button_hidden;
+    let buttonCaption = this.props.buttons_options && this.props.buttons_options.submit_button_caption ? this.props.buttons_options.submit_button_caption : "Soumettre";
+    if (buttonIsHidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);else {
+      return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
+        md: "4",
+        sm: "4"
+      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+        block: true,
+        className: "btn-round",
+        color: "danger",
+        outline: true,
+        type: "submit",
+        onClick: () => {
+          this.onClickSubmitFormHandler();
+        }
+      }, buttonCaption));
+    }
+  };
+  render = () => {
+    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 => {
+      return this._rowRendering(row);
+    })), /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
+      className: "buttons-row"
+    }, this._cancelButton(), this._submitButton(), this.props.custom_button_caption && /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
+      md: "4",
+      sm: "4"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+      block: true,
+      className: "btn-round",
+      color: "primary",
+      type: "submit",
+      onClick: e => {
+        if (this.props.custom_button_handler) this.props.custom_button_handler(this.state.form);else console.error("custom_button_handler unset !");
+      }
+    }, this.props.custom_button_caption)), this.props.custom_button_caption2 && /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
+      md: "4",
+      sm: "4"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+      block: true,
+      className: "btn-round",
+      color: "primary",
+      type: "submit",
+      onClick: e => {
+        if (this.props.custom_button_handler2) this.props.custom_button_handler2(this.state.form);else console.error("custom_button_handler2 unset !");
+      }
+    }, this.props.custom_button_caption2))));
+  };
+}
+exports.DsDynamicForm = DsDynamicForm;
+;