versacall-core-library-react 2.0.70 → 2.0.71

package/dist/components/CoreAlert/CoreAlert.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _reactIntl = require("react-intl");
+var _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function Transition(props) {
+  return /*#__PURE__*/_react.default.createElement(_Slide.default, _extends({
+    direction: "up"
+  }, props));
+}
+class CoreAlert extends _react.Component {
+  handleReject() {
+    if (this.props.onReject) {
+      this.props.onReject();
+    }
+  }
+  handleAccept() {
+    if (this.props.onAccept) {
+      this.props.onAccept();
+    }
+  }
+  render() {
+    const {
+      open,
+      title,
+      message,
+      acceptMessage,
+      rejectMessage,
+      alertType
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+      open: open,
+      TransitionComponent: Transition,
+      keepMounted: true
+    }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, null, title, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        float: 'right'
+      }
+    }, this.props.icon)), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, message))), /*#__PURE__*/_react.default.createElement(_DialogActions.default, null, alertType === 'okcancel' && /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: () => this.handleReject(),
+      color: "primary"
+    }, rejectMessage || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "__cancel"
+    })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: () => this.handleAccept(),
+      color: "primary"
+    }, acceptMessage || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "__ok"
+    }))));
+  }
+}
+CoreAlert.propTypes = {
+  icon: _propTypes.default.node,
+  title: _propTypes.default.string,
+  onAccept: _propTypes.default.func,
+  onReject: _propTypes.default.func,
+  open: _propTypes.default.bool.isRequired,
+  acceptMessage: _propTypes.default.string,
+  rejectMessage: _propTypes.default.string,
+  message: _propTypes.default.string.isRequired,
+  alertType: _propTypes.default.oneOf(['ok', 'okcancel']).isRequired
+};
+CoreAlert.defaultProps = {
+  title: '',
+  icon: null,
+  onAccept: null,
+  onReject: null,
+  acceptMessage: null,
+  rejectMessage: null
+};
+var _default = exports.default = CoreAlert;

package/dist/components/CoreAlert/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CoreAlert.default;
+  }
+});
+var _CoreAlert = _interopRequireDefault(require("./CoreAlert"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/CoreAlert/readme.md

@@ -0,0 +1,21 @@
+#corealert
+this component is used to display an alert to a user, the alert can have OK Cancel buttons or just Ok button.
+
+Props:
+
+message: PropTypes.string.isRequired, Message to be displayed
+onAccept: PropTypes.func.isRequired, Function to be executed from the Accept button.
+open: PropTypes.bool.isRequired, bool value that indicates the state of the alert.
+onReject: PropTypes.func, Function to be executed after click on Reject button.
+iconType: ['success', 'warning', 'error', 'info', 'none']  Type of Icon to show if needed, if 'none' no icon will be shown.
+alertType: PropTypes.oneOf(['ok', 'okcancel']).isRequired, it allows to select a single button or two button dialog.
+title: PropTypes.string, title of the alert
+rejectMessage: PropTypes.string, Message to be displayed in the Reject button. (default value Cancel)
+acceptMessage: PropTypes.string, Message to be displayed in the Accept button. (default value OK)
+
+
+Example use:
+
+```
+
+<CoreAlert open message="This is an alert" onAccept={() => {}} onReject={() => {}} iconType="info" alertType="okcancel" title="this is the title" />

package/dist/components/CoreAppBar/CoreAppBar.js

@@ -0,0 +1,364 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _LocationCity = _interopRequireDefault(require("@material-ui/icons/LocationCity"));
+var _AccountCircle = _interopRequireDefault(require("@material-ui/icons/AccountCircle"));
+var _StarBorder = _interopRequireDefault(require("@material-ui/icons/StarBorder"));
+var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
+var _Settings = _interopRequireDefault(require("@material-ui/icons/Settings"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _styles = require("@material-ui/core/styles");
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));
+var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
+var _Star = _interopRequireDefault(require("@material-ui/icons/Star"));
+var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
+var _reactIntl = require("react-intl");
+var _Menu2 = _interopRequireDefault(require("@material-ui/core/Menu"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _context = require("../../context");
+var _CoreAppBarDrawer = _interopRequireDefault(require("./CoreAppBarDrawer"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const namespace = 'CoreAppBar';
+const styles = () => ({
+  topPadding: {
+    minHeight: 56,
+    '@media (min-width:600px)': {
+      minHeight: 64
+    }
+  }
+});
+const style = {
+  title: {
+    flexGrow: 1,
+    textAlign: 'left'
+  },
+  flex: {
+    flexGrow: 1,
+    textAlign: 'center'
+  },
+  titleButton: {
+    textTransform: 'none',
+    borderColor: 'white'
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20
+  }
+};
+class CoreAppBar extends _react.Component {
+  constructor() {
+    super();
+    this.state = {
+      drawer: false,
+      organizationAnchorEl: null,
+      entityAnchorEl: null,
+      authenticationAnchorEl: null,
+      apps: [],
+      organizations: [],
+      entities: [],
+      favorites: []
+    };
+  }
+  componentDidMount() {
+    this.getOrganizations();
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.authentication.didChange(prevProps.authentication)) {
+      this.getOrganizations();
+    }
+    if (this.props.organization.didOrganizationChange(prevProps.organization.organization)) {
+      this.getEntities();
+    }
+    if (this.props.authentication.didChange(prevProps.authentication) || this.props.organization.didChange(prevProps.organization)) {
+      this.getApps();
+      this.getFavorites();
+    }
+  }
+  getOrganizations() {
+    const methodName = 'getOrganizations()';
+    this.props.authentication.http({
+      method: 'get',
+      url: "".concat(this.props.core.baseUrl, "/api/administration/organizations")
+    }).then(res => {
+      if (res.data.length > 0 && typeof res.data[0] === 'object') {
+        this.setState({
+          organizations: res.data
+        });
+        if (this.props.organization.organization === null || res.data.find(x => x.id === this.props.organization.organization.id) === undefined) {
+          this.props.organization.setOrganization(res.data[0]);
+        }
+      }
+    }).catch(error => {
+      this.props.core.log('error', namespace, methodName, error);
+    });
+  }
+  getEntities() {
+    const methodName = 'getEntities()';
+    if (this.props.organization.organization !== null) {
+      this.props.authentication.http({
+        method: 'get',
+        url: "".concat(this.props.core.baseUrl, "/api/administration/entities/organization/").concat(this.props.organization.organization.key)
+      }).then(res => {
+        if (res.data.length > 0 && typeof res.data[0] === 'object') {
+          this.setState({
+            entities: res.data
+          });
+          if (this.props.organization.entity === null || res.data.find(x => x.id === this.props.organization.entity.id) === undefined) {
+            this.props.organization.setEntity(res.data[0]);
+          }
+        }
+      }).catch(error => {
+        this.props.core.log('error', namespace, methodName, error);
+      });
+    }
+  }
+  getApps() {
+    const methodName = 'getApps()';
+    if (this.props.organization.organization !== null && this.props.organization.entity !== null) {
+      this.props.authentication.http({
+        method: 'get',
+        url: "".concat(this.props.core.baseUrl, "/api/components/tiered"),
+        params: {
+          type: 'UI',
+          organizationId: this.props.organization.organization.id,
+          entityId: this.props.organization.entity.id
+        }
+      }).then(res => {
+        if (res.data.length > 0 && typeof res.data[0] === 'object') {
+          this.setState({
+            apps: res.data
+          });
+        }
+      }).catch(error => {
+        this.props.core.log('error', namespace, methodName, error);
+      });
+    }
+  }
+  getFavorites() {
+    const methodName = 'getFavorites()';
+    if (this.props.organization.organization !== null && this.props.organization.entity !== null) {
+      this.props.authentication.http({
+        method: 'get',
+        url: "".concat(this.props.core.baseUrl, "/api/user/activity/favorites"),
+        params: {
+          type: 'App'
+        }
+      }).then(res => {
+        this.setState({
+          favorites: res.data
+        });
+      }).catch(error => {
+        this.props.core.log('error', namespace, methodName, error);
+      });
+    }
+  }
+  favoriteApp() {
+    const methodName = 'favoriteApp()';
+    if (this.props.organization.organization !== null && this.props.organization.entity !== null) {
+      this.props.authentication.http({
+        method: 'post',
+        url: "".concat(this.props.core.baseUrl, "/api/user/activity/favorite"),
+        params: {
+          type: 'App',
+          itemId: this.props.componentID,
+          favorite: !this.state.favorites.includes(this.props.componentID)
+        }
+      }).then(() => {
+        this.getFavorites();
+      }).catch(error => {
+        this.props.core.log('error', namespace, methodName, error);
+      });
+    }
+  }
+  handleMessage(channel, obj) {
+    switch (obj.what) {
+      case 'package_enabled':
+      case 'package_disabled':
+      case 'package_added':
+      case 'package_updated':
+      case 'package_deleted':
+        this.getApps();
+        break;
+      case 'entities_added':
+      case 'entities_updated':
+      case 'entities_deleted':
+        this.getEntities();
+        break;
+      default:
+        break;
+    }
+  }
+  render() {
+    const {
+      title,
+      componentID,
+      authentication,
+      organization,
+      classes
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_context.ChannelsConsumer, {
+      id: "coreappbar",
+      handler: (channel, obj) => this.handleMessage(channel, obj)
+    }), /*#__PURE__*/_react.default.createElement(_AppBar.default, null, /*#__PURE__*/_react.default.createElement(_Toolbar.default, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      style: style.menuButton,
+      color: "inherit",
+      onClick: () => this.setState({
+        drawer: true
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Menu.default, null)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      style: style.title,
+      variant: "h6",
+      color: "inherit"
+    }, title), /*#__PURE__*/_react.default.createElement("div", {
+      style: style.flex
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      color: "inherit",
+      style: style.titleButton,
+      variant: this.state.organizations.length > 1 ? 'outlined' : 'text',
+      onClick: e => this.setState({
+        organizationAnchorEl: e.currentTarget
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      variant: "h6",
+      color: "inherit"
+    }, organization.organization ? organization.organization.name : ''))), /*#__PURE__*/_react.default.createElement("div", {
+      style: style.flex
+    }, this.props.showEntity && /*#__PURE__*/_react.default.createElement(_Button.default, {
+      color: "inherit",
+      style: style.titleButton,
+      variant: this.state.entities.length > 1 ? 'outlined' : 'text',
+      onClick: e => this.setState({
+        entityAnchorEl: e.currentTarget
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      variant: "h6",
+      color: "inherit"
+    }, organization.entity ? organization.entity.name : ''))), componentID.length > 0 && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      color: "inherit",
+      onClick: () => this.favoriteApp()
+    }, this.state.favorites.includes(componentID) ? /*#__PURE__*/_react.default.createElement(_Star.default, null) : /*#__PURE__*/_react.default.createElement(_StarBorder.default, null)), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      color: "inherit",
+      onClick: e => this.setState({
+        authenticationAnchorEl: e.currentTarget
+      })
+    }, /*#__PURE__*/_react.default.createElement(_AccountCircle.default, null)))), /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.topPadding
+    }), /*#__PURE__*/_react.default.createElement(_CoreAppBarDrawer.default, {
+      open: this.state.drawer,
+      onClose: () => this.setState({
+        drawer: false
+      }),
+      apps: this.state.apps
+    }), /*#__PURE__*/_react.default.createElement(_Menu2.default, {
+      open: !!this.state.organizationAnchorEl,
+      anchorEl: this.state.organizationAnchorEl,
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      onClose: () => this.setState({
+        organizationAnchorEl: null
+      })
+    }, this.state.organizations.map(org => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      key: org.id,
+      onClick: () => {
+        organization.setOrganization(org);
+        this.setState({
+          organizationAnchorEl: null
+        });
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_LocationCity.default, null)), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: org.name,
+      inset: true
+    })))), /*#__PURE__*/_react.default.createElement(_Menu2.default, {
+      anchorEl: this.state.entityAnchorEl,
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      open: !!this.state.entityAnchorEl,
+      onClose: () => this.setState({
+        entityAnchorEl: null
+      })
+    }, this.state.entities.map(entity => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      key: entity.key,
+      onClick: () => {
+        organization.setEntity(entity);
+        this.setState({
+          entityAnchorEl: null
+        });
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_LocationCity.default, null)), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: entity.name,
+      inset: true
+    }))), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement("a", {
+      href: this.props.core.formatUrl('/administration#/entities'),
+      style: {
+        all: 'unset'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_MenuItem.default, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Settings.default, null)), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "__manage"
+    }), ' ', /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "__entities"
+    }))))), /*#__PURE__*/_react.default.createElement(_Menu2.default, {
+      open: !!this.state.authenticationAnchorEl,
+      anchorEl: this.state.authenticationAnchorEl,
+      onClose: () => this.setState({
+        authenticationAnchorEl: null
+      })
+    }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+      style: {
+        outline: 0
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Avatar.default, null, "".concat(this.props.authentication.token.userInfo.firstName[0].toUpperCase()).concat(this.props.authentication.token.userInfo.lastName[0].toUpperCase())), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: "".concat(this.props.authentication.token.userInfo.firstName, " ").concat(this.props.authentication.token.userInfo.lastName),
+      secondary: this.props.authentication.token.userInfo.emailAddress
+    })), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement("a", {
+      href: this.props.core.formatUrl('/profile'),
+      style: {
+        all: 'unset'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_MenuItem.default, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "__myProfile"
+    }))), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      onClick: () => authentication.logout()
+    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "__log_out"
+    }))));
+  }
+}
+CoreAppBar.propTypes = {
+  title: _propTypes.default.string,
+  showEntity: _propTypes.default.bool,
+  componentID: _propTypes.default.string,
+  core: _propTypes.default.shape().isRequired,
+  authentication: _propTypes.default.shape().isRequired,
+  organization: _propTypes.default.shape().isRequired,
+  classes: _propTypes.default.shape().isRequired
+};
+CoreAppBar.defaultProps = {
+  showEntity: false,
+  title: '',
+  componentID: ''
+};
+var _default = exports.default = (0, _context.withCore)((0, _context.withAuthentication)((0, _context.withOrganization)((0, _styles.withStyles)(styles)(CoreAppBar))));

package/dist/components/CoreAppBar/CoreAppBarDrawer.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
+var _reactIntl = require("react-intl");
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+var _ExpandLess = _interopRequireDefault(require("@material-ui/icons/ExpandLess"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));
+var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
+var _List = _interopRequireDefault(require("@material-ui/core/List"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsCookie = _interopRequireDefault(require("js-cookie"));
+var _functions = require("../../functions");
+var _context = require("../../context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const collapseCookie = 'vt4000_collapse';
+const style = {
+  icon: {
+    margin: 5,
+    height: 32,
+    width: 32,
+    verticalAlign: 'middle'
+  },
+  a: {
+    textDecoration: 'none'
+  },
+  nested: {
+    paddingLeft: 42
+  }
+};
+class CoreAppBarDrawer extends _react.Component {
+  constructor() {
+    super();
+    const cookie = _jsCookie.default.getJSON(collapseCookie);
+    this.state = {
+      expanded: cookie !== undefined ? cookie : []
+    };
+  }
+  getTranslatedName(app) {
+    const translation = app.translations.find(x => x.languageCode === this.props.intl.locale);
+    return translation !== undefined ? translation.name : app.name;
+  }
+  handleClick(componentID) {
+    this.setState(prevState => {
+      let expanded = prevState.expanded;
+      if (expanded.includes(componentID)) {
+        expanded = expanded.filter(psExpanded => psExpanded !== componentID);
+      } else {
+        expanded.push(componentID);
+      }
+      _jsCookie.default.set(collapseCookie, expanded);
+      return {
+        expanded: expanded
+      };
+    });
+  }
+  render() {
+    const {
+      open,
+      apps,
+      core
+    } = this.props;
+    const {
+      expanded
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_Drawer.default, {
+      open: open,
+      onClose: () => this.props.onClose()
+    }, /*#__PURE__*/_react.default.createElement(_List.default, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      variant: "h5"
+    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "__applications"
+    }))), apps.map(app => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: app.definition.componentID
+    }, app.children.length > 0 ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+      onClick: () => this.handleClick(app.definition.componentID),
+      button: true
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement("img", {
+      src: this.props.core.formatUrl((0, _functions.getIconUrl)(app.definition.metadata)),
+      style: style.icon,
+      alt: "algImg"
+    })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: this.getTranslatedName(app.definition)
+    }), expanded.includes(app.definition.componentID) ? /*#__PURE__*/_react.default.createElement(_ExpandLess.default, null) : /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null)), app.children.map(subApp => /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+      timeout: "auto",
+      key: subApp.definition.componentID,
+      in: expanded.includes(app.definition.componentID),
+      unmountOnExit: true
+    }, /*#__PURE__*/_react.default.createElement("a", {
+      style: style.a,
+      href: core.formatUrl("".concat((0, _functions.getUrl)(app.definition.metadata), "#").concat((0, _functions.getUrl)(subApp.definition.metadata)))
+    }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+      style: style.nested,
+      button: true
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement("img", {
+      src: this.props.core.formatUrl((0, _functions.getIconUrl)(subApp.definition.metadata)),
+      style: style.icon,
+      alt: "algImg"
+    })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      inset: true,
+      primary: this.getTranslatedName(subApp.definition)
+    })))))) : /*#__PURE__*/_react.default.createElement("a", {
+      style: style.a,
+      href: core.formatUrl((0, _functions.getUrl)(app.definition.metadata))
+    }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+      button: true
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement("img", {
+      src: this.props.core.formatUrl((0, _functions.getIconUrl)(app.definition.metadata)),
+      style: style.icon,
+      alt: "algImg"
+    })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: this.getTranslatedName(app.definition)
+    })))))));
+  }
+}
+CoreAppBarDrawer.propTypes = {
+  open: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  apps: _propTypes.default.arrayOf(_propTypes.default.shape()),
+  intl: _propTypes.default.shape().isRequired,
+  core: _propTypes.default.shape().isRequired
+};
+CoreAppBarDrawer.defaultProps = {
+  apps: []
+};
+var _default = exports.default = (0, _context.withCore)((0, _reactIntl.injectIntl)(CoreAppBarDrawer));

package/dist/components/CoreAppBar/README.md

@@ -0,0 +1,27 @@
+# CoreAppBar
+
+This is the app bar that should be part of any main application that isn't a child application to something else using [CoreDrawer](../CoreDrawer).
+
+![Screenshot](screenshot.png)
+
+This controls and feeds [Organization Context](../../context/Organization) with the current organization and entity.
+
+## Adding to your application
+
+To add to your application, just do the following:
+```
+import CoreAppBar from 'core-library-react';
+
+...
+
+render() {
+  return(
+    <div>
+      <CoreAppBar title="My Title" />
+    </div>
+  );
+}
+```
+
+## Props
+- title : The title of the application.  NOTE: Should not use fixed strings and instead use translations string file

package/dist/components/CoreAppBar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CoreAppBar.default;
+  }
+});
+var _CoreAppBar = _interopRequireDefault(require("./CoreAppBar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }