Add page select feature to dataset pagination

app/javascript/packs/controllers/dataset_controller.js

@@ -3,7 +3,7 @@ import {DatasetAPI} from "../utils/dataset_api"
 import {SearchAPI} from "../utils/search_api";
 
 export default class extends Controller {
-    static targets = [ ]
+    static targets = [ "inputPage" ]
     static values = { id: Number, currentPage: Number, nbPages: Number, perPage: Number, sort: String, sortOrder: String, selectedDocuments: Array }
 
     connect() {
@@ -99,4 +99,12 @@ export default class extends Controller {
         this.loadDocuments(this.idValue, this.currentPageValue, this.perPageValue, this.sortValue, this.sortOrderValue, $("#doctype_selection input:checked").data("doctype"))
     }
 
+    page_select(event) {
+        event.preventDefault()
+        const input_page = this.inputPageTarget.value
+        if (!Number.isNaN(input_page) && 1 <= input_page && input_page <= this.nbPagesValue && !(this.currentPageValue == input_page)) {
+            this.currentPageValue = input_page
+            this.loadDocuments(this.idValue, this.currentPageValue, this.perPageValue, this.sortValue, this.sortOrderValue, $("#doctype_selection input:checked").data("doctype"))
+        }
+    }
 }
\ No newline at end of file

app/views/dataset/_pagination.html.erb

@@ -7,9 +7,18 @@
             <% if (nb_pages > 10) %>
                 <% (1..nb_pages).each do |i| %>
                     <% if (i >= current_page-2 and i <= current_page+2) or (i <= 1) or (i>= nb_pages) %>
-                        <li class="page-item<%= " active" if current_page == i %>" data-action="click->dataset#page_button">
+                        <% if i == current_page %>
+                            <li class="page-item active">
+                                <form class="page-link" data-action="dataset#page_select">
+                                    <input type="text" data-dataset-target="inputPage" value="<%= i %>" style="width:25px; height:20px">
+                                    <input type="submit" class="sr-only" tabindex="-1">
+                                </form>
+                            </li>
+                        <% else %>
+                            <li class="page-item" data-action="click->dataset#page_button">
                                 <a class="page-link" href="#"><%= i %></a>
                             </li>
+                        <% end %>
                     <% elsif (i == 2 and current_page >= 5) or (i == nb_pages-1 and current_page <= nb_pages-4) %>
                         <li class="page-item disabled">
                             <a class="page-link" href="#">...</a>
@@ -18,11 +27,20 @@
                 <% end %>
             <% else %>
                 <% (1..nb_pages).each do |i| %>
-                    <li class="page-item<%= " active" if current_page == i %>" data-action="click->dataset#page_button">
+                    <% if i == current_page %>
+                        <li class="page-item active">
+                            <form class="page-link" data-action="dataset#page_select">
+                                <input type="text" data-dataset-target="inputPage" value="<%= i %>" style="width:30px; height:25px">
+                                <input type="submit" class="sr-only" tabindex="-1">
+                            </form>
+                        </li>
+                    <% else %>
+                        <li class="page-item" data-action="click->dataset#page_button">
                             <a class="page-link" href="#"><%= i %></a>
                         </li>
                     <% end %>
                 <% end %>
+            <% end %>
             <li class="page-item<%= " disabled" if current_page == nb_pages %>" data-action="click->dataset#next_page">
                 <a class="page-link" href="#">»</a>
             </li>