wcs: add pagination for current forms/drafts cells (#10179)

combo/apps/wcs/templates/combo/wcs/current_drafts.html

@@ -17,4 +17,5 @@
   {% endif %}
 </div>
 {% endfor %}
+{% include "combo/pagination.html" %}
 {% endblock %}

combo/apps/wcs/templates/combo/wcs/current_forms.html

@@ -6,4 +6,5 @@
   {% include "combo/wcs/list_of_forms.html" with forms=forms %}
   </div>
 {% endfor %}
+{% include "combo/pagination.html" %}
 {% endblock %}

combo/apps/wcs/templates/combo/wcs/user_all_forms.html

@@ -6,4 +6,5 @@
   {% include "combo/wcs/list_of_forms.html" with forms=forms %}
   </div>
 {% endfor %}
+{% include "combo/pagination.html" %}
 {% endblock %}

combo/apps/wcs/templates/combo/wcs/user_done_forms.html

@@ -6,4 +6,5 @@
   {% include "combo/wcs/list_of_forms.html" with forms=forms %}
   </div>
 {% endfor %}
+{% include "combo/pagination.html" %}
 {% endblock %}

combo/public/static/js/combo.public.js

@@ -279,4 +279,43 @@ $(function() {
     return false;
   });
 
+  // pagination in cells with list of items
+  $(document).on('combo:cell-loaded', function(ev, cell) {
+    var $pagination = $(cell).find('.cell-items-pagination');
+    if ($pagination.length == 0) return;
+    var page_index = 0;
+    var paginate_by = parseInt($pagination.data('paginate-by'));
+    // Get all <li> inside the same div as us, ignoring whether they are part of
+    // different <ul>
+    var items = $pagination.parent().find('li');
+    var max_page_index = Math.ceil(items.length / paginate_by);
+    if (items.length <= paginate_by) {
+      return;
+    }
+
+    function update_page(step) {
+      page_index = page_index + step;
+      if (page_index == 0) {
+        $pagination.find('.cell-items-pagination-prev').prop('disabled', true);
+      } else {
+        $pagination.find('.cell-items-pagination-prev').prop('disabled', null);
+      }
+      if (page_index == max_page_index - 1) {
+        $pagination.find('.cell-items-pagination-next').prop('disabled', true);
+      } else {
+        $pagination.find('.cell-items-pagination-next').prop('disabled', null);
+      }
+      start_item = paginate_by * page_index;
+      items.hide();
+      items.slice(start_item, start_item + paginate_by).show();
+    };
+
+    $pagination.find('.cell-items-pagination-prev').click(function() { update_page(-1); });
+    $pagination.find('.cell-items-pagination-next').click(function() { update_page(1); });
+    update_page(0);
+    $pagination.show();
+  });
+  $('.cell-items-pagination').each(function(idx, elem) {
+    $(document).trigger('combo:cell-loaded', $(elem).parents('.cell').first());
+  });
 });

combo/public/templates/combo/pagination.html

@@ -0,0 +1,5 @@
+{% load static %}
+<div class="cell-items-pagination" data-paginate-by="10" hidden>
+  <button class="cell-items-pagination-prev" disabled>←</a>
+  <button class="cell-items-pagination-next" disabled>→</a>
+</div>