From 05218a15edeed0ede6ddb15c4c85f3593bff86a8 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Wed, 29 Nov 2017 17:27:12 +0100
Subject: UI: improve table in sheet

---
 ishtar_common/static/js/ishtar.js                  | 11 +++
 ishtar_common/static/media/styles.css              | 13 +++
 ishtar_common/templates/blocks/DataTables.html     | 32 +++-----
 .../templates/ishtar/blocks/window_field_flex.html |  2 +-
 .../blocks/window_tables/dynamic_documents.html    | 92 +++++++++++++++++++---
 ishtar_common/templatetags/window_field.py         |  9 ++-
 ishtar_common/templatetags/window_tables.py        |  1 +
 7 files changed, 126 insertions(+), 34 deletions(-)

(limited to 'ishtar_common')

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index c3b576acd..026151953 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -38,6 +38,17 @@ function get_previous_table_id(){}
 
 var shortcut_url = '';
 var datatables_i18n;
+
+var datatables_default = {
+    "processing": true,
+    "serverSide": true,
+    "scrollX": true,
+    "scrollY": true,
+    "searching": false,
+    "info": false,
+    "scrollCollapse": true
+};
+
 var advanced_menu = false;
 var shortcut_menu_hide = false;
 var activate_all_search_url = '/activate-all-search/';
diff --git a/ishtar_common/static/media/styles.css b/ishtar_common/static/media/styles.css
index 773554b95..65882f484 100644
--- a/ishtar_common/static/media/styles.css
+++ b/ishtar_common/static/media/styles.css
@@ -103,6 +103,19 @@ div#foot{
     height: auto;
 }
 
+table.dataTable tbody th, table.dataTable tbody td {
+    padding: 2px 2px;
+}
+
+.dataTables_wrapper .dataTables_length{
+    font-size: 0.8em;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+    background: none;
+    border: 1px solid transparent;
+}
+
 .display_details{
     font-size: 1.4em;
 }
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">
@@ -58,12 +47,20 @@
 </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 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}}',
diff --git a/ishtar_common/templatetags/window_field.py b/ishtar_common/templatetags/window_field.py
index 8536b7595..416f61dcb 100644
--- a/ishtar_common/templatetags/window_field.py
+++ b/ishtar_common/templatetags/window_field.py
@@ -6,14 +6,14 @@ register = template.Library()
 
 
 @register.inclusion_tag('ishtar/blocks/window_field.html')
-def field(caption, data, pre_data='', post_data='', li=False):
+def field(caption, data, pre_data='', post_data='', li=False, size=None):
     if data in (True, False):
         data = _(unicode(data))
     # fix bad conversion
     if data == 'None':
         data = ""
     return {'caption': caption, 'data': data, "pre_data": pre_data,
-            'post_data': post_data, 'li': li}
+            'post_data': post_data, 'li': li, "size": size}
 
 
 @register.inclusion_tag('ishtar/blocks/window_field.html')
@@ -26,6 +26,11 @@ def field_flex(caption, data, pre_data='', post_data=''):
     return field(caption, data, pre_data, post_data)
 
 
+@register.inclusion_tag('ishtar/blocks/window_field_flex.html')
+def field_flex_2(caption, data, pre_data='', post_data=''):
+    return field(caption, data, pre_data, post_data, size=2)
+
+
 @register.inclusion_tag('ishtar/blocks/window_field_flex_full.html')
 def field_flex_full(caption, data, pre_data='', post_data=''):
     return field(caption, data, pre_data, post_data)
diff --git a/ishtar_common/templatetags/window_tables.py b/ishtar_common/templatetags/window_tables.py
index f58b1436a..86744a46b 100644
--- a/ishtar_common/templatetags/window_tables.py
+++ b/ishtar_common/templatetags/window_tables.py
@@ -29,6 +29,7 @@ register = template.Library()
 def table_document(caption, data):
     return {'caption': caption, 'data': data}
 
+
 ASSOCIATED_MODELS = {}
 ASSOCIATED_MODELS['files'] = (File, 'get-file', '')
 ASSOCIATED_MODELS['operation_docs'] = (
-- 
cgit v1.2.3