@agilemotion/oui-react-js 1.8.17 → 1.8.19

package/dist/components/DataGrid.js

@@ -202,8 +202,8 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
         }
         return children;
       },
-      loadData: actionConfig => {
-        search(actionConfig);
+      loadData: (actionConfig, event) => {
+        search(actionConfig, event);
       },
       deleteSelectedRows: () => {
         // TODO : dispose from observer
@@ -398,6 +398,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
   }
   const search = function () {
     let actionConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    let event = arguments.length > 1 ? arguments[1] : undefined;
     let conf = config;
     if (_Utils.default.isNull(conf)) {
       conf = _Utils.default.parseConfig(props.config, props.viewId);
@@ -413,11 +414,13 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
         method({
           service: service,
           component: props.handle,
-          viewId: props.viewId
+          viewId: props.viewId,
+          event
         }).then(result => {
           processData(result, conf);
         }).catch(e => {
           console.error(e);
+          _Utils.default.publishErrorMessage(e, props.viewId);
         });
       } else {
         throw new Error('Unknown service type : ' + serviceType);

package/dist/components/StepperTitleBar.css

@@ -3,13 +3,27 @@
 .stepVisited {
 }
 
-.box, .dot {
+.box, .box-pending, .dot {
     border-radius: 100px;
-    display: inline-block;
     text-align: center;
-    font-size: 18px;
+    font-size: 14px;
     color: #888888;
     border: 1px solid #888888;
+    display: flex;
+    justify-content: center;
+}
+
+.box-pending {
+    border: unset;
+    border-right: 1px solid #888888;
+    border-top: 1px solid #888888;
+    border-bottom: 1px solid #888888;
+}
+
+.line {
+    border-top: 1px solid #888888;
+    width: 100%;
+    height: 1px;
 }
 
 .step .box,
@@ -32,15 +46,15 @@
 .dot {
     width: 30px;
     height: 30px;
+    font-size: 18px;
 }
 
 .stepActive .dot {
-    color: #ffffff;
+    color: #000000;
     border-color: #ffffff;
 }
 
 .stepVisited .dot {
-    color: #ffffff;
 }
 
 .leftLine,

package/dist/components/StepperTitleBar.js

@@ -14,8 +14,13 @@ require("./StepperTitleBar.css");
 var _jquery = _interopRequireDefault(require("jquery"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _styles.makeStyles)(theme => ({
-  theme: {
-    backgroundColor: theme.palette.secondary.main
+  primary: {
+    backgroundColor: theme.palette.primary.main,
+    border: '1px solid ' + theme.palette.primary.main
+  },
+  secondary: {
+    backgroundColor: theme.palette.secondary.main,
+    border: '1px solid ' + theme.palette.secondary.main
   },
   themeBorder: {
     borderColor: theme.palette.secondary.main
@@ -31,7 +36,11 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
   const classes = useStyles();
   _react.default.useEffect(() => {
     props.handle.api = api();
+    recalcLinePosition();
   });
+  _react.default.useLayoutEffect(() => {
+    recalcLinePosition();
+  }, []);
   _react.default.useEffect(() => {
     let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
     let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
@@ -90,46 +99,73 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
     return /*#__PURE__*/_react.default.createElement("div", {
       className: graphicsCounter === currentIndex.current ? `stepActive` : graphicsCounter < currentIndex.current ? 'stepVisited' : 'step'
     }, graphicsCounter > 0 ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (graphicsCounter <= currentIndex.current ? `${classes.themeBorder} ` : '') + 'leftLine' + (graphicsCounter === steps.length - 1 ? ' lastLine' : '')
+      className: (graphicsCounter <= currentIndex.current ? `${classes.themeBorder} ` : '') + '' + (graphicsCounter === steps.length - 1 ? ' lastLine' : '')
     }) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (graphicsCounter <= currentIndex.current ? `${classes.theme} box row` : 'box') + (graphicsCounter === 0 ? ' firstBox' : ''),
+      className: 'row flex' + (graphicsCounter === 0 ? ' firstBox' : ''),
       style: {
         marginLeft: 'unset',
-        marginRight: 'unset'
+        marginRight: 'unset',
+        width: '100%'
       },
       id: 'step-' + graphicsCounter
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: 'dot col-*-*'
-    }, step.index + 1), graphicsCounter === currentIndex.current ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `title col-*-*`,
-      id: "titleDiv"
-    }, step.title) : null), graphicsCounter < steps.length - 1 ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (graphicsCounter < currentIndex.current ? `${classes.themeBorder} ` : '') + 'rightLine' + (graphicsCounter === 0 ? ' firstLine' : '')
+      style: {
+        whiteSpace: "nowrap"
+      },
+      className: (graphicsCounter < currentIndex.current ? `${classes.secondary} box` : graphicsCounter === currentIndex.current ? `${classes.primary} box` : 'box-pending') + ' row no-margin no-padding'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'dot col-*-*',
+      style: {
+        color: graphicsCounter < currentIndex.current ? '#ffffff' : null
+      }
+    }, step.index + 1), graphicsCounter <= currentIndex.current ? /*#__PURE__*/_react.default.createElement("div", {
+      className: `col-*-*`,
+      id: "titleDiv",
+      style: {
+        alignContent: 'center',
+        color: graphicsCounter === currentIndex.current ? '#000000' : '#ffffff',
+        margin: '0 4px'
+      }
+    }, step.title) : /*#__PURE__*/_react.default.createElement("div", {
+      className: `col-*-*`,
+      id: "titleDiv",
+      style: {
+        alignContent: 'center',
+        color: '#888888',
+        margin: '0 4px'
+      }
+    }, step.title)), graphicsCounter < steps.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 1,
+        overflow: "hidden",
+        alignContent: 'center'
+      },
+      className: 'col-*-*'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'line'
+    }, "\xA0"))), graphicsCounter < steps.length - 1 ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (graphicsCounter < currentIndex.current ? `${classes.themeBorder} ` : '') + '' + (graphicsCounter === 0 ? ' firstLine' : '')
     }) : null, graphicsCounter++ ? null : null);
   }
   function render() {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "w-100",
       style: {
-        width: "100%"
-      }
-    }, /*#__PURE__*/_react.default.createElement("table", {
-      cellPadding: "0",
-      style: {
-        borderCollapse: "collapse",
-        width: "100%"
+        display: "flex",
+        width: "100%",
+        margin: "0 0 16px 0"
       }
-    }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, steps.map(step => /*#__PURE__*/_react.default.createElement("td", {
-      align: graphicsCounter === 0 ? 'left' : graphicsCounter === steps.length - 1 ? 'right' : 'center',
+    }, steps.map(step => /*#__PURE__*/_react.default.createElement("div", {
+      align: graphicsCounter === 0 ? "left" : graphicsCounter === steps.length - 1 ? "right" : "center",
       key: keyCounter++,
       style: {
         whiteSpace: "nowrap",
-        paddingTop: '8px',
-        maxHeight: '8px',
-        width: (graphicsCounter === currentIndex.current ? activeSegmentPercentage : 10) + '%'
+        paddingTop: "8px",
+        maxHeight: "8px",
+        width: 100 / steps.length + "%"
       },
-      id: 'step-container-' + counter++
-    }, renderStep(step)))))));
+      id: "step-container-" + counter++
+    }, renderStep(step))));
   }
   return /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({

package/dist/components/Toolbar.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 var _styles = require("@mui/styles");
-var _ToggleButtonGroup = _interopRequireDefault(require("@mui/lab/ToggleButtonGroup"));
+var _ToggleButtonGroup = _interopRequireDefault(require("@mui/material/ToggleButtonGroup"));
 var _MenuButton = _interopRequireDefault(require("./menu/MenuButton"));
 var _Button = _interopRequireDefault(require("./Button"));
 var _Utils = _interopRequireDefault(require("../Utils"));

package/dist/components/form/BaseField.js

@@ -33,18 +33,18 @@ const BaseField = props => {
   const ref = _react.default.useRef(null);
   const valid = _react.default.useRef(false);
   _react.default.useEffect(() => {
-    let value = valueObject[valueProperty];
+    let boundValue = valueObject[valueProperty];
     if (props.config.fieldType === 'SELECT' || props.config.fieldType === 'LOOKUP') {
-      if (!value || _Utils.default.isNull(value.id)) {
+      if (!boundValue || _Utils.default.isNull(boundValue.id)) {
         setValue(null);
         valueRef.current = null;
       } else {
-        setValue(value);
-        valueRef.current = value;
+        setValue(boundValue);
+        valueRef.current = boundValue;
       }
     } else {
-      setValue(value);
-      valueRef.current = value;
+      setValue(boundValue);
+      valueRef.current = boundValue;
     }
   }, [valueObject[valueProperty]]);
 

package/dist/components/form/CurrencyField.js

@@ -52,7 +52,6 @@ const CurrencyFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_reac
       } else {
         base.handleValueChange(0);
       }
-      console.log("TARGET VAL : " + event.target.value);
       setDisplayValue(event.target.value);
     }
   };

package/dist/components/form/LookupField.js

@@ -27,12 +27,19 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   const height = !_Utils.default.isNull(props.config.attributes?.style?.height) ? props.config.attributes.style.height : '41px';
   const margin = !_Utils.default.isNull(props.config.attributes?.style?.margin) ? props.config.attributes.style.margin : '4px 0';
   const defaultValue = _Utils.default.isNull(props.value) ? '' : props.value;
+  const [value, setValue] = _react.default.useState(_Utils.default.isNull(props.value) ? null : props.value.id);
   const base = props.base;
   const handleClose = () => {
     setOpen(false);
     setCurrentSelection(null);
     _Observable.default.clearComponentEventListeners(props.gridHandle.api.id);
   };
+  _react.default.useEffect(() => {
+    // Initial binding
+    if (_Utils.default.isNull(value)) {
+      setValue(base.value);
+    }
+  }, [base.value]);
   _react.default.useEffect(() => {
     if (props.config && props.config.grid) {
       if (!props.config.grid.attributes) {
@@ -62,6 +69,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   const setSelectionAsValue = () => {
     if (currentSelection.length > 0) {
       let val = setupVal();
+      setValue(val);
       base.handleValueChange(val);
       handleClose();
     }
@@ -100,7 +108,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     className: 'col-*-* no-margin no-padding',
     style: {
       width: 'calc(100% - 72px)',
-      marginBottom: base.value ? '0' : '8px',
+      marginBottom: value ? '0' : '8px',
       position: 'relative'
     }
   }, !base.required && /*#__PURE__*/_react.default.createElement("div", {
@@ -124,10 +132,10 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     },
     id: props.id,
     required: base.required,
-    readonly: true,
+    readOnly: true,
     disabled: base.disabled,
     label: !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['label']) ? props.config.attributes['label'] : null,
-    value: base.value?.__oui_label || base.value?.dataRecordDescription || defaultValue,
+    value: value?.__oui_label || value?.dataRecordDescription || defaultValue,
     className: props.className || 'lookup-field-input',
     error: base.hasError,
     helperText: base.errorMessage,

package/dist/components/form/SelectItem.js

@@ -5,24 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _BaseField = require("./BaseField");
 var _RestService = require("../../RestService");
-var _Event = _interopRequireDefault(require("../../event/Event"));
-var _Observable = _interopRequireDefault(require("../../event/Observable"));
-var _EventType = _interopRequireDefault(require("../../event/EventType"));
+var _material = require("@mui/material");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SelectItemComponent = props => {
   const base = props.base;
   const [optionsLoaded, setOptionsLoaded] = _react.default.useState(false);
   const [loadFullOptionList, setLoadFullOptionList] = _react.default.useState(false);
+  const [value, setValue] = _react.default.useState(_Utils.default.isNull(props.value) ? '' : props.value.id);
+  const initialValue = _react.default.useRef(null);
   const width = !_Utils.default.isNull(props.config.attributes?.style?.width) ? props.config.attributes.style.width : "100%";
   const maxWidth = !_Utils.default.isNull(props.config.attributes?.style?.maxWidth) ? props.config.attributes.style.maxWidth : null;
   const minWidth = !_Utils.default.isNull(props.config.attributes?.style?.minWidth) ? props.config.attributes.style.minWidth : "240px";
-  const defaultValue = _Utils.default.isNull(props.value) ? '' : props.value.id;
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(base.value) && !optionsLoaded) {
       let defaultOptions = [];
@@ -30,7 +27,17 @@ const SelectItemComponent = props => {
       base.setSelectOptions(defaultOptions);
       setOptionsLoaded(true);
     }
+    if (_Utils.default.isNull(initialValue.current) && !_Utils.default.isNull(base.value)) {
+      initialValue.current = base.value;
+    }
   }, [base.value]);
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(base.selectOptions) && base.selectOptions.length > 0) {
+      if (initialValue.current) {
+        setValue(initialValue.current.id);
+      }
+    }
+  }, [base.selectOptions]);
   _react.default.useEffect(() => {
     if (loadFullOptionList && !_Utils.default.isNull(props.config.dataService)) {
       let method = props.config.dataService.type === 'rpc' ? _RestService.invokeRpc : _RestService.invokeRest;
@@ -57,42 +64,45 @@ const SelectItemComponent = props => {
       setOptionsLoaded(true);
     }
   }, [loadFullOptionList, props.refreshData]);
-  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    select: true,
-    InputProps: props.InputProps,
-    id: props.id,
-    disabled: base.disabled,
+  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+    fullWidth: true,
+    margin: "dense",
+    size: "small",
     required: base.required,
-    label: !_Utils.default.isNull(props.config.attributes) ? props.config.attributes['label'] : null,
+    disabled: base.disabled,
+    error: base.hasError,
     style: _Utils.default.mergeStyles({
       minWidth: minWidth,
       width: width,
       maxWidth: maxWidth
-    }, props.config),
-    SelectProps: {
-      onOpen: () => {
-        if (!loadFullOptionList) {
-          setLoadFullOptionList(true);
-        }
+    }, props.config)
+  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
+    id: `${props.id}-label`
+  }, !_Utils.default.isNull(props.config.attributes) ? props.config.attributes['label'] : ''), /*#__PURE__*/_react.default.createElement(_material.Select, {
+    labelId: `${props.id}-label`,
+    id: props.id,
+    variant: "outlined",
+    value: value,
+    input: /*#__PURE__*/_react.default.createElement(_material.OutlinedInput, {
+      label: props.config.attributes?.label || ''
+    }),
+    onOpen: () => {
+      if (!loadFullOptionList) {
+        setLoadFullOptionList(true);
       }
     },
-    value: !_Utils.default.isNull(base.value) && base.selectOptions && base.selectOptions.length > 0 ? base.value.id : defaultValue,
-    className: props.className,
     onChange: e => {
       base.handleValueChange(e.target.value);
+      setValue(e.target.value);
     },
-    error: base.hasError,
-    helperText: base.errorMessage,
-    margin: "dense",
-    size: "small",
-    variant: "outlined"
-  }, base.selectOptions.map(option => option.id === '_EMPTY_VALUE' ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    className: props.className
+  }, base.selectOptions.map(option => option.id === '_EMPTY_VALUE' ? /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: "",
     key: option.id
-  }, /*#__PURE__*/_react.default.createElement("em", null, "\xA0")) : /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+  }, /*#__PURE__*/_react.default.createElement("em", null, "\xA0")) : /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     key: option.id,
     value: option.id
-  }, _Utils.default.isNull(option.dataRecordDescription) ? '' : option.dataRecordDescription.trim())));
+  }, _Utils.default.isNull(option.dataRecordDescription) ? '' : option.dataRecordDescription.trim()))), base.hasError && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, base.errorMessage));
 };
 const SelectItem = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [refreshData, setRefreshData] = _react.default.useState(false);

package/dist/components/signatures/Toolbar.js

@@ -9,7 +9,7 @@ var _styles = require("@mui/styles");
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _ToggleButton = _interopRequireDefault(require("@mui/lab/ToggleButton"));
-var _ToggleButtonGroup = _interopRequireDefault(require("@mui/lab/ToggleButtonGroup"));
+var _ToggleButtonGroup = _interopRequireDefault(require("@mui/material/ToggleButtonGroup"));
 var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
 var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
 var _Save = _interopRequireDefault(require("@mui/icons-material/Save"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.17",
+  "version": "1.8.19",
   "files": [
     "dist"
   ],