UI: display total number of items in gallery - put total number on top

4 files changed, 46 insertions, 7 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 6ab1fe732..f12827e84 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -70,7 +70,11 @@ var datatables_static_default = {
 };
 
 var show_msg = "Show";
+var info_show_msg = "Showing"
 var entries_msg = "entries";
+var info_entries_msg = "entries";
+var table_to_msg = "to";
+var table_of_msg = "of";
 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.";
@@ -1028,10 +1032,15 @@ var dt_multi_enable_disable_submit_button = function(e, dt, type, indexes){
     }
 };
 
+var number_with_commas = function(number) {
+    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
 var render_gallery = function(data_table, table_name, nb_select, gallery_id){
-    var html = '<label>' + show_msg;
+    var html = '<div class="ishtar-gallery-wrapper container-fluid">';
+    html += '<label>' + show_msg;
     var id_select = table_name + '-length_image';
-    html += ' <select name="' + id_select + '" id="id_' + id_select + '">';
+    html += ' <select class="form-control form-control-sm" name="' + id_select + '" id="id_' + id_select + '">';
     var nb_rows = [5, 10, 25, 50, 100];
     for (idx in nb_rows){
         var nb = nb_rows[idx];
@@ -1040,6 +1049,17 @@ var render_gallery = function(data_table, table_name, nb_select, gallery_id){
         html += '>' + nb + '</option>';
     }
     html += '</select> ' + entries_msg + '</label>';
+
+    var page_total = data_table['total'];
+    var page_current = data_table['page'];
+    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']);
+    html += " " + table_of_msg + " " + recordsTotal + " ";
+    html += info_entries_msg + "</span>";
+
     html += "<div class='ishtar-gallery d-flex flex-wrap' id='" + gallery_id + "'>";
     var captions = '<div class="lightgallery-captions">';
     var table_cols = data_table["table-cols"];
@@ -1094,8 +1114,6 @@ var render_gallery = function(data_table, table_name, nb_select, gallery_id){
     captions += '</div >';
 
     /* pagination */
-    var page_total = data_table['total'];
-    var page_current = data_table['page'];
     html += "<div class='dataTables_wrapper'><div class='dataTables_paginate'>";
     html += '<ul class="image-pagination">';
 
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index f35b17983..71d4dd498 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -50,6 +50,10 @@
     var NO = "{% trans 'no' %}";
     var show_msg = "{% trans "Show" %}";
     var entries_msg = "{% trans "entries" %}";
+    var info_show_msg = "{% trans "Showing" %}";
+    var info_entries_msg = "{% trans "entries" %}";
+    var table_to_msg = "{% trans "to" %}";
+    var table_of_msg = "{% trans "of" %}";
     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 102eb792b..62c962894 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -161,9 +161,9 @@ jQuery(document).ready(function(){
             titleAttr: "{% trans 'Deselect' %}"
         }
     ],
-    "dom": 'lBtip',
+    "dom": 'liBtp',
     {% else %}
-    "dom": 'ltip',
+    "dom": 'litp',
     {% endif %}
     "columns": [
         { "data": "id", "visible": false },
diff --git a/scss/custom.scss b/scss/custom.scss
index 3f7763852..7f9aa2290 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -170,7 +170,24 @@ table.dataTable {
     font-size: 0.8em;
 }
 
-.table-modal-lg table.dataTable {
+.ishtar-gallery-wrapper .ishtar-gallery-info,
+.container .dataTables_wrapper .dataTables_info {
+    clear: none;
+    font-size: 0.8em;
+    padding: 0.5em 2em;
+}
+
+.ishtar-gallery-wrapper label select{
+    width: 75px;
+    display: inline-block;
+    font-size: 1em;
+}
+
+.ishtar-gallery-wrapper label{
+    font-size: 0.8em;
+}
+
+.table-modal-lg table.dataTable{
     font-size: 1em;
 }