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

2 files changed, 36 insertions, 16 deletions

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