pagination

add entities count number to the pagination disables controls while querying the API
ForaDoEixo · Jun 20, 2018 · 08374db · 08374db
1 parent aa81498
commit 08374db
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/css/mcwp-list-entities.css b/css/mcwp-list-entities.css
@@ -11,6 +11,12 @@
   font-weight: bolder;
 }
 
+.list_entities_wrapper .hidden
+{
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 /* Loading animation */
 .spinner {
   margin: 100px auto 0;

diff --git a/js/app.js b/js/app.js
@@ -53,6 +53,8 @@
 function getEvents(){
     jQuery('.list_entities').html('');
     jQuery('#loading').show('fast');
+    jQuery('.pagination').addClass('hidden');
+    jQuery('#filters_input').addClass('hidden');
 
     var page = jQuery('#list_entities').data('page');
     if (typeof page !== 'undefined')
@@ -95,7 +97,16 @@ function getEvents(){
         data: {},
         success: function(response, status, xhr) {
             var meta = JSON.parse(xhr.getResponseHeader("api-metadata"));
-            console.log(meta.numPages);
+            jQuery('.pagination .numEntities .outOf').text(meta.count);
+            jQuery('.pagination .numEntities .from').text(Math.min((((meta.page-1)*meta.limit)+1),meta.count));
+            if (meta.page == meta.numPages)
+            {
+                jQuery('.pagination .numEntities .to').text(((meta.page-1)*meta.limit)+(meta.count%meta.limit));
+            }
+            else
+            {
+                jQuery('.pagination .numEntities .to').text(meta.page*meta.limit);
+            }
             jQuery('#list_entities').data('numPages',meta.numPages);
             showEvents(response);
         },
@@ -142,6 +153,8 @@ function loadTemplate()
 
 function showEvents(entities){
     jQuery('#loading').hide('fast');
+    jQuery('#filters_input').removeClass('hidden');
+    jQuery('.pagination').removeClass('hidden');
     baseurl = jQuery('#list_entities').data('baseurl');
     entity  = jQuery('#list_entities').data('entity');
     if (jQuery("#mustache-template").length > 0)

diff --git a/template.php b/template.php
@@ -1,3 +1,4 @@
+<div class="list_entities_wrapper">
 <?php if (!empty($mtemplate)) { ?>
 <script id="mustache-template" type="x-tmpl-mustache"><?= $mtemplate; ?></script>
 <?php } ?>
@@ -35,13 +36,13 @@
 		<?php } ?>
 	</div>
 	<?php if (!is_null($pagination)) { ?>
-	<div class="pagination top"><button id="page-before"><</button><button id="page-after">></button></div>
+	<div class="pagination top"><button type="button" id="page-before"><</button><span class="numEntities"><span class="from"></span><span class="to"></span><span class="outOf"></span></span><button type="button" id="page-after">></button></div>
 	<?php } ?>
 	<div id="loading" class="spinner" style="display:none;"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
 
 	<div class="list_entities"></div>
 
 	<?php if (!is_null($pagination)) { ?>
-	<div class="pagination bottom"><button id="page-before"><</button><button id="page-after">></button></div>
+	<div class="pagination bottom"><button type="button" id="page-before"><</button><span class="numEntities"><span class="from"></span><span class="to"></span><span class="outOf"></span></span><button type="button" id="page-after">></button></div>
 	<?php } ?>
 </div>