UI: manage multi select on table - improve basket management layout

7 files changed, 58 insertions, 24 deletions

diff --git a/ishtar_common/forms_common.py b/ishtar_common/forms_common.py
index 2b30c56f6..fae4d54d3 100644
--- a/ishtar_common/forms_common.py
+++ b/ishtar_common/forms_common.py
@@ -111,7 +111,8 @@ class NewImportForm(forms.ModelForm):
         model = models.Import
         fields = (
             'name', 'importer_type', 'imported_file', 'imported_images',
-            'associated_group', 'conservative_import', 'encoding', 'skip_lines')
+            'associated_group', 'conservative_import', 'encoding', 'skip_lines'
+        )
 
     def __init__(self, *args, **kwargs):
         user = kwargs.pop('user')
diff --git a/ishtar_common/static/media/styles.css b/ishtar_common/static/media/styles.css
index aa0691409..453583bbe 100644
--- a/ishtar_common/static/media/styles.css
+++ b/ishtar_common/static/media/styles.css
@@ -161,6 +161,8 @@ table.dataTable thead th, table.dataTable thead td {
 
 .display_details{
     font-size: 1.4em;
+    vertical-align: middle;
+    padding: 0 0.1em;
 }
 
 .progress-detail{
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index d5d138bd2..c9dfde974 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -18,6 +18,7 @@
     <script language="javascript" type="text/javascript"
             src="{{STATIC_URL}}datatables/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}}datatables/dataTables.buttons.min.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/ishtar.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript"
             src="{{STATIC_URL}}datatables/i18n/{{LANGUAGE_CODE}}.js?ver={{VERSION}}"></script>
diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
index 12f630de7..7f7e97c5b 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -2,7 +2,7 @@
 
 <p class="text-center">
 
-<button id='search_{{name}}' class='btn btn-primary'>
+<button id='search_{{name}}' class='btn btn-primary' type="button">
     {% trans "Search" %}</button>
 
 {% if url_new %}
@@ -145,7 +145,21 @@ jQuery(document).ready(function(){
             return json.rows;
         }
     },
-    "select": {% if multiple_select %}true{% else %}'single'{% endif %},
+    "select": {
+        "style": {% if multiple_select %}'multi'{% else %}'single'{% endif %}
+    },
+    {% if multiple_select %}"buttons": [
+        'selectAll',
+        'selectNone'
+    ],
+    language: {
+        buttons: {
+            selectAll: "{% trans 'Select all items' %}",
+            selectNone: "{% trans 'Select none' %}"
+        }
+    },
+    "dom": 'lBtip',
+    {% endif %}
     "columns": [
         { "data": "id", "visible": false },
         { "data": "link", "orderable": false },{% for col in extra_cols %}
@@ -236,8 +250,6 @@ jQuery(document).ready(function(){
   });
 {% else %}
   jQuery("#submit_form").click(function (){
-    var mygrid = jQuery("#grid_{{name}}");
-
     var data = datatable_{{sname}}.rows( { selected: true } ).data();
     {% if multiple_select %}
     var value = "";
@@ -256,7 +268,6 @@ jQuery(document).ready(function(){
 });
 
   function get_next_table_id(c_id){
-    // var mygrid = jQuery("#grid_{{name}}");
     var has_current_id = false;
 
     ids = datatable_{{sname}}.column(0).data();
@@ -267,7 +278,6 @@ jQuery(document).ready(function(){
     return false;
   }
   function get_previous_table_id(c_id){
-    // var mygrid = jQuery("#grid_{{name}}");
     var previous_id = 0;
 
     ids = datatable_{{sname}}.column(0).data();
diff --git a/ishtar_common/templates/blocks/bs_form_snippet.html b/ishtar_common/templates/blocks/bs_form_snippet.html
index ed0dc14e1..a4d772236 100644
--- a/ishtar_common/templates/blocks/bs_form_snippet.html
+++ b/ishtar_common/templates/blocks/bs_form_snippet.html
@@ -36,7 +36,7 @@
     </div>
     <div class="form-group col-lg">
         <p class="text-right">
-            <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal"
+            <button type="button" class="btn btn-secondary" data-toggle="modal"
                data-target="#modal-advanced-search">
                 {% trans "Advanced search" %} <i class="fa fa-cogs" aria-hidden="true"></i>
             </button>
diff --git a/ishtar_common/templates/ishtar/basket_list.html b/ishtar_common/templates/ishtar/basket_list.html
index 011ed97a0..43236aeb0 100644
--- a/ishtar_common/templates/ishtar/basket_list.html
+++ b/ishtar_common/templates/ishtar/basket_list.html
@@ -1,10 +1,19 @@
 {% load i18n %}
-<table>
-<tr>{% for item in basket.items.all %}
-    <td><a class="display_details" href="#" onclick="load_window('{{item_url}}/{{item.pk}}/');"><i class="fa fa-info-circle" aria-hidden="true"></i></a></td>
-    <td>{{item.full_label}}</td>
-    <td><a class='async-link' data-target='#basket-content' href='{{delete_url}}/{{basket.pk}}/{{item.pk}}/'>{% trans "remove" %}</a></td></tr>{% endfor %}
-</table>
+<ul class="list-group">
+    {% for item in basket.items.all %}
+    <li class="list-group-item">
+        <a class="display_details" href="#"
+            onclick="load_window('{{item_url}}/{{item.pk}}/');"><i class="fa fa-info-circle" aria-hidden="true"></i>
+        </a>
+        <span>{{item.full_label}}</span>
+        <a class='async-link text-danger float-right'
+           data-target='#basket-content'
+           href='{{delete_url}}/{{basket.pk}}/{{item.pk}}/'>
+            <i class="fa fa-times" aria-hidden="true"></i>
+        </a>
+    </li>
+    {% endfor %}
+</ul>
 <script type='text/javascript'>
     $("a.async-link").click(manage_async_link);
 </script>
diff --git a/ishtar_common/templates/ishtar/manage_basket.html b/ishtar_common/templates/ishtar/manage_basket.html
index 3292318ea..26dd75c4c 100644
--- a/ishtar_common/templates/ishtar/manage_basket.html
+++ b/ishtar_common/templates/ishtar/manage_basket.html
@@ -4,12 +4,15 @@
 <h2>{{page_name}}{% trans ":"%} {{basket}}</h2>
 <form enctype="multipart/form-data" action="." method="post">{% csrf_token %}
 <div class='form'>
-<p class='alert'>
-    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
-    {% trans 'Checking "Select all" only selects the current page.' %}
-</p>
-{{form}}
-<button id='add_to' onclick='return false'>{% trans "Add" %}</button>
+    <div class="alert alert-warning" role="alert">
+        {% trans 'Checking "Select all" only selects the current page.' %}
+    </div>
+    {{form}}
+    <div class="text-center">
+        <button class="btn btn-primary" type="button" id='add_to'>
+            {% trans "Add" %}
+        </button>
+    </div>
 <h3>{% trans "Basket content" %}</h3>
 <div id='basket-content' style='text-align:left'>
 </div>
@@ -27,15 +30,20 @@
 </form>
 <script type='text/javascript' language='javascript'>
 
-function load_list(data){
+function load_list(data, last){
     $('#basket-content').html(data);
+    if (last){
+        close_wait();
+    }
 }
 
 $('#add_to').click(function(){
-    var selected_items = jQuery("#grid_pk").getGridParam('selarrrow');
+    var selected_items = datatable_pk.rows( { selected: true } ).data();
     if(!selected_items) return false;
+    $('.modal-progress').modal('show');
     for (i = 0, n = selected_items.length; i < n; i++) {
-        var selected_item = selected_items[i];
+        var selected_item = selected_items[i]['id'];
+        last = i == n - 1;
         $.ajax({
             type: "POST",
             url: '{{add_url}}',
@@ -43,11 +51,14 @@ $('#add_to').click(function(){
                 basket_id: {{basket.pk}},
                 item_id: selected_item
             },
-            success: load_list
+            success: function(data){
+                load_list(data, last);
+            }
         });
     }
     return false;
 });
+
 jQuery(document).ready(function(){
     $.get('{{list_url}}', load_list);
 });