Galery: Fix pagination (refs #4403) - no data message

4 files changed, 34 insertions, 10 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 3649960c0..9a50a4160 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -75,6 +75,7 @@ var entries_msg = "entries";
 var info_entries_msg = "entrie(s)";
 var table_to_msg = "to";
 var table_of_msg = "of";
+var no_data_gallery_msg = "No data available in the gallery";
 var activate_all_search_msg = "Searches in the shortcut menu deals with all items.";
 var activate_own_search_msg = "Searches in the shortcut menu deals with only your items.";
 var added_message = " items added.";
@@ -1052,11 +1053,17 @@ var render_gallery = function(data_table, table_name, nb_select, gallery_id){
 
     var page_total = data_table['total'];
     var page_current = data_table['page'];
+    var recordsTotal = data_table['recordsTotal'];
     html += "<span class='ishtar-gallery-info'>";
-    html += info_show_msg + " " + ((page_current - 1) * nb_select + 1) + " "
-    html += table_to_msg + " " + page_current * nb_select;
-
-    var recordsTotal = number_with_commas(data_table['recordsTotal']);
+    console.log(data_table);
+    var page_min = ((page_current - 1) * nb_select + 1);
+    if (page_min > recordsTotal) page_min = recordsTotal;
+    html += info_show_msg + " " + page_min + " ";
+    var page_max = page_current * nb_select;
+    if (page_max > recordsTotal) page_max = recordsTotal;
+    html += table_to_msg + " " + page_max;
+
+    var recordsTotal = number_with_commas(recordsTotal);
     html += " " + table_of_msg + " " + recordsTotal + " ";
     html += info_entries_msg + "</span>";
 
@@ -1064,6 +1071,10 @@ var render_gallery = function(data_table, table_name, nb_select, gallery_id){
     var captions = '<div class="lightgallery-captions">';
     var table_cols = data_table["table-cols"];
 
+    if(!data_table["rows"].length){
+        html += "<div class='no-data'>" + no_data_gallery_msg + "</div>";
+    }
+
     $.each(data_table["rows"], function(idx, data){
         var thumb = "";
         if ("main_image__thumbnail" in data){
@@ -1120,12 +1131,11 @@ var render_gallery = function(data_table, table_name, nb_select, gallery_id){
     var disabled = page_current == 1;
     html += render_paginate_button(page_current - 1, page_current, "Previous",
                                    disabled, " previous");
-    html += render_paginate_button(1, page_current);
 
-    var idx_page = 2;
+    var idx_page = 1;
     if (page_current < 5){
         while (idx_page <= 5){
-            if (idx_page <= page_total){
+            if (idx_page < page_total){
                 html += render_paginate_button(idx_page, page_current);
             }
             idx_page += 1;
@@ -1190,8 +1200,7 @@ var current_image_page = 1;
 
 var register_image_gallery = function(gallery_id){
     $(".image-pagination .paginate_button a").click(function(){
-        current_image_page = $(this).attr('data-dt-idx');
-        gallery_submit_search();
+        gallery_submit_search($(this).attr('data-dt-idx'));
     });
     lightGallery(document.getElementById(gallery_id),
                  {selector: '.thumb-image'});
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index b3a856cc3..288add529 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -54,6 +54,7 @@
     var info_entries_msg = "{% trans "entrie(s)" %}";
     var table_to_msg = "{% trans "to" %}";
     var table_of_msg = "{% trans "of" %}";
+    var no_data_gallery_msg = "{% trans "No data available in the gallery" %}";
     var autorefresh_message_start = "{% trans 'Autorefresh start. The form is disabled.' %}";
     var autorefresh_message_end =  "{% trans 'Autorefresh end. The form is re-enabled.' %}";
     </script>
diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
index 62c962894..56deff82e 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -68,7 +68,12 @@ var query_vars = new Array({{col_idx|safe}});
 var selItems_{{sname}} = new Array();
 
 {% if gallery %}
-gallery_submit_search = function(){
+gallery_submit_search = function(image_page){
+    if (image_page) {
+        current_image_page = image_page;
+    } else {
+        current_image_page = 1;
+    }
     var data = search_get_query_data(query_vars, "{{name}}");
     var nb_select = jQuery("#id_{{name}}-length_image").val();
     if (!nb_select) nb_select = 10;
diff --git a/scss/custom.scss b/scss/custom.scss
index 7f9aa2290..4798291ea 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -187,6 +187,15 @@ table.dataTable {
     font-size: 0.8em;
 }
 
+.ishtar-gallery .no-data{
+    width: 100%;
+    font-size: 0.85em;
+    text-align: center;
+    background-color: $gray-300;
+    padding: 0.2em;
+    margin: 0.6em 0;
+}
+
 .table-modal-lg table.dataTable{
     font-size: 1em;
 }