[EQK-30] Added select list of pages in pagination for current page

core/src/main/java/com/exadel/etoolbox/querykit/core/models/query/PaginationInfo.java

@@ -18,6 +18,8 @@
 import lombok.Setter;
 
 import java.util.LinkedList;
+import java.util.List;
+import java.util.Map;
 import java.util.stream.Collectors;
 import java.util.stream.IntStream;
 
@@ -36,6 +38,12 @@ public class PaginationInfo {
 
     private final int currentPage;
 
+    /**
+     * Retrieves the pages numbers
+     */
+    @Getter
+    private final Map<Integer, Integer> pageNumberToOffset;
+
     /**
      * Creates a new {@link PaginationInfo} instance
      * @param total    Total number of results used for the computation
@@ -44,6 +52,9 @@ public class PaginationInfo {
      */
     PaginationInfo(long total, long offset, int pageSize) {
         int pageCount = total % pageSize > 0 ? (int) total / pageSize + 1 : (int) total / pageSize;
+        pageNumberToOffset = IntStream.rangeClosed(1, pageCount)
+                .boxed()
+                .collect(Collectors.toMap(page -> page, page -> (page - 1) * pageSize));
         currentPage = (int) offset / pageSize + 1;
 
         if (pageCount <= BUTTON_BLOCK_SIZE) {

core/src/main/java/com/exadel/etoolbox/querykit/core/models/query/QueryExecutionInfo.java

@@ -23,6 +23,9 @@
 import org.apache.sling.models.annotations.injectorspecific.SlingObject;
 
 import javax.annotation.PostConstruct;
+import java.util.List;
+import java.util.stream.Collectors;
+import java.util.stream.IntStream;
 
 /**
  * Contains the metadata characterizing the retrieved query result
@@ -81,4 +84,4 @@ private void init() {
 
         pagination = new PaginationInfo(total, offset, pageSize);
     }
-}
+}

ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/components/console/executionInfo/executionInfo.html

@@ -24,12 +24,20 @@
                   class="ellipsis">
                 ...
             </span>
-            <button data-sly-test="${page.type == 'button'}"
+            <button data-sly-test="${page.type == 'button' && !page.current}"
                     class="nav-button coral3-Button coral3-Button--${page.current ? 'primary' : 'secondary'} ${page.current ? 'current' : ''}"
                     data-query-offset="${page.offset}"
                     data-query-size="${page.size}">
                 ${page.number}
             </button>
+            <coral-select class="select-current-page-pagination"
+                          data-sly-test="${page.type == 'button' && page.current}"
+                          data-query-size="${page.size}"
+                          data-sly-list.number="${info.pagination.pageNumberToOffset}">
+                <coral-select-item data-sly-attribute.selected="${page.number == number}">
+                    ${number}
+                </coral-select-item>
+            </coral-select>
         </sly>
     </div>
     <div>

ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/main-layout.css

@@ -46,7 +46,7 @@
 
 .CodeMirror, .results-table {
     width: auto;
-    height: 82vh;
+    height: 80vh;
     background-color: #fff;
     border: 1px solid #e9e9e9;
     border-radius: 0.25rem;

ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/css/results.css

@@ -83,4 +83,8 @@
 
 #resultsTable table thead tr th:first-child {
     text-align: center;
+}
+
+.select-current-page-pagination {
+    width: 4.5rem;
 }

ui.apps/src/main/content/jcr_root/apps/etoolbox-query-kit/console/query/clientlibs/js/actions/execute.js

@@ -66,6 +66,17 @@
         executeAndUpdateUi(getQueryArgs($button));
     });
 
+    $(document).on('change', '.select-current-page-pagination', function (e) {
+        let $selectedPage = $(e.target);
+        if ($selectedPage.is('.is-selected')) {
+            return;
+        }
+        let limit = $selectedPage.closest('coral-select').data('query-size')
+        $selectedPage.data('query-size', limit);
+        $selectedPage.data('query-offset', ($selectedPage[0].value - 1) * limit);
+        executeAndUpdateUi(getQueryArgs($selectedPage));
+    });
+
     function getQueryArgs($navButton) {
         if (!$navButton.length) {
             return {};