@agilemotion/oui-react-js 1.8.5 → 1.8.7

package/dist/components/DataGrid.css

@@ -23,7 +23,7 @@ table.responsive-table thead {
         left: 0;
         right: 0;
         width: 100%;
-        height: 50px;
+        min-height: 50px;
         line-height: 3em;
         background: #eee;
         table-layout: fixed;

package/dist/components/DataGridHeading.js

@@ -57,7 +57,7 @@ const DataGridHeading = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
     style: {
       display: 'flex',
       flexWrap: 'wrap',
-      height: '56px'
+      minHeight: '56px'
     }
   }, props.config.selectionMode === 'MULTIPLE' ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Th, {
     padding: "checkbox",

package/dist/components/ProgressTracker.js

@@ -0,0 +1,147 @@
+"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 _RestService = require("../RestService");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Handlebars = require('handlebars');
+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);
+  }
+};
+const json = response => {
+  return response.text();
+};
+const location = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port;
+const HtmlPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [data, setData] = _react.default.useState(null);
+  const [visible, setVisible] = _react.default.useState(false);
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+  _react.default.useEffect(() => {
+    let event = new _Event.default(props.handle, props.viewId, null);
+    _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
+    doLoadData();
+  }, []);
+  _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);
+    props.handle.api.refresh();
+    return () => {
+      _Observable.default.clearComponentEventListeners(props.handle);
+    };
+  }, []);
+  const doLoadData = actionConfig => {
+    let service;
+    if (actionConfig && actionConfig.service) {
+      service = actionConfig.service;
+    } else {
+      service = props.config.dataService;
+    }
+    if (!_Utils.default.isNull(service)) {
+      let method = service.type === 'rpc' ? _RestService.invokeRpc : _RestService.invokeRest;
+      method({
+        service: service,
+        component: props.handle,
+        viewId: props.viewId
+      }).then(result => {
+        setData(result);
+      }).catch(e => {
+        console.error(e);
+        _Utils.default.publishErrorMessage(e, props.viewId);
+      });
+    }
+  };
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+      loadData: actionConfig => {
+        doLoadData(actionConfig);
+      },
+      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 && /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({}, props.config)
+  }, data && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.steps.map((step, index) => {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: "inline-block",
+        width: "auto",
+        padding: "16px",
+        borderRadius: "32px",
+        maxWidth: "100%",
+        backgroundColor: step.sequence < data.currentStep.sequence ? '#50cd89' : step.sequence === data.currentStep.sequence ? _ApplicationManager.default.getApplicationPrimaryColor() : 'white',
+        border: '1px solid ' + _ApplicationManager.default.getApplicationSecondaryColor(),
+        color: step.sequence < data.currentStep.sequence ? '#FFFFFF' : null,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, step.description), step.startDate && step.endDate && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        fontStyle: "italic",
+        fontSize: '12px',
+        width: "100%",
+        display: 'flex',
+        justifyContent: 'left',
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, step.startDate + " - " + step.endDate))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, index < data.steps.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: "24px",
+        marginLeft: "48px"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: "-6px",
+        height: "calc(100% + 8px)",
+        width: "1px",
+        backgroundColor: _ApplicationManager.default.getApplicationSecondaryColor()
+      }
+    }))));
+  })));
+}));
+var _default = exports.default = HtmlPanel;

package/dist/components/form/LookupField.js

@@ -82,7 +82,6 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     className: 'col-*-*',
     style: {
       width: '72px',
-      marginRight: '8px',
       height: '100%'
     }
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -96,7 +95,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   }, "...")), /*#__PURE__*/_react.default.createElement("div", {
     className: 'col-*-* no-margin no-padding',
     style: {
-      width: 'calc(100% - 80px)',
+      width: 'calc(100% - 72px)',
       marginBottom: base.value ? '0' : '8px'
     }
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {

package/dist/components/layout/Layout.js

@@ -28,6 +28,7 @@ var _Portlet = _interopRequireDefault(require("../Portlet"));
 var _TabPanel = _interopRequireDefault(require("../TabPanel"));
 var _DocumentTemplateDesigner = _interopRequireDefault(require("../DocumentTemplateDesigner"));
 var _ChatRoomWrapper = _interopRequireDefault(require("../media/chat/ChatRoomWrapper"));
+var _ProgressTracker = _interopRequireDefault(require("../ProgressTracker"));
 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; }
@@ -242,6 +243,13 @@ const Layout = props => {
             key: index,
             viewId: props.viewId
           });
+        case 'progressTracker':
+          return /*#__PURE__*/_react.default.createElement(_ProgressTracker.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/components/signatures/ResponsiveTable.css

@@ -17,7 +17,7 @@ table.responsive-table thead {
         left: 0;
         right: 0;
         width: 100%;
-        height: 50px;
+        min-height: 50px;
         line-height: 3em;
         background: #eee;
         table-layout: fixed;

package/dist/view/Dashboard.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Utils = _interopRequireDefault(require("../Utils"));
 var _reactstrap = require("reactstrap");
 var _Icon = _interopRequireDefault(require("../components/Icon"));
@@ -18,7 +18,11 @@ var _Event = _interopRequireDefault(require("../event/Event"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
 var _AlertBar = _interopRequireDefault(require("../components/AlertBar"));
+var _reactPromiseTracker = require("react-promise-tracker");
+var _View = require("../components/layout/View");
 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; }
 const location = window.location.protocol + '//' + window.location.hostname;
 const text = response => {
   return response.text();
@@ -28,38 +32,55 @@ const DashboardCard = props => {
   const [path, setPath] = _react.default.useState(null);
   const [name, setName] = _react.default.useState(null);
   const [displayType, setDisplayType] = _react.default.useState(null);
+  const [view, setview] = _react.default.useState(null);
   const {
     settings
   } = 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');
-    if (path) {
-      let fetchConfig = {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'text/html',
-          'Accept': 'text/html',
-          'Authorization': 'Bearer ' + accessToken,
-          'idToken': idToken
+    const handle = {
+      api: {
+        get id() {
+          return 'dashboard-menus';
+        },
+        loaded() {
+          return true;
         }
-      };
-
-      /*trackPromise(
-          fetch(encodeURI(path), fetchConfig)
-              .then(text)
-              .then((data) => {
-                  setContent(data);
-              })
-              .catch((e) => {
-                  console.error(e);
-              })
-      );*/
-    }
-  }, [path]);
+      }
+    };
+    if (path && displayType) {
+      if (displayType === 'VIEW') {
+        (0, _RestUtils.sendRequest)(path, data => {
+          setview(/*#__PURE__*/_react.default.createElement(_View.View, {
+            key: data.id + "-" + keyCounter.current++,
+            config: data,
+            parameters: [],
+            handle: handle
+          }));
+        });
+      } else {
+        let fetchConfig = {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'text/html',
+            'Accept': 'text/html',
+            'Authorization': 'Bearer ' + accessToken,
+            'idToken': idToken
+          }
+        };
+        (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(path), fetchConfig).then(text).then(data => {
+          setContent(data);
+        }).catch(e => {
+          console.error(e);
+        }));
+      }
+    }
+  }, [path, displayType]);
   _react.default.useEffect(() => {
     if (!path) {
       // TODO: Make the base URL dynamic
@@ -79,7 +100,13 @@ const DashboardCard = props => {
         setName(defaultName);
         const accessToken = sessionStorage.getItem('accessToken');
         const idToken = sessionStorage.getItem('idToken');
-        setPath(location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/html/get?version=1.0&id=' + data.contentPath + `-${defaultDisplayType.toLowerCase()}.html&access_token=${accessToken}&idToken=${idToken}`);
+        if (defaultDisplayType === 'VIEW') {
+          let url = location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/view/get?version=1.0&id=' + data.contentPath;
+          setPath(url);
+          setDisplayType(defaultDisplayType);
+        } else {
+          setPath(location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/html/get?version=1.0&id=' + data.contentPath + `-${defaultDisplayType.toLowerCase()}.html&access_token=${accessToken}&idToken=${idToken}`);
+        }
       }, e => {
         console.error(e);
       });
@@ -198,14 +225,19 @@ const DashboardCard = props => {
       height: '32vh',
       padding: '8px 32px 0 0'
     }
-  }, !_Utils.default.isNull(path) ? /*#__PURE__*/_react.default.createElement("object", {
+  }, !_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%'
     }
-  }) : /*#__PURE__*/_react.default.createElement("p", null, "Loading...")));
+  }), !_Utils.default.isNull(path) && displayType !== 'VIEW' && /*#__PURE__*/_react.default.createElement("p", null, "Loading..."), displayType === 'VIEW' && !_Utils.default.isNull(view) && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: "100%"
+    }
+  }, view)));
 };
 const WorkFlowCard = props => {
   const [sp, setSp] = _react.default.useState(null);
@@ -278,7 +310,6 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
   const [cardRows, setCardRows] = _react.default.useState(null);
   const [cardsPerRow, setCardsPerRow] = _react.default.useState(null);
   let dashboardCardCounter = 0;
-  let keyCounter = 0;
   const api = {
     get id() {
       return '_sys_dashboard';
@@ -350,6 +381,28 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
       }, null);
     });
   };
+  async function loadMenus() {
+    if (_Utils.default.isNull(menuItems) && !_Utils.default.isNull(settings.systemProfileDto.modules)) {
+      let dashboardMenuitems = [];
+      for (let i = 0; i < settings.systemProfileDto.modules.length; i++) {
+        let module = settings.systemProfileDto.modules[i];
+        if (!_Utils.default.isNull(module.dashboardMenu)) {
+          let menus = await getDashboardMenu(module.dashboardMenu);
+          if (menus) {
+            for (let j = 0; j < menus.length; j++) {
+              let menu = menus[j];
+              if (menu.items) {
+                for (const item of menu.items) {
+                  dashboardMenuitems.push(item);
+                }
+              }
+            }
+          }
+        }
+      }
+      setMenuItems(dashboardMenuitems);
+    }
+  }
   _react.default.useEffect(() => {
     /*let rpcConfig = {
         "type": "rpc",
@@ -383,25 +436,7 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
       console.error(e);
       // TODO : Show error message
     }, true, true);
-    if (_Utils.default.isNull(menuItems) && !_Utils.default.isNull(settings.systemProfileDto.modules)) {
-      let dashboardMenuitems = [];
-      for (let i = 0; i < settings.systemProfileDto.modules.length; i++) {
-        let module = settings.systemProfileDto.modules[i];
-        if (!_Utils.default.isNull(module.dashboardMenu)) {
-          getDashboardMenu(module.dashboardMenu).then(menus => {
-            if (menus) {
-              for (let j = 0; j < menus.length; j++) {
-                let menu = menus[j];
-                for (const item of menu.items) {
-                  dashboardMenuitems.push(item);
-                }
-              }
-            }
-          }).catch(e => {});
-        }
-      }
-      setMenuItems(dashboardMenuitems);
-    }
+    loadMenus();
     if (!_Utils.default.isNull(settings) && !_Utils.default.isNull(userDashboards) && _Utils.default.isNull(cardRows) && !_Utils.default.isNull(cardsPerRow)) {
       setupCardRows();
     }
@@ -428,14 +463,17 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     className: 'col-*-*',
     style: {
       padding: '14px',
-      width: '120px'
+      width: '136px'
     }
   }, /*#__PURE__*/_react.default.createElement("p", {
     style: {
       fontSize: '24px'
     }
   }, "Dashboard")), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'col-*-*'
+    className: 'col-*-*',
+    style: {
+      marginTop: "4px"
+    }
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledDropdown, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
     color: "default",
     "data-toggle": "dropdown",
@@ -449,9 +487,9 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     className: "dropdown-navbar",
     end: true,
     tag: "ul"
-  }, menuItems.map(item => /*#__PURE__*/_react.default.createElement(_reactstrap.NavLink, {
+  }, menuItems.map((item, index) => /*#__PURE__*/_react.default.createElement(_reactstrap.NavLink, {
     tag: "li",
-    key: keyCounter++
+    key: index
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     className: "nav-item",
     onClick: () => {
@@ -491,19 +529,18 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     title: 'Due Today',
     itemCount: taskSummary.dueTodayItemCount,
     path: '/workflow/views/due-today-work-items.json'
-  })), /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(cardRows) ? cardRows.map(row => /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(cardRows) ? cardRows.map((row, i) => /*#__PURE__*/_react.default.createElement("div", {
     className: 'row',
     style: {
       margin: '0 0 16px 0'
     },
-    key: keyCounter++
-  }, row.map(userDashboard => /*#__PURE__*/_react.default.createElement(DashboardCard, {
+    key: i
+  }, row.map((userDashboard, j) => /*#__PURE__*/_react.default.createElement(DashboardCard, {
     settings: userDashboard,
     index: dashboardCardCounter,
-    key: dashboardCardCounter++,
+    key: i + j,
     onDelete: () => {
       userDashboards.splice(userDashboards.indexOf(userDashboard), 1);
-      console.log("\n\n\n\nUD : ", userDashboards);
       setupCardRows(userDashboard);
     }
   })))) : null))));

package/package.json

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