MID-8101 ux improvement for page size widget

Evolveum · Sep 19, 2022 · 3d4ad36 · 3d4ad36
1 parent e5d9874
commit 3d4ad36
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 83 deletions.
diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/BoxedTablePanel.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/BoxedTablePanel.html
@@ -19,13 +19,13 @@
     <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex" wicket:id="buttonToolbar"/>
         <div class="d-flex align-items-center" wicket:id="footerContainer">
-            <div class="mr-2">
+            <form class="mr-3" wicket:id="form">
+                <div wicket:id="pageSize"/>
+            </form>
+            <div class="mr-3">
                 <span class="align-middle" wicket:id="count"/>
             </div>
-            <div class="mr-2" wicket:id="paging" />
-            <form wicket:id="form">
-                <div wicket:id="menu"/>
-            </form>
+            <div wicket:id="paging" />
         </div>
     </div>
 </wicket:fragment>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/BoxedTablePanel.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/BoxedTablePanel.java
@@ -47,7 +47,7 @@ public class BoxedTablePanel<T> extends BasePanel<T> implements Table {
     private static final String ID_PAGING_FOOTER = "pagingFooter";
     private static final String ID_PAGING = "paging";
     private static final String ID_COUNT = "count";
-    private static final String ID_MENU = "menu";
+    private static final String ID_PAGE_SIZE = "pageSize";
     private static final String ID_FOOTER_CONTAINER = "footerContainer";
     private static final String ID_BUTTON_TOOLBAR = "buttonToolbar";
     private static final String ID_FORM = "form";
@@ -320,7 +320,7 @@ protected String getPaginationCssClass() {
 
             Form form = new MidpointForm(ID_FORM);
             footerContainer.add(form);
-            PagingSizePanel menu = new PagingSizePanel(ID_MENU) {
+            PagingSizePanel menu = new PagingSizePanel(ID_PAGE_SIZE) {
 
                 @Override
                 protected void onPageSizeChangePerformed(AjaxRequestTarget target) {
@@ -347,7 +347,7 @@ public Component getFooterButtonToolbar() {
         }
 
         public Component getFooterMenu() {
-            return get(ID_FOOTER_CONTAINER).get(ID_MENU);
+            return get(ID_FOOTER_CONTAINER).get(ID_PAGE_SIZE);
         }
 
         public Component getFooterCountLabel() {

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/CountToolbar.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/CountToolbar.html
@@ -10,10 +10,10 @@
 <wicket:panel>
     <tr>
         <td wicket:id="td" style="text-align: right;">
-            <span wicket:id="count"/>
             <form wicket:id="form">
                 <div wicket:id="pageSize"/>
             </form>
+            <span wicket:id="count"/>
         </td>
     </tr>
 </wicket:panel>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/PagingSizePanel.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/PagingSizePanel.html
@@ -8,19 +8,7 @@
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org">
 <wicket:panel>
-    <input wicket:id="input" type="text" class="form-control" wicket:message="title:PagingSizePanel.pageSize">
-    <div class="input-group-append">
-        <div class="d-flex flex-column">
-            <a wicket:id="increment" class="btn-increment border-bottom-0">
-                <i class="fa-solid fa-caret-up fa-xs"></i>
-            </a>
-            <a wicket:id="decrement" class="btn-increment">
-                <i class="fa-solid fa-caret-down fa-xs"></i>
-            </a>
-        </div>
-        <a wicket:id="submit" class="btn btn-primary">
-            <i class="fa fa-check"></i>
-        </a>
-    </div>
+    <span class="text-nowrap mr-2"><wicket:message key="PagingSizePanel.label"/></span>
+    <select wicket:id="size" class="form-control"/>
 </wicket:panel>
 </html>
diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/PagingSizePanel.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/PagingSizePanel.java
@@ -7,32 +7,27 @@
 
 package com.evolveum.midpoint.web.component.data;
 
-import org.apache.commons.lang3.StringUtils;
+import java.util.Arrays;
+
 import org.apache.wicket.ajax.AjaxRequestTarget;
-import org.apache.wicket.ajax.markup.html.form.AjaxSubmitLink;
+import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
 import org.apache.wicket.behavior.AttributeAppender;
 import org.apache.wicket.markup.ComponentTag;
-import org.apache.wicket.markup.head.IHeaderResponse;
-import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
-import org.apache.wicket.markup.html.WebMarkupContainer;
-import org.apache.wicket.markup.html.form.TextField;
+import org.apache.wicket.markup.html.form.DropDownChoice;
 import org.apache.wicket.model.IModel;
-import org.apache.wicket.validation.validator.RangeValidator;
+import org.apache.wicket.model.Model;
 
 import com.evolveum.midpoint.gui.api.component.BasePanel;
 import com.evolveum.midpoint.web.session.UserProfileStorage;
-import com.evolveum.midpoint.web.util.SearchFormEnterBehavior;
 
 /**
  * Created by Viliam Repan (lazyman).
  */
 public class PagingSizePanel extends BasePanel<Integer> {
 
     private static final long serialVersionUID = 1L;
-    private static final String ID_INPUT = "input";
-    private static final String ID_SUBMIT = "submit";
-    private static final String ID_INCREMENT = "increment";
-    private static final String ID_DECREMENT = "decrement";
+
+    private static final String ID_SIZE = "size";
 
     private boolean small;
 
@@ -49,60 +44,20 @@ protected void onComponentTag(ComponentTag tag) {
         super.onComponentTag(tag);
     }
 
-    @Override
-    public void renderHead(IHeaderResponse response) {
-        super.renderHead(response);
-
-        response.render(OnDomReadyHeaderItem.forScript(createIncrementScript(ID_INCREMENT, 5)));
-        response.render(OnDomReadyHeaderItem.forScript(createIncrementScript(ID_DECREMENT, -5)));
-    }
-
-    private String createIncrementScript(String buttonId, int increment) {
-        return "$(function() { $('#" + get(buttonId).getMarkupId() + "').click( "
-                + "function() { "
-                + "MidPointTheme.increment('" + get(ID_INPUT).getMarkupId() + "', '"
-                + get(ID_INCREMENT).getMarkupId() + "','"
-                + get(ID_DECREMENT).getMarkupId() + "', " +
-                increment + "); "
-                + "}); });";
-    }
-
     private void initLayout() {
-        add(AttributeAppender.append("class", "paging-size"));
-        add(AttributeAppender.prepend("class",
-                () -> StringUtils.joinWith(" ", "input-group", small ? "input-group-sm" : "", "flex-nowrap w-auto")));
-
-        AjaxSubmitLink submit = new AjaxSubmitLink(ID_SUBMIT) {
+        setRenderBodyOnly(false);
+        add(AttributeAppender.append("class", "d-flex flex-nowrap align-items-center paging-size"));
 
-            @Override
-            protected void onError(AjaxRequestTarget target) {
-                target.add(getPageBase().getFeedbackPanel());
-            }
+        DropDownChoice size = new DropDownChoice(ID_SIZE, createModel(), Model.ofList(Arrays.asList(10, 25, 50, 100)));
+        size.add(new AjaxFormComponentUpdatingBehavior("change") {
 
             @Override
-            protected void onSubmit(AjaxRequestTarget target) {
+            protected void onUpdate(AjaxRequestTarget target) {
                 onPageSizeChangePerformed(target);
             }
-        };
-        add(submit);
-
-        TextField input = new TextField(ID_INPUT, getModel());
-        input.add(new RangeValidator<>(5, 100));
-        input.setLabel(createStringResource("PageSizePopover.title"));
-        input.add(new SearchFormEnterBehavior(submit));
-        input.setType(Integer.class);
-        input.setOutputMarkupId(true);
-        add(input);
-
-        WebMarkupContainer increment = new WebMarkupContainer(ID_INCREMENT);
-        increment.add(AttributeAppender.append("class", () -> getModelObject() >= 100 ? "disabled" : null));
-        increment.setOutputMarkupId(true);
-        add(increment);
-
-        WebMarkupContainer decrement = new WebMarkupContainer(ID_DECREMENT);
-        decrement.add(AttributeAppender.append("class", () -> getModelObject() <= 5 ? "disabled" : null));
-        decrement.setOutputMarkupId(true);
-        add(decrement);
+        });
+        size.add(AttributeAppender.append("class", () -> small ? "form-control-sm" : null));
+        add(size);
     }
 
     protected void onPageSizeChangePerformed(AjaxRequestTarget target) {