From e510cab9cd85e9824c6e80ec280b69df5dd7cae6 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Mon, 27 Nov 2017 18:14:29 +0100
Subject: JQueryJqGrid replacement by DataTables

---
 ishtar_common/templates/base.html                  |   8 +-
 ishtar_common/templates/blocks/DataTables.html     | 276 +++++++++++++++++++++
 .../blocks/window_tables/dynamic_documents.html    |   5 +-
 3 files changed, 284 insertions(+), 5 deletions(-)
 create mode 100644 ishtar_common/templates/blocks/DataTables.html

(limited to 'ishtar_common/templates')

diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index 948c3ee59..aefba8f73 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -16,9 +16,8 @@
     <script language="javascript" type="text/javascript" src="{{JQUERY_UI_URL}}ui/i18n/jquery.ui.datepicker-{{COUNTRY}}.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/chosen/chosen.jquery.min.js?ver={{VERSION}}"></script>
     {# <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/prettyPhoto/js/jquery.prettyPhoto.js?ver={{VERSION}}"></script> #}
-    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/i18n/grid.locale-{{COUNTRY}}.js?ver={{VERSION}}"></script>
-    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jquery.jqGrid.min.js?ver={{VERSION}}"></script>
-    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/grid.tbltogrid.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}datatables/jquery.dataTables.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}datatables/dataTables.bootstrap4.min.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/ishtar.js?ver={{VERSION}}"></script>
     <script type='text/javascript'>
     var shortcut_url = '{% url "shortcut-menu" %}';
@@ -37,7 +36,8 @@
     <link rel="stylesheet" href="{{STATIC_URL}}js/chosen/chosen.min.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}font-awesome/css/font-awesome.min.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}js/prettyPhoto/css/prettyPhoto.css?ver={{VERSION}}">
-    <link rel="stylesheet" href="{{STATIC_URL}}media/ui.jqgrid.css?ver={{VERSION}}">
+    <link rel="stylesheet" href="{{STATIC_URL}}datatables/jquery.dataTables.min.css?ver={{VERSION}}">
+    <link rel="stylesheet" href="{{STATIC_URL}}datatables/dataTables.bootstrap4.min.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}media/styles.css?ver={{VERSION}}">
     {% for url_css in JQGRID_CSS %}<link rel="stylesheet" href="{{url_css}}?ver={{VERSION}}">{% endfor %}
     {% endcompress %}
diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
new file mode 100644
index 000000000..d385c986b
--- /dev/null
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -0,0 +1,276 @@
+{% load i18n %}
+
+<p class="text-center">
+
+<button id='search_{{name}}' class='btn btn-primary btn-block'>
+    {% trans "Search" %}</button>
+
+{% if url_new %}
+<p><a href="#" onclick="open_window('{{url_new}}');">{{new_message}}</a></p>
+{% endif %}
+
+<h4 class="text-center">{% trans "Search and select an item" %}</h4>
+
+<div class="alert alert-info" role="alert" id="pinned_search_{{name}}">
+    <i class="fa fa-thumb-tack"></i> &nbsp;
+    <strong>{% trans "Pinned search:" %}</strong>
+    <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">
+      <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>
+    </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"
+             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>
+            {% 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>
+
+{% 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}}"/>
+
+<script type="text/javascript" language='javascript'>
+$('#modal_grid_{{name}}').on('show.bs.modal', function (e) {
+    $('#grid_{{name}}_wrapper').appendTo(
+        '#modal_grid_{{name}} .modal-body');
+    $('#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()
+});
+
+
+var query_vars = new Array({{col_idx|safe}});
+var selItems_{{sname}} = new Array();
+jQuery(document).ready(function(){
+  jQuery("#search_{{name}}").click(function (){
+    if ($("#progress").length > 0){
+        $("#progress").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 + "=" + val;
+        }
+    }
+    var mygrid = jQuery("#grid_{{name}}");
+    var url = "{{source}}?submited=1&" + data;
+    var csv_url = "{{source}}csv?submited=1&" + data;
+    $(".{{sname}}-csv").attr("href", csv_url);
+    var csv_full_url = "{{source_full}}csv?submited=1&" + data;
+    $(".{{sname}}-csv-full").attr("href", csv_full_url);
+    {% for slug, name, extra_source in extra_sources %}
+    $(".{{slug}}-csv-full").attr("href", '{{extra_source}}csv?submited=1&' + data);
+    {% endfor %}
+
+    {% comment %}
+    mygrid.setGridParam({url:url, page:1});
+    mygrid.trigger("reloadGrid");
+    {% endcomment %}
+    if ($("#progress").length > 0){
+        $("#progress").hide();
+    }
+    return false;
+  });
+  jQuery("#grid_{{name}}").DataTable({
+    "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 %}
+    ]
+  });
+
+
+{% comment %}
+
+  jQuery("#grid_{{name}}").jqGrid({
+    url:'{{source}}',
+    datatype: "json",
+    mtype: 'GET',
+    colNames:['id', '', {{col_names|safe}}],
+    colModel:[
+      {name:'id', index:'id', hidden:true},
+      {name:'link', index:'link', width:30},
+      {{extra_cols|safe}}
+    ],
+    height: 300,
+    sortname: '__default__',
+    viewrecords: true,
+    sortorder: "asc",
+    emptyrecords: "{{no_result}}",
+    loadtext: "{{loading}}",
+    pager: '#pager_{{name}}',
+    width: null,
+    shrinkToFit: false,
+    rowNum:20,
+    {% if multiple_select %}multiselect: true,{% endif %}
+    jsonReader : {repeatitems: false},
+    loadError: function (jqXHR, textStatus, errorThrown) {
+        alert("{% trans "An error as occured during search. Check your query fields." %}");
+    },
+    beforeProcessing: function(data, status, xhr){
+        $('#pinned_search_content_{{name}}').html('');
+        for (idx in data){
+            if (idx == 'pinned-search' && data[idx] != ''){
+               $('#pinned_search_content_{{name}}').html(data[idx]);
+            }
+        }
+        if ($('#pinned_search_content_{{name}}').html()){
+            $('#pinned_search_{{name}}').show();
+        } else {
+            $('#pinned_search_{{name}}').hide();
+        }
+    }
+  });
+{% if multiple %}
+  jQuery("#add_button_{{name}}").click(function (){
+    var mygrid = jQuery("#grid_{{name}}");
+    var idx = mygrid.getGridParam('selrow');
+    var lbl_cols = new Array({{multi_cols|safe}});
+    var label = "";
+    for (var id in lbl_cols){
+        if(id == 1){
+            label += " (";
+        }else if (id > 1){
+            label += " ; ";
+        }
+        label += mygrid.getCell(idx, lbl_cols[id]);
+    }
+    if (id > 0){
+        label += ")";
+    }
+    for (id in selItems_{{sname}}){
+        if(selItems_{{sname}}[id] == idx){
+            return false;
+        }
+    }
+    selItems_{{sname}}.push(idx);
+    jQuery("#selectmulti_{{name}}").append(
+               "<li id='selected_{{name}}_"+idx+"'>\
+<a href='#' class='remove' \
+  onclick=\"multiRemoveItem(selItems_{{sname}}, '{{name}}', "+ idx +");\
+  return false;\" title=\"{{remove}}\">X</a>" + label + "</li>");
+    return true;
+  });
+  jQuery("#submit_form").click(function (){
+    jQuery("#hidden_{{name}}").val(selItems_{{sname}});
+    return true;
+  });
+{% else %}
+  jQuery("#submit_form").click(function (){
+    var mygrid = jQuery("#grid_{{name}}");
+    {% if multiple_select %}
+    jQuery("#hidden_{{name}}").val(mygrid.getGridParam('selarrrow'));
+    {% else %}
+    jQuery("#hidden_{{name}}").val(mygrid.getGridParam('selrow'));
+    {% endif %}
+    return true;
+  });
+{% endif %}
+
+{% endcomment %}
+
+});
+
+  function get_next_table_id(c_id){
+    var mygrid = jQuery("#grid_{{name}}");
+    var has_current_id = false;
+    ids = mygrid.getDataIDs();
+    for (idx in ids){
+        if (has_current_id) return ids[idx];
+        if (ids[idx] == c_id) has_current_id = true;
+    }
+    return false;
+  }
+  function get_previous_table_id(c_id){
+    var mygrid = jQuery("#grid_{{name}}");
+    var previous_id = 0;
+    ids = mygrid.getDataIDs();
+    for (idx in ids){
+        if (ids[idx] == c_id){
+            if (previous_id) return previous_id;
+            return false;
+        }
+        previous_id = ids[idx];
+    }
+    return false;
+  }
+</script>
+
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 891cd0f6f..4846d6e4f 100644
--- a/ishtar_common/templates/ishtar/blocks/window_tables/dynamic_documents.html
+++ b/ishtar_common/templates/ishtar/blocks/window_tables/dynamic_documents.html
@@ -17,7 +17,9 @@
 
 setTimeout(
     function(){
-      $("#grid_{{name}}").jqGrid({
+      $("#grid_{{name}}").DataTable();
+      {% comment %}
+      {
         url:'{{source|safe}}',
         datatype: "json",
         mtype: 'GET',
@@ -42,6 +44,7 @@ setTimeout(
         }
       });
       {% if large %}jQuery("#grid_{{name}}").jqGrid('setGridHeight', 272);{% endif %}
+    {% endcomment %}
 }, 200);
 
 </script>
-- 
cgit v1.2.3