@agilemotion/oui-react-js 1.8.49 → 1.8.50

package/dist/view/Dashboard.bck.js

@@ -0,0 +1,562 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Utils = _interopRequireDefault(require("../Utils"));
+var _reactstrap = require("reactstrap");
+var _Icon = _interopRequireDefault(require("../components/Icon"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _RestUtils = require("../RestUtils");
+var _RouteActionHandler = _interopRequireDefault(require("../event/RouteActionHandler"));
+var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+var _Event = _interopRequireDefault(require("../event/Event"));
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+var _AlertBar = _interopRequireDefault(require("../components/AlertBar"));
+var _reactPromiseTracker = require("react-promise-tracker");
+var _View = require("../components/layout/View");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const location = window.location.protocol + '//' + window.location.hostname;
+const text = response => {
+  return response.text();
+};
+const alertBarHandle = {};
+const DashboardCard = props => {
+  const [path, setPath] = _react.default.useState(null);
+  const [name, setName] = _react.default.useState(null);
+  const [displayType, setDisplayType] = _react.default.useState(null);
+  const [view, setview] = _react.default.useState(null);
+  const {
+    settings
+  } = props;
+  const [id, setId] = _react.default.useState(props.settings.id);
+  const [content, setContent] = _react.default.useState(null);
+  const [ref] = _react.default.useState(/*#__PURE__*/_react.default.createRef());
+  const keyCounter = (0, _react.useRef)(0);
+  _react.default.useEffect(() => {
+    const accessToken = sessionStorage.getItem('accessToken');
+    const idToken = sessionStorage.getItem('idToken');
+    const handle = {
+      api: {
+        get id() {
+          return 'dashboard-menus';
+        },
+        loaded() {
+          return true;
+        }
+      }
+    };
+    if (path && displayType) {
+      if (displayType === 'VIEW') {
+        (0, _RestUtils.sendRequest)(path, data => {
+          setview(/*#__PURE__*/_react.default.createElement(_View.View, {
+            key: data.id + "-" + keyCounter.current++,
+            config: data,
+            parameters: [],
+            handle: handle
+          }));
+        });
+      } else {
+        let fetchConfig = {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'text/html',
+            'Accept': 'text/html',
+            'Authorization': 'Bearer ' + accessToken,
+            'idToken': idToken
+          }
+        };
+        (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(path), fetchConfig).then(text).then(data => {
+          setContent(data);
+        }).catch(e => {
+          console.error(e);
+        }));
+      }
+    }
+  }, [path, displayType]);
+  _react.default.useEffect(() => {
+    if (!path) {
+      // TODO: Make the base URL dynamic
+      let url = location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/dashboard/get?version=1.0&id=' + settings.path;
+      (0, _RestUtils.sendRequest)(url, data => {
+        let defaultDisplayType = !_Utils.default.isNull(settings.parameters.displayType) ? settings.parameters.displayType : data.defaultDisplayType;
+        if (_Utils.default.isNull(defaultDisplayType)) {
+          console.error('Could not determine display type for dashboard');
+          return;
+        }
+        setDisplayType(defaultDisplayType);
+        let defaultName = !_Utils.default.isNull(settings.parameters.dashboardName) ? settings.parameters.dashboardName : data.defaultDashboardName;
+        if (_Utils.default.isNull(defaultDisplayType)) {
+          console.error('Could not determine a default name for dashboard');
+          return;
+        }
+        setName(defaultName);
+        const accessToken = sessionStorage.getItem('accessToken');
+        const idToken = sessionStorage.getItem('idToken');
+        if (defaultDisplayType === 'VIEW') {
+          let url = location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/view/get?version=1.0&id=' + data.contentPath;
+          setPath(url);
+          setDisplayType(defaultDisplayType);
+        } else {
+          setPath(location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/html/get?version=1.0&id=' + data.contentPath + `-${defaultDisplayType.toLowerCase()}.html&access_token=${accessToken}&idToken=${idToken}`);
+        }
+      }, e => {
+        console.error(e);
+      });
+    }
+  }, []);
+  const saveDashboard = () => {
+    settings.parameters.displayType = displayType;
+    settings.parameters.dashboardName = name;
+    let data = {
+      id: settings.id,
+      path: settings.path,
+      parameters: settings.parameters
+    };
+    let url = `${location + _ApplicationManager.default.getContextRoot()}/system/api/v1/user/dashboard/save`;
+    (0, _RestUtils.postData)(url, response => {
+      settings.id = response;
+      setId(response);
+      displayAlert('SUCCESS', 'Dashboard saved successfully');
+    }, e => {
+      console.log(e);
+      displayAlert('ERROR', _Utils.default.SYSTEM_ERROR_MESSAGE);
+    }, true, data);
+  };
+  const displayAlert = (messageType, messageText) => {
+    let message = {
+      messageType: messageType,
+      message: messageText
+    };
+    let event = new _Event.default(_ApplicationManager.default, '_sys_dashboard', message);
+    _Observable.default.fireEvent(_EventType.default.MESSAGE_ARRIVED, event);
+  };
+  const deleteDashboard = () => {
+    if (!_Utils.default.isNull(settings) && !_Utils.default.isNull(settings.id)) {
+      _ApplicationManager.default.openConfirmDialog('Are you sure you want to delete this dashboard?', result => {
+        if (result === true) {
+          let url = `${location + _ApplicationManager.default.getContextRoot()}/system/api/v1/user/dashboard/delete/${settings.id}`;
+          (0, _RestUtils.sendRequest)(url, () => {
+            props.onDelete();
+          }, e => {
+            console.log(e);
+          });
+        }
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_Paper.default, {
+    style: {
+      minWidth: '200px',
+      marginLeft: settings.first ? '0' : '16px'
+    },
+    className: 'col',
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col-*-*'
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledDropdown, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
+    color: "default",
+    "data-toggle": "dropdown",
+    style: {
+      width: '32px',
+      height: '32px',
+      margin: '8px 8px 0 0'
+    },
+    nav: true
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    "aria-controls": "menu-list-grow",
+    "aria-haspopup": "true",
+    style: {
+      width: '32px',
+      height: '32px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa fa-ellipsis-v fa-xs",
+    "aria-hidden": "true",
+    style: {
+      padding: '3px'
+    }
+  }))), ' ', /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
+    className: "dropdown-navbar",
+    tag: "ul"
+  },
+  /*#__PURE__*/
+  /*Disable this button if id is already saved. After creating dashboard properties such as filters, this button must remain enabled at all times*/
+  _react.default.createElement(_reactstrap.NavLink, {
+    tag: "li"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    className: "nav-item",
+    onClick: () => {
+      saveDashboard();
+    },
+    disabled: !_Utils.default.isNull(id)
+  }, 'SAVE')), /*#__PURE__*/_react.default.createElement(_reactstrap.NavLink, {
+    tag: "li"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    className: "nav-item",
+    onClick: () => {
+      deleteDashboard();
+    },
+    disabled: _Utils.default.isNull(id)
+  }, 'DELETE'), ' '))), ' '), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col-*-*',
+    style: {
+      padding: '14px 0 0 12px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontSize: '24px'
+    }
+  }, name))), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row',
+    style: {
+      margin: '16px',
+      width: '100%',
+      height: '100%',
+      padding: '8px 32px 0 0'
+    }
+  }, !_Utils.default.isNull(path) && !_Utils.default.isNull(displayType) && displayType !== 'VIEW' && /*#__PURE__*/_react.default.createElement("object", {
+    data: path,
+    type: "text/html",
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }), !_Utils.default.isNull(path) && displayType !== 'VIEW' && /*#__PURE__*/_react.default.createElement("p", null, "Loading..."), displayType === 'VIEW' && !_Utils.default.isNull(view) && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: "100%"
+    }
+  }, view)));
+};
+const WorkFlowCard = props => {
+  const [sp, setSp] = _react.default.useState(null);
+  const [minW, setMinW] = _react.default.useState(null);
+  const routeAction = {
+    'actionType': 'route',
+    'parent': true
+  };
+  _react.default.useEffect(() => {
+    if (window.innerWidth < 400) {
+      setSp(16);
+      setMinW(280);
+    } else {
+      setSp(48);
+      setMinW(300);
+    }
+  }, []);
+  return _Utils.default.isNull(sp) || _Utils.default.isNull(minW) ? null : /*#__PURE__*/_react.default.createElement(_Paper.default, {
+    style: {
+      minWidth: `${minW}px`,
+      margin: props.margin,
+      height: '152px'
+    },
+    className: 'col'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col-*-*',
+    style: {
+      width: '70%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: `16px ${sp}px 16px ${sp}px`,
+      height: '8px',
+      color: 'rgba(0, 0, 0, 0.54)'
+    }
+  }, "Work Items"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: `16px ${sp}px 48px ${sp}px`,
+      height: '0',
+      fontSize: '20px'
+    }
+  }, props.title), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: `0 ${sp}px 16px ${sp}px`,
+      fontSize: '30px'
+    }
+  }, props.itemCount)), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col-*-*',
+    style: {
+      marginTop: '50px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    color: 'primary',
+    size: "large",
+    disabled: parseFloat(props.itemCount) === 0,
+    onClick: () => {
+      routeAction.path = props.path;
+      _RouteActionHandler.default.execute(routeAction, null, props.viewRef, '_sys_dashboard');
+    }
+  }, "View"))));
+};
+const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [userDashboards] = _react.default.useState(!_Utils.default.isNull(_ApplicationManager.default.getDashboardSettings().userDashboards) ? _ApplicationManager.default.getDashboardSettings().userDashboards : []);
+  const [settings] = _react.default.useState(_ApplicationManager.default.getDashboardSettings());
+  const [taskSummary, setTaskSummary] = _react.default.useState(null);
+  const [menuItems, setMenuItems] = _react.default.useState(null);
+  const [cardRows, setCardRows] = _react.default.useState(null);
+  const [cardsPerRow, setCardsPerRow] = _react.default.useState(null);
+  let dashboardCardCounter = 0;
+  const api = {
+    get id() {
+      return '_sys_dashboard';
+    },
+    getChildren: () => {
+      return [alertBarHandle];
+    },
+    getChild: id => {
+      if (id === 'dashboardAlert') {
+        return alertBarHandle;
+      }
+      return null;
+    }
+  };
+  const handle = {
+    'api': api
+  };
+  function setupCardRows(exclusion, defaultCardsPerRow) {
+    let row = null;
+    let gridRows = [];
+    dashboardCardCounter = 0;
+    let i = cardsPerRow ? cardsPerRow : defaultCardsPerRow;
+    for (const userDashboard of userDashboards) {
+      if (dashboardCardCounter++ % i === 0) {
+        row = [];
+        gridRows.push(row);
+      }
+      if (userDashboard !== exclusion) {
+        row.push(userDashboard);
+      }
+    }
+    let populatedRows = [];
+    for (const gridRow of gridRows) {
+      if (gridRow.length > 0) {
+        populatedRows.push(gridRow);
+      }
+    }
+    for (const gridRow of populatedRows) {
+      gridRow[0].first = true;
+    }
+    setCardRows(populatedRows);
+  }
+  const getDashboardMenu = path => {
+    return new Promise(resolve => {
+      let service = {
+        url: '/ui/api/v1/menu/get',
+        parameters: [{
+          name: 'id',
+          value: path,
+          httpParameterType: 'QUERY_PARAMETER'
+        }, {
+          name: 'version',
+          value: 1.0,
+          httpParameterType: 'QUERY_PARAMETER'
+        }],
+        contentType: 'application/json'
+      };
+      (0, _RestUtils.invokeRest)(service, {
+        api: {
+          get id() {
+            return 'dashboard-menus';
+          }
+        }
+      }, 'dashboard-menus', result => {
+        resolve(result.menus);
+      }, e => {
+        console.error(e);
+        resolve(null);
+      }, null);
+    });
+  };
+  async function loadMenus() {
+    if (_Utils.default.isNull(menuItems) && !_Utils.default.isNull(settings.systemProfileDto.modules)) {
+      let dashboardMenuitems = [];
+      for (let i = 0; i < settings.systemProfileDto.modules.length; i++) {
+        let module = settings.systemProfileDto.modules[i];
+        if (!_Utils.default.isNull(module.dashboardMenu)) {
+          let menus = await getDashboardMenu(module.dashboardMenu);
+          if (menus) {
+            for (let j = 0; j < menus.length; j++) {
+              let menu = menus[j];
+              if (menu.items) {
+                for (const item of menu.items) {
+                  dashboardMenuitems.push(item);
+                }
+              }
+            }
+          }
+        }
+      }
+      setMenuItems(dashboardMenuitems);
+    }
+  }
+  _react.default.useEffect(() => {
+    /*let rpcConfig = {
+        "type": "rpc",
+        "procedureName": "getWorkFlowSummary",
+        "serviceId": "BPM.WorkFlow"
+    };*/
+
+    let cardsPerRow = 2;
+    if (window.innerWidth < 400) {
+      cardsPerRow = 1;
+    }
+    setCardsPerRow(cardsPerRow);
+    if (_Utils.default.isNull(taskSummary)) {
+      (0, _RestUtils.sendRequest)(`${location + _ApplicationManager.default.getContextRoot()}/bpm/api/v1/summary`, result => {
+        if (!_Utils.default.isNull(result)) {
+          setTaskSummary(result);
+        }
+      }, e => {
+        console.error(e);
+        // TODO : Show error message
+      }, true, true);
+    }
+    (0, _RestUtils.sendRequest)(`${location + _ApplicationManager.default.getContextRoot()}/system/api/v1/user/dashboard/list`, dashboards => {
+      if (!_Utils.default.isNull(dashboards)) {
+        for (const dashboard of dashboards) {
+          userDashboards.push(dashboard);
+        }
+        setupCardRows(null, cardsPerRow);
+      }
+    }, e => {
+      console.error(e);
+      // TODO : Show error message
+    }, true, true);
+    loadMenus();
+    if (!_Utils.default.isNull(settings) && !_Utils.default.isNull(userDashboards) && _Utils.default.isNull(cardRows) && !_Utils.default.isNull(cardsPerRow)) {
+      setupCardRows();
+    }
+    _ApplicationManager.default.setDashboardView({
+      handle: handle
+    });
+  }, []);
+  const addDashboardCard = item => {
+    let path = item.eventHandlingConfig.subscriptions[0].actions[0].path;
+    let settings = {};
+    settings.path = path;
+    settings.parameters = {};
+    userDashboards.push(settings);
+    setupCardRows();
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    style: {
+      height: '100%'
+    }
+  }, !_Utils.default.isNull(settings) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontSize: '24px',
+      margin: 0
+    }
+  }, "Dashboard"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledDropdown, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
+    color: "default",
+    "data-toggle": "dropdown",
+    nav: true
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    "aria-controls": "menu-list-grow",
+    "aria-haspopup": "true"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'ADD'
+  }))), ' ', !_Utils.default.isNull(menuItems) ? /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
+    className: "dropdown-navbar",
+    end: true,
+    tag: "ul"
+  }, menuItems.map((item, index) => /*#__PURE__*/_react.default.createElement(_reactstrap.NavLink, {
+    tag: "li",
+    key: index
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    className: "nav-item",
+    onClick: () => {
+      addDashboardCard(item);
+    }
+  }, item.attributes.label, ' '), ' '))) : null), ' '))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 'calc(100% - 58px)',
+      overflowY: 'auto'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      overflowY: 'hidden',
+      overflowX: 'hidden',
+      height: '100%',
+      padding: '0 4px 64px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
+    config: {
+      id: 'dashboardAlert'
+    },
+    handle: alertBarHandle,
+    viewId: '_sys_dashboard'
+  }), !_Utils.default.isNull(taskSummary) && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row',
+    style: {
+      paddingRight: '16px',
+      overflow: 'hidden',
+      height: '168px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(WorkFlowCard, {
+    margin: '0 0 16px 16px',
+    title: 'Assigned to Me',
+    itemCount: taskSummary.personalWorkItemCount,
+    path: '/workflow/views/personal-work-items.json'
+  }), /*#__PURE__*/_react.default.createElement(WorkFlowCard, {
+    margin: '0 0 16px 16px',
+    title: 'Available',
+    itemCount: taskSummary.groupWorkItemCount,
+    path: '/workflow/views/group-work-items.json'
+  }), /*#__PURE__*/_react.default.createElement(WorkFlowCard, {
+    margin: '0 0 16px 16px',
+    title: 'Due Today',
+    itemCount: taskSummary.dueTodayItemCount,
+    path: '/workflow/views/due-today-work-items.json'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      maxHeight: '100%',
+      height: 'calc(100% - 104px)',
+      border: '4px solid blue'
+    }
+  }, !_Utils.default.isNull(cardRows) ? cardRows.map((row, i) => /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row',
+    style: {
+      marginBottom: cardRows.length > 2 ? '16px' : null,
+      border: '2px solid red'
+    },
+    key: i
+  }, row.map((userDashboard, j) => /*#__PURE__*/_react.default.createElement(DashboardCard, {
+    settings: userDashboard,
+    index: dashboardCardCounter,
+    key: i + j,
+    onDelete: () => {
+      userDashboards.splice(userDashboards.indexOf(userDashboard), 1);
+      setupCardRows(userDashboard);
+    }
+  })))) : null)))));
+}));
+var _default = exports.default = Dashboard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.49",
+  "version": "1.8.50",
   "description": "AgileMotion React UI Component Library - A comprehensive collection of dashboard components, forms, media controls, and more",
   "license": "ISC",
   "author": "",
@@ -175,4 +175,4 @@
     "eslint-plugin-flowtype": "3.13.0",
     "typescript": "3.8.3"
   }
-}
+}