@agilemotion/oui-react-js 1.3.0 → 1.3.1

package/dist/components/signatures/Toolbar.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _ToggleButton = _interopRequireDefault(require("@material-ui/lab/ToggleButton"));
+
+var _ToggleButtonGroup = _interopRequireDefault(require("@material-ui/lab/ToggleButtonGroup"));
+
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+
+var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
+
+var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+var _MenuButton = _interopRequireDefault(require("./MenuButton"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
+
+var _ViewUtils = _interopRequireDefault(require("./ViewUtils"));
+
+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 _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; }
+
+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, _styles.makeStyles)(theme => ({
+  paper: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    marginBottom: '5px'
+  },
+  divider: {
+    alignSelf: 'stretch',
+    height: 'auto',
+    width: '1px',
+    margin: theme.spacing(1, 0.5),
+    backgroundColor: theme.palette.primary.main
+  },
+  themeButton: {
+    color: 'white',
+    fontSize: '12px',
+    height: '30px',
+    backgroundColor: theme.palette.primary.main,
+    "&:hover, &:focus": {
+      color: 'white',
+      backgroundColor: theme.palette.primary.main,
+      opacity: '0.7'
+    }
+  }
+}));
+const StyledToggleButtonGroup = (0, _styles.withStyles)(theme => ({
+  grouped: {
+    margin: theme.spacing(0.5),
+    border: 'none',
+    padding: theme.spacing(0, 1),
+    '&:not(:first-child)': {
+      borderRadius: theme.shape.borderRadius
+    },
+    '&:first-child': {
+      borderRadius: theme.shape.borderRadius
+    }
+  }
+}))(_ToggleButtonGroup.default);
+const utils = new _ViewUtils.default();
+
+const EnhancedToolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState('left'),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        alignment = _React$useState2[0],
+        setAlignment = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState({}),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        buttonDisability = _React$useState4[0],
+        setButtonDisability = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(props.config),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        config = _React$useState6[0],
+        setConfig = _React$useState6[1];
+
+  let itemKeyCounter = 0;
+  let buttonKeyCounter = 0;
+
+  const handleAlignment = (event, newAlignment) => {
+    setAlignment(newAlignment);
+  };
+
+  const _setButtonDisabled = (name, disabled) => {
+    buttonDisability[name] = disabled; // Force a refresh
+    //setButtonDisability(JSON.parse(JSON.stringify(buttonDisability)));
+
+    setButtonDisability(_objectSpread(_objectSpread({}, buttonDisability), {}, {
+      ["key"]: Math.random()
+    }));
+  };
+
+  _react.default.useImperativeHandle(ref, () => ({
+    setButtonDisabled: (name, disabled) => {
+      return _setButtonDisabled(name, disabled);
+    }
+  }));
+
+  _react.default.useEffect(() => {
+    if (!utils.isNull(props.mode)) {
+      setConfig(utils.processToolbarConfig(props.mode, props.config));
+    } else {
+      setConfig(props.config);
+    }
+
+    let items = config.items;
+    let temp = {};
+
+    for (var i = 0; i < items.length; i++) {
+      let type = items[i].type;
+
+      if (type === 'buttonGroup') {
+        let buttons = items[i].buttons;
+
+        for (var j = 0; j < buttons.length; j++) {
+          let button = buttons[j];
+          temp[button.id] = !utils.isNull(button.disabled) && button.disabled;
+        }
+      }
+    }
+
+    setButtonDisability(temp);
+  });
+
+  const classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
+    elevation: 0,
+    className: classes.paper,
+    ref: ref
+  }, config !== null ? config.items.map(item => item.type === 'buttonGroup' ? /*#__PURE__*/_react.default.createElement(StyledToggleButtonGroup, {
+    size: "small",
+    value: alignment,
+    exclusive: true,
+    key: itemKeyCounter++,
+    onChange: handleAlignment,
+    "aria-label": "text alignment"
+  }, item.buttons.map(button => button.visible === null || typeof button.visible === "undefined" || button.visible === true ? button.contextMenu === null || typeof button.contextMenu === "undefined" ? /*#__PURE__*/_react.default.createElement(_ToggleButton.default, {
+    key: buttonKeyCounter++,
+    value: button.id,
+    "aria-label": button.Tooltip,
+    disabled: buttonDisability[button.id],
+    onClick: () => props.buttonClickHandler(button.id),
+    className: button.theme === true ? classes.themeButton : "",
+    style: {
+      width: button.width !== null && typeof button.width !== 'undefined' ? button.width : 'auto'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: button.tooltip
+  }, button.icon !== null && typeof button.icon !== 'undefined' ? button.icon === "AddIcon" ? /*#__PURE__*/_react.default.createElement(_Add.default, null) : button.icon === "SaveIcon" ? /*#__PURE__*/_react.default.createElement(_Save.default, null) : button.icon === "EditIcon" ? /*#__PURE__*/_react.default.createElement(_Edit.default, null) : button.icon === "InfoIcon" ? /*#__PURE__*/_react.default.createElement(_Info.default, null) : /*#__PURE__*/_react.default.createElement(_Delete.default, null) : /*#__PURE__*/_react.default.createElement("div", null, " ", button.label, " "))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_MenuButton.default, {
+    label: button.label,
+    width: button.width,
+    defaultStyle: true,
+    disabled: buttonDisability[button.id]
+  }, /*#__PURE__*/_react.default.createElement(_MenuList.default, {
+    style: {
+      background: "#ffffff",
+      opacity: "1"
+    }
+  }, button.contextMenu.map(menu => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    onClick: () => props.buttonMenuClickHandler(menu)
+  }, menu.description))))) : "")) : item.type === 'devider' && item.visible === null || typeof item.visible === "undefined" || item.visible === true ? /*#__PURE__*/_react.default.createElement(_Divider.default, {
+    orientation: "vertical",
+    key: buttonKeyCounter++,
+    className: classes.divider
+  }) : null) : null));
+});
+
+var _default = EnhancedToolbar;
+exports.default = _default;

package/dist/components/signatures/ViewUtils.js

@@ -0,0 +1,309 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactPromiseTracker = require("react-promise-tracker");
+
+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 _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; }
+
+class ViewUtils {
+  constructor() {
+    _defineProperty(this, "SYSTEM_ERROR_MESSAGE", "A system error has accured. Please contact your system administrator");
+
+    _defineProperty(this, "showMessage", (viewRef, message, type) => {
+      if (this.isNull(message)) {
+        message = "";
+      }
+
+      let messageType = type === "ERROR" ? "danger" : this.isNull(type) ? "message" : type;
+      viewRef.setState({
+        message: message,
+        messageStyle: messageType
+      });
+    });
+  }
+
+  isNull(value) {
+    return value === null || typeof value === 'undefined';
+  }
+
+  processToolbarConfig(viewMode, config) {
+    let items = config.items;
+
+    for (var i = 0; i < items.length; i++) {
+      let type = items[i].type;
+
+      if (type === 'buttonGroup') {
+        let buttons = items[i].buttons;
+
+        for (var j = 0; j < buttons.length; j++) {
+          let modes = buttons[j].modes;
+
+          if (!this.isNull(modes)) {
+            buttons[j].visible = modes.split(",").includes(viewMode);
+          }
+        }
+      }
+    } // Force a new instance so that change event will be fired
+
+
+    return JSON.parse(JSON.stringify(config));
+  }
+
+  getField(id, settings) {
+    if (settings != null) {
+      for (var i = 0; i < settings.fields.length; i++) {
+        var field = settings.fields[i];
+
+        if (field.name === id) {
+          return field;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  isFieldRequired(id, settings, formId) {
+    if (typeof settings !== 'undefined' && settings !== null) {
+      let field = this.getField(id, settings);
+
+      if (field != null) {
+        return field.required;
+      }
+    }
+
+    if (!this.isStringEmpty(formId)) {
+      let fields = this.getFields(formId, 'validate');
+
+      for (var i = 0; i < fields.length; i++) {
+        if (fields[i].id === id) {
+          return fields[i].required;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  isFieldVisible(id, settings) {
+    if (typeof settings !== 'undefined' && settings !== null) {
+      let field = this.getField(id, settings);
+
+      if (field != null) {
+        return field.visible;
+      }
+    }
+
+    return true;
+  }
+
+  isStringEmpty(val) {
+    return typeof val === 'undefined' || val === null || val.trim().length === 0;
+  }
+
+  getFields(formId, className) {
+    let inputFields = [];
+    let form = document.getElementById(formId);
+
+    if (!this.isNull(form)) {
+      let inputDivs = form.getElementsByClassName(className);
+
+      for (let i = 0; i < inputDivs.length; i++) {
+        let inputs = inputDivs[i].getElementsByTagName("input");
+
+        for (let j = 0; j < inputs.length; j++) {
+          inputFields.push(inputs[j]);
+        }
+      }
+    }
+
+    return inputFields;
+  }
+
+  validateField(id, required, values, currentValue) {
+    return this.validateField(id, required, values, currentValue, null, null);
+  }
+
+  validateField(id, required, values, currentValue, message) {
+    return this.validateField(id, required, values, currentValue, null, message);
+  }
+
+  validateField(id, required, values, currentValue, regex, message) {
+    let result = {};
+    result.valid = true;
+    result.message = "";
+    let value;
+
+    if (currentValue !== null) {
+      value = currentValue;
+    } else {
+      value = values[id];
+    }
+
+    let hasErrors = false;
+
+    if (required && (this.isNull(value) || this.isStringEmpty(value.toString()))) {
+      result.message = !this.isNull(message) ? message : "This field is required";
+      hasErrors = true;
+    } else {
+      result.message = "";
+    }
+
+    if (!hasErrors && !this.isNull(regex) && !this.isNull(value)) {
+      hasErrors = this.isNull(value.toString().match(regex));
+
+      if (hasErrors) {
+        result.message = !this.isNull(message) ? message : "This field is invalid";
+      }
+    }
+
+    result.valid = !hasErrors;
+    return result;
+  }
+
+  getRequest(currentPage, curretRowsPerPage, currentSearchParameters, paged) {
+    var request = {};
+    request.pageSize = curretRowsPerPage;
+    request.currentPage = currentPage;
+    request.parameters = currentSearchParameters;
+    request.paged = typeof paged === 'undefined' || paged === null || paged;
+    return request;
+  }
+
+  getEntityViewTitle(queryParameterState, viewName, ...fields) {
+    if (this.isNull(queryParameterState) || this.isNull(queryParameterState.selection)) {
+      return !this.isNull(viewName) ? viewName + " > Add" : "Add";
+    }
+
+    let props = "";
+
+    for (let i = 0; i < fields.length; i++) {
+      if (!this.isNull(fields[i])) {
+        props += fields[i].trim();
+        props += " ";
+      }
+    }
+
+    props = props.trim();
+    let prefix = this.isNull(viewName) ? "" : " > ";
+    return (this.isNull(viewName) ? "" : viewName) + (props.length > 0 ? prefix + props : "");
+  }
+
+  setLegendColor(color) {}
+
+  setLegend(text) {}
+
+  saveForm(viewRef, formRef, url) {
+    this.saveForm(viewRef, formRef, url, null, null, null);
+  }
+
+  saveForm(viewRef, formRef, url, successCallback, errorCallback) {
+    this.saveForm(viewRef, formRef, url, successCallback, errorCallback, null);
+  }
+
+  offsetDate(date, yearOffset, monthOffset, dayOffset) {
+    let year = date.getFullYear() + yearOffset;
+    let day = date.getDate() + dayOffset;
+    let month = date.getMonth() + monthOffset;
+    return new Date(year, month, day);
+  }
+
+  autoSetDate(viewRef, formRef, newDate, yearOffset, monthOffset, dayOffset, autoFillDateName, refDateName) {
+    let stateDate = viewRef.state[refDateName];
+    let tempDate = stateDate;
+
+    if (this.isNull(stateDate) || stateDate.getTime() !== newDate.getTime()) {
+      viewRef.setState(_objectSpread(_objectSpread({}, viewRef.state), {}, {
+        [refDateName]: newDate
+      }), () => {
+        if (!this.isNull(tempDate) && !this.isNull(viewRef.state.id)) {
+          let autoFillDate = this.offsetDate(newDate, yearOffset, monthOffset, dayOffset);
+          formRef.current.setValue(autoFillDateName, autoFillDate);
+        } else if (this.isNull(viewRef.state.id)) {
+          let autoFillDate = this.offsetDate(newDate, yearOffset, monthOffset, dayOffset);
+          formRef.current.setValue(autoFillDateName, autoFillDate);
+        }
+      });
+    }
+  }
+
+  invokeUrl(url, data, successCallback, errorCallback) {
+    const accessToken = sessionStorage.getItem("accessToken");
+    const idToken = sessionStorage.getItem("idToken");
+    let fetchConfig = {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + accessToken,
+        'idToken': idToken
+      },
+      body: data
+    };
+    (0, _reactPromiseTracker.trackPromise)(fetch(url, fetchConfig).then(res => res.json()).then(responseJson => {
+      let response = typeof responseJson === "object" ? responseJson : JSON.parse(responseJson);
+
+      if (successCallback !== null) {
+        successCallback(response);
+      }
+    }).catch(e => {
+      if (errorCallback !== null) {
+        errorCallback(e);
+      }
+    }));
+  }
+
+  saveForm(viewRef, formRef, url, successCallback, errorCallback, viewRoute) {
+    viewRef.setState({
+      message: "",
+      messageStyle: "message"
+    });
+    let formValue = formRef.current.getValue();
+
+    if (formValue !== null && typeof formValue !== 'undefined') {
+      if (!this.isNull(viewRef.props.location.state) && !this.isNull(viewRef.props.location.state.selection)) {
+        formValue.id = viewRef.props.location.state.selection;
+      }
+
+      let data = JSON.stringify(formValue);
+      const fullUrl = url + "?data=".concat(data);
+      this.invokeUrl(fullUrl, response => {
+        this.showMessage(viewRef, response.Message, response.MessageType);
+
+        if (successCallback !== null) {
+          successCallback(response);
+        }
+
+        if (!this.isNull(viewRoute) && !this.isNull(response.EntityId) && response.EntityId !== 0) {
+          viewRef.setState({
+            id: response.EntityId
+          }, () => {
+            viewRef.props.history.push({
+              pathname: viewRoute,
+              state: {
+                selection: viewRef.state.id
+              }
+            });
+          });
+        }
+      }, e => {
+        this.showMessage(viewRef, this.SYSTEM_ERROR_MESSAGE, "ERROR");
+
+        if (errorCallback !== null) {
+          errorCallback(e);
+        }
+      });
+    }
+  }
+
+}
+
+exports.default = ViewUtils;

package/dist/components/signatures/widgets.css

@@ -0,0 +1,126 @@
+@media all and (min-width: 480px) {
+    .btn-primary {
+        border-color: transparent;
+    }
+
+    #menubar-scroll::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+        background-color: #F5F5F5;
+    }
+
+    #menubar-scroll::-webkit-scrollbar {
+        width: 6px !important;
+        background-color: #F5F5F5;
+    }
+
+    #menubar-scroll::-webkit-scrollbar-thumb {
+        background-color: #939393 !important;
+    }
+
+    .menu-table button {
+        height: 96px;
+        width: 100%;
+        border-radius: 0 !important;
+        text-decoration:none;
+    }
+
+    .menu-table .toolStripButtonSelected {
+        text-decoration: none;
+    }
+
+    .menu-table .btn-primary:focus {
+        box-shadow: none;
+        text-decoration: none;
+    }
+    .footer {
+        font-size: 14px;
+        text-align: center;
+        color: white;
+        height: 10vh;
+        padding-top: 8px;
+    }
+
+    .react-pdf__Page__canvas{
+        width: 100% !important;
+    }
+
+    .header {
+        background-clip:border-box;
+        border-bottom: 1px solid #e1e1e1;
+    }
+
+    .header shadow {
+        /**box-shadow: 0 0.15rem 1.75rem 0 rgba(40, 41, 55, 0.15) !important;**/
+    }
+
+        .header span {
+            /**color: #fff;**/
+    }
+
+    .header .form-inline .form-control {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        position: relative;
+        flex: 1 1 auto;
+        width: 1%;
+        margin-bottom: 0;
+        display: inline-block;
+        width: auto;
+        vertical-align: middle;
+        background-color: #f8f9fc !important;
+        border: 0 !important;
+    }
+
+    .btn-primary, .btn, .btn-primary:hover, .btn:hover, .btn-primary:focus, .btn:focus {
+        outline: none !important;
+        outline-offset: unset !important;
+        border-color: transparent !important;
+        box-shadow: none !important;
+        text-decoration: none;
+    }
+
+    .header .btn-primary {
+        display: block;
+        color: #fff;
+        border-radius: 0px;
+        /*box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.2);*/
+        //background-color: #114084;
+        border-top: 1px solid rgba(255,255,255,0.5) !important;
+        margin-top: -5px;
+        text-decoration: none;
+    }
+
+    .header .btn {
+        font-weight: 400;
+        text-align: center;
+        vertical-align: middle;
+        -ms-user-select: none;
+        user-select: none;
+        border: 1px solid transparent;
+        padding: 0.375rem 0.75rem;
+        font-size: 1rem;
+        line-height: 2;
+        width: 100%;
+        text-align:left;
+        text-decoration:none;
+        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+    .border {
+        border: 0px solid #dee2e6 !important;
+    }
+
+    .header .dropdown-toggle::after {
+        display: inline-block;
+        margin-left: .255em;
+        vertical-align: .255em;
+        content: none !important;
+        border-top: .3em solid;
+        border-right: .3em solid transparent;
+        border-bottom: 0;
+        border-left: .3em solid transparent;
+    }
+
+    .search .card-body{
+       height: 60vh !important;  
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "babel": {
     "presets": [
       "@babel/preset-env",
@@ -22,12 +22,16 @@
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/pickers": "^3.2.10",
     "@material-ui/styles": "^4.9.6",
+    "@types/googlemaps": "3.39.3",
+    "@types/markerclustererplus": "2.1.33",
     "async-mutex": "^0.2.3",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.8.0",
     "date-fns": "^2.12.0",
+    "eslint-plugin-flowtype": "3.13.0",
     "install": "^0.13.0",
     "jquery": "^3.5.1",
+    "js-base64": "^3.6.0",
     "material-ui": "^0.20.2",
     "mobx": "^5.15.4",
     "node-sass": "^4.14.1",
@@ -55,9 +59,6 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.1.0",
-    "@types/googlemaps": "3.39.3",
-    "@types/markerclustererplus": "2.1.33",
-    "eslint-plugin-flowtype": "3.13.0",
     "typescript": "3.8.3"
   },
   "devDependencies": {