@agilemotion/oui-react-js 1.8.24 → 1.8.27

package/dist/ApplicationManager.js

@@ -24,6 +24,7 @@ class ApplicationManager {
   constructor() {
     if (!ApplicationManager.instance) {
       this.views = [];
+      this.dashboardViews = [];
       this.props = {};
       this.listeners = [];
       this.libs = {};
@@ -355,6 +356,26 @@ class ApplicationManager {
       applicationContext[key] = values[key];
     });
   };
+
+  /**
+   * add view configuration
+   *
+   * @param view the listener to be added
+   * @param path
+   * @param forward
+   */
+  addDashboardView = (view, path) => {
+    this.dashboardViews.push(view);
+  };
+
+  /**
+   * clear dashboard view configuration
+   *
+   */
+  clearDashboardViews = () => {
+    this.dashboardViews.splice(0, this.dashboardViews.length);
+  };
+
   /**
    * add view configuration
    *
@@ -493,7 +514,7 @@ class ApplicationManager {
         return view;
       }
     }
-    return null;
+    return this.dashboardViews.find(v => v.config.id === id);
   };
   getViewComponent = (view, id) => {
     if (!_Utils.default.isNull(view) && !_Utils.default.isNull(view.handle) && !_Utils.default.isNull(view.handle.api)) {
@@ -523,6 +544,12 @@ class ApplicationManager {
         return graph;
       }
     }
+    for (const view of this.dashboardViews) {
+      let component = this.getViewComponent(view, id);
+      if (component) {
+        return component;
+      }
+    }
     if (this.views.length === 0) {
       return this.getViewComponent(this.props.dashboardView, id);
     }

package/dist/components/Chart.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Utils = _interopRequireDefault(require("../Utils"));
+var _reactHtmlRenderer = _interopRequireDefault(require("react-html-renderer"));
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+var _reactPromiseTracker = require("react-promise-tracker");
+var _Event = _interopRequireDefault(require("../event/Event"));
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+var _RestUtils = require("../RestUtils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const location = window.location.protocol + '//' + window.location.hostname;
+const Chart = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [path, setPath] = _react.default.useState(null);
+  const [displayType, setDisplayType] = _react.default.useState(props.config.defaultDisplayType);
+  const [visible, setVisible] = _react.default.useState(false);
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+  _react.default.useEffect(() => {
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+    _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+    _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
+    let event = new _Event.default(props.handle, props.viewId, null);
+    _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
+    return () => {
+      _Observable.default.clearComponentEventListeners(props.handle);
+    };
+  }, []);
+  function load(parameters) {
+    const accessToken = sessionStorage.getItem('accessToken');
+    const idToken = sessionStorage.getItem('idToken');
+    let path = location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/html/get?version=1.0&id=' + props.config.contentPath + `-${displayType.toLowerCase()}.html&access_token=${accessToken}&idToken=${idToken}`;
+    for (const parameter of parameters) {
+      path += '&' + parameter.name + '=' + parameter.value;
+    }
+    setPath(path);
+  }
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+      loadData: actionConfig => {
+        let parameters = [];
+        if (props.config.chartDataServiceParameters) {
+          for (const chartDataServiceParameter of props.config.chartDataServiceParameters) {
+            let value = _ApplicationManager.default.resolveParameterValue(chartDataServiceParameter, null);
+            if (value) {
+              let parameter = {};
+              parameter.name = chartDataServiceParameter.name;
+              parameter.value = typeof value === 'object' ? value.value : value;
+              parameters.push(parameter);
+            }
+          }
+        }
+        load(parameters);
+      },
+      refresh() {
+        let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+        if (!_Utils.default.isNull(props.config) && !_Utils.default.isNull(parsedConfig.visible)) {
+          setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id));
+        } else {
+          setVisible(true);
+        }
+      },
+      getChildren: () => {
+        return [];
+      },
+      set visible(visible) {
+        setVisible(visible);
+      }
+    };
+  };
+  return visible && path && /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({
+      height: '100%'
+    }, props.config)
+  }, !_Utils.default.isNull(path) && !_Utils.default.isNull(displayType) && displayType !== 'VIEW' && /*#__PURE__*/_react.default.createElement("object", {
+    data: path,
+    type: "text/html",
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }));
+}));
+var _default = exports.default = Chart;

package/dist/components/layout/Layout.js

@@ -29,6 +29,7 @@ var _TabPanel = _interopRequireDefault(require("../TabPanel"));
 var _DocumentTemplateDesigner = _interopRequireDefault(require("../DocumentTemplateDesigner"));
 var _ChatRoomWrapper = _interopRequireDefault(require("../media/chat/ChatRoomWrapper"));
 var _ProgressTracker = _interopRequireDefault(require("../ProgressTracker"));
+var _Chart = _interopRequireDefault(require("../Chart"));
 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); }
 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; }
@@ -250,6 +251,13 @@ const Layout = props => {
             key: index,
             viewId: props.viewId
           });
+        case 'chart':
+          return /*#__PURE__*/_react.default.createElement(_Chart.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            key: index,
+            viewId: props.viewId
+          });
         default:
           return /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
       }

package/dist/view/Dashboard.js

@@ -27,6 +27,7 @@ const location = window.location.protocol + '//' + window.location.hostname;
 const text = response => {
   return response.text();
 };
+let keyCounter = 0;
 const alertBarHandle = {};
 const DashboardCard = props => {
   const [path, setPath] = _react.default.useState(null);
@@ -39,7 +40,6 @@ const DashboardCard = props => {
   const [id, setId] = _react.default.useState(props.settings.id);
   const [content, setContent] = _react.default.useState(null);
   const [ref] = _react.default.useState(/*#__PURE__*/_react.default.createRef());
-  const keyCounter = (0, _react.useRef)(0);
   _react.default.useEffect(() => {
     const accessToken = sessionStorage.getItem('accessToken');
     const idToken = sessionStorage.getItem('idToken');
@@ -56,6 +56,7 @@ const DashboardCard = props => {
     if (path && displayType) {
       if (displayType === 'VIEW') {
         (0, _RestUtils.sendRequest)(path, data => {
+          data.id = data.id + "-" + keyCounter++;
           let dashboardView = {};
           let defaultModel = {};
           dashboardView.config = data;
@@ -73,9 +74,9 @@ const DashboardCard = props => {
               }
             }
           };
-          _ApplicationManager.default.addView(dashboardView, path, true);
+          _ApplicationManager.default.addDashboardView(dashboardView, path);
           let element = /*#__PURE__*/_react.default.createElement(_View.View, {
-            key: data.id + "-" + keyCounter.current++,
+            key: data.id,
             config: data,
             parameters: [],
             handle: dashboardView.handle
@@ -93,14 +94,16 @@ const DashboardCard = props => {
           }
         };
         (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(path), fetchConfig).then(text).then(data => {
+          console.log("CONTENT : ", data);
           setContent(data);
         }).catch(e => {
+          alert(e.message);
           console.error(e);
         }));
       }
     }
   }, [path, displayType]);
-  _react.default.useEffect(() => {
+  function load() {
     if (!path) {
       // TODO: Make the base URL dynamic
       let url = location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/dashboard/get?version=1.0&id=' + settings.path;
@@ -130,6 +133,9 @@ const DashboardCard = props => {
         console.error(e);
       });
     }
+  }
+  _react.default.useEffect(() => {
+    load();
   }, []);
   const saveDashboard = () => {
     settings.parameters.displayType = displayType;
@@ -459,6 +465,9 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     _ApplicationManager.default.setDashboardView({
       handle: handle
     });
+    return () => {
+      _ApplicationManager.default.clearDashboardViews();
+    };
   }, []);
   const addDashboardCard = item => {
     let path = item.eventHandlingConfig.subscriptions[0].actions[0].path;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.24",
+  "version": "1.8.27",
   "files": [
     "dist"
   ],
@@ -135,7 +135,7 @@
     "eslint-plugin-flowtype": "3.13.0",
     "typescript": "3.8.3"
   },
-  "description": "export NODE_OPTIONS=--openssl-legacy-provider",
+  "description": "AgileMotion React UI Component Library - A comprehensive collection of dashboard components, forms, media controls, and more",
   "main": "gulpfile.js",
   "author": "",
   "license": "ISC",