@agilemotion/oui-react-js 1.3.0 → 1.3.2

package/dist/components/StepperTitleBar.css

@@ -0,0 +1,85 @@
+.stepDot,
+.stepDotActive,
+.stepDotVisited,
+.stepDotBox,
+.stepDotBoxActive {
+    border-radius: 100px;
+    display: inline-block;
+    text-align: center;
+    font-size: 18px;
+    color: #888888;
+    border: 1px solid #888888;
+}
+
+.stepDotBox,
+.stepDotBoxActive {
+    border: none;
+}
+
+.stepDotVisited,
+.stepDotActive {
+    color: #ffffff;
+    border: 1px solid #ffffff;
+    font-weight: 600;
+}
+
+.stepDotVisited {
+    border: none;
+}
+
+.stepTitle{
+    color: #ffffff;
+    font-size: 16px;
+    height: 30px;
+    float: right;
+    border-top-right-radius: 100px;
+    border-bottom-right-radius: 100px;
+    padding: 2px 8px;
+    font-weight: 600;
+}
+
+@media screen and (min-width:3480px) {
+    .stepTitle {
+        padding: 2px 0;
+    }
+}
+
+.stepDot,
+.stepDotVisited,
+.stepDotActive {
+    float: left;
+    width: 30px;
+    height: 30px;
+}
+
+.stepperLine {
+    width: calc(100% - 30px);
+    float: left;
+    border-top: 1px solid #888888;
+    margin: 14px 0 0 0;
+    padding: 0;
+}
+
+@media screen and (min-width:732px) {
+    .stepperLine {
+        width: calc(100% - 30.3px);
+    }
+}
+
+@media screen and (min-width:1176px) {
+    .stepperLine {
+        width: calc(100% - 30.4px);
+    }
+}
+
+@media screen and (min-width:2200px) {
+    .stepperLine {
+        width: calc(100% - 30.7px);
+    }
+}
+
+@media screen and (min-width:7320px) {
+    .stepperLine {
+        width: calc(100% - 32px);
+    }
+}

package/dist/components/StepperTitleBar.js

@@ -0,0 +1,190 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
+
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+
+var _core = require("@material-ui/core");
+
+require("./StepperTitleBar.css");
+
+var _jquery = _interopRequireDefault(require("jquery"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const useStyles = (0, _core.makeStyles)(theme => ({
+  theme: {
+    backgroundColor: theme.palette.secondary.main
+  },
+  themeBorder: {
+    borderColor: theme.palette.secondary.main
+  }
+}));
+
+const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        steps = _React$useState2[0],
+        setSteps = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(true),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        initializing = _React$useState4[0],
+        setInitializing = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(null),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        segmentPercentage = _React$useState6[0],
+        setSegmentPercentage = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState(null),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        currentIndex = _React$useState8[0],
+        setCurrentIndex = _React$useState8[1];
+
+  let counter = -1;
+  let graphicsCounter = -1;
+  const classes = useStyles();
+
+  _react.default.useEffect(() => {
+    if (initializing) {
+      props.handle.api = api();
+
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
+      eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
+      let subscription = {
+        publisher: "applicationContext",
+        eventType: _EventType.default.APPLICATION_CONTEXT_CHANGE,
+        actions: [{
+          actionType: "script",
+          script: {
+            lines: ["if($event.data.name === 'stepperTitle'){", "   @#{".concat(props.config.id, "}.show()"), "}"]
+          }
+        }]
+      };
+      eventHandlingConfig.subscriptions.push(subscription);
+
+      _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
+
+      props.loadCompleteHandler(props.config.id);
+      setInitializing(false);
+      (0, _jquery.default)(document).ready(function () {
+        recalcLinePosition();
+      });
+      (0, _jquery.default)(window).resize(function () {
+        recalcLinePosition();
+      });
+    }
+
+    recalcLinePosition();
+  });
+
+  const recalcLinePosition = () => {
+    (0, _jquery.default)("#selectedLineDiv").css({
+      'width': (0, _jquery.default)("#step-container-0").width() - ((0, _jquery.default)("#titleDiv").width() + 40) + 'px',
+      'position': 'absolute'
+    });
+  };
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      getChildren: () => {
+        return [];
+      },
+
+      show() {
+        let steps = _ApplicationContext.default.graphs[0].getTitleStack();
+
+        setSteps(steps);
+        setCurrentIndex(_ApplicationContext.default.graphs[0].getCurrentNodeIndex());
+        setSegmentPercentage(100 / steps.length);
+      }
+
+    };
+  };
+
+  function renderStep(step) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ++graphicsCounter > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+      className: graphicsCounter === currentIndex ? "".concat(classes.themeBorder, " stepperLine") : 'stepperLine',
+      id: graphicsCounter === currentIndex ? 'selectedLineDiv' : 'lineDiv'
+    }) : null, /*#__PURE__*/_react.default.createElement("div", {
+      className: graphicsCounter === currentIndex ? "".concat(classes.theme, " stepDotBoxActive") : 'stepDotBox',
+      style: {
+        display: "table-cell"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: graphicsCounter < currentIndex ? "".concat(classes.theme, " stepDotVisited") : graphicsCounter === currentIndex ? "".concat(classes.theme, " stepDotActive") : 'stepDot'
+    }, step.index + 1), graphicsCounter === currentIndex ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "stepTitle",
+      id: "titleDiv"
+    }, step.title) : null));
+  }
+
+  function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "w-100",
+      style: {
+        width: "100%"
+      }
+    }, /*#__PURE__*/_react.default.createElement("table", {
+      cellPadding: "0",
+      border: "0",
+      width: "100%",
+      style: {
+        borderCollapse: "collapse"
+      }
+    }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, steps.map(step => /*#__PURE__*/_react.default.createElement("td", {
+      width: segmentPercentage + '%',
+      align: "right",
+      style: {
+        whiteSpace: "nowrap",
+        paddingTop: '8px',
+        maxHeight: '8px'
+      },
+      id: 'step-container-' + counter++
+    }, renderStep(step)))))));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '24px',
+      color: '#202124',
+      padding: "16px 0",
+      width: "70%"
+    }
+  }, !_Utils.default.isNull(steps) && !_Utils.default.isNull(segmentPercentage) && !_Utils.default.isNull(currentIndex) ? render() : null) : null);
+}));
+
+var _default = StepperTitleBar;
+exports.default = _default;

package/dist/components/TitleBar.js

@@ -56,7 +56,7 @@ const TitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
         actions: [{
           actionType: "script",
           script: {
-            lines: ["@#{".concat(props.config.id, "}.title = $event.data.value")]
+            lines: ["if($event.data.name === 'title'){", "   @#{".concat(props.config.id, "}.title = $event.data.value"), "}"]
           }
         }]
       };

package/dist/components/Toolbar.js

@@ -270,7 +270,10 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       className: "row",
       ref: ref,
       style: {
-        padding: '0 0 8px 0'
+        padding: '0 0 8px 0',
+        width: '100%',
+        textAlign: _Utils.default.getComponentAttribute(toolbar, 'align', null),
+        display: "inline-block"
       }
     }, toolbar.sections.map(section => {
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -293,9 +296,9 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: {
-      padding: _Utils.default.getComponentAttribute(props.config, 'padding', '0px 32px 0px 32px'),
+      padding: _Utils.default.getComponentAttribute(props.config, 'padding', null),
       borderBottom: getBorderBottom(),
-      margin: _Utils.default.getComponentAttribute(props.config, 'margin', null)
+      margin: _Utils.default.getComponentAttribute(props.config, 'margin', '0px 32px 0px 32px')
     }
   }, render(props.config));
 });

package/dist/components/dashboard/{BasicBusinessApp.js → BasicBusinessAppDashboard.js}

@@ -47,7 +47,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 let ps;
 
-const BasicBusinessApp = props => {
+const BasicBusinessAppDashboard = props => {
   const _React$useState = _react.default.useState(true),
         _React$useState2 = _slicedToArray(_React$useState, 2),
         navDrawerOpen = _React$useState2[0],
@@ -193,31 +193,31 @@ const BasicBusinessApp = props => {
         }
       }
 
-      let createNewRoutes = [];
+      let newRoutes = [];
       let newRoute = {};
       newRoute.name = "Dashboard";
       newRoute.icon = "fa fa-pie-chart";
       newRoute.layout = "/admin";
       newRoute.level = 0;
       newRoute.isParent = true;
-      createNewRoutes.push(newRoute);
+      newRoutes.push(newRoute);
 
       if (!_Utils.default.isNull(props.settings.systemProfileDto.modules)) {
         for (let i = 0; i < props.settings.systemProfileDto.modules.length; i++) {
           let module = props.settings.systemProfileDto.modules[i];
-          let createRoute = {};
-          createRoute.name = module.label;
-          createRoute.icon = module.icon;
-          createRoute.layout = "/admin";
-          createRoute.level = 0;
+          let route = {};
+          route.name = module.label;
+          route.icon = module.icon;
+          route.layout = "/admin";
+          route.level = 0;
 
           if (module.menuBar && module.menuBar.menus.length > 0) {
-            createRoute.collapse = true;
-            createRoute.state = module.name + "Collapse";
-            createRoute.views = getViews(module.menuBar.menus, 1);
+            route.collapse = true;
+            route.state = module.name + "Collapse";
+            route.views = getViews(module.menuBar.menus, 1);
           }
 
-          createNewRoutes.push(createRoute);
+          newRoutes.push(route);
         }
       }
 
@@ -230,8 +230,8 @@ const BasicBusinessApp = props => {
       newRoute.level = 0;
       newRoute.state = "settingsMenuCollapse";
       newRoute.views = getViews(props.settings.settingsMenu.menus, 1);
-      createNewRoutes.push(newRoute);
-      setRoutes(createNewRoutes);
+      newRoutes.push(newRoute);
+      setRoutes(newRoutes);
       props.settings.dashboardMenu = createNewMenu.items.length > 0 ? dashboardMenu : null;
       setLoading(false);
     }
@@ -395,6 +395,7 @@ const BasicBusinessApp = props => {
     activeColor: "agility",
     secondaryThemeColor: secondaryThemeColor,
     activeRouteMenu: 'Dashboard',
+    className: "sidebar",
     dashboardLauncher: () => {
       launcDashboard();
     },
@@ -425,9 +426,9 @@ const BasicBusinessApp = props => {
   }))), " "));
 };
 
-BasicBusinessApp.propTypes = {
+BasicBusinessAppDashboard.propTypes = {
   children: _propTypes.default.element,
   width: _propTypes.default.number
 };
-var _default = BasicBusinessApp;
+var _default = BasicBusinessAppDashboard;
 exports.default = _default;

package/dist/components/dashboard/BusinessPortalAppDashboard.css

@@ -0,0 +1,5 @@
+.portal-dashboard-content {
+    height: calc(100vh - 48px);
+    background-color: #f1f1f1;
+    margin-top: 0;
+}

package/dist/components/dashboard/BusinessPortalAppDashboard.js

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _PortalNavbar = _interopRequireDefault(require("../navbars/PortalNavbar"));
+
+require("./BusinessPortalAppDashboard.css");
+
+var _Workspace = _interopRequireDefault(require("./components/portal/Workspace"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+let ps;
+
+const BusinessPortalAppDashboard = props => {
+  const _React$useState = _react.default.useState(true),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        loading = _React$useState2[0],
+        setLoading = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState([]),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        routes = _React$useState4[0],
+        setRoutes = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState("data:image/png;base64," + props.logo),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        logo = _React$useState6[0],
+        setLogo = _React$useState6[1];
+
+  const getItems = (items, level) => {
+    let newItems = [];
+
+    for (let i = 0; i < items.length; i++) {
+      let createItem = {};
+      createItem.name = items[i].attributes.label;
+      createItem.mini = "SS";
+      createItem.layout = "/admin";
+      createItem.item = items[i];
+      createItem.level = level;
+
+      if (!_Utils.default.isNull(items[i].subMenu)) {
+        createItem.collapse = true;
+        createItem.state = items[i].id + "SubMenuCollapse";
+        createItem.views = getItems(items[i].subMenu.items, level + 1);
+      }
+
+      newItems.push(createItem);
+    }
+
+    return newItems;
+  };
+
+  const getViews = (menus, level) => {
+    let newViews = [];
+
+    for (let i = 0; i < menus.length; i++) {
+      let createView = {};
+      createView.name = menus[i].attributes.label;
+      createView.mini = "SS";
+      createView.layout = "/admin";
+      createView.level = level;
+      createView.item = menus[i];
+
+      if (menus[i].items && menus[i].items.length > 0) {
+        createView.collapse = true;
+        createView.state = menus[i].id + "Collapse";
+        createView.views = getItems(menus[i].items, level + 1);
+      }
+
+      newViews.push(createView);
+    }
+
+    return newViews;
+  };
+
+  _react.default.useEffect(() => {
+    document.body.classList.add("white-content");
+
+    if (navigator.platform.indexOf("Win") > -1) {
+      ps.destroy();
+      document.documentElement.className.add("perfect-scrollbar-off");
+      document.documentElement.classList.remove("perfect-scrollbar-on");
+    }
+
+    window.removeEventListener("scroll", showNavbarButton); //dispatch(actionCreators.setSecondaryThemeColor(props.settings.systemProfileDto.secondCorporateBrandColor));
+
+    if (!_Utils.default.isNull(props.settings)) {
+      //alert(JSON.stringify(props.settings.menu));
+      let newRoutes = [];
+
+      var _iterator = _createForOfIteratorHelper(props.settings.menu.menus),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          const menu = _step.value;
+          let newRoute = {};
+          newRoute.name = menu.attributes.label;
+
+          if (!_Utils.default.isNull(menu.icon)) {
+            newRoute.icon = menu.icon;
+          }
+
+          newRoute.layout = "/admin";
+          newRoute.level = 0;
+          newRoute.isParent = true;
+          newRoute.item = menu;
+          newRoutes.push(newRoute);
+
+          if (!_Utils.default.isNull(menu.items) && menu.items.length > 0) {
+            newRoute.collapse = true;
+            newRoute.state = menu.name + "Collapse";
+            newRoute.views = getViews(menu.items, 1);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      setRoutes(newRoutes);
+      setLoading(false);
+    }
+  }, [props.settings]);
+
+  const handleMiniClick = () => {};
+
+  const showNavbarButton = () => {
+    if (document.documentElement.scrollTop > 50 || document.scrollingElement.scrollTop > 50) {//setOpacity(1);
+    } else if (document.documentElement.scrollTop <= 50 || document.scrollingElement.scrollTop <= 50) {//setOpacity(0);
+    }
+  };
+
+  return loading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading...") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "wrapper",
+    style: {
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row-*-*"
+  }, /*#__PURE__*/_react.default.createElement(_PortalNavbar.default, {
+    logoutCallBack: props.logoutCallBack,
+    appLogoPath: props.appLogoPath,
+    avatar: props.avatar,
+    logo: {
+      outterLink: "",
+      text: "",
+      imgSrc: logo
+    }
+  }), " "), /*#__PURE__*/_react.default.createElement("div", {
+    className: "portal-dashboard-content"
+  }, /*#__PURE__*/_react.default.createElement(_Workspace.default, {
+    routes: routes,
+    heading: "Welcome, " + props.settings.userFirstName,
+    activeRouteMenu: 'My Work Items',
+    secondaryColor: props.settings.secondaryColor
+  }))));
+};
+
+BusinessPortalAppDashboard.propTypes = {
+  children: _propTypes.default.element,
+  width: _propTypes.default.number
+};
+var _default = BusinessPortalAppDashboard;
+exports.default = _default;