@agilemotion/oui-react-js 1.8.18 → 1.8.20

package/dist/components/TableCellContent.js

@@ -213,9 +213,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     }, doRender()))));
   };
   const api = {
-    set value(val) {
-      alert('Mbulu ya nga');
-    },
+    set value(val) {},
     refresh: () => {
       setRefresher(!refresher);
       if (_Utils.default.isNull(props.editor)) {

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

@@ -30,21 +30,26 @@ const BaseField = props => {
   const [minDate, setMinDate] = _react.default.useState(null);
   const [maxDate, setMaxDate] = _react.default.useState(null);
   const validateOnChange = _react.default.useRef();
+  const initialValueBound = _react.default.useRef(false);
   const ref = _react.default.useRef(null);
   const valid = _react.default.useRef(false);
   _react.default.useEffect(() => {
-    let value = valueObject[valueProperty];
-    if (props.config.fieldType === 'SELECT' || props.config.fieldType === 'LOOKUP') {
-      if (!value || _Utils.default.isNull(value.id)) {
-        setValue(null);
-        valueRef.current = null;
+    let boundValue = valueObject[valueProperty];
+    if (boundValue && !initialValueBound.current) {
+      initialValueBound.current = true;
+      if (props.config.fieldType === 'SELECT' || props.config.fieldType === 'LOOKUP') {
+        console.log("BINDING : " + props.config.id, valueObject[valueProperty]);
+        if (!boundValue || _Utils.default.isNull(boundValue.id)) {
+          setValue(null);
+          valueRef.current = null;
+        } else {
+          setValue(boundValue);
+          valueRef.current = boundValue;
+        }
       } else {
-        setValue(value);
-        valueRef.current = value;
+        setValue(boundValue);
+        valueRef.current = boundValue;
       }
-    } else {
-      setValue(value);
-      valueRef.current = value;
     }
   }, [valueObject[valueProperty]]);
 
@@ -134,6 +139,7 @@ const BaseField = props => {
     };
   }, []);
   const handleValueChange = newValue => {
+    initialValueBound.current = true;
     let valueChanged = newValue !== valueRef.current;
     if (!_Utils.default.isNull(newValue) && !_Utils.default.isNull(valueRef.current)) {
       if (props.config.fieldType === 'SELECT' || props.config.fieldType === 'LOOKUP') {

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/GridField.js

@@ -206,7 +206,6 @@ const GridField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     },
     clearHandler: () => gridHandle.api.clear(),
     rowsHandler: () => {
-      alert(JSON.stringify(gridHandle.api.rows));
       return gridHandle.api.rows;
     }
   }), base => /*#__PURE__*/_react.default.createElement(GridFieldWrapper, _extends({

package/dist/components/form/LookupField.js

@@ -27,12 +27,17 @@ 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(() => {
+    console.log("LOOKUP FIELD VALUE CHANGED", base.value);
+    setValue(base.value);
+  }, [base.value]);
   _react.default.useEffect(() => {
     if (props.config && props.config.grid) {
       if (!props.config.grid.attributes) {
@@ -62,6 +67,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   const setSelectionAsValue = () => {
     if (currentSelection.length > 0) {
       let val = setupVal();
+      setValue(val);
       base.handleValueChange(val);
       handleClose();
     }
@@ -100,7 +106,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 +130,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,18 @@ const SelectItemComponent = props => {
       base.setSelectOptions(defaultOptions);
       setOptionsLoaded(true);
     }
+    if (_Utils.default.isNull(initialValue.current) && !_Utils.default.isNull(base.value)) {
+      initialValue.current = base.value;
+    }
+    setValue(base.value?.id);
   }, [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 +65,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/layout/CollapsiblePanel.css

@@ -1,9 +1,9 @@
-.coll-panel-container {
-    font-family: sans-serif;
-    text-align: center;
-}
-
-.coll-panel-btn:focus {
-    outline: 0;
-    box-shadow: none;
-}
+.coll-panel-container {
+    font-family: sans-serif;
+    text-align: center;
+}
+
+.coll-panel-btn:focus {
+    outline: 0;
+    box-shadow: none;
+}

package/dist/components/layout/View.css

@@ -1,68 +1,68 @@
-.view {
-    padding: 0 32px;
-    background-color: #ffffff;
-    border-radius: 4px;
-}
-
-.window-unpinned .view {
-    width: 0 !important;;
-}
-
-.window-pinned .view {
-    padding: 0 8px;
-}
-
-.no-margin {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-}
-
-.no-padding {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-}
-
-.centered-flex-box {
-    display: flex;
-    align-Items: center;
-    justify-content: center
-}
-
-/* Smartphones (landscape); */
-@media only screen and (min-device-width : 361px) and (max-device-width : 480px) {
-    .view {
-        padding: 0 16px;
-    }
-}
-
-/* Smartphones (portrait); */
-@media only screen and (min-device-width : 280px) and (max-device-width : 360px) {
-    .view {
-        padding: 0 16px;
-    }
-}
-
-/* iPads (portrait and landscape); */
-@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
-    .view {
-        padding: 0 24px;
-    }
-}
-
-/* iPad 3 */
-@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
-    .view {
-        padding: 0 24px;
-    }
-}
-
-/* small desktop screens */
-@media only screen and (max-width : 600px) {
-}
-
-/* low resolution desktop */
-@media only screen and (max-width : 1200px) {
-    .view {
-
-    }
-}
+.view {
+    padding: 0 32px;
+    background-color: #ffffff;
+    border-radius: 4px;
+}
+
+.window-unpinned .view {
+    width: 0 !important;;
+}
+
+.window-pinned .view {
+    padding: 0 8px;
+}
+
+.no-margin {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+.no-padding {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.centered-flex-box {
+    display: flex;
+    align-Items: center;
+    justify-content: center
+}
+
+/* Smartphones (landscape); */
+@media only screen and (min-device-width : 361px) and (max-device-width : 480px) {
+    .view {
+        padding: 0 16px;
+    }
+}
+
+/* Smartphones (portrait); */
+@media only screen and (min-device-width : 280px) and (max-device-width : 360px) {
+    .view {
+        padding: 0 16px;
+    }
+}
+
+/* iPads (portrait and landscape); */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+    .view {
+        padding: 0 24px;
+    }
+}
+
+/* iPad 3 */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
+    .view {
+        padding: 0 24px;
+    }
+}
+
+/* small desktop screens */
+@media only screen and (max-width : 600px) {
+}
+
+/* low resolution desktop */
+@media only screen and (max-width : 1200px) {
+    .view {
+
+    }
+}

package/dist/components/loader.css

@@ -1,36 +1,36 @@
-.loaderModal {
-	display: block; /* Hidden by default */
-	position: fixed; /* Stay in place */
-	z-index: 3000; /* Sit on top */
-	left: 0;
-	top: 0;
-	width: 100vw; /* Full width */
-	height: 100vh; /* Full height */
-	overflow: hidden; /* Enable scroll if needed */
-	background-color: rgb(0,0,0); /* Fallback color */
-	background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
-}
-
-/* Modal Content/Box */
-.modal-content {
-	background-color: transparent;
-	margin: 30% auto; /* 15% from the top and centered */
-	padding: 20px;
-	border: 1px solid #888;
-	width: 10%; /* Could be more or less, depending on screen size */
-}
-
-/* The Close Button */
-.close {
-	color: #aaa;
-	float: right;
-	font-size: 28px;
-	font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-	color: black;
-	text-decoration: none;
-	cursor: pointer;
-}
+.loaderModal {
+	display: block; /* Hidden by default */
+	position: fixed; /* Stay in place */
+	z-index: 3000; /* Sit on top */
+	left: 0;
+	top: 0;
+	width: 100vw; /* Full width */
+	height: 100vh; /* Full height */
+	overflow: hidden; /* Enable scroll if needed */
+	background-color: rgb(0,0,0); /* Fallback color */
+	background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modal-content {
+	background-color: transparent;
+	margin: 30% auto; /* 15% from the top and centered */
+	padding: 20px;
+	border: 1px solid #888;
+	width: 10%; /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
+	color: #aaa;
+	float: right;
+	font-size: 28px;
+	font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+	color: black;
+	text-decoration: none;
+	cursor: pointer;
+}

package/dist/components/media/TrainingRoom.js

@@ -78,7 +78,6 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defaul
           case _VCEventType.VCEventType.REQUEST_TO_JOIN_MEETING:
             break;
           case _VCEventType.VCEventType.USER_JOINED:
-            alert('USER JOIN FIREEEEE...');
             addUser(be.payload);
             break;
           case _VCEventType.VCEventType.USER_LEFT_MEETING:

package/dist/components/media/Video.css

@@ -1,4 +1,4 @@
-.user-video {
-    min-width: 280px;
-    height: 280px;
-}
+.user-video {
+    min-width: 280px;
+    height: 280px;
+}