From 67ee211d9ec5eb81ea2e19b61772e396fe631820 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Mon, 24 Dec 2018 18:53:44 +0100
Subject: Image gallery on tables first version

---
 ishtar_common/templates/blocks/DataTables.html | 158 ++++++++++++++++---------
 1 file changed, 99 insertions(+), 59 deletions(-)

(limited to 'ishtar_common/templates/blocks/DataTables.html')

diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
index 096650115..07725353c 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -27,50 +27,79 @@
   </div>
 </div>
 
-<div id="grid_{{name}}_meta_wrapper">
-    <table id='grid_{{name}}' class="display" width="100%">
-        <thead>
-        <tr>
-            <th></th>
-            <th></th>{% for col in col_names %}
-            <th>{{col}}</th>
-        {% endfor %}</tr>
-        </thead>
-    </table>
-</div>
+<ul class="nav nav-tabs m-3">
+  <li class="nav-item">
+    <a class="nav-link active" id="tab-grid-{{name}}" data-toggle="tab"
+       href="#tab-content-grid-{{name}}" role="tab"
+       aria-controls="tab-content-grid-{{name}}" aria-selected="true">
+        {% trans "Table" %}
+    </a>
+  </li>
+  <li class="nav-item">
+      <a class="nav-link" id="tab-gallery-{{name}}" data-toggle="tab"
+         href="#tab-content-gallery-{{name}}" role="tab"
+         aria-controls="tab-content-gallery-{{name}}" aria-selected="true">
+          {% trans "Gallery" %}
+      </a>
+  </li>
+</ul>
 
-<div id='foot_{{name}}' class="gridfooter row toolbar">
-    <div class='col-md-2'>
-        <div class="btn-group btn-group-sm" role="group">
-            <button type='button' class="btn btn-secondary" data-toggle="modal"
-                    data-target="#modal_grid_{{name}}">
-                {% trans "Expand table" %} <i class="fa fa-expand" aria-hidden="true"></i>
-            </button>
-        </div>
+
+<div class="tab-content">
+  <div class="tab-pane active"
+       id="tab-content-grid-{{name}}" role="tabpanel"
+       aria-labelledby="tab-grid-{{name}}">
+
+    <div id="grid_{{name}}_meta_wrapper">
+        <table id='grid_{{name}}' class="display" width="100%">
+            <thead>
+            <tr>
+                <th></th>
+                <th></th>{% for col in col_names %}
+                <th>{{col}}</th>
+            {% endfor %}</tr>
+            </thead>
+        </table>
     </div>
-    <div class='col-md-2'>
-        <div class="btn-group btn-group-sm" role="group"
-             aria-label="{% trans 'Export'%}">
-            {% if source_full or extra_sources %}
-            <a class="btn btn-secondary" href='{{source}}csv' target='_blank'
-               title="{% trans 'Export as CSV - ' %}{% trans 'simple'%}">{% trans "Simple CSV" %}</a>
-            {% if source_full %}<a class='btn btn-secondary' href='{{source_full}}csv' target='_blank' title="{% trans 'Export as CSV - full' %}">{% trans "CSV full" %}</a>{% endif %}
-            {% for slug, name, extra_source in extra_sources %}
-            <a class="btn btn-secondary" href='{{extra_source}}csv' target='_blank' title="{% trans 'Export as CSV - ' %}{{name}}">{{name}}</a>
-            {% endfor %}
-            {% else %}
-            <a class="btn btn-secondary" href="{{source}}csv" target="_blank" title="{% trans 'Export as CSV' %}">{% trans "CSV" %}</a>
-            {% endif %}
+
+    <div id='foot_{{name}}' class="gridfooter row toolbar">
+        <div class='col-md-2'>
+            <div class="btn-group btn-group-sm" role="group">
+                <button type='button' class="btn btn-secondary" data-toggle="modal"
+                        data-target="#modal_grid_{{name}}">
+                    {% trans "Expand table" %} <i class="fa fa-expand" aria-hidden="true"></i>
+                </button>
+            </div>
+        </div>
+        <div class='col-md-2'>
+            <div class="btn-group btn-group-sm" role="group"
+                 aria-label="{% trans 'Export'%}">
+                {% if source_full or extra_sources %}
+                <a class="btn btn-secondary" href='{{source}}csv' target='_blank'
+                   title="{% trans 'Export as CSV - ' %}{% trans 'simple'%}">{% trans "Simple CSV" %}</a>
+                {% if source_full %}<a class='btn btn-secondary' href='{{source_full}}csv' target='_blank' title="{% trans 'Export as CSV - full' %}">{% trans "CSV full" %}</a>{% endif %}
+                {% for slug, name, extra_source in extra_sources %}
+                <a class="btn btn-secondary" href='{{extra_source}}csv' target='_blank' title="{% trans 'Export as CSV - ' %}{{name}}">{{name}}</a>
+                {% endfor %}
+                {% else %}
+                <a class="btn btn-secondary" href="{{source}}csv" target="_blank" title="{% trans 'Export as CSV' %}">{% trans "CSV" %}</a>
+                {% endif %}
+            </div>
         </div>
     </div>
-</div>
 
-{% if multiple %}
-<input type="button" id="add_button_{{name}}" value="{% trans 'Add' %}"/>
-<ul id="selectmulti_{{name}}" class="selectmulti"></ul>
-{% endif %}
+    {% if multiple %}
+    <input type="button" id="add_button_{{name}}" value="{% trans 'Add' %}"/>
+    <ul id="selectmulti_{{name}}" class="selectmulti"></ul>
+    {% endif %}
 
-<input type="hidden" id="hidden_{{name}}" name="{{name}}"/>
+    <input type="hidden" id="hidden_{{name}}" name="{{name}}"/>
+  </div>
+  <div class="tab-pane active"
+       id="tab-content-gallery-{{name}}" role="tabpanel"
+       aria-labelledby="tab-gallery-{{name}}">
+  </div>
+</div>
 
 <script type="text/javascript" language='javascript'>
 $('#modal_grid_{{name}}').on('show.bs.modal', function (e) {
@@ -90,33 +119,41 @@ $('#modal_grid_{{name}}').on('hide.bs.modal', function (e) {
     current_modal = null;
 });
 
+$("#tab-gallery-{{name}}").click(function(){
+    current_tab = "gallery";
+    gallery_submit_search();
+});
+
+$("#tab-grid-{{name}}").click(function(){
+    current_tab = "table";
+    datatable_submit_search();
+});
+
 
 var query_vars = new Array({{col_idx|safe}});
 var selItems_{{sname}} = new Array();
 
+gallery_submit_search = function(){
+    var data = search_get_query_data(query_vars, "{{name}}");
+    var nb_select = jQuery("#id_{{name}}-length_image").val();
+    if (!nb_select) nb_select = 10;
+
+    var url = "{{source}}json-image?length=" + nb_select + "&submited=1&" + data;
+    $.getJSON(url, function(data) {
+        $("#tab-content-gallery-{{name}}").html(
+            render_gallery(data, "{{name}}", nb_select));
+        $("#id_{{name}}-length_image").change(gallery_submit_search);
+        register_image_paginate();
+    });
 
-datatable_submit_search = function(){
-    $("#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);
-        }
+        $('.modal-progress').modal('hide');
     }
+    return false;
+};
+
+datatable_submit_search = function(){
+    var data = search_get_query_data(query_vars, "{{name}}");
     var mygrid = jQuery("#grid_{{name}}");
     var url = "{{source}}?submited=1&" + data;
     datatable_{{sname}}.ajax.url(url).load();
@@ -134,8 +171,11 @@ datatable_submit_search = function(){
     return false;
 };
 
+
 jQuery(document).ready(function(){
-  jQuery("#search_{{name}}").click(datatable_submit_search);
+  jQuery("#search_{{name}}").click(
+    main_submit_search
+  );
 
   var base_source = "{{source}}";
 
-- 
cgit v1.2.3