@agilemotion/oui-react-js 1.8.14 → 1.8.16

package/dist/view/Dashboard.js

@@ -56,12 +56,31 @@ const DashboardCard = props => {
     if (path && displayType) {
       if (displayType === 'VIEW') {
         (0, _RestUtils.sendRequest)(path, data => {
-          setview(/*#__PURE__*/_react.default.createElement(_View.View, {
+          let dashboardView = {};
+          let defaultModel = {};
+          dashboardView.config = data;
+          dashboardView.parent = false;
+          dashboardView.popUp = false;
+          dashboardView.window = false;
+          dashboardView.config.window = false;
+          dashboardView.handle = {
+            api: {
+              get id() {
+                return data.id;
+              },
+              loaded: () => {
+                return false;
+              }
+            }
+          };
+          _ApplicationManager.default.addView(dashboardView, path, true);
+          let element = /*#__PURE__*/_react.default.createElement(_View.View, {
             key: data.id + "-" + keyCounter.current++,
             config: data,
             parameters: [],
-            handle: handle
-          }));
+            handle: dashboardView.handle
+          });
+          setview(element);
         });
       } else {
         let fetchConfig = {
@@ -154,16 +173,17 @@ const DashboardCard = props => {
   };
   return /*#__PURE__*/_react.default.createElement(_Paper.default, {
     style: {
-      minWidth: '200px',
-      marginLeft: settings.first ? '0' : '16px',
-      minHeight: '40vh'
+      minWidth: '200px'
     },
     className: 'col',
     ref: ref
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'row'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'col-*-*'
+    className: 'col-*-*',
+    style: {
+      height: '64px'
+    }
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledDropdown, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
     color: "default",
     "data-toggle": "dropdown",
@@ -220,10 +240,9 @@ const DashboardCard = props => {
   }, name))), /*#__PURE__*/_react.default.createElement("div", {
     className: 'row',
     style: {
-      margin: '16px',
       width: '100%',
-      height: '32vh',
-      padding: '8px 32px 0 0'
+      height: 'calc(100% - 64px)',
+      padding: '8px 0 32px 32px'
     }
   }, !_Utils.default.isNull(path) && !_Utils.default.isNull(displayType) && displayType !== 'VIEW' && /*#__PURE__*/_react.default.createElement("object", {
     data: path,
@@ -307,9 +326,9 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
   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 [cardCols, setCardCols] = _react.default.useState(null);
+  const [columnHeights, setColumnHeights] = _react.default.useState([]);
+  let numCols = 2;
   const api = {
     get id() {
       return '_sys_dashboard';
@@ -327,31 +346,6 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
   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 = {
@@ -403,18 +397,40 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
       setMenuItems(dashboardMenuitems);
     }
   }
-  _react.default.useEffect(() => {
-    /*let rpcConfig = {
-        "type": "rpc",
-        "procedureName": "getWorkFlowSummary",
-        "serviceId": "BPM.WorkFlow"
-    };*/
+  const setupCardCols = () => {
+    const totalItems = userDashboards.length;
 
-    let cardsPerRow = 2;
-    if (window.innerWidth < 400) {
-      cardsPerRow = 1;
+    // Special case: 1 or 2 cards — full height
+    if (totalItems <= 2) {
+      const cols = Array.from({
+        length: totalItems
+      }, (_, i) => [userDashboards[i]]);
+      setCardCols(cols);
+      setColumnHeights(Array.from({
+        length: totalItems
+      }, () => '100%'));
+      return;
     }
-    setCardsPerRow(cardsPerRow);
+
+    // Distribute round-robin into columns
+    const cols = Array.from({
+      length: numCols
+    }, () => []);
+    userDashboards.forEach((item, index) => {
+      cols[index % numCols].push(item);
+    });
+    setCardCols(cols);
+
+    // Determine max card count across all columns
+    const maxItems = Math.max(...cols.map(col => col.length));
+    const baseHeightPerCard = 40; // in vh
+    const totalTargetHeight = maxItems * baseHeightPerCard; // total height per column in vh
+
+    // Calculate target height per card in each column
+    const heights = cols.map(col => col.length > 0 ? `${(totalTargetHeight / col.length).toFixed(2)}vh` : '0vh');
+    setColumnHeights(heights);
+  };
+  _react.default.useEffect(() => {
     if (_Utils.default.isNull(taskSummary)) {
       (0, _RestUtils.sendRequest)(`${location + _ApplicationManager.default.getContextRoot()}/bpm/api/v1/summary`, result => {
         if (!_Utils.default.isNull(result)) {
@@ -430,15 +446,15 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
         for (const dashboard of dashboards) {
           userDashboards.push(dashboard);
         }
-        setupCardRows(null, cardsPerRow);
+        setupCardCols();
       }
     }, 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();
+    if (!_Utils.default.isNull(settings) && !_Utils.default.isNull(userDashboards) && _Utils.default.isNull(cardCols)) {
+      setupCardCols();
     }
     _ApplicationManager.default.setDashboardView({
       handle: handle
@@ -450,31 +466,31 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     settings.path = path;
     settings.parameters = {};
     userDashboards.push(settings);
-    setupCardRows();
+    setupCardCols();
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: {
-      margin: '4px 0 0 0'
+      height: '100%'
     }
-  }, !_Utils.default.isNull(settings) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'row'
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'col-*-*',
+  }, !_Utils.default.isNull(settings) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      padding: '14px',
-      width: '136px'
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'space-between'
     }
-  }, /*#__PURE__*/_react.default.createElement("p", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      fontSize: '24px'
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px'
     }
-  }, "Dashboard")), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'col-*-*',
+  }, /*#__PURE__*/_react.default.createElement("p", {
     style: {
-      marginTop: "4px"
+      fontSize: '24px',
+      margin: 0
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledDropdown, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
+  }, "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
@@ -495,11 +511,16 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     onClick: () => {
       addDashboardCard(item);
     }
-  }, item.attributes.label, ' '), ' '))) : null), ' ')), /*#__PURE__*/_react.default.createElement("div", {
+  }, item.attributes.label, ' '), ' '))) : null), ' '))), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      overflowY: 'auto',
+      height: 'calc(100% - 58px)',
+      overflowY: 'auto'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      overflowY: 'hidden',
       overflowX: 'hidden',
-      maxHeight: 'calc(85vh - 4px)',
+      height: '100%',
       padding: '0 4px 64px 0'
     }
   }, /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
@@ -512,37 +533,64 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     className: 'row',
     style: {
       paddingRight: '16px',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      height: '168px'
     }
   }, /*#__PURE__*/_react.default.createElement(WorkFlowCard, {
-    margin: '0 0 16px 16px',
+    margin: '0 0 16px 8px',
     title: 'Assigned to Me',
     itemCount: taskSummary.personalWorkItemCount,
     path: '/workflow/views/personal-work-items.json'
   }), /*#__PURE__*/_react.default.createElement(WorkFlowCard, {
-    margin: '0 0 16px 16px',
+    margin: '0 0 16px 8px',
     title: 'Available',
     itemCount: taskSummary.groupWorkItemCount,
     path: '/workflow/views/group-work-items.json'
   }), /*#__PURE__*/_react.default.createElement(WorkFlowCard, {
-    margin: '0 0 16px 16px',
+    margin: '0 0 16px 8px',
     title: 'Due Today',
     itemCount: taskSummary.dueTodayItemCount,
     path: '/workflow/views/due-today-work-items.json'
-  })), /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(cardRows) ? cardRows.map((row, i) => /*#__PURE__*/_react.default.createElement("div", {
-    className: 'row',
+  })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      margin: '0 0 16px 0'
-    },
-    key: i
-  }, row.map((userDashboard, j) => /*#__PURE__*/_react.default.createElement(DashboardCard, {
-    settings: userDashboard,
-    index: dashboardCardCounter,
-    key: i + j,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      maxHeight: '100%',
+      height: 'calc(100% - 104px)'
+    }
+  }, cardCols && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      width: '100%',
+      height: userDashboards.length <= 2 ? '100%' : 'auto'
+    }
+  }, cardCols.map((col, colIndex) => /*#__PURE__*/_react.default.createElement("div", {
+    key: colIndex,
+    style: {
+      flex: 1,
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12px',
+      width: '50%',
+      marginLeft: colIndex % numCols ? '4px' : null,
+      marginRight: cardCols.length > 1 && !(colIndex % numCols) ? '4px' : null
+    }
+  }, col.map((dashboard, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: index,
+    style: {
+      height: columnHeights[colIndex],
+      borderRadius: '6px',
+      display: 'flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement(DashboardCard, {
+    settings: dashboard,
+    index: colIndex + index,
+    key: index,
     onDelete: () => {
-      userDashboards.splice(userDashboards.indexOf(userDashboard), 1);
-      setupCardRows(userDashboard);
+      userDashboards.splice(userDashboards.indexOf(dashboard), 1);
+      setupCardCols();
     }
-  })))) : null))));
+  })))))))))));
 }));
 var _default = exports.default = Dashboard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.14",
+  "version": "1.8.16",
   "files": [
     "dist"
   ],