remove a supplier

orders/static/css/oders_helper_style.css

@@ -10,4 +10,31 @@
 
 .product_qty_input {
     width: 100px;
+}
+
+
+#suppliers_container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px 0 20px 0;
+}
+
+.supplier_pill {
+    background-color: #e7e9ed;
+    border-radius: 50px;
+    width: 200px;
+    min-height: 35px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 8px;
+    margin-right: 5px;
+}
+
+.remove_supplier_icon {
+    color: red;
+    margin-left: 5px;
+    cursor: pointer;
 }
\ No newline at end of file

orders/static/js/orders_helper.js

@@ -40,7 +40,7 @@ function add_supplier() {
         contentType: "application/json; charset=utf-8",
         success: function(data) {
             save_supplier_products(supplier, data.res.products);
-            display_products();
+            update_display();
             $("#supplier_input").val("")
             closeModal();
         },
@@ -58,6 +58,25 @@ function add_supplier() {
 }
 
 /**
+ * Remove a supplier from the selected list & its associated products
+ * @param {int} supplier_id 
+ */
+function remove_supplier(supplier_id) {
+    // Remove from suppliers list
+    selected_suppliers = selected_suppliers.filter(supplier => supplier.id != supplier_id)
+
+    // Remove the supplier from the products suppliers list
+    for (const i in products) {
+        products[i].suppliers = products[i].suppliers.filter(supplier => supplier.id != supplier_id)
+    }
+
+    // Remove products only associated to this product
+    products = products.filter(product => product.suppliers.length > 0)
+
+    update_display();
+}
+
+/**
  * When products are fetched, save them and the relation with the supplier.
  * If product already saved, add the supplier to its suppliers list.
  * Else, add product with supplier.
@@ -101,6 +120,28 @@ function supplier_column_name(supplier) {
     return `supplier_${parsed_name}`;
 }
 
+/**
+ * Display the selected suppliers
+ */
+function display_suppliers() {
+    let supplier_container = $("#suppliers_container");
+    $("#suppliers_container").empty();
+
+    for (supplier of selected_suppliers) {
+        let template = $("#templates #supplier_pill")
+        template.find(".supplier_name").text(supplier.display_name);
+        template.find(".remove_supplier_icon").attr('id', `remove_supplier_${supplier.id}`)
+
+        supplier_container.append(template.html());
+    }
+
+    $(".remove_supplier_icon").on("click", function(e) {
+        const el_id = $(this).attr('id').split('_');
+        const supplier_id = el_id[el_id.length-1]
+        remove_supplier(supplier_id);
+    })
+}
+
 /* DATATABLE */
 
 /**
@@ -160,6 +201,11 @@ function prepare_datatable_columns() {
  */
 function display_products() {
     // Empty datatable if already exists
+    if (products.length == 0) {
+        $('.main').hide();
+        return -1;
+    }
+
     if (products_table) {
         products_table.clear().destroy();
         $('#products_table').empty();
@@ -185,6 +231,14 @@ function display_products() {
     $('.main').show();
 }
 
+/**
+ * Update DOM display
+ */
+function update_display() {
+    display_suppliers();
+    display_products();
+}
+
 $(document).ready(function() {
     $.ajaxSetup({ headers: { "X-CSRFToken": getCookie('csrftoken') } });
 
@@ -223,4 +277,7 @@ $(document).ready(function() {
         e.preventDefault();
         add_supplier();
     })
+
+    // todo on input change : update value in array of products
+    // todo on click on 'X' change to i
 });

templates/orders/helper.html

@@ -25,6 +25,8 @@
         </form>
     </div>
 
+    <div class="txtcenter" id="suppliers_container"></div>
+
     <div class="main" style="display:none;">
         <div class="table_area">
             <table id="products_table" class="display" cellspacing="0" width="100%"></table>
@@ -32,6 +34,17 @@
     </div>
 </div>
 
+<div id="templates" style="display:none;">
+    <div id="supplier_pill">
+        <div class="supplier_pill">
+            <div class="supplier_name_container">
+                <span class="supplier_name"></span>
+                <i class="fas fa-times remove_supplier_icon"></i>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script src="{% static "js/all_common.js" %}?v="></script>
 <script type="text/javascript" src="{% static 'js/orders_helper.js' %}?v="></script>
 {% endblock %}