Revize 31a2bb94

Feature #8509 Ovládání pro stránkování výsledků

application/view/searchContent.php

@@ -1 +1 @@
 <script>
+    let pageIndex = 0;
+    let itemPerPage = 50;
+    let itemCount = 0;
+    let pageCount = 0;
+
+
+    //what to do when page renders
     window.onload = function() {
         let sourceSelect = new vanillaSelectBox("#source");
         filtersChange();
         fetchData(false);
+
+        //page-label listener
+        document.getElementById('page-label').addEventListener('keyup',function(e){
+            if (e.key === 'Enter' || e.keyCode === 13) {
+                this.blur();
+            }
+        });
     };
 </script>
 
@@ -393 +407 @@
         </div>
 
         <!-- send button-->
-        <button class="ml-auto btn" onclick="fetchData(true)">
+        <button class="ml-auto btn" onclick="callFilter()">
             Filtrovat
         </button>
     </div>
@@ -413 +427 @@
         <tbody id="search-table">
             <script>
                 let data;
+                function callFilter() {
+                    pageIndex = 0;
+                    fetchData(true)
+                }
+
                 function filterData (formData) {
                     //regular
                     formData.append("lemma", document.getElementById("lemma").value);
@@ -454 +473 @@
                 function fetchData (filter = true) {
                     // (A1) GET SEARCH TERM
                     const formData = new FormData();
-                    formData.append("page", "0");//TODO PAGING
-                    formData.append("items_per_page", "50");//TODO PAGING
+                    formData.append("page", ""+pageIndex);
+                    formData.append("items_per_page", ""+itemPerPage);
                     formData.append("finished", "true");//TODO ADMIN
 
                     if(filter){
@@ -470 +489 @@
                         let parsedJSON = JSON.parse(search);
                         if(parsedJSON.count === 0){
                             document.getElementById("no-data-label").style.display = "";
+                            document.getElementById("paging-control").style.display = "none";
                         } else {
                             document.getElementById("no-data-label").style.display = "none";
+                            document.getElementById("paging-control").style.display = "";
                         }
+                        itemCount = parsedJSON.count;
+                        pageCount = Math.ceil(itemCount / itemPerPage);
+                        document.getElementById("page-label").value = (pageIndex + 1) + " / " + pageCount;
                         data = parsedJSON.data;
                         renderData(parsedJSON.data);
                     };
@@ -534 +558 @@
     </table>
 
     <h3 id="no-data-label" class="mx-auto text-center font-italic">Žádná data nebyla nalezena</h3>
+
+    <script>
+        function moveToFirst(){
+            pageIndex = 0;
+            fetchData(true);
+        }
+
+        function moveToPrevious(){
+            pageIndex = (pageIndex - 1 > 0) ? (pageIndex - 1) : (0);
+            fetchData(true);
+        }
+
+        function moveToNext(){
+            pageIndex = (pageIndex + 1 < pageCount) ? (pageIndex + 1) : (pageCount - 1);
+            fetchData(true);
+        }
+
+        function moveToLast(){
+            pageIndex = pageCount - 1;
+            fetchData(true);
+        }
+
+        function onManualPageStart(element){
+            element.value = '';
+        }
+
+        function onManualPageEnd(element) {
+            const value = Number(element.value) - 1;
+            if(Number.isInteger(value) && value >= 0 && value < pageCount){
+                pageIndex = value;
+                fetchData(true);
+            } else {
+                element.value = (pageIndex + 1) + " / " + pageCount;
+            }
+
+        }
+    </script>
+    <div id="paging-control" class="mx-auto text-center" style="display: none">
+        <button class="border-0 shadow-none bg-transparent" onclick="moveToFirst()"><b><<</b></button>
+        <button class="border-0 shadow-none bg-transparent"  onclick="moveToPrevious()"><b><</b></button>
+        <input class="border-0 shadow-none bg-transparent text-center font-weight-bold"
+               id="page-label"
+               onfocus="onManualPageStart(this)"
+               onblur="onManualPageEnd(this)"
+        />
+        <button class="border-0 shadow-none bg-transparent"  onclick="moveToNext()"><b>></b></button>
+        <button  class="border-0 shadow-none bg-transparent" onclick="moveToLast()"><b>>></b></button>
+    </div>
 </div>