UI: improve table in sheet

3 files changed, 94 insertions, 32 deletions

diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
index 711f0b7c3..42b6eb8ad 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -17,17 +17,6 @@
     <em><span id="pinned_search_content_{{name}}"></span></em>
 </div>
 
-<div class="row toolbar justify-content-center">
-    <div class='col-2'>
-        <div class="btn-group btn-group-sm" role="group">
-            <button class="btn btn-secondary" data-toggle="modal"
-                    data-target=".table-modal-lg">
-                {% trans "Expand table" %} <i class="fa fa-expand" aria-hidden="true"></i>
-            </button>
-        </div>
-    </div>
-</div>
-
 <div class="modal fade table-modal-lg" tabindex="-1" role="dialog"
      aria-hidden="true" id="modal_grid_{{name}}">
   <div class="modal-dialog full modal-lg">
@@ -59,11 +48,19 @@
 
 <div id='foot_{{name}}' class="gridfooter row toolbar">
     <div class='col-md-2'>
+        <div class="btn-group btn-group-sm" role="group">
+            <button class="btn btn-secondary" data-toggle="modal"
+                    data-target=".table-modal-lg">
+                {% 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 "CSV" %}</a>
+               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>
@@ -143,26 +140,21 @@ jQuery(document).ready(function(){
     }
     return false;
   });
+
   datatable_options = {
     "ajax": {
         "url": "{{source}}",
         "dataSrc": "rows"
     },
-    "processing": true,
-    "serverSide": true,
-    "scrollX": true,
-    "scrollY": true,
-    "searching": false,
-    "info": false,
-    "scrollCollapse": true,
     "columns": [
         { "data": "id", "visible": false },
         { "data": "link", "orderable": false },{% for col in extra_cols %}
         { "data": "{{col}}", "defaultContent": "-"}{% if not forloop.last %},{% endif %}{% endfor %}
     ]
   };
-  if (datatables_i18n) datatable_options['language'] = datatables_i18n;
 
+  $.extend(datatable_options, datatables_default);
+  if (datatables_i18n) datatable_options['language'] = datatables_i18n;
   datatable_{{sname}} = jQuery("#grid_{{name}}").DataTable(datatable_options);
 
 {% comment %}
diff --git a/ishtar_common/templates/ishtar/blocks/window_field_flex.html b/ishtar_common/templates/ishtar/blocks/window_field_flex.html
index e6bd03a85..add2a5520 100644
--- a/ishtar_common/templates/ishtar/blocks/window_field_flex.html
+++ b/ishtar_common/templates/ishtar/blocks/window_field_flex.html
@@ -1,5 +1,5 @@
 {% load i18n %}{% if data %}
-    <dl class="col-12 col-md-6 col-lg-4 d-flex flex-wrap row">
+    <dl class="col-12 {% if size == 2 %}col-lg-6{% else %}col-md-6 col-lg-4{% endif %} d-flex flex-wrap row">
         <dt class="col-5">{% trans caption %}</dt>
         <dd class="col-7">{{pre_data|safe}}{{data|linebreaksbr}}{{post_data|safe }}</dd>
     </dl>
diff --git a/ishtar_common/templates/ishtar/blocks/window_tables/dynamic_documents.html b/ishtar_common/templates/ishtar/blocks/window_tables/dynamic_documents.html
index 4846d6e4f..e10390915 100644
--- a/ishtar_common/templates/ishtar/blocks/window_tables/dynamic_documents.html
+++ b/ishtar_common/templates/ishtar/blocks/window_tables/dynamic_documents.html
@@ -1,23 +1,93 @@
 {% load i18n %}
 
 <h4>{{caption}}</h4>
-<table id='grid_{{name}}' class='jqgrid'></table>
-<div id='pager_{{name}}'></div>
-
-<div id='foot_{{name}}' class='gridfooter'>
-{% if source_full %}
-<a class="badge" href='{{simple_source}}csv{{ source_attrs|safe }}' target='_blank' title="{% trans 'Export as CSV' %}">{% trans "CSV" %}</a>
-<a class="badge" href='{{source_full}}csv{{ source_attrs|safe }}' target='_blank' title="{% trans 'Export as CSV - full' %}">{% trans "CSV full" %}</a>
-{% else %}
-<a class="badge" href="{{simple_source}}csv{{ source_attrs|safe }}" target="_blank" title="{% trans 'Export as CSV' %}">CSV</a>
-{% endif %} {{encoding}}
+
+<div class="modal fade table-modal-lg" tabindex="-1" role="dialog"
+     aria-hidden="true" id="modal_grid_{{name}}">
+    <div class="modal-dialog full modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="current-sheets"></div>
+                <div class="current-grid"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="grid_{{name}}_meta_wrapper">
+    <table id='grid_{{name}}' class="display">
+        <thead>
+        <tr>
+            <th></th>
+            <th></th>{% for col in col_names %}
+            <th>{{col}}</th>
+            {% endfor %}</tr>
+        </thead>
+    </table>
+</div>
+
+<div id='foot_{{name}}' class="gridfooter row toolbar">
+    <div class='col-md-2'>
+        <div class="btn-group btn-group-sm" role="group">
+            <button class="btn btn-secondary" data-toggle="modal"
+                    data-target=".table-modal-lg">
+                {% 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 %}
+            <a class="btn btn-secondary" href='{{simple_source}}csv{{ source_attrs|safe }}' target='_blank' title="{% trans 'Export as CSV' %}">{% trans "CSV" %}</a>
+            <a class="btn btn-secondary" href='{{source_full}}csv{{ source_attrs|safe }}' target='_blank' title="{% trans 'Export as CSV - full' %}">{% trans "CSV full" %}</a>
+            {% else %}
+            <a class="btn btn-secondary" href="{{simple_source}}csv{{ source_attrs|safe }}" target="_blank" title="{% trans 'Export as CSV' %}">CSV</a>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<div class="row toolbar justify-content-center">
 </div>
 
 <script type="text/javascript" language='javascript'>
 
 setTimeout(
     function(){
-      $("#grid_{{name}}").DataTable();
+      datatable_options = {
+        "ajax": {
+            "url": "{{source}}",
+            "dataSrc": "rows"
+        },
+        "columns": [
+            { "data": "id", "visible": false },
+            { "data": "link", "orderable": false },{% for col in extra_cols %}
+            { "data": "{{col}}", "defaultContent": "-"}{% if not forloop.last %},{% endif %}{% endfor %}
+        ]
+      };
+      $.extend(datatable_options, datatables_default);
+      if (datatables_i18n) datatable_options['language'] = datatables_i18n;
+
+      datatable_{{sname}} = jQuery("#grid_{{name}}").DataTable(datatable_options);
+
+        $('#modal_grid_{{name}}').on('show.bs.modal', function (e) {
+            $('#grid_{{name}}_wrapper').appendTo(
+                '#modal_grid_{{name}} .modal-body .current-grid');
+            $('#grid_{{name}}').DataTable().clear().draw()
+        });
+
+        $('#modal_grid_{{name}}').on('hide.bs.modal', function (e) {
+            $('#grid_{{name}}_wrapper').appendTo(
+                '#grid_{{name}}_meta_wrapper');
+            $('#grid_{{name}}').DataTable().clear().draw()
+        });
+
       {% comment %}
       {
         url:'{{source|safe}}',