@agilemotion/oui-react-js 1.6.3 → 1.6.5

package/dist/components/dashboard/components/blackDashboard/sidebar/ModuleMenuSidebar.js

@@ -1,324 +1,32 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 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 _reactstrap = require("reactstrap");
-
 var _MenuLink = _interopRequireDefault(require("../../../../menu/MenuLink"));
-
 var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"));
-
 var _core = require("@material-ui/core");
-
 var _RestUtils = require("../../../../../RestUtils");
-
 require("./ModuleMenuSidebar.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*eslint-disable*/
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var ps;
-var TAB = 16;
-
-var ModuleMenuSidebar = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModuleMenuSidebar, _React$Component);
-
-  var _super = _createSuper(ModuleMenuSidebar);
-
-  function ModuleMenuSidebar(props) {
-    var _this;
-
-    _classCallCheck(this, ModuleMenuSidebar);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "getViews", function (menus, level) {
-      var newViews = [];
-
-      for (var i = 0; i < menus.length; i++) {
-        var createView = {};
-        createView.name = menus[i].attributes.label;
-        createView.id = menus[i].id;
-        createView.mini = 'SS';
-        createView.layout = '/admin';
-        createView.level = level;
-
-        if (menus[i].subMenu) {
-          createView.collapse = true;
-          createView.state = menus[i].id + 'Collapse';
-          createView.views = _this.getItems(menus[i].subMenu.items, level + 1);
-        } else {
-          createView.item = menus[i];
-        }
-
-        newViews.push(createView);
-      }
-
-      console.log('VIEWS : ', newViews, menus);
-      return newViews;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getItems", function (items, level) {
-      var newItems = [];
-
-      for (var i = 0; i < items.length; i++) {
-        var createItem = {};
-        createItem.name = items[i].attributes.label;
-        createItem.id = items[i].id;
-        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 = _this.getItems(items[i].subMenu.items, level + 1);
-        }
-
-        newItems.push(createItem);
-      }
-
-      return newItems;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getCollapseStates", function (routes) {
-      var initialState = {};
-
-      if (routes) {
-        routes.map(function (prop, key) {
-          if (prop.collapse) {
-            initialState = _objectSpread(_objectSpread(_defineProperty({}, prop.state, _this.getCollapseInitialState(prop.views)), _this.getCollapseStates(prop.views)), initialState);
-          }
-
-          return null;
-        });
-      }
-
-      return initialState;
-    });
+// javascript plugin used to create scrollbars on windows
 
-    _defineProperty(_assertThisInitialized(_this), "getMenu", function (route) {
-      return new Promise(function (resolve) {
-        var service = {
-          url: '/ui/api/v1/menu/get',
-          parameters: [{
-            name: 'id',
-            value: route.menu,
-            httpParameterType: 'QUERY_PARAMETER'
-          }, {
-            name: 'version',
-            value: 1.0,
-            httpParameterType: 'QUERY_PARAMETER'
-          }],
-          contentType: 'application/json'
-        };
-        (0, _RestUtils.invokeRest)(service, {
-          api: {
-            get id() {
-              return 'dashboard-sidebar';
-            }
-
-          }
-        }, 'dashboard-sidebar', function (result) {
-          resolve(_this.getViews(result.menus, route.level + 1));
-        }, function (e) {
-          console.error(e);
-          resolve(null);
-        }, null);
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getLiClassName", function (prop) {
-      return "li-" + prop.level;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "createModuleTabs", function (routes) {
-      var _this$props = _this.props,
-          rtlActive = _this$props.rtlActive,
-          secondaryThemeColor = _this$props.secondaryThemeColor,
-          primaryThemeColor = _this$props.primaryThemeColor;
-      return routes.map(function (module, key) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: key,
-          style: {
-            backgroundColor: _this.activeModule(module.name) ? primaryThemeColor : (0, _core.lighten)(secondaryThemeColor, .1)
-          },
-          className: "".concat(_this.activeModule(module.name) ? 'module-tab-selected' : 'module-tab'),
-          onClick: function onClick(e) {
-            _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
-              activeModule: module.name
-            }));
-
-            var currentModule = _this.state.routes.find(function (r) {
-              return r.name === module.name;
-            });
-
-            _this.getMenu(currentModule).then(function (result) {
-              _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
-                selectedMenuRoutes: result
-              }));
-            });
-          }
-        }, /*#__PURE__*/_react.default.createElement("div", null, module.icon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-          className: 'tab-icon'
-        }, /*#__PURE__*/_react.default.createElement("i", {
-          className: module.icon,
-          style: {
-            width: '28px',
-            color: _this.activeModule(module.name) ? '#000000' : '#444746'
-          }
-        }), ' '), /*#__PURE__*/_react.default.createElement("div", null, ' ', module.label), ' ', ' ') : /*#__PURE__*/_react.default.createElement("span", null, module.name), _this.activeModule(module.name) && /*#__PURE__*/_react.default.createElement("i", {
-          className: 'fas fa-caret-left selected-module-caret'
-        })));
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "createLinks", function (routes) {
-      var _this$props2 = _this.props,
-          rtlActive = _this$props2.rtlActive,
-          secondaryThemeColor = _this$props2.secondaryThemeColor,
-          primaryThemeColor = _this$props2.primaryThemeColor;
-      return routes.map(function (prop, key) {
-        if (prop.redirect) {
-          return null;
-        }
+// reactstrap components
 
-        if ((prop.collapse || prop.isParent) && prop.name !== 'Dashboard' && prop.name !== 'My Work Items') {
-          var st = {};
-          st[prop['state']] = !_this.state[prop.state];
-          return /*#__PURE__*/_react.default.createElement("li", {
-            className: prop.collapse ? _this.getCollapseInitialState(prop.views) + '-' + prop.level ? 'active ' + _this.getLiClassName(prop) : _this.getLiClassName(prop) : _this.getLiClassName(prop),
-            key: key
-          }, /*#__PURE__*/_react.default.createElement("a", {
-            href: "#pablo",
-            className: 'li-link-' + prop.level,
-            "data-toggle": "collapse",
-            style: {
-              marginLeft: (prop.level + 1) * TAB + 'px'
-            },
-            "aria-expanded": _this.state[prop.state],
-            onClick: function onClick(e) {
-              if (!prop.views) {
-                _this.getMenu(prop).then(function (views) {
-                  if (views) {
-                    prop.views = views; //this.getCollapseInitialState(views);
-
-                    _this.setState(st);
-                  }
-                });
-              } else {
-                _this.setState(st);
-              }
-
-              e.preventDefault();
-            }
-          }, prop.icon !== undefined ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
-            className: prop.icon,
-            style: {
-              width: '28px'
-            }
-          }), ' ', /*#__PURE__*/_react.default.createElement("span", null, ' ', prop.name, ' ', prop.collapse ? /*#__PURE__*/_react.default.createElement("span", {
-            className: "caret",
-            style: {
-              marginTop: '0'
-            }
-          }) : null), ' ', ' ') : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-            className: "sidebar-normal",
-            style: {
-              paddingLeft: '4px'
-            }
-          }, ' ', prop.name, ' ', /*#__PURE__*/_react.default.createElement("b", {
-            className: "caret"
-          })), ' '), ' '), ' ', prop.collapse && prop.views ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
-            isOpen: _this.state[prop.state]
-          }, /*#__PURE__*/_react.default.createElement("ul", {
-            className: "nav"
-          }, " ", _this.createLinks(prop.views), " "), ' ') : null);
-        }
-
-        return /*#__PURE__*/_react.default.createElement("li", {
-          className: "".concat('menu-link-li' + (_this.activeRoute(prop.id) ? '-active' : '') + (prop.name === 'Dashboard' ? ' dashboard-link' : '')),
-          key: key,
-          style: _this.activeRoute(prop.id) ? {
-            backgroundColor: (0, _core.lighten)(secondaryThemeColor, .9),
-            borderRadius: '16px',
-            color: secondaryThemeColor,
-            fontWeight: 500
-          } : {}
-        }, /*#__PURE__*/_react.default.createElement(_MenuLink.default, {
-          config: prop.item,
-          clickCallback: prop.name === 'Dashboard' ? function (item) {
-            _this.props.dashboardLauncher();
-
-            _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
-              activeRouteMenu: item
-            }));
-          } : function (item) {
-            return _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
-              activeRouteMenu: item
-            }));
-          },
-          autoClick: prop.name === 'My Work Items' || prop.item && prop.item.defaultItem,
-          viewId: "menuBar",
-          icon: prop.icon,
-          iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && _this.activeRoute(prop.id) ? secondaryThemeColor : null,
-          backgroundColor: _this.activeRoute(prop.id) ? (0, _core.lighten)(secondaryThemeColor, .9) : null,
-          name: prop.name,
-          id: prop.id,
-          level: prop.level,
-          tab: TAB,
-          color: _this.activeRoute(prop.id) ? secondaryThemeColor : null
-        }), ' ');
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "activeRoute", function (routeName) {
-      // return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
-      return _this.state.activeRouteMenu.id === routeName;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "activeModule", function (moduleName) {
-      return _this.state.activeModule === moduleName;
-    });
-
-    _this.state = _objectSpread(_objectSpread({}, _this.getCollapseStates(props.routes)), {}, {
+let ps;
+const TAB = 16;
+class ModuleMenuSidebar extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...this.getCollapseStates(props.routes),
       isLoading: false,
       error: false,
       activeRouteMenu: {
@@ -326,54 +34,99 @@ var ModuleMenuSidebar = /*#__PURE__*/function (_React$Component) {
         name: 'Dashboard'
       },
       activeModule: 'home'
-    });
-    return _this;
+    };
   }
-
-  _createClass(ModuleMenuSidebar, [{
-    key: "getCollapseInitialState",
-    // this verifies if any of the collapses should be default opened on a rerender of this component
-    // for example, on the refresh of the page,
-    // while on the src/views/forms/RegularForms.js - route /admin/regular-forms
-    value: function getCollapseInitialState(routes) {
-      if (!routes) {
-        return false;
+  getViews = (menus, level) => {
+    let newViews = [];
+    for (let i = 0; i < menus.length; i++) {
+      let createView = {};
+      createView.name = menus[i].attributes.label;
+      createView.id = menus[i].id;
+      createView.mini = 'SS';
+      createView.layout = '/admin';
+      createView.level = level;
+      if (menus[i].subMenu) {
+        createView.collapse = true;
+        createView.state = menus[i].id + 'Collapse';
+        createView.views = this.getItems(menus[i].subMenu.items, level + 1);
+      } else {
+        createView.item = menus[i];
       }
-
-      for (var i = 0; i < routes.length; i++) {
-        if (!routes[i].views) {
-          return true;
-        }
-
-        if (routes[i].collapse && this.getCollapseInitialState(routes[i].views)) {
-          return true;
-        } else if (window.location.href.indexOf(routes[i].path) !== -1) {
-          return true;
-        }
+      newViews.push(createView);
+    }
+    console.log('VIEWS : ', newViews, menus);
+    return newViews;
+  };
+  getItems = (items, level) => {
+    let newItems = [];
+    for (let i = 0; i < items.length; i++) {
+      let createItem = {};
+      createItem.name = items[i].attributes.label;
+      createItem.id = items[i].id;
+      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 = this.getItems(items[i].subMenu.items, level + 1);
       }
-
+      newItems.push(createItem);
+    }
+    return newItems;
+  };
+
+  // this creates the intial state of this component based on the collapse routes
+  // that it gets through this.state.routes
+  getCollapseStates = routes => {
+    let initialState = {};
+    if (routes) {
+      routes.map((prop, key) => {
+        if (prop.collapse) {
+          initialState = {
+            [prop.state]: this.getCollapseInitialState(prop.views),
+            ...this.getCollapseStates(prop.views),
+            ...initialState
+          };
+        }
+        return null;
+      });
+    }
+    return initialState;
+  };
+  // this verifies if any of the collapses should be default opened on a rerender of this component
+  // for example, on the refresh of the page,
+  // while on the src/views/forms/RegularForms.js - route /admin/regular-forms
+  getCollapseInitialState(routes) {
+    if (!routes) {
       return false;
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      // if you are using a Windows Machine, the scrollbars will have a Mac look
-      if (navigator.platform.indexOf('Win') > -1) {
-        /*ps = new PerfectScrollbar(this.refs.sidebar, {
-            suppressScrollX: true,
-            suppressScrollY: false,
-        });*/
+    for (let i = 0; i < routes.length; i++) {
+      if (!routes[i].views) {
+        return true;
       }
-
-      var service = {
-        url: '/ui/api/v1/menu/filter',
+      if (routes[i].collapse && this.getCollapseInitialState(routes[i].views)) {
+        return true;
+      } else if (window.location.href.indexOf(routes[i].path) !== -1) {
+        return true;
+      }
+    }
+    return false;
+  }
+  getMenu = route => {
+    return new Promise(resolve => {
+      let service = {
+        url: '/ui/api/v1/menu/get',
         parameters: [{
-          value: this.props.routes,
-          httpParameterType: 'REQUEST_BODY'
+          name: 'id',
+          value: route.menu,
+          httpParameterType: 'QUERY_PARAMETER'
+        }, {
+          name: 'version',
+          value: 1.0,
+          httpParameterType: 'QUERY_PARAMETER'
         }],
-        method: 'POST',
         contentType: 'application/json'
       };
       (0, _RestUtils.invokeRest)(service, {
@@ -381,160 +134,328 @@ var ModuleMenuSidebar = /*#__PURE__*/function (_React$Component) {
           get id() {
             return 'dashboard-sidebar';
           }
-
         }
-      }, 'dashboard-sidebar', function (result) {
-        _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {
-          routes: result
-        }));
-
-        var currentModule = result.find(function (r) {
-          return r.name === _this2.state.activeModule;
-        });
-
-        if (currentModule) {
-          _this2.getMenu(currentModule).then(function (result) {
-            _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {
-              selectedMenuRoutes: result
-            }));
-          });
-        }
-      }, function (e) {
+      }, 'dashboard-sidebar', result => {
+        resolve(this.getViews(result.menus, route.level + 1));
+      }, e => {
         console.error(e);
+        resolve(null);
       }, null);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      // we need to destroy the false scrollbar when we navigate
-      // to a page that doesn't have this component rendered
-      if (navigator.platform.indexOf('Win') > -1) {//ps.destroy();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          activeColor = _this$props3.activeColor,
-          logo = _this$props3.logo;
-      var logoImg = null;
-      var logoText = null;
-
-      if (!_Utils.default.isNull(logo)) {
-        logoImg = /*#__PURE__*/_react.default.createElement("a", {
-          href: logo.outterLink,
-          className: "logo-normal",
-          onClick: this.props.closeSidebar
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: "logo-img",
-          style: {
-            paddingTop: '16px',
-            paddingBottom: '8px'
-          }
-        }, /*#__PURE__*/_react.default.createElement("img", {
-          src: logo.imgSrc,
-          alt: "logo"
-        })), ' ');
-        logoText = /*#__PURE__*/_react.default.createElement("a", {
-          href: logo.outterLink,
-          className: "simple-text ",
-          onClick: this.props.closeSidebar
-        }, logo.text, ' ');
-      }
-
+    });
+  };
+  getLiClassName = prop => {
+    return "li-" + prop.level;
+  };
+  createModuleTabs = routes => {
+    const {
+      rtlActive,
+      secondaryThemeColor,
+      primaryThemeColor
+    } = this.props;
+    return routes.map((module, key) => {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: this.props.className,
-        data: activeColor,
-        style: {
-          overflow: 'auto',
-          maxHeight: '100vh'
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "row no-padding no-margin flex-nowrap w-100 h-100"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'h-100 module-menu-strip',
+        key: key,
         style: {
-          backgroundColor: this.props.secondaryThemeColor
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          height: '16%'
-        }
-      }), this.state.routes && /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
-        style: {
-          padding: '8px'
+          backgroundColor: this.activeModule(module.name) ? primaryThemeColor : (0, _core.lighten)(secondaryThemeColor, .1)
         },
-        className: 'nav-wrapper'
-      }, this.createModuleTabs(this.state.routes))), /*#__PURE__*/_react.default.createElement("div", {
-        className: 'h-100',
-        style: {
-          width: 'calc(100% - 120px)'
-        }
-      }, /*#__PURE__*/_react.default.createElement("table", {
-        style: {
-          height: '96%',
-          maxHeight: '100%',
-          width: '100%'
-        }
-      }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
-        style: {
-          height: '10%'
-        }
-      }, ' ', logoImg !== null ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "logo",
-        style: {
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100%'
+        className: `${this.activeModule(module.name) ? 'module-tab-selected' : 'module-tab'}`,
+        onClick: e => {
+          this.setState({
+            ...this.state,
+            activeModule: module.name
+          });
+          let currentModule = this.state.routes.find(r => r.name === module.name);
+          this.getMenu(currentModule).then(result => {
+            this.setState({
+              ...this.state,
+              selectedMenuRoutes: result
+            });
+          });
         }
-      }, ' ', logoImg, ' ') : null, ' ', !_Utils.default.isNull(this.props.heading) ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "logo",
+      }, /*#__PURE__*/_react.default.createElement("div", null, module.icon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'tab-icon'
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: module.icon,
         style: {
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100%',
-          fontSize: '20px',
-          fontWeight: 600
+          width: '28px',
+          color: this.activeModule(module.name) ? '#000000' : '#444746'
         }
-      }, this.props.heading) : null)), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
-        style: {
-          height: '75%'
-        },
-        valign: 'top'
-      }, this.state.selectedMenuRoutes && /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
-        style: {
-          margin: '8px',
-          padding: '16px'
-        },
-        className: 'nav-wrapper'
-      }, this.createLinks(this.state.selectedMenuRoutes)))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
-        className: 'sidebar-app-logo-wrapper',
-        style: {
-          height: '5%'
-        },
-        valign: 'top'
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'sidebar-app-logo',
-        style: {
-          justifyContent: 'center',
-          height: '48px'
+      }), ' '), /*#__PURE__*/_react.default.createElement("div", null, ' ', module.label), ' ', ' ') : /*#__PURE__*/_react.default.createElement("span", null, module.name), this.activeModule(module.name) && /*#__PURE__*/_react.default.createElement("i", {
+        className: 'fas fa-caret-left selected-module-caret'
+      })));
+    });
+  };
+
+  // this function creates the links and collapses that appear in the sidebar (left menu)
+  createLinks = routes => {
+    const {
+      rtlActive,
+      secondaryThemeColor,
+      primaryThemeColor
+    } = this.props;
+    return routes.map((prop, key) => {
+      if (prop.redirect) {
+        return null;
+      }
+      if ((prop.collapse || prop.isParent) && prop.name !== 'Dashboard' && prop.name !== 'My Work Items') {
+        var st = {};
+        st[prop['state']] = !this.state[prop.state];
+        return /*#__PURE__*/_react.default.createElement("li", {
+          className: prop.collapse ? this.getCollapseInitialState(prop.views) + '-' + prop.level ? 'active ' + this.getLiClassName(prop) : this.getLiClassName(prop) : this.getLiClassName(prop),
+          key: key
+        }, /*#__PURE__*/_react.default.createElement("a", {
+          href: "#pablo",
+          className: 'li-link-' + prop.level,
+          "data-toggle": "collapse",
+          style: {
+            marginLeft: (prop.level + 1) * TAB + 'px'
+          },
+          "aria-expanded": this.state[prop.state],
+          onClick: e => {
+            if (!prop.views) {
+              this.getMenu(prop).then(views => {
+                if (views) {
+                  prop.views = views;
+                  //this.getCollapseInitialState(views);
+                  this.setState(st);
+                }
+              });
+            } else {
+              this.setState(st);
+            }
+            e.preventDefault();
+          }
+        }, prop.icon !== undefined ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
+          className: prop.icon,
+          style: {
+            width: '28px'
+          }
+        }), ' ', /*#__PURE__*/_react.default.createElement("span", null, ' ', prop.name, ' ', prop.collapse ? /*#__PURE__*/_react.default.createElement("span", {
+          className: "caret",
+          style: {
+            marginTop: '0'
+          }
+        }) : null), ' ', ' ') : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+          className: "sidebar-normal",
+          style: {
+            paddingLeft: '4px'
+          }
+        }, ' ', prop.name, ' ', /*#__PURE__*/_react.default.createElement("b", {
+          className: "caret"
+        })), ' '), ' '), ' ', prop.collapse && prop.views ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
+          isOpen: this.state[prop.state]
+        }, /*#__PURE__*/_react.default.createElement("ul", {
+          className: "nav"
+        }, " ", this.createLinks(prop.views), " "), ' ') : null);
+      }
+      return /*#__PURE__*/_react.default.createElement("li", {
+        className: `${'menu-link-li' + (this.activeRoute(prop.id) ? '-active' : '') + (prop.name === 'Dashboard' ? ' dashboard-link' : '')}`,
+        key: key,
+        style: this.activeRoute(prop.id) ? {
+          backgroundColor: (0, _core.lighten)(secondaryThemeColor, .9),
+          borderRadius: '16px',
+          color: secondaryThemeColor,
+          fontWeight: 500
+        } : {}
+      }, /*#__PURE__*/_react.default.createElement(_MenuLink.default, {
+        config: prop.item,
+        clickCallback: prop.name === 'Dashboard' ? item => {
+          this.props.dashboardLauncher();
+          this.setState({
+            ...this.state,
+            activeRouteMenu: item
+          });
+        } : item => this.setState({
+          ...this.state,
+          activeRouteMenu: item
+        }),
+        autoClick: prop.name === 'My Work Items' || prop.item && prop.item.defaultItem,
+        viewId: "menuBar",
+        icon: prop.icon,
+        iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && this.activeRoute(prop.id) ? secondaryThemeColor : null,
+        backgroundColor: this.activeRoute(prop.id) ? (0, _core.lighten)(secondaryThemeColor, .9) : null,
+        name: prop.name,
+        id: prop.id,
+        level: prop.level,
+        tab: TAB,
+        color: this.activeRoute(prop.id) ? secondaryThemeColor : null
+      }), ' ');
+    });
+  };
+
+  // verifies if routeName is the one active (in browser input)
+  activeRoute = routeName => {
+    // return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
+    return this.state.activeRouteMenu.id === routeName;
+  };
+  activeModule = moduleName => {
+    return this.state.activeModule === moduleName;
+  };
+  componentDidMount() {
+    // if you are using a Windows Machine, the scrollbars will have a Mac look
+    if (navigator.platform.indexOf('Win') > -1) {
+      /*ps = new PerfectScrollbar(this.refs.sidebar, {
+          suppressScrollX: true,
+          suppressScrollY: false,
+      });*/
+    }
+    let service = {
+      url: '/ui/api/v1/menu/filter',
+      parameters: [{
+        value: this.props.routes,
+        httpParameterType: 'REQUEST_BODY'
+      }],
+      method: 'POST',
+      contentType: 'application/json'
+    };
+    (0, _RestUtils.invokeRest)(service, {
+      api: {
+        get id() {
+          return 'dashboard-sidebar';
         }
+      }
+    }, 'dashboard-sidebar', result => {
+      this.setState({
+        ...this.state,
+        routes: result
+      });
+      let currentModule = result.find(r => r.name === this.state.activeModule);
+      if (currentModule) {
+        this.getMenu(currentModule).then(result => {
+          this.setState({
+            ...this.state,
+            selectedMenuRoutes: result
+          });
+        });
+      }
+    }, e => {
+      console.error(e);
+    }, null);
+  }
+  componentWillUnmount() {
+    // we need to destroy the false scrollbar when we navigate
+    // to a page that doesn't have this component rendered
+    if (navigator.platform.indexOf('Win') > -1) {
+      //ps.destroy();
+    }
+  }
+  render() {
+    const {
+      activeColor,
+      logo
+    } = this.props;
+    let logoImg = null;
+    let logoText = null;
+    if (!_Utils.default.isNull(logo)) {
+      logoImg = /*#__PURE__*/_react.default.createElement("a", {
+        href: logo.outterLink,
+        className: "logo-normal",
+        onClick: this.props.closeSidebar
       }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "logo-img",
         style: {
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          marginTop: '8px'
+          paddingTop: '16px',
+          paddingBottom: '8px'
         }
-      }, "Copyrights \xA9 ", 1900 + new Date().getYear(), " ", ' ')))))))));
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        src: logo.imgSrc,
+        alt: "logo"
+      })), ' ');
+      logoText = /*#__PURE__*/_react.default.createElement("a", {
+        href: logo.outterLink,
+        className: "simple-text ",
+        onClick: this.props.closeSidebar
+      }, logo.text, ' ');
     }
-  }]);
-
-  return ModuleMenuSidebar;
-}(_react.default.Component);
-
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: this.props.className,
+      data: activeColor,
+      style: {
+        overflow: 'auto',
+        maxHeight: '100vh'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: `row no-padding no-margin flex-nowrap w-100 h-100`
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'h-100 module-menu-strip',
+      style: {
+        backgroundColor: this.props.secondaryThemeColor
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '16%'
+      }
+    }), this.state.routes && /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
+      style: {
+        padding: '8px'
+      },
+      className: 'nav-wrapper'
+    }, this.createModuleTabs(this.state.routes))), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'h-100',
+      style: {
+        width: 'calc(100% - 120px)'
+      }
+    }, /*#__PURE__*/_react.default.createElement("table", {
+      style: {
+        height: '96%',
+        maxHeight: '100%',
+        width: '100%'
+      }
+    }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+      style: {
+        height: '10%'
+      }
+    }, ' ', logoImg !== null ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "logo",
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%'
+      }
+    }, ' ', logoImg, ' ') : null, ' ', !_Utils.default.isNull(this.props.heading) ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "logo",
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+        fontSize: '20px',
+        fontWeight: 600
+      }
+    }, this.props.heading) : null)), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+      style: {
+        height: '75%'
+      },
+      valign: 'top'
+    }, this.state.selectedMenuRoutes && /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
+      style: {
+        margin: '8px',
+        padding: '16px'
+      },
+      className: 'nav-wrapper'
+    }, this.createLinks(this.state.selectedMenuRoutes)))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+      className: 'sidebar-app-logo-wrapper',
+      style: {
+        height: '5%'
+      },
+      valign: 'top'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'sidebar-app-logo',
+      style: {
+        justifyContent: 'center',
+        height: '48px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: '8px'
+      }
+    }, "Copyrights \xA9 ", 1900 + new Date().getYear(), " ", ' ')))))))));
+  }
+}
 ModuleMenuSidebar.propTypes = {
   activeColor: _propTypes.default.oneOf(['primary', 'blue', 'green', 'orange', 'red', 'agility']),
   secondaryThemeColor: _propTypes.default.string.isRequired,
@@ -552,5 +473,4 @@ ModuleMenuSidebar.propTypes = {
   // this is used on responsive to close the sidebar on route navigation
   closeSidebar: _propTypes.default.func
 };
-var _default = ModuleMenuSidebar;
-exports.default = _default;
+var _default = exports.default = ModuleMenuSidebar;