IVYPORTAL-17540 Implement column width changing for portal widgets - …

…LE (#1130) * IVYPORTAL-17540 Implement column width changing for portal widgets - Version LE: implement for case and task widget * IVYPORTAL-17540 Implement column width changing for portal widgets - Version LE: implement * IVYPORTAL-17540 Implement column width changing for portal widgets - Version LE: update screenshot and GUI test * IVYPORTAL-17540 Implement column width changing for portal widgets - Version LE: remove unused code * IVYPORTAL-17540 Implement column width changing for portal widgets - Version LE - Fixed compile error - Remove redundant code * IVYPORTAL-17540 Implement column width changing for portal widgets LE version: handle feedback --------- Co-authored-by: mnhnam-axonivy <[email protected]>
axonivy-market · Oct 28, 2024 · 5fce02d · 5fce02d
1 parent eb71c5f
commit 5fce02d
Show file tree

Hide file tree

Showing 38 changed files with 293 additions and 100 deletions.
diff --git a/...lenium-test/src_test/com/axonivy/portal/selenium/page/CaseEditWidgetNewDashBoardPage.java b/...lenium-test/src_test/com/axonivy/portal/selenium/page/CaseEditWidgetNewDashBoardPage.java
@@ -7,6 +7,7 @@
 import static com.codeborne.selenide.Selenide.$$;
 
 import org.openqa.selenium.WebElement;
+import org.openqa.selenium.interactions.Actions;
 
 import com.axonivy.portal.selenium.common.ComplexFilterHelper;
 import com.axonivy.portal.selenium.common.FilterOperator;
@@ -414,4 +415,13 @@ public SelenideElement getExpandModeCheckbox() {
   public void clickOnExpandModeCheckbox() {
     getExpandModeCheckbox().shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
   } 
+
+  public void resizeColumn() {
+    ElementsCollection elements = $("[id=\"task-task_1:task-component:dashboard-tasks:dashboard-tasks-columns:1\"]")
+    .$$(".ui-column-resizer.ui-draggable.ui-draggable-handle");
+    WebElement element = elements.get(0);
+    new Actions(driver)
+    .clickAndHold(element)
+    .perform();
+  }
 }
diff --git a/...al-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardModificationPage.java b/...al-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardModificationPage.java
@@ -5,6 +5,8 @@
 
 import java.util.List;
 
+import org.openqa.selenium.interactions.Actions;
+
 import com.codeborne.selenide.CollectionCondition;
 import com.codeborne.selenide.Condition;
 import com.codeborne.selenide.ElementsCollection;
@@ -148,4 +150,28 @@ public void getDashboardShareLinkDialog() {
     clickButtonOnDashboardConfigurationActionMenu("Share", dashboard);
     $("div[id$=':share-dashboard-dialog']").shouldBe(Condition.appear, DEFAULT_TIMEOUT);
   }
+
+  public SelenideElement getElementBorder() {
+    ElementsCollection elements = $("[id=\"task-task_1:task-component:dashboard-tasks:dashboard-tasks-columns:1\"]")
+        .$$(".ui-column-resizer.ui-draggable.ui-draggable-handle");
+    return elements.get(0);
+}
+
+  public void resizeColumn() {
+    $("[id='task-task_1:task-component:dashboard-tasks-container']").shouldBe(Condition.appear, DEFAULT_TIMEOUT);
+    ElementsCollection elements = $("[id=\"task-task_1:task-component:dashboard-tasks:dashboard-tasks-columns:1\"]")
+    .$$(".ui-column-resizer.ui-draggable.ui-draggable-handle");
+    ElementsCollection targets = $("[id='task-task_1:task-component:dashboard-tasks:dashboard-tasks-columns:3']")
+        .$$(".ui-column-resizer.ui-draggable.ui-draggable-handle");
+
+    new Actions(driver)
+    .dragAndDrop(elements.get(0), targets.get(0))
+    .perform();
+  }
+
+  public int getPriorityColumnSize() {
+    return $("[id=\"task-task_1:task-component:dashboard-tasks:dashboard-tasks-columns:1\"]")
+        .shouldBe(Condition.appear, DEFAULT_TIMEOUT)
+        .getSize().getWidth();
+  }
 }
diff --git a/...ium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardCaseWidgetTest.java b/...ium-test/src_test/com/axonivy/portal/selenium/test/dashboard/DashboardCaseWidgetTest.java
@@ -335,4 +335,20 @@ public void testHideExpandMode() {
     redirectToNewDashBoard();
     assertFalse(caseWidget.isExpandButtonAppear());
   }
+
+  @Test
+  public void testResizeColumnWidth() {
+    redirectToRelativeLink(createTestingTasksUrl);
+    login(TestAccount.ADMIN_USER);
+    redirectToNewDashBoard();
+    var configurationPage = newDashboardPage.openDashboardConfigurationPage();
+    DashboardModificationPage modificationPage = configurationPage.openEditPublicDashboardsPage();
+    modificationPage.navigateToEditDashboardDetailsByName("Dashboard");
+    int oldSize = modificationPage.getPriorityColumnSize();
+    modificationPage.resizeColumn();
+    int newSize = modificationPage.getPriorityColumnSize();
+    assertTrue(newSize > oldSize);
+    redirectToNewDashBoard();
+
+  }
 }
diff --git a/...vyPortal/portal/src/ch/ivy/addon/portal/generic/bean/DashboardDetailModificationBean.java b/...vyPortal/portal/src/ch/ivy/addon/portal/generic/bean/DashboardDetailModificationBean.java
@@ -35,8 +35,10 @@
 
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
+import org.apache.commons.lang3.math.NumberUtils;
 import org.apache.logging.log4j.util.Strings;
 import org.primefaces.PrimeFaces;
+import org.primefaces.event.ColumnResizeEvent;
 
 import com.axonivy.portal.bo.ClientStatistic;
 import com.axonivy.portal.components.dto.UserDTO;
@@ -1003,4 +1005,63 @@ public boolean displayFullscreenModeOption() {
         .map(DashboardWidgetType::canShowFullscreenModeOption).orElse(false);
   }
 
+  public void onResizeColumn(ColumnResizeEvent event) {
+    String widgetId = (String) event.getComponent().getAttributes()
+        .getOrDefault("widgetId", "");
+
+    if (StringUtils.isBlank(widgetId)) {
+      return;
+    }
+
+    DashboardWidget targetWidget = selectedDashboard.getWidgets()
+        .stream().filter(widget -> widget.getId().contentEquals(widgetId))
+        .findFirst().orElse(null);
+
+    if (targetWidget == null) {
+      return;
+    }
+
+    if (targetWidget instanceof TaskDashboardWidget) {
+      handleResizeColumnOfTaskWidget(
+          (TaskDashboardWidget) targetWidget,
+          getColumnIndexFromColumnKey(event.getColumn().getColumnKey()),
+          event.getWidth());
+    }
+
+    if (targetWidget instanceof CaseDashboardWidget) {
+      handleResizeColumnOfCaseWidget(
+          (CaseDashboardWidget) targetWidget,
+          getColumnIndexFromColumnKey(event.getColumn().getColumnKey()),
+          event.getWidth());
+    }
+
+    selectedDashboard = DashboardService.getInstance().save(selectedDashboard);
+  }
+
+  /**
+   * Split the ID and get the last part to get the order of the column Example:
+   * ID = 'task-1:task-component:dashboard-tasks:dashboard-tasks-columns:1'
+   * Then, the result should be 1
+   * 
+   * @param columnKey
+   * @return
+   */
+  private Integer getColumnIndexFromColumnKey(String columnKey) {
+    List<String> idParts = Arrays.asList(columnKey.split("\\:"));
+    return NumberUtils.toInt(idParts.get(idParts.size() - 1), -1);
+  }
+
+  private void handleResizeColumnOfTaskWidget(TaskDashboardWidget widget,
+      int fieldPosition, int widthValue) {
+    widget.getColumns().get(fieldPosition)
+        .setWidth(Integer.toString(widthValue));
+    widget.getColumns().forEach(col -> col.initDefaultStyle());
+  }
+
+  private void handleResizeColumnOfCaseWidget(CaseDashboardWidget widget,
+      int fieldPosition, int widthValue) {
+    widget.getColumns().get(fieldPosition)
+        .setWidth(Integer.toString(widthValue));
+    widget.getColumns().forEach(col -> col.initDefaultStyle());
+  }
 }
diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/AbstractColumn.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/AbstractColumn.java
@@ -11,6 +11,7 @@
 
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
+import org.apache.commons.lang3.math.NumberUtils;
 
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import com.fasterxml.jackson.annotation.JsonInclude;
@@ -33,13 +34,17 @@ public abstract class AbstractColumn implements Serializable {
 
   private static final long serialVersionUID = -8430449835327597359L;
   @JsonIgnore
-  public static final String TINY_WIDTH = "width: 80px";
+  private static final String DEFAULT_WIDTH_UNIT = "px";
   @JsonIgnore
-  public static final String SMALL_WIDTH = "width: 100px";
+  public static final int TINY_WIDTH = 80;
   @JsonIgnore
-  public static final String NORMAL_WIDTH = "width: 120px";
+  public static final int SMALL_WIDTH = 100;
   @JsonIgnore
-  public static final String EXTRA_WIDTH = "width: 150px";
+  public static final int NORMAL_WIDTH = 120;
+  @JsonIgnore
+  public static final int EXTRA_WIDTH = 150;
+  @JsonIgnore
+  public static final int LARGE_WIDTH = 200;
 
   @Deprecated(since = "10.0", forRemoval = true)
   @JsonProperty(access = Access.WRITE_ONLY)
@@ -77,6 +82,10 @@ public abstract class AbstractColumn implements Serializable {
   protected Date userDateFilterFrom;
   protected Date userDateFilterTo;
   protected List<String> userFilterListOptions;
+  protected String width;  
+
+  @JsonIgnore
+  protected String styleToDisplay;
 
   public void initDefaultValue() {
     if (isNull(this.visible)) {
@@ -132,7 +141,7 @@ public String getDefaultHeaderCMS() {
 
   @JsonIgnore
   public String getDefaultStyle() {
-    return SMALL_WIDTH;
+    return "";
   }
 
   @JsonIgnore
@@ -333,6 +342,25 @@ public String getUserFilterTo() {
   public void setUserFilterTo(String userFilterTo) {
     this.userFilterTo = userFilterTo;
   }
+
+  public String getWidth() {
+    return width;
+  }
+
+  public void setWidth(String width) {
+    this.width = width;
+  }
+
+  @JsonIgnore
+  public String getStyleToDisplay() {
+    return styleToDisplay;
+  }
+
+  @JsonIgnore
+  public void setStyleToDisplay(String styleToDisplay) {
+    this.styleToDisplay = styleToDisplay;
+  }
+
 
   @JsonIgnore
   public String getHeaderText() {
@@ -420,6 +448,27 @@ public void resetUserFilter() {
     setUserDateFilterFrom(null);
     setUserDateFilterTo(null);
   }
+
+  @JsonIgnore
+  protected int getDefaultColumnWidth() {
+    return SMALL_WIDTH;
+  }
+
+  @JsonIgnore
+  protected int resolveColumnWidth() {
+    return NumberUtils.toInt(this.width, getDefaultColumnWidth());
+  }
+
+  @JsonIgnore
+  protected String initDefaultWidth() {
+    return "width: " + resolveColumnWidth() + "px";
+  }
+
+  @JsonIgnore
+  public String initDefaultStyle() {
+    return String.join(";", initDefaultWidth(),
+        StringUtils.defaultIfBlank(this.style, ""));
+  }
 
   @JsonIgnore
   public Boolean getIsCustomAction() {

diff --git a/...Portal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/ActionsColumnModel.java b/...Portal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/ActionsColumnModel.java
@@ -14,7 +14,7 @@ public class ActionsColumnModel extends CaseColumnModel implements Serializable
   public void initDefaultValue() {
     super.initDefaultValue();
     this.field = DashboardStandardCaseColumn.ACTIONS.getField();
-    this.style = defaultIfEmpty(this.style, getDefaultStyle());
+    this.styleToDisplay = initDefaultStyle();
     this.styleClass = defaultIfEmpty(this.styleClass, getDefaultStyleClass());
     this.sortable = getDefaultSortable();
     this.format = getDefaultFormat();
@@ -35,11 +35,6 @@ public Boolean getDefaultSortable() {
     return false;
   }
 
-  @Override
-  public String getDefaultStyle() {
-    return SMALL_WIDTH;
-  }
-
   @Override
   public String getDefaultStyleClass() {
     return "dashboard-cases__actions u-text-align-center";

diff --git a/...al/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/ApplicationColumnModel.java b/...al/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/ApplicationColumnModel.java
@@ -23,7 +23,7 @@ public class ApplicationColumnModel extends CaseColumnModel implements Serializa
   public void initDefaultValue() {
     super.initDefaultValue();
     this.field = DashboardStandardCaseColumn.APPLICATION.getField();
-    this.style = defaultIfEmpty(this.style, TINY_WIDTH);
+    this.styleToDisplay = initDefaultStyle();
     this.styleClass = defaultIfEmpty(this.styleClass, "dashboard-tasks__priority u-text-align-center");
     this.format = DashboardColumnFormat.CUSTOM;
     this.quickSearch = defaultIfEmpty(this.quickSearch, false);

diff --git a/...ortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/CategoryColumnModel.java b/...ortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/CategoryColumnModel.java
@@ -34,7 +34,7 @@ public class CategoryColumnModel extends CaseColumnModel {
   public void initDefaultValue() {
     super.initDefaultValue();
     this.field = DashboardStandardTaskColumn.CATEGORY.getField();
-    this.style = defaultIfEmpty(this.style, getDefaultStyle());
+    this.styleToDisplay = initDefaultStyle();
     this.styleClass = defaultIfEmpty(this.styleClass, getDefaultStyleClass());
     this.format = getDefaultFormat();
     this.sortable = getDefaultSortable();
@@ -56,11 +56,6 @@ public Boolean getDefaultSortable() {
     return false;
   }
 
-  @Override
-  public String getDefaultStyle() {
-    return NORMAL_WIDTH;
-  }
-
   @Override
   public boolean canQuickSearch() {
     return true;

diff --git a/...al/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/CreatedDateColumnModel.java b/...al/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/CreatedDateColumnModel.java
@@ -26,7 +26,7 @@ public class CreatedDateColumnModel extends CaseColumnModel implements Serializa
   public void initDefaultValue() {
     super.initDefaultValue();
     this.field = DashboardStandardCaseColumn.CREATED.getField();
-    this.style = defaultIfEmpty(this.style, getDefaultStyle());
+    this.styleToDisplay = initDefaultStyle();
     this.styleClass = defaultIfEmpty(this.styleClass, getDefaultStyleClass());
     this.format = getDefaultFormat();
   }
@@ -41,11 +41,6 @@ public DashboardColumnFormat getDefaultFormat() {
     return DashboardColumnFormat.TIMESTAMP;
   }
 
-  @Override
-  public String getDefaultStyle() {
-    return SMALL_WIDTH;
-  }
-
   @Override
   public String getDefaultStyleClass() {
     return "dashboard-cases__created-date u-text-align-center";

diff --git a/...Portal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/CreatorColumnModel.java b/...Portal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/CreatorColumnModel.java
@@ -30,7 +30,7 @@ public void initDefaultValue() {
     this.setVisible(!GlobalSettingService.getInstance().isHideCaseCreator());
     super.initDefaultValue();
     this.field = DashboardStandardCaseColumn.CREATOR.getField();
-    this.style = defaultIfEmpty(this.style, getDefaultStyle());
+    this.styleToDisplay = initDefaultStyle();
     this.format = getDefaultFormat();
     this.styleClass = defaultIfEmpty(this.styleClass, getDefaultStyleClass());
     this.quickSearch = defaultIfEmpty(this.quickSearch, false);
@@ -46,8 +46,8 @@ public DashboardColumnFormat getDefaultFormat() {
     return DashboardColumnFormat.CUSTOM;
   }
 
-  @Override
-  public String getDefaultStyle() {
+  @JsonIgnore
+  protected int getDefaultColumnWidth() {
     return EXTRA_WIDTH;
   }
 

diff --git a/...al/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/DescriptionColumnModel.java b/...al/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/DescriptionColumnModel.java
@@ -13,7 +13,7 @@ public class DescriptionColumnModel extends CaseColumnModel implements Serializa
   public void initDefaultValue() {
     super.initDefaultValue();
     this.field = DashboardStandardCaseColumn.DESCRIPTION.getField();
-    this.style = defaultIfEmpty(this.style, getDefaultStyle());
+    this.styleToDisplay = initDefaultStyle();
     this.styleClass = defaultIfEmpty(this.styleClass, getDefaultStyleClass());
     this.sortable = defaultIfEmpty(this.sortable, getDefaultSortable());
     this.quickSearch = defaultIfEmpty(this.quickSearch, true);
@@ -30,8 +30,8 @@ public Boolean getDefaultSortable() {
   }
 
   @Override
-  public String getDefaultStyle() {
-    return "width: 200px";
+  protected int getDefaultColumnWidth() {
+    return 200;
   }
 
   @Override

diff --git a/...l/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/FinishedDateColumnModel.java b/...l/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/FinishedDateColumnModel.java
@@ -28,6 +28,7 @@ public void initDefaultValue() {
     this.field = DashboardStandardCaseColumn.FINISHED.getField();
     this.styleClass = defaultIfEmpty(this.styleClass, getDefaultStyleClass());
     this.format = getDefaultFormat();
+    this.styleToDisplay = initDefaultStyle();
   }
 
   @Override

diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/IdColumnModel.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/dto/dashboard/casecolumn/IdColumnModel.java
@@ -15,6 +15,7 @@ public void initDefaultValue() {
     this.field = DashboardStandardCaseColumn.ID.getField();
     this.styleClass = defaultIfEmpty(this.styleClass, getDefaultStyleClass());
     this.quickSearch = defaultIfEmpty(this.quickSearch, false);
+    this.styleToDisplay = initDefaultStyle();
   }
 
   @Override