validation modale before deleting supplier

orders/static/css/oders_helper_style.css

@@ -17,6 +17,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-wrap: wrap; 
     margin: 20px 0 20px 0;
 }
 
@@ -30,7 +31,7 @@
     justify-content: center;
     align-items: center;
     padding: 8px;
-    margin-right: 5px;
+    margin-right: 10px;
 }
 
 .remove_supplier_icon {

orders/static/js/orders_helper.js

@@ -155,8 +155,18 @@ function display_suppliers() {
 
     $(".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);
+        const supplier_id = el_id[el_id.length-1];
+
+        let modal_remove_supplier = $('#templates #modal_remove_supplier');
+        modal_remove_supplier.find(".supplier_name").text(supplier.display_name);
+
+        openModal(
+            modal_remove_supplier.html(),
+            () => {
+                remove_supplier(supplier_id);
+            },
+            'Valider',
+        );
     })
 }
 

templates/orders/helper.html

@@ -43,6 +43,18 @@
             </div>
         </div>
     </div>
+
+    <div id="modal_remove_supplier">
+        <h3>Attention !</h3>
+        <p>
+            Vous vous apprêtez à supprimer le fournisseur <span class="supplier_name"></span>.<br/>
+            Les produits associés à ce fournisseur uniquement seront supprimés.<br/>
+            Les données renseignées dans la colonne de ce fournisseur seront perdues.
+        </p>
+        <p>Êtez-vous sûr ?</p>
+        <ul id="list_unprocessable_porducts"></ul>
+        <hr/>
+    </div>
 </div>
 
 <script src="{% static "js/all_common.js" %}?v="></script>