@agilemotion/oui-react-js 1.4.2 → 1.4.4

package/dist/RestUtils.js

@@ -26,9 +26,7 @@ const status = response => {
   if (response.ok) {
     return Promise.resolve(response);
   } else {
-    let error = new Error(response.statusText);
-    error.code = response.status;
-    return Promise.reject(error);
+    return Promise.reject(response);
   }
 };
 
@@ -141,21 +139,17 @@ class RestUtils {
     if (requestBody !== null || service.method === 'POST') {
       console.log("POSTING REST REQUEST BODY : ", requestBody);
       postData(url, response => {
-        if (!_Utils.default.isNull(response) && response.dataType === 'message' && response.messageType === 'ERROR') {
-          this.fireEvent(viewId, component, _EventType.default.SERVICE_CALL_FAILURE);
-        } else {
-          if (!_Utils.default.isNull(successCallback)) {
-            this.processSuccessfulResponseData(component, response, successCallback, viewId, successMessage);
-          }
-
-          let path = _Utils.default.getPropertyChainPath(returnValueBinding);
+        if (!_Utils.default.isNull(successCallback)) {
+          this.processSuccessfulResponseData(component, response, successCallback, viewId, successMessage);
+        }
 
-          if (!_Utils.default.isNull(path.valueObject) && !_Utils.default.isNull(path.property)) {
-            path.valueObject[path.property] = response;
-          }
+        let path = _Utils.default.getPropertyChainPath(returnValueBinding);
 
-          this.fireEvent(viewId, component, _EventType.default.SERVICE_CALL_SUCCESS, response);
+        if (!_Utils.default.isNull(path.valueObject) && !_Utils.default.isNull(path.property)) {
+          path.valueObject[path.property] = response;
         }
+
+        this.fireEvent(viewId, component, _EventType.default.SERVICE_CALL_SUCCESS, response);
       }, e => {
         if (!_Utils.default.isNull(errorCallback)) {
           errorCallback(e);
@@ -212,13 +206,8 @@ class RestUtils {
         let val = _ApplicationManager.default.resolveParameterValue(parameterConfig, event ? event.data : null);
 
         if (!_Utils.default.isNull(val)) {
-          parameter.value = val.value; // TODO : Make the default object type a library setting
-
-          if (val.type === 'object') {
-            parameter.type = 'MapObject';
-          } else {
-            parameter.type = val.type;
-          }
+          parameter.value = val.value;
+          parameter.type = val.type;
         }
 
         if (typeof parameter.value === 'undefined') {
@@ -247,23 +236,13 @@ class RestUtils {
         let path = _Utils.default.getPropertyChainPath(returnValueBinding);
 
         if (!_Utils.default.isNull(path.valueObject) && !_Utils.default.isNull(path.property)) {
-          path.valueObject[path.property] = response.data;
+          path.valueObject[path.property] = response;
         }
 
-        let responseData = !_Utils.default.isNull(response) ? response.data : null;
-
-        if (!_Utils.default.isNull(responseData) && response.dataType === 'message' && responseData.messageType === 'ERROR') {
-          this.fireEvent(viewId, component, _EventType.default.SERVICE_CALL_FAILURE, responseData);
+        this.fireEvent(viewId, component, _EventType.default.SERVICE_CALL_SUCCESS, response.data);
 
-          if (errorCallback !== null) {
-            errorCallback(response);
-          }
-        } else {
-          this.fireEvent(viewId, component, _EventType.default.SERVICE_CALL_SUCCESS, response.data);
-
-          if (successCallback !== null) {
-            successCallback(response);
-          }
+        if (successCallback !== null) {
+          successCallback(response);
         }
       }
     }, e => {
@@ -346,7 +325,7 @@ class RestUtils {
     }).catch(e => {
       console.error(e);
 
-      if (e.code === 401 && !url.endsWith('/logout')) {
+      if (e.status === 401 && !url.endsWith('/logout')) {
         errorCallback(e);
 
         _ApplicationManager.default.clear();

package/dist/Utils.js

@@ -404,7 +404,16 @@ _defineProperty(Utils, "mergeStyles", (defaultStyle, config) => {
   return defaultStyle;
 });
 
-_defineProperty(Utils, "publishErrorMessage", (messageText, viewId, component = null) => {
+_defineProperty(Utils, "publishErrorMessage", async (e, viewId, component = null) => {
+  let messageText;
+
+  if (e.json) {
+    let data = await e.json();
+    messageText = data.message;
+  } else {
+    messageText = Utils.SYSTEM_ERROR_MESSAGE;
+  }
+
   let message = {
     messageType: 'ERROR',
     message: messageText

package/dist/components/Calendar.js

@@ -111,6 +111,7 @@ const Calendar = props => {
   const dialogRef = (0, _react.useRef)(null);
   const [dialogTop, setDialogTop] = (0, _react.useState)(null);
   const [dialogLeft, setDialogLeft] = (0, _react.useState)(null);
+  const [refresher, setRefresher] = (0, _react.useState)(null);
   const StyledDialog = (0, _withStyles.default)({
     root: {
       pointerEvents: "none"
@@ -147,6 +148,20 @@ const Calendar = props => {
 
   (0, _react.useEffect)(() => {
     loadEvents();
+
+    _ApplicationManager.default.addApplicationContextSubscription({
+      handler: {
+        get id() {
+          return 'window';
+        },
+
+        onContextChange: (context, newValues) => {
+          if (Object.keys(newValues).find(key => key === 'windowDisplayState')) {
+            setRefresher(!refresher);
+          }
+        }
+      }
+    });
   }, []);
 
   const calenderScrollListener = () => {

package/dist/components/DataGrid.js

@@ -499,9 +499,7 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
           let data = serviceType === 'rpc' ? result.data : result;
           processData(data, conf);
         }, e => {
-          console.error(e);
-
-          _Utils.default.publishSystemErrorMessage(props.viewId);
+          console.error(e); //Utils.publishSystemErrorMessage(props.viewId);
         });
       } else {
         throw new Error('Unknown service type : ' + serviceType);

package/dist/components/FileThumb.js

@@ -117,7 +117,7 @@ const FileThumb = props => {
       backgroundSize: 'contain',
       backgroundPosition: 'center',
       backgroundColor: 'transparent',
-      backgroundImage: isImage() ? "url(".concat(file.repositoryId ? downloadUrl : file.payload, ")") : "url(".concat(require('../../assets/img/' + getThumbImage()), ")")
+      backgroundImage: isImage() ? "url(".concat(file.repositoryId ? downloadUrl : file.payload, ")") : "url(".concat(require('../assets/img/' + getThumbImage()), ")")
     }
   })));
 };

package/dist/components/Icon.js

@@ -69,6 +69,8 @@ var _MicOff = _interopRequireDefault(require("@material-ui/icons/MicOff"));
 
 var _CallEnd = _interopRequireDefault(require("@material-ui/icons/CallEnd"));
 
+var _Dock = _interopRequireDefault(require("@material-ui/icons/Dock"));
+
 var _icons = require("@material-ui/icons");
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -195,6 +197,12 @@ class Icon extends _react.Component {
           color: this.props.color
         }
       });
+    } else if (this.props.id === 'DOCK') {
+      return /*#__PURE__*/_react.default.createElement(_Dock.default, {
+        style: {
+          color: this.props.color
+        }
+      });
     } else if (this.props.id === 'CAMERA_OFF') {
       return /*#__PURE__*/_react.default.createElement(_VideocamOff.default, {
         style: {

package/dist/components/SocketManager.js

@@ -126,7 +126,7 @@ class SocketManager {
   }
 
   registerOnline() {
-    (0, _RestUtils.sendRequest)(_RestUtils.location + _ApplicationManager.default.getContextRoot() + '/auth/api/v1/user/admin/find', response => {
+    (0, _RestUtils.sendRequest)(_RestUtils.location + _ApplicationManager.default.getContextRoot() + '/auth/api/v1/user/find', response => {
       this.profile = response.profile;
       this.emitEvent(_SocketRequest.default.REGISTER_ONLINE, {
         user: {

package/dist/components/Toolbar.js

@@ -96,6 +96,7 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       minWidth: item.type === 'toolbarSpacer' ? '2' : _Utils.default.isNull(item.attributes) || _Utils.default.isNull(item.attributes['label']) ? '60px' : null,
       marginLeft: item.type === 'toolbarSpacer' ? '4px' : 0,
       marginRight: 4,
+      marginBottom: 4,
       marginTop: item.type === 'toolbarSpacer' ? '6px' : 0
     };
   }

package/dist/components/Tree.js

@@ -163,12 +163,12 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         } catch (e) {
           console.error(e);
 
-          _Utils.default.publishSystemErrorMessage(props.viewId);
+          _Utils.default.publishErrorMessage(e, props.viewId);
         }
       }, e => {
         props.console.error(e);
 
-        _Utils.default.publishSystemErrorMessage(props.viewId);
+        _Utils.default.publishErrorMessage(e, props.viewId);
       }, parameter => {});
     } else if (!_Utils.default.isNull(componentConfig.value)) {
       let value = _ApplicationManager.default.isExpression(componentConfig.value) ? _ApplicationManager.default.resolveExpressionValue(componentConfig.value) : componentConfig.value;

package/dist/components/dashboard/BasicBusinessAppDashboard.js

@@ -64,6 +64,8 @@ const BasicBusinessAppDashboard = props => {
 
   const [opacity, setOpacity] = _react.default.useState(0);
 
+  const [windowPinned, setWindowPinned] = _react.default.useState(false);
+
   const dispatch = (0, _reactRedux.useDispatch)();
 
   const handleChangeRequestNavDrawer = () => {
@@ -351,8 +353,23 @@ const BasicBusinessAppDashboard = props => {
     toggleSidebar: toggleSidebar,
     logoutCallBack: props.logoutCallBack
   })), ' ', /*#__PURE__*/_react.default.createElement("div", {
-    className: "content"
-  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, null), /*#__PURE__*/_react.default.createElement(_WindowViewPort.default, null))), ' '));
+    className: "content w-100 h-100"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "content w-100 h-100 row no-margin no-padding"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: windowPinned ? 'calc(100% - 320px)' : '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col no-margin no-padding',
+    style: {
+      width: windowPinned ? '320px' : '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_WindowViewPort.default, {
+    stateChangeHandler: state => {
+      setWindowPinned(state.pinned);
+    }
+  }))))), ' '));
 };
 
 BasicBusinessAppDashboard.propTypes = {

package/dist/components/form/FieldSet.js

@@ -453,7 +453,7 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
             }, e => {
               props.console.error(e);
 
-              _Utils.default.publishSystemErrorMessage(props.viewId);
+              _Utils.default.publishErrorMessage(e, props.viewId);
             }, parameter => {});
             return true;
           }

package/dist/components/form/Form.js

@@ -172,7 +172,6 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
             let fieldValid = field.handle.api.validate(values.current, null);
 
             if (fieldValid === false) {
-              console.log("INVALID : " + field.id);
               doValidateParent(field, !fieldValid, false);
               valid = false;
             } else if (valid) {
@@ -298,7 +297,7 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
         }, e => {
           console.error(e);
 
-          _Utils.default.publishSystemErrorMessage(props.viewId);
+          _Utils.default.publishErrorMessage(e, props.viewId);
         }, parameter => {
           loadingRef.current = false;
           handleDataArrived(null);

package/dist/components/form/ImageEditor.js

@@ -362,13 +362,13 @@ exports.ImageEditorComponent = ImageEditorComponent;
 const ImageEditor = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [file, setFile] = _react.default.useState(null);
 
-  const [clearTrigger, setClearTrigger] = _react.default.useState(false);
+  const clearTrigger = _react.default.useRef(false);
 
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
       if (inbound) {
-        setClearTrigger(!clearTrigger);
+        clearTrigger.current = !clearTrigger.current;
 
         if (!_Utils.default.isNull(value)) {
           let val = value; // TODO : Support multiple file upload
@@ -412,14 +412,14 @@ const ImageEditor = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defaul
     },
     valueChangeCallback: value => {
       if (_Utils.default.isNull(value)) {
-        setClearTrigger(!clearTrigger);
+        clearTrigger.current = !clearTrigger.current;
       }
     }
   }), base => /*#__PURE__*/_react.default.createElement(ImageEditorComponent, _extends({
     ref: ref,
     base: base,
     initialFile: file,
-    clearTrigger: clearTrigger
+    clearTrigger: clearTrigger.current
   }, props)));
 }));
 

package/dist/components/form/SelectItem.js

@@ -67,7 +67,7 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
       }, e => {
         console.error(e);
 
-        _Utils.default.publishSystemErrorMessage(props.viewId);
+        _Utils.default.publishErrorMessage(e, props.viewId);
       });
       setOptionsLoaded(true);
     }

package/dist/components/form/TransferList.js

@@ -214,7 +214,7 @@ const TransferList = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
       }, e => {
         console.error(e);
 
-        _Utils.default.publishSystemErrorMessage(props.viewId);
+        _Utils.default.publishErrorMessage(e, props.viewId);
 
         reject(e);
       });

package/dist/components/layout/VC.css

@@ -15,3 +15,12 @@
     width: 500px !important;
     height: 400px !important;
 }
+
+.window-pinned .av-settings-container {
+    width: 240px !important;
+    height: 700px !important;
+}
+
+.window-pinned .av-settings-container .user-video {
+    min-width: 220px !important;
+}

package/dist/components/layout/View.css

@@ -4,6 +4,14 @@
     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;

package/dist/components/layout/Window.js

@@ -130,8 +130,10 @@ const Window = props => {
 
             if (newValues.windowDisplayState === 'MAXIMIZED') {
               maximizeView(null, false);
-            } else {
+            } else if (newValues.windowDisplayState === 'MINIMIZED') {
               minimizeView(null, false);
+            } else {
+              pinView(null, false);
             }
           }
         }
@@ -139,12 +141,16 @@ const Window = props => {
     }).then(initialContext => {
       setDisplayState(initialContext ? initialContext.windowDisplayState : 'MAXIMIZED');
     });
+
+    return () => {};
   }, []);
   (0, _react.useEffect)(() => {
     if (displayState === 'MAXIMIZED') {
       maximizeView(null);
-    } else {
+    } else if (displayState === 'MINIMIZED') {
       minimizeView(null);
+    } else {
+      pinView(null);
     }
   }, [displayState]);
 
@@ -168,6 +174,41 @@ const Window = props => {
     };
   };
 
+  const getPinnedStyle = () => {
+    return {
+      transform: 'translate(0, 0)',
+      backgroundColor: '#FFFFFF',
+      width: '320px',
+      height: 'calc(100% - 88px)',
+      margin: '8px'
+    };
+  };
+
+  const pinView = (e, updateContext = true) => {
+    if (props.pinnable) {
+      let paper = document.getElementById('meetingDialogPaper');
+
+      if (paper) {
+        if (windowTransformValue) {
+          paper.style.transform = windowTransformValue;
+        }
+
+        paper.style.width = '320px';
+        paper.style.height = 'calc(100% - 88px)';
+        paper.style.boxShadow = 'unset';
+        let header = document.getElementsByClassName('dialogHeader')[0];
+        header.getElementsByTagName('button')[0].style.color = '#000000';
+        setDisplayState('PINNED');
+
+        if (updateContext) {
+          _ApplicationManager.default.updateContext({
+            windowDisplayState: 'PINNED'
+          });
+        }
+      }
+    }
+  };
+
   const minimizeView = (e, updateContext = true) => {
     if (minimizable) {
       let paper = document.getElementById('meetingDialogPaper');
@@ -224,7 +265,7 @@ const Window = props => {
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%',
       height: '100%',
@@ -237,7 +278,9 @@ const Window = props => {
   }, /*#__PURE__*/_react.default.createElement(StyledDialog, {
     disableEnforceFocus: true,
     open: open,
-    onClose: e => {},
+    onClose: e => {
+      props.onClose();
+    },
     keepMounted: true,
     hideBackdrop: true,
     "aria-labelledby": "meeting-window-title",
@@ -247,12 +290,15 @@ const Window = props => {
     PaperProps: {
       id: 'meetingDialogPaper',
       disabled: displayState === 'MAXIMIZED',
-      style: displayState === 'MINIMIZED' ? getMinimizedStyle() : getMaximizedStyle
+      style: displayState === 'MINIMIZED' ? getMinimizedStyle() : displayState === 'MAXIMIZED' ? getMaximizedStyle() : getMinimizedStyle()
     }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: 'window-content',
+    className: "".concat((displayState === 'PINNED' ? 'window-pinned ' : '') + 'w-100 h-100')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'meeting-window-header',
     id: "meeting-window-header"
-  }, /*#__PURE__*/_react.default.createElement("div", null, minimizable && displayState && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", null, displayState && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '48px',
       height: '48px',
@@ -262,7 +308,7 @@ const Window = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'dialogHeader row'
-  }, /*#__PURE__*/_react.default.createElement("div", null, displayState === 'MAXIMIZED' ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  }, minimizable && /*#__PURE__*/_react.default.createElement("div", null, displayState === 'MAXIMIZED' ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     onClick: e => {
       minimizeView(e);
     },
@@ -280,7 +326,16 @@ const Window = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MAXIMIZE'
-  }))))))), children));
+  }))), props.pinnable && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: e => {
+      props.onPin();
+    },
+    style: {
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'DOCK'
+  }))))))), children))));
 };
 
 var _default = Window;

package/dist/components/layout/WindowViewPort.js

@@ -17,6 +17,10 @@ var _Observable = _interopRequireDefault(require("../../event/Observable"));
 
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -26,11 +30,14 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const WindowViewContainer = props => {
   const [view, setView] = _react.default.useState(null);
 
+  const [pinned, setPinned] = _react.default.useState(false);
+
   function loadView(context) {
     if (context) {
       if (Object.keys(context).find(key => key === 'windowView')) {
         setView(null);
         setView(context.windowView);
+        setPinned(false);
       }
     }
   }
@@ -51,16 +58,48 @@ const WindowViewContainer = props => {
     });
   }, []);
 
+  _react.default.useEffect(() => {
+    props.stateChangeHandler({
+      pinned
+    });
+  }, [pinned]);
+
   const renderView = () => {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, view && /*#__PURE__*/_react.default.createElement(_Window.default, {
-      minimizable: true,
+      pinnable: true,
+      minimizable: false,
       open: true,
-      displayState: 'MAXIMIZED'
+      displayState: 'MAXIMIZED',
+      onPin: () => {
+        _ApplicationManager.default.updateContext({
+          windowDisplayState: pinned ? 'MAXIMIZED' : 'PINNED'
+        });
+
+        setPinned(!pinned);
+      },
+      onClose: () => {//setPinned(false)
+      }
     }, /*#__PURE__*/_react.default.createElement(_View.View, {
       config: view.config,
       parameters: view.parameters,
       ref: /*#__PURE__*/_react.default.createRef(),
       handle: view.handle
+    })), view && pinned && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      onClick: e => {
+        _ApplicationManager.default.updateContext({
+          windowDisplayState: 'MAXIMIZED'
+        });
+
+        setPinned(false);
+      },
+      style: {
+        marginRight: '8px',
+        position: 'absolute',
+        right: 0,
+        top: 0
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'DOCK'
     })));
   };
 

package/dist/components/media/Toolbar.css

@@ -1,7 +1,25 @@
 
-.vc-toolbar button {
-    min-width: 80px;
-    width: 80px;
+.vc-toolbar .button-container {
+    min-width: 200px;
+    overflow: hidden;
+    margin-left: 8px;
+}
+
+.window-pinned .vc-toolbar .timer {
+    width: 100% !important;
+    text-align: center !important;
+}
+
+.vc-toolbar button,
+.vc-toolbar .button-wrapper {
+    min-width: 88px;
+    width: 88px;
+}
+
+.vc-toolbar .hang-up,
+.vc-toolbar .hang-up button {
+    min-width: 120px;
+    width: 120px;
 }
 
 .vc-toolbar button .icon,
@@ -32,4 +50,7 @@
     color: #404239;
     background-color: #e9e9e9;
     font-size: 14px;
+    position: absolute;
+    margin-left: -56px;
+    margin-bottom: 16px;
 }