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

1 files changed, 21 insertions, 10 deletions

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);
 });