MID-8101 fixed paging size widget

Evolveum · Sep 13, 2022 · 86fe0a4 · 86fe0a4
1 parent 2821e60
commit 86fe0a4
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 6 deletions.
diff --git a/gui/admin-gui/src/frontend/js/midpoint-theme.js b/gui/admin-gui/src/frontend/js/midpoint-theme.js
@@ -481,14 +481,26 @@ export default class MidPointTheme {
         history.replaceState(null, null, "?" + queryParams.toString());
     }
 
-    increment(inputId, increment) {
+    increment(inputId, incrementId, decrementId, increment) {
         var input = $('#' + inputId);
+        var inc = $('#' + incrementId);
+        var dec = $('#' + decrementId);
 
         var value = parseInt(input.val(), 10) || 0;
 
         value = value + increment;
-        if (value <= 0) {
+        if (value <= 5) {
             value = 5;
+            dec.addClass("disabled");
+        } else {
+            dec.removeClass("disabled")
+        }
+
+        if (value >= 100) {
+            value = 100;
+            inc.addClass("disabled");
+        } else {
+            inc.removeClass("disabled");
         }
 
         input.val(value);

diff --git a/gui/admin-gui/src/frontend/scss/midpoint.scss b/gui/admin-gui/src/frontend/scss/midpoint.scss
@@ -1748,3 +1748,28 @@ th.debug-list-buttons {
 .flex-basis-0 {
   flex-basis: 0px!important;
 }
+
+.paging-size {
+  & > input {
+    max-width: 50px;
+  }
+
+  & .btn-increment {
+    line-height: 1;
+    color: #444;
+
+    display: flex;
+    border: 1px solid #ced4da;
+    flex: 1 1 auto !important;
+    padding: 0 0.25rem !important;
+    align-items: center !important;
+    cursor: pointer;
+
+    &.disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+      opacity: 0.65;
+      background-color: #f8f9fa;
+    }
+  }
+}
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,13 +8,13 @@
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org">
 <wicket:panel>
-    <input wicket:id="input" type="text" class="form-control" style="max-width: 50px;" wicket:message="title:PagingSizePanel.pageSize">
+    <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="border flex-fill px-1 d-flex align-items-center border-bottom-0" style="line-height: 1; border-color: #ced4da !important; color: #444;">
+            <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="border flex-fill px-1 d-flex align-items-center" style="line-height: 1; border-color: #ced4da !important; color: #444;">
+            <a wicket:id="decrement" class="btn-increment">
                 <i class="fa-solid fa-caret-down fa-xs"></i>
             </a>
         </div>

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
@@ -60,11 +60,15 @@ public void renderHead(IHeaderResponse response) {
     private String createIncrementScript(String buttonId, int increment) {
         return "$(function() { $('#" + get(buttonId).getMarkupId() + "').click( "
                 + "function() { "
-                + "MidPointTheme.increment('" + get(ID_INPUT).getMarkupId() + "', " + increment + "); "
+                + "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")));
 
@@ -91,10 +95,12 @@ protected void onSubmit(AjaxRequestTarget target) {
         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);
     }