@agilemotion/oui-react-js 1.8.48 → 1.8.50

package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.bck.js

@@ -0,0 +1,321 @@
+"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 _reactstrap = require("reactstrap");
+var _MenuLink = _interopRequireDefault(require("../../../../menu/MenuLink"));
+var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"));
+var _material = require("@mui/material");
+var _RestUtils = require("../../../../../RestUtils");
+require("./FoldingTabSidebar.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*eslint-disable*/
+
+const TAB = 16;
+class FoldingTabSidebar extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...this.getCollapseStates(props.routes),
+      isLoading: false,
+      error: false,
+      routes: undefined,
+      activeRouteMenu: {
+        id: 'dashboard',
+        name: 'Dashboard'
+      }
+    };
+  }
+
+  /* ----------------- menu building helpers ----------------- */
+  getViews = (menus, level) => {
+    const newViews = [];
+    for (let i = 0; i < menus.length; i++) {
+      const createView = {
+        name: menus[i].attributes.label,
+        id: menus[i].id,
+        mini: 'SS',
+        layout: '/admin',
+        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);
+    }
+    return newViews;
+  };
+  getItems = (items, level) => {
+    const newItems = [];
+    for (let i = 0; i < items.length; i++) {
+      const createItem = {
+        name: items[i].attributes.label,
+        id: items[i].id,
+        mini: 'SS',
+        layout: '/admin',
+        item: items[i],
+        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;
+  };
+  getCollapseStates = routes => {
+    let initialState = {};
+    if (routes) {
+      routes.forEach(prop => {
+        if (prop.collapse) {
+          initialState = {
+            [prop.state]: this.getCollapseInitialState(prop.views),
+            ...this.getCollapseStates(prop.views),
+            ...initialState
+          };
+        }
+      });
+    }
+    return initialState;
+  };
+  getCollapseInitialState(routes) {
+    if (!routes) return false;
+    for (let 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;
+      }
+    }
+    return false;
+  }
+  getMenu = route => new Promise(resolve => {
+    const 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', result => resolve(this.getViews(result.menus, route.level + 1)), e => {
+      console.error(e);
+      resolve(null);
+    }, null);
+  });
+  getLiClassName = prop => 'li-' + prop.level;
+
+  /* ----------------- link rendering ----------------- */
+  createLinks = routes => {
+    const {
+      secondaryThemeColor
+    } = 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') {
+        const 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.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, _material.lighten)(secondaryThemeColor, 0.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) ? this.props.secondaryThemeColor : null,
+        backgroundColor: this.activeRoute(prop.id) ? (0, _material.lighten)(this.props.secondaryThemeColor, 0.9) : null,
+        name: prop.name,
+        id: prop.id,
+        level: prop.level,
+        tab: TAB,
+        color: this.activeRoute(prop.id) ? this.props.secondaryThemeColor : null
+      }));
+    });
+  };
+  activeRoute = routeName => this.state.activeRouteMenu.id === routeName;
+
+  /* ----------------- lifecycle ----------------- */
+  componentDidMount() {
+    const 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
+    }), e => console.error(e), null);
+  }
+  componentWillUnmount() {
+    /* cleanup any custom scroll plugins if you add them */
+  }
+
+  /* ----------------- render ----------------- */
+  render() {
+    const {
+      activeColor,
+      logo,
+      className,
+      heading,
+      appLogoPath
+    } = this.props;
+    const routes = this.state.routes;
+    let logoImg = null;
+    if (!_Utils.default.isNull(logo)) {
+      logoImg = /*#__PURE__*/_react.default.createElement("a", {
+        href: logo.outterLink,
+        className: "sidebar__brand",
+        onClick: this.props.closeSidebar,
+        "aria-label": "Home",
+        style: this.props.logoStyle
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        src: logo.imgSrc,
+        alt: "logo",
+        className: "sidebar__brand-img"
+      }));
+    }
+    return /*#__PURE__*/_react.default.createElement("aside", {
+      className: `${className || ''} sidebar`,
+      data: activeColor
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__top"
+    }, logoImg ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__logo"
+    }, logoImg) : null, !_Utils.default.isNull(heading) ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__heading"
+    }, heading) : null), /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__scroll"
+    }, routes ? /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
+      className: "nav-wrapper"
+    }, this.createLinks(routes)) : null), /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__bottom"
+    }, !_Utils.default.isNull(appLogoPath) ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__app-logo"
+    }, /*#__PURE__*/_react.default.createElement(_CardAvatar.default, {
+      plain: true
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: appLogoPath,
+      alt: ""
+    }))) : null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__copyright"
+    }, "\xA9 ", new Date().getFullYear())));
+  }
+}
+FoldingTabSidebar.propTypes = {
+  activeColor: _propTypes.default.oneOf(['primary', 'blue', 'green', 'orange', 'red', 'agility']),
+  secondaryThemeColor: _propTypes.default.string.isRequired,
+  rtlActive: _propTypes.default.bool,
+  routes: _propTypes.default.array.isRequired,
+  logo: _propTypes.default.oneOfType([_propTypes.default.shape({
+    innerLink: _propTypes.default.string.isRequired,
+    imgSrc: _propTypes.default.string.isRequired,
+    text: _propTypes.default.string.isRequired
+  }), _propTypes.default.shape({
+    outterLink: _propTypes.default.string.isRequired,
+    imgSrc: _propTypes.default.string.isRequired,
+    text: _propTypes.default.string.isRequired
+  })]),
+  heading: _propTypes.default.string,
+  appLogoPath: _propTypes.default.string,
+  closeSidebar: _propTypes.default.func,
+  dashboardLauncher: _propTypes.default.func
+};
+var _default = exports.default = FoldingTabSidebar;

package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.css

@@ -6,13 +6,38 @@
     content: none !important;
 }
 
+.caret {
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    border-top: 4px dashed;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+    position: absolute;
+    right: 0 !important;
+    left: unset !important;
+    margin: 24px 8px 0 0 !important;
+    top: 0;
+}
+
+/* When collapsed: point to the right */
+.caret-closed {
+    transform: rotate(-90deg);
+}
+
+/* When expanded: point down (or “default” orientation) */
+.caret-open {
+    transform: rotate(0deg);
+}
+
 /* Root sidebar container (lives under a global header using --header-h) */
 .sidebar {
     display: flex;
     flex-direction: column;
     inline-size: 100%;
     block-size: calc(100dvh - var(--header-h, 0px));
-    overflow: hidden; /* only the middle section scrolls */
+    overflow: hidden;
+    padding: 16px;
 }
 
 /* If you don't have a global header for some screens, you can toggle this class instead */
@@ -31,7 +56,9 @@
 }
 
 /* Control the height of the logo area via CSS var */
-:root { --sidebar-logo-h: 96px; }
+:root {
+    --sidebar-logo-h: 96px;
+}
 
 .sidebar__logo {
     inline-size: 100%;
@@ -42,13 +69,18 @@
     display: block;
     inline-size: 100%;
     block-size: 100%;
+    max-height: 60px;
 }
 
 .sidebar__brand-img {
     display: block;
     inline-size: 100%;
     block-size: 100%;
-    object-fit: contain;   /* switch to 'cover' if you want edge-to-edge crop */
+    object-fit: contain; /* switch to 'cover' if you want edge-to-edge crop */
+}
+
+.sidebar--mini .sidebar__brand-img {
+    min-height: 60px;
 }
 
 /* Heading text under the brand (optional) */
@@ -61,7 +93,7 @@
 /* ---------- MIDDLE: menu (the ONLY scroller) ---------- */
 .sidebar__scroll {
     flex: 1 1 auto;
-    min-block-size: 0;     /* crucial for flex scrolling */
+    min-block-size: 0; /* crucial for flex scrolling */
     overflow-y: auto;
     overflow-x: hidden;
     padding: 8px 0;
@@ -69,8 +101,8 @@
 
 /* ---------- BOTTOM: app logo + copyright ---------- */
 .sidebar__bottom {
-    margin-top: auto;      /* pins to bottom */
-    flex: 0 0 auto;        /* never shrink off-screen */
+    margin-top: auto; /* pins to bottom */
+    flex: 0 0 auto; /* never shrink off-screen */
     padding: 12px 10px;
     display: grid;
     gap: 8px;
@@ -99,3 +131,129 @@
     margin: 8px;
 }
 
+/* --- Fix MUI list layout inside legacy .sidebar .nav --- */
+
+/* Make sure the nav container behaves like a vertical list, not flex-row/inline */
+.sidebar .nav {
+    display: block !important;
+    padding: 0;
+    margin: 0;
+}
+
+/* Bootstrap / old theme often float nav <li> – kill that so items stack */
+.sidebar .nav li {
+    float: none !important;
+    display: block !important;
+    width: 100% !important;
+}
+
+/* Ensure the MUI list items behave like full-width rows */
+.sidebar .nav .MuiListItem-root {
+    display: block !important;
+    width: 100% !important;
+}
+
+/* The clickable row stays flex, full width */
+.sidebar .nav .MuiListItemButton-root {
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Prevent weird inline spacing around anchors inside MenuLink */
+.sidebar .nav .MuiListItemButton-root a {
+    display: block;
+    width: 100%;
+}
+
+.sidebar .dashboard-link a,
+.sidebar .dashboard-link-active a {
+    margin-left: 0 !important;
+}
+
+.sidebar .menu-link-li,
+.sidebar .menu-link-li-active {
+    margin-left: 8px;
+    width: calc(100% - 4px);
+    margin-top: 4px;
+}
+
+.sidebar .dashboard-link,
+.sidebar .dashboard-link-active,
+.sidebar .li-0,
+.sidebar .li-0-active,
+.sidebar .li-1,
+.sidebar .li-1-active,
+.sidebar .menu-link-li,
+.sidebar .menu-link-li-active {
+    height: 48px !important;
+    padding: 4px 8px !important;
+}
+
+
+.sidebar .dashboard-link span,
+.sidebar .dashboard-link-active span,
+.sidebar .li-0 span,
+.sidebar .li-0-active span,
+.sidebar .li-1 span,
+.sidebar .li-1-active span,
+.sidebar .menu-link-li span,
+.sidebar .menu-link-li-active span {
+    font-size: .85rem;
+    padding-top: 0;
+}
+
+/* ===================== */
+/* MINI (drawer closed)  */
+/* ===================== */
+
+.sidebar--mini {
+    padding-inline: 8px;
+}
+
+/* Remove extra left margin so items don't get clipped in narrow width */
+.sidebar--mini .menu-link-li,
+.sidebar--mini .menu-link-li-active,
+.sidebar--mini .dashboard-link,
+.sidebar--mini .dashboard-link-active {
+    margin-left: 0 !important;
+    width: 100% !important;
+}
+
+/* Center and tighten the footer so the year is fully visible */
+.sidebar--mini .sidebar__bottom {
+    margin-left: 0;
+    margin-right: 0;
+    padding-inline: 4px;
+    text-align: center;
+}
+
+/* Optional: hide app logo when mini to give year more space */
+.sidebar--mini .sidebar__app-logo {
+    display: none;
+}
+
+/* Make sure the year is fully readable */
+.sidebar__copyright {
+    width: 100%;
+    text-align: center;
+}
+
+/* Center icons when drawer is closed */
+.sidebar--mini .nav .MuiListItemButton-root {
+    justify-content: center !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+/* Make sure the icon itself is centered with no extra right margin */
+.sidebar--mini .nav .MuiListItemIcon-root {
+    margin-right: 0 !important;
+    justify-content: center;
+}
+
+.sidebar--mini .menu-link-li,
+.sidebar--mini .menu-link-li-active {
+    margin-left: 0 !important;
+}
+