IVYPORTAL-18072 SPIKE: Evaluate the full screen issue with new case a…

…nd task list - Implemented
axonivy-market · Dec 12, 2024 · fe9dca1 · fe9dca1
1 parent 8732522
commit fe9dca1
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 14 deletions.
diff --git a/AxonIvyPortal/portal/config/variables/Portal/Dashboard.json b/AxonIvyPortal/portal/config/variables/Portal/Dashboard.json
@@ -377,7 +377,7 @@
         ],
         "layout": {
           "w": 12,
-          "h": 8,
+          "h": 12,
           "x": 0,
           "y": 0
         },
@@ -489,7 +489,7 @@
         ],
         "layout": {
           "w": 12,
-          "h": 8,
+          "h": 12,
           "x": 0,
           "y": 0
         },

diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portal/generic/bean/DashboardBean.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portal/generic/bean/DashboardBean.java
@@ -123,6 +123,12 @@ public void init() {
         .findGlobalSettingValue(GlobalVariable.DEFAULT_BEHAVIOUR_WHEN_CLICKING_ON_LINE_IN_TASK_LIST)
         .equals(BehaviourWhenClickingOnLineInTaskList.RUN_TASK.name());
 
+    // Set responsive option for default task list and case list
+    if (DashboardUtils.isDefaultCaseListDashboard(selectedDashboard)
+        || DashboardUtils.isDefaultTaskListDashboard(selectedDashboard)) {
+      selectedDashboard.setIsResponsive(true);
+    }
+
     buildClientStatisticApiUri();
   }
 

diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/Dashboard.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/Dashboard.java
@@ -35,9 +35,13 @@ public class Dashboard extends AbstractConfiguration implements Serializable {
   private String displayedPermission;
   private Boolean isTopMenu;
 
+  @JsonIgnore
+  private Boolean isResponsive;
+
   public Dashboard() {
     // Set default values
     isTopMenu = false;
+    isResponsive = false;
   }
 
   public Dashboard(Dashboard dashboard) {
@@ -54,6 +58,7 @@ public Dashboard(Dashboard dashboard) {
     permissionDTOs = dashboard.permissionDTOs;
     displayedPermission = dashboard.displayedPermission;
     isTopMenu = dashboard.isTopMenu;
+    isResponsive = dashboard.isResponsive;
   }
 
   public String getTitle() {
@@ -146,6 +151,16 @@ public void setIsTopMenu(Boolean isTopMenu) {
     this.isTopMenu = isTopMenu;
   }
 
+  @JsonIgnore
+  public Boolean getIsResponsive() {
+    return isResponsive;
+  }
+
+  @JsonIgnore
+  public void setIsResponsive(Boolean isResponsive) {
+    this.isResponsive = isResponsive;
+  }
+
   @Override
   public int hashCode() {
     final int prime = 31;

diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/util/DashboardUtils.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/util/DashboardUtils.java
@@ -327,4 +327,13 @@ public static void updatePropertiesToNullIfCurrentValueIsDefaultValue(List<Dashb
     }
   }
 
+  public static boolean isDefaultTaskListDashboard(Dashboard dashboard) {
+    return Optional.ofNullable(dashboard).map(Dashboard::getId)
+        .orElseGet(() -> "").contentEquals(DEFAULT_TASK_LIST_DASHBOARD);
+  }
+
+  public static boolean isDefaultCaseListDashboard(Dashboard dashboard) {
+    return Optional.ofNullable(dashboard).map(Dashboard::getId)
+        .orElseGet(() -> "").contentEquals(DEFAULT_CASE_LIST_DASHBOARD);
+  }
 }
diff --git a/AxonIvyPortal/portal/webContent/layouts/restricted/DashboardTemplate.xhtml b/AxonIvyPortal/portal/webContent/layouts/restricted/DashboardTemplate.xhtml
@@ -20,6 +20,8 @@
           }
 
           $(document).ready(function () {
+            loadGrid(#{managedBean.selectedDashboard.isResponsive});
+            updateDashboardWhenResizeWindow(#{managedBean.selectedDashboard.isResponsive});
             setTimeout(() => {
               initStatistics();
             }, 50);
@@ -48,7 +50,7 @@
 
         <h:form id="dashboard-remote-command-form" prependId="false">
           <h:inputHidden id="dashboard-view-mode" value="#{managedBean.isReadOnlyMode}"/>
-          <p:remoteCommand name="updateDashboardWidget" update="grid-stack" oncomplete="loadGrid();dashboardToolKit.responsive(); initStatistics('#{managedBean.clientStatisticApiUri}');" />
+          <p:remoteCommand name="updateDashboardWidget" update="grid-stack" oncomplete="loadGrid(#{managedBean.selectedDashboard.isResponsive});dashboardToolKit.responsive(); initStatistics('#{managedBean.clientStatisticApiUri}');" />
           <p:remoteCommand name="loadAllWidgetSavedFilters" actionListener="#{managedBean.loadAllWidgetSavedFilters()}"
             global="false" process="@this" immediate="true" partialSubmit="true"
             update="delete-saved-filter-form:quick-filter-table"
@@ -181,7 +183,7 @@
               <p:commandButton id="confirm-destruction-dashboard-tasks" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
                icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
                actionListener="#{taskWidgetBean.destroyTask(taskWidgetBean.selectedTaskItemId)}"
-               oncomplete="PF('destroy-task-dialog').hide();loadGrid(); initStatistics();"
+               oncomplete="PF('destroy-task-dialog').hide();loadGrid(#{managedBean.selectedDashboard.isResponsive}); initStatistics();"
                update="grid-stack dashboard-title-container" />
             </ui:define>
            </ui:decorate>
@@ -203,13 +205,13 @@
               <p:commandButton id="confirm-escalation-dashboard-tasks" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/yes')}"
                icon="#{visibilityBean.generateButtonIcon('si si-check-1')}"
                actionListener="#{taskWidgetBean.expiryTask(taskWidgetBean.selectedTaskItemId)}"
-               oncomplete="PF('escalation-task-dialog').hide();loadGrid();initStatistics();" update="grid-stack dashboard-title-container" />
+               oncomplete="PF('escalation-task-dialog').hide();loadGrid(#{managedBean.selectedDashboard.isResponsive});initStatistics();" update="grid-stack dashboard-title-container" />
             </ui:define>
            </ui:decorate>
 
            <!-- Delegate Task Dialog -->
            <ic:ch.ivy.addon.portalkit.component.TaskItemDelegate id="dashboard-tasks-item-delegate"
-            taskId="#{taskWidgetBean.selectedTaskItemId}" componentToUpdate="grid-stack dashboard-title-container" onCompletedCallback="loadGrid(); initStatistics();"/>
+            taskId="#{taskWidgetBean.selectedTaskItemId}" componentToUpdate="grid-stack dashboard-title-container" onCompletedCallback="loadGrid(#{managedBean.selectedDashboard.isResponsive}); initStatistics();"/>
 
            <!-- Workflow Event of Task Dialog -->
            <ic:ch.ivy.addon.portalkit.component.TaskItemWorkflowEvents id="dashboard-tasks-workflow-event"
@@ -231,7 +233,7 @@
             <p:commandButton id="confirm-destruction-dashboard-cases" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
               icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
               actionListener="#{caseWidgetBean.destroyCase(caseWidgetBean.selectedCase)}"
-              oncomplete="PF('destroy-case-dialog').hide();loadGrid();initStatistics();"
+              oncomplete="PF('destroy-case-dialog').hide();loadGrid(#{managedBean.selectedDashboard.isResponsive});initStatistics();"
               update="grid-stack dashboard-title-container" />
            </ui:define>
           </ui:decorate>
@@ -308,7 +310,7 @@
 
           <h:panelGroup rendered="#{managedBean.isShowShareButtonOnDashboard() and not managedBean.isMainDashboardSelected()}" layout="block" styleClass="u-text-align-center">
             <p:link value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/ShareThisDashboard')}" 
-                  onclick="PF('share-dashboard-dialog').show(); return false;" />
+                  onclick="PF('share-dashboard-dialog').show(); return false;" styleClass="js-share-dashboard-link" />
           </h:panelGroup>
           <ic:com.axonivy.portal.component.ShareLinkDialog
             id="share-dashboard-component"

diff --git a/AxonIvyPortal/portal/webContent/resources/js/dashboard.js b/AxonIvyPortal/portal/webContent/resources/js/dashboard.js
@@ -1,11 +1,38 @@
 var grids;
 var originalGridstackHeight = 0;
-loadGrid();
-// resizeTableBody();
-function loadGrid() {
+
+const defaultNumberOfCells = 12;
+const defaultCellHeight = 100;
+const additionalHeightForResizeHandler = 15;
+
+// Store the initial window height to detect changes
+let windowHeight = window.innerHeight;
+
+function loadGrid(isResponsive) {
+
+  // Set default height for cells
+  var gridCellHeight = defaultCellHeight;
+
+  if (isResponsive) {
+	var dashboardModificationPageHeaderHeight = 0;
+    const announcementHeight = ($('.js-announcement-message').outerHeight(true) || 0);
+    const shareDashboardLinkHeight = ($('.js-share-dashboard-link').outerHeight(true) || 0);
+
+    if ($('.js-dashboard__header').length > 0) {
+        dashboardModificationPageHeaderHeight = ($('.js-dashboard__header').outerHeight(true) || 0) + additionalHeightForResizeHandler;
+    }
+
+    // calculate available height then divide by default number of cells to get height value for each cell
+    gridCellHeight = (PortalLayout.getAvailableHeight() - announcementHeight
+        - shareDashboardLinkHeight - dashboardModificationPageHeaderHeight) / defaultNumberOfCells;
+
+    // If the calculated cell height is less than or equals to 0, use the default cell height instead
+    gridCellHeight = gridCellHeight > 0 ? gridCellHeight : defaultCellHeight;
+  }
+
   grids = GridStack.initAll({
-    column: 12,
-    cellHeight: 100,
+    column: defaultNumberOfCells,
+    cellHeight: gridCellHeight,
     resizable: {
       handles: 'e, se, s, sw, w'
     }
@@ -534,4 +561,29 @@ function udateResizableTablesWhenResizeWidget() {
     }
   });
 
+}
+
+function updateDashboardWhenResizeWindow(isResponsiveDashboard) {
+  if (!isResponsiveDashboard) {
+    return;
+  }
+
+  // resize timeout ID
+  let resizeTimeout;
+
+  window.addEventListener('resize', function () {
+    clearTimeout(resizeTimeout);
+
+    resizeTimeout = setTimeout(function () {
+
+   // Check if the window height has changed
+   if (window.innerHeight !== windowHeight) {
+
+     // Call the remote command 'updateDashboardWidget'
+     updateDashboardWidget();
+
+     windowHeight = window.innerHeight;
+      }
+    }, 1000); // Delay execution by 1 sec to avoid send multiple requests
+  });
 }
diff --git a/AxonIvyPortal/portal/webContent/resources/js/responsive-toolkit.js b/AxonIvyPortal/portal/webContent/resources/js/responsive-toolkit.js
@@ -87,7 +87,10 @@ var PortalLayout = {
 
   getAvailableHeight: function () {
     var $layoutMain = $('.js-layout-main');
-    var layoutMainPadding = parseInt($layoutMain.css('padding-top') || 0) + parseInt($layoutMain.css('padding-bottom') || 0);
+    const roundedLayoutMainPaddingTop = parseInt(Math.round(parseFloat($layoutMain.css('padding-top') || 0)) || 0);
+    const roundedLayoutMainPaddingBottom = parseInt(Math.round(parseFloat($layoutMain.css('padding-bottom') || 0)) || 0);
+    var layoutMainPadding = roundedLayoutMainPaddingTop + roundedLayoutMainPaddingBottom;
+
     return window.innerHeight - layoutMainPadding;
   },