datasync-dynamic-form 1.0.27 → 1.0.28

package/dist/components/DsDynamicForm.js

@@ -15,6 +15,8 @@ var _multiselectReactDropdown = _interopRequireDefault(require("multiselect-reac
 var _datasyncCore = require("datasync-core");
 var _datasyncCommonLibrary = require("datasync-common-library");
 var _datasyncBlob = require("datasync-blob");
+var _reactDatepicker = _interopRequireWildcard(require("react-datepicker"));
+require("react-datepicker/dist/react-datepicker.css");
 var _reactstrap = require("reactstrap");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -105,24 +107,24 @@ class DsDynamicForm extends _react.Component {
     //Ensure props.foreign_keys is a json object - PMAB on 2025-04-10
     if (this.props.foreign_keys && typeof this.props.foreign_keys !== "object") throw new Error("foreign_keys must be a json object !");
     this.local_data_blob.data_tier = Object.assign(this.props.foreign_keys ? this.props.foreign_keys : {}, duplicate_data_tier);
-    console.log("28:this.local_data_blob.data_tier ->", this.local_data_blob.data_tier);
-    console.log("28:this.props.data_blob.data_tier ->", this.props.data_blob && this.props.data_blob.data_tier ? this.props.data_blob.data_tier : "props data_blob not set");
+    console.log("this.local_data_blob.data_tier ->", this.local_data_blob.data_tier);
+    console.log("this.props.data_blob.data_tier ->", this.props.data_blob && this.props.data_blob.data_tier ? this.props.data_blob.data_tier : "props data_blob not set");
   };
-  getFieldData = pFieldObject => {
+  getFieldData = fieldName => {
     /** Return data value form field object */
-    let nextFieldData = this.local_data_blob.data_tier[pFieldObject.name] ? this.local_data_blob.data_tier[pFieldObject.name] : "";
-    if (globals.parameters.debugging) console.log("01:getFieldData[", pFieldObject.name, "] nextFieldData->", nextFieldData);
+    let nextFieldData = this.local_data_blob.data_tier[fieldName] ? this.local_data_blob.data_tier[fieldName] : "";
+    if (globals.parameters.debugging) console.log("getFieldData[", fieldName, "] nextFieldData->", nextFieldData);
     return nextFieldData;
   };
-  setFieldData = (pFieldObject, value) => {
-    this.local_data_blob.data_tier[pFieldObject.name] = value;
+  setFieldData = (fieldName, value) => {
+    this.local_data_blob.data_tier[fieldName] = value;
 
-    //onFormChange handler return current form value to caller - PMAB onn 2025-02-03
+    //onFormChange handler return current form value to caller - PMAB on 2025-02-03
     if (this.props.onFormChange) this.props.onFormChange(this.local_data_blob.data_tier);
     if (globals.parameters.debugging) {
-      console.log("01:setFieldData[", pFieldObject.name, "] value->", value);
-      console.log("01:setFieldData[", pFieldObject.name, "] this.local_data_blob.data_tier ->", this.local_data_blob.data_tier);
-      console.log("01:setFieldData[", pFieldObject.name, "] this.data_blob ->", this.local_data_blob);
+      console.log("setFieldData[", fieldName, "] value->", value);
+      console.log("setFieldData[", fieldName, "] this.local_data_blob.data_tier ->", this.local_data_blob.data_tier);
+      console.log("setFieldData[", fieldName, "] this.data_blob ->", this.local_data_blob);
     }
   };
   getSelectedFieldValues_V1 = pFieldObject => {
@@ -184,7 +186,7 @@ class DsDynamicForm extends _react.Component {
     }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
       readOnly: this.props.read_only ? this.props.read_only : false,
       type: field.input_type,
-      value: this.getFieldData(field),
+      value: this.getFieldData(field.name),
       placeholder: field.placeholder,
       autocomplete: "on",
       id: field.name,
@@ -208,7 +210,7 @@ class DsDynamicForm extends _react.Component {
     }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
       readOnly: this.props.read_only ? this.props.read_only : false,
       type: field.input_type,
-      value: this.getFieldData(field),
+      value: this.getFieldData(field.name),
       placeholder: field.placeholder,
       autocomplete: "on",
       id: field.name,
@@ -226,7 +228,7 @@ class DsDynamicForm extends _react.Component {
     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),
+      value: this.getFieldData(field.name),
       placeholder: field.placeholder,
       autocomplete: "off",
       onChange: e => {
@@ -242,7 +244,7 @@ class DsDynamicForm extends _react.Component {
     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),
+      value: this.getFieldData(field.name),
       placeholder: field.placeholder,
       pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$",
       autocomplete: "on",
@@ -262,7 +264,7 @@ class DsDynamicForm extends _react.Component {
       className: "form-control",
       readOnly: this.props.read_only ? this.props.read_only : false,
       type: field.input_type,
-      value: this.getFieldData(field),
+      value: this.getFieldData(field.name),
       placeholder: field.placeholder,
       rows: field.rows,
       onChange: e => {
@@ -280,14 +282,14 @@ class DsDynamicForm extends _react.Component {
       options: field.combo_list,
       isObject: false,
       displayValue: "key",
-      selectedValues: this.getFieldData(field) ? this.getFieldData(field).split(";") : [],
+      selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name.name).split(";") : [],
       placeholder: field.placeholder,
       emptyRecordMsg: "",
       onSelect: (selectedList, selectedItem) => {
-        this.setFieldData(field, selectedList.join(";"));
+        this.setFieldData(field.name, selectedList.join(";"));
       },
       onRemove: (selectedList, selectedItem) => {
-        this.setFieldData(field, selectedList.join(";"));
+        this.setFieldData(field.name, selectedList.join(";"));
       },
       disable: this.props.read_only,
       singleSelect: true
@@ -299,19 +301,110 @@ class DsDynamicForm extends _react.Component {
       options: field.combo_list,
       isObject: false,
       displayValue: "key",
-      selectedValues: this.getFieldData(field) ? this.getFieldData(field).split(";") : [],
+      selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [],
       placeholder: field.placeholder,
       emptyRecordMsg: "",
       onSelect: (selectedList, selectedItem) => {
-        this.setFieldData(field, selectedList.join(";"));
+        this.setFieldData(field.name, selectedList.join(";"));
       },
       onRemove: (selectedList, selectedItem) => {
-        this.setFieldData(field, selectedList.join(";"));
+        this.setFieldData(field.name, selectedList.join(";"));
       },
       disable: this.props.read_only,
       singleSelect: false
     }), this._error_label(field));
   };
+  _date_field = field => {
+    return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(_reactDatepicker.default
+    //locale="fr"
+    , {
+      value: this.getFieldData(field.name),
+      placeholder: "dd-mm-yyyy",
+      onChange: p_oDate => {
+        this.handle_date_picker({
+          selection: p_oDate,
+          fieldObject: field
+        });
+      }
+    }), this._error_label(field));
+  };
+  _time_field = field => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "time-div"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "time-hour-div"
+    }, /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
+      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,
+          name: field.name,
+          sub_name: "__hour",
+          value: selectedList.join(";")
+        });
+      },
+      onRemove: (selectedList, selectedItem) => {
+        this.handle_time_picker({
+          fieldObject: field,
+          name: field.name,
+          sub_name: "__hour",
+          value: selectedList.join(";")
+        });
+      },
+      disable: this.props.read_only,
+      singleSelect: true
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "time-min-div"
+    }, /*#__PURE__*/_react.default.createElement(_multiselectReactDropdown.default, {
+      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,
+          name: field.name,
+          sub_name: "__min",
+          value: selectedList.join(";")
+        });
+      },
+      onRemove: (selectedList, selectedItem) => {
+        this.handle_time_picker({
+          fieldObject: field,
+          name: field.name,
+          sub_name: "__min",
+          value: selectedList.join(";")
+        });
+      },
+      disable: this.props.read_only,
+      singleSelect: true
+    })), this._error_label(field));
+  };
+  _time_field_DISABLED = field => {
+    return /*#__PURE__*/_react.default.createElement("div", null, this.getFieldLabelTitle(field), /*#__PURE__*/_react.default.createElement(TimePickerPackage, {
+      hour_title: "heure",
+      hour_placeholder: "heure",
+      minutes_title: "minutes",
+      minutes_placeholder: "minutes",
+      required: false,
+      onChange: timeValuePack => {
+        console.log("valuepack in EventForm ==>", timeValuePack);
+        this.setState({
+          hour: timeValuePack.hour,
+          minutes: timeValuePack.minutes
+        });
+      }
+    }), this._error_label(field));
+  };
   saveFormToDatasyncProcess = () => {
     //Everything sounds ok in Form, Go ahead
     let hasDataGuid = this.props.datasync_object && this.props.datasync_object.data_guid;
@@ -395,7 +488,7 @@ class DsDynamicForm extends _react.Component {
     /** Get field properties */
     let min = pFieldObject.min_length;
     let max = pFieldObject.max_length;
-    let fieldValue = this.getFieldData(pFieldObject);
+    let fieldValue = this.getFieldData(pFieldObject.name);
     console.log("d3t3:checkValidation fieldValue->", fieldValue);
     let errorsFieldName = `err_${fieldName}`; /** Error data displayed in dedicated error label, beside input field in Form */
     let nextErrors = [];
@@ -414,6 +507,11 @@ class DsDynamicForm extends _react.Component {
     if (pFieldObject.input_type.toLowerCase() == "email") {
       if (!fieldValue.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) nextErrors.push(`Format de mail incorrect !`);
     }
+
+    //Date check
+    if (pFieldObject.input_type.toLowerCase() == "date") {
+      if (!fieldValue.match(/^(\d{2}\/\d{2}\/\d{4})$/i)) nextErrors.push(`Format de date 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))
@@ -446,7 +544,7 @@ class DsDynamicForm extends _react.Component {
   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);
+    this.setFieldData(eventObject.fieldObject.name, eventObject.event.target.value);
 
     //Validate field
     this.checkValidation(eventObject.fieldObject);
@@ -454,12 +552,61 @@ class DsDynamicForm extends _react.Component {
   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 (eventObject.event.target.value.length == 0 || !isNaN(eventObject.event.target.value) && !isNaN(parseFloat(eventObject.event.target.value))) this.setFieldData(eventObject.fieldObject.name, eventObject.event.target.value);else {
       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)}`);
+    if (globals.parameters.debugging) console.log(`#${eventObject.fieldObject.name} => ${this.getFieldData(eventObject.fieldObject.name)}`);
+    this.checkValidation(eventObject.fieldObject);
+  };
+  convertDate = p_o_day_month_year => {
+    function pad(s) {
+      return s < 10 ? '0' + s : s;
+    }
+    return {
+      asString: [pad(p_o_day_month_year.day), pad(p_o_day_month_year.month), p_o_day_month_year.year].join('/'),
+      asDate: {
+        day: p_o_day_month_year.day,
+        month: p_o_day_month_year.month,
+        year: p_o_day_month_year.year
+      }
+    };
+  };
+  handle_date_picker = eventObject => {
+    let p_oDate = eventObject.selection;
+    //Convert date picker string as day month year object
+    let dateConvertedObject = this.convertDate({
+      day: p_oDate.getDate(),
+      month: 1 + p_oDate.getMonth(),
+      year: p_oDate.getFullYear()
+    });
+    if (globals.parameters.debugging) {
+      console.log("p_oDate =>", p_oDate);
+      console.log("dateConvertedObject =>", dateConvertedObject);
+      console.log("dateConvertedObject.asString =>", dateConvertedObject.asString);
+    }
+    this.setFieldData(eventObject.fieldObject.name, dateConvertedObject.asString);
+    this.setFieldData(eventObject.fieldObject.name + "__day", dateConvertedObject.asDate.day);
+    this.setFieldData(eventObject.fieldObject.name + "__month", dateConvertedObject.asDate.month);
+    this.setFieldData(eventObject.fieldObject.name + "__year", dateConvertedObject.asDate.year);
+
+    //Validate field
+    this.checkValidation(eventObject.fieldObject);
+  };
+  handle_time_picker = eventObject => {
+    //Set hour or min
+    this.setFieldData(eventObject.name + eventObject.sub_name, eventObject.value);
+    //update fulll time field
+    this.setFieldData(eventObject.name, this.getFieldData(eventObject.name + "__hour") + ":" + this.getFieldData(eventObject.name + "__min"));
+    if (true) {
+      console.clear();
+      console.log("__hour ->", this.getFieldData(eventObject.name + "__hour"));
+      console.log("__min ->", this.getFieldData(eventObject.name + "__min"));
+      console.log(eventObject.name, " ->", this.getFieldData(eventObject.name));
+    }
+
+    //Validate field
     this.checkValidation(eventObject.fieldObject);
   };
   _colRendering = col => {
@@ -488,7 +635,7 @@ class DsDynamicForm extends _react.Component {
   data_tier_migration = (field, ii) => {
     if (!this.props.data_blob) return; //Discard migration 
     return;
-    //data_tier_migration disbled
+    //data_tier_migration disabled
     console.log("09/07:data_tier_migration ### Migration check  !!!");
     console.log("09/07:this.data_blob.modified ->", this.local_data_blob && this.local_data_blob.modified ? this.local_data_blob.modified : "null");
     //Check if migration required
@@ -536,7 +683,7 @@ class DsDynamicForm extends _react.Component {
     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);
+    if (this.props.read_only && (this.getFieldData(field.name) == null || !this.getFieldData(field.name) || this.getFieldData(field.name).trim().length == 0)) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
 
     //Do not display hidden field
     if (field.hidden && !this.props.show_hidden) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
@@ -561,14 +708,14 @@ class DsDynamicForm extends _react.Component {
           options: ["Oui", "Non"],
           isObject: false,
           displayValue: "key",
-          selectedValues: this.getFieldData(field) ? this.getFieldData(field).split(";") : [],
+          selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [],
           placeholder: field.placeholder,
           emptyRecordMsg: "",
           onSelect: (selectedList, selectedItem) => {
-            this.setFieldData(field, selectedList.join(";"));
+            this.setFieldData(field.name, selectedList.join(";"));
           },
           onRemove: (selectedList, selectedItem) => {
-            this.setFieldData(field, selectedList.join(";"));
+            this.setFieldData(field.name, selectedList.join(";"));
           },
           disable: this.props.read_only,
           singleSelect: true
@@ -579,9 +726,9 @@ class DsDynamicForm extends _react.Component {
         }, /*#__PURE__*/_react.default.createElement(_datasyncBlob.DsBlob, {
           readOnly: this.props.read_only ? this.props.read_only : false,
           Caption: `${this.getFieldPrompt(field)} ...`,
-          data: this.getFieldData(field),
+          data: this.getFieldData(field.name),
           uploadPicture: UploadFile => {
-            this.setFieldData(field, UploadFile.data);
+            this.setFieldData(field.name, UploadFile.data);
             this.checkValidation(field);
           },
           pictureStyle: "pic",
@@ -603,6 +750,10 @@ class DsDynamicForm extends _react.Component {
         return this._combo_field(field);
       case "multi":
         return this._multi_field(field);
+      case "date":
+        return this._date_field(field);
+      case "time":
+        return this._time_field(field);
       case "numeric":
         return this._numeric_field_with_add_on(field, "*");
       case "amount":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datasync-dynamic-form",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "Datasync Dynamic Form component",
   "main": "./dist/components/DsDynamicForm",
   "types": "./dist/components/DsDynamicForm",
@@ -45,6 +45,8 @@
     "datasync-blob": "^1.0.2",
     "datasync-common-library": "^1.0.5",
     "datasync-core": "^1.0.28",
+    "datasync-dynamic-form": "^1.0.27",
+    "react-datepicker": "^8.3.0",
     "universal-cookie": "^7.2.2"
   }
 }