Image gallery on tables first version

1 files changed, 160 insertions, 0 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index ea0ccc516..a41b718a7 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -40,6 +40,7 @@ function get_previous_table_id(){}
 
 var datatable_submit_search = function() {};
 
+var current_tab = "table";
 var shortcut_url = '';
 var show_shortcut_menu = false;
 var alert_url = '';
@@ -48,6 +49,7 @@ var datatables_i18n;
 var current_modal;
 var default_search_vector;
 var pin_search_url;
+var static_path = '/static/';
 
 var datatables_default = {
     "processing": true,
@@ -67,6 +69,8 @@ var datatables_static_default = {
     "lengthMenu": [ 5, 10, 25, 50, 100 ]
 };
 
+var show_msg = "Show";
+var entries_msg = "entries";
 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.";
@@ -979,3 +983,159 @@ var dt_multi_enable_disable_submit_button = function(e, dt, type, indexes){
         $("#validation-bar #submit_form").prop('disabled', true);
     }
 };
+
+var render_gallery = function(data_table, table_name, nb_select){
+    var html = '<label>' + show_msg;
+    var id_select = table_name + '-length_image';
+    html += ' <select 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];
+        html += '<option value="' + nb + '"';
+        if (nb == nb_select) html += " selected='selected'";
+        html += '>' + nb + '</option>';
+    }
+    html += '</select> ' + entries_msg + '</label>';
+    html += "<div class='ishtar-gallery d-flex flex-wrap'>";
+
+    $.each(data_table["rows"], function(idx, data){
+        var image = "";
+        if ("main_image__image" in data){
+            image = data["main_image__image"];
+        } else {
+            image = static_path + "media/images/empty-image.png";
+        }
+        var link = data["link"];
+        var name = '';
+        if ("cached_label" in data){
+            name = data["cached_label"];
+        }
+        if ("name" in data){
+            name = data["name"];
+        }
+        html += '<div class="card m-2">';
+        html += '<a class="thumb-image" href="#">';
+        html += '<img class="card-img-top" src="' + image + '">';
+        html += '</a>';
+        html += '<div class="card-body">';
+        html += '<h4 class="card-title">' + link + " " + name + '</h4>';
+        html += "</div></div>";
+    });
+    html += "</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">';
+
+    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;
+    if (page_current < 5){
+        while (idx_page <= 5){
+            if (idx_page <= page_total){
+                html += render_paginate_button(idx_page, page_current);
+                idx_page += 1;
+            }
+        }
+        if (page_total > 6){
+            html += render_paginate_button('...');
+        }
+        html += render_paginate_button(page_total, page_current);
+    } else {
+        html += render_paginate_button('...');
+        if (page_total < page_current + 2 &&
+            page_total > (page_current - 2)){
+            html += render_paginate_button(page_current - 3, page_current);
+        }
+        if (page_total < page_current + 3 &&
+            page_total > (page_current - 3)){
+            html += render_paginate_button(page_current - 2, page_current);
+        }
+        html += render_paginate_button(page_current - 1, page_current);
+        html += render_paginate_button(page_current, page_current);
+        if (page_total > page_current)
+            html += render_paginate_button(page_current + 1, page_current);
+        if (page_total < page_current + 3){
+            idx_page = page_current + 2;
+            while (idx_page <= page_total){
+                html += render_paginate_button(idx_page, page_current);
+                idx_page += 1;
+            }
+        } else {
+            html += render_paginate_button('...');
+            html += render_paginate_button(page_total, page_current);
+        }
+    }
+
+    disabled = page_current == page_total;
+    html += render_paginate_button(
+        page_current + 1, page_current, "Next", disabled, " next");
+
+    html += '</ul></div></div>';
+    return html;
+};
+
+var render_paginate_button = function(nb, current, label, disabled, extra_class){
+    if (!extra_class) extra_class = '';
+    if (nb == '...'){
+        disabled = true;
+    } else if (current == nb) {
+        extra_class += ' active';
+    }
+    if (disabled) extra_class += ' disabled';
+    if (!label) label = nb;
+
+    var html = '<li class="paginate_button page-item' + extra_class +'">';
+    html += '<a href="#" data-dt-idx="' + nb + '" tabindex="0" class="page-link">';
+    html += label + '</a></li>';
+    return html;
+};
+
+var current_image_page = 1;
+
+var register_image_paginate = function(){
+    $(".image-pagination .paginate_button a").click(function(){
+        current_image_page = $(this).attr('data-dt-idx');
+        gallery_submit_search();
+    });
+};
+
+var main_submit_search = function(){
+    if (current_tab == "table") datatable_submit_search();
+    if (current_tab == "gallery") gallery_submit_search();
+};
+
+var search_get_query_data = function(query_vars, table_name){
+    $("#id_search_vector").removeClass('input-progress');
+    if ($('.modal-progress').length > 0){
+        $('.modal-progress').modal('show');
+    }
+    var data = "";
+    for (idx in query_vars){
+        var key = query_vars[idx];
+        var item = jQuery("#id_" + key);
+        var val = null;
+        if (item.prop('type') == 'checkbox'){
+            if (item.prop('checked')){
+                var val = item.val();
+            }
+        } else {
+            var val = item.val();
+        }
+        if (val){
+            if (data) data += "&";
+            data += key + "=" + encodeURIComponent(val);
+        }
+    }
+    if (current_image_page && current_tab == "gallery"){
+        var id_select = "#id_" + table_name + '-length_image';
+        if (data) data += "&";
+        data += "start=" + ((current_image_page - 1) * $(id_select).val());
+    }
+    return data;
+};