From f696f8289f5f91bbd9aa744b6cfb8ec9d1aaff45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Kervella?= <kervella.mael@gmail.com>
Date: Sun, 15 Oct 2017 00:18:08 +0000
Subject: [PATCH] Fix bug id avec JS et paiement + utilisation bootstrap

---
 .../templates/cotisations/new_facture.html    | 56 ++++++++++++-------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/cotisations/templates/cotisations/new_facture.html b/cotisations/templates/cotisations/new_facture.html
index 2dfa52c2..f2586e8b 100644
--- a/cotisations/templates/cotisations/new_facture.html
+++ b/cotisations/templates/cotisations/new_facture.html
@@ -38,18 +38,20 @@ with this program; if not, write to the Free Software Foundation, Inc.,
     {{ venteform.management_form }}
     <!-- TODO: FIXME to include data-type="check" for right option in id_cheque select -->
     <h3>Articles de la facture</h3>
-    <div id="form_set">
+    <div id="form_set" class="form-group">
     {% for form in venteform.forms %}
-        <div class='product_to_sell'>
-        <p>
-            {{ form.as_table }}
-        </p>
+        <div class='product_to_sell form-inline'>
+		Article : &nbsp;
+		{% bootstrap_form form label_class='sr-only' %}
+		&nbsp;
+                <button class="btn btn-danger btn-sm"
+			id="id_form-0-article-remove" type="button">
+                    <span class="glyphicon glyphicon-remove"></span>
+                </button>
         </div>
     {% endfor %}
     </div>
-    <p>
     <input class="btn btn-primary btn-sm" role="button" value="Ajouter un article" id="add_one">
-    </p>
     <p>
         Prix total : <span id="total_price">0,00</span> €
     </p>
@@ -63,19 +65,23 @@ with this program; if not, write to the Free Software Foundation, Inc.,
         prices[{{ article.id|escapejs }}] = {{ article.prix }};
     {% endfor %}
 
-    var template = `<p>{{ venteform.empty_form.as_table }}</p>`;
+    var template = `Article : &nbsp;
+        {% bootstrap_form venteform.empty_form label_class='sr-only' %}
+        &nbsp;
+        <button class="btn btn-danger btn-sm"
+	    id="id_form-__prefix__-article-remove" type="button">
+	    <span class="glyphicon glyphicon-remove"></span>
+	</button>`
 
     function add_article(){
         // Index start at 0 => new_index = number of items
         var new_index =
             document.getElementsByClassName('product_to_sell').length;
-        document.getElementById('id_form-TOTAL_FORMS').value =
-            parseInt(document.getElementById('id_form-TOTAL_FORMS').value) + 1;
+        document.getElementById('id_form-TOTAL_FORMS').value ++;
         var new_article = document.createElement('div');
-        new_article.className = 'product_to_sell';
+        new_article.className = 'product_to_sell form-inline';
         new_article.innerHTML = template.replace(/__prefix__/g, new_index);
-        document.getElementById('form_set')
-            .appendChild(new_article);
+        document.getElementById('form_set').appendChild(new_article);
         add_listenner_for_id(new_index);
     }
 
@@ -106,18 +112,28 @@ with this program; if not, write to the Free Software Foundation, Inc.,
             .addEventListener("onkeypress", update_price, true);
         document.getElementById('id_form-' + i.toString() + '-quantity')
             .addEventListener("change", update_price, true);
+        document.getElementById('id_form-' + i.toString() + '-article-remove')
+	    .addEventListener("click", function(event) {
+		    var article = event.target.parentNode;
+		    article.parentNode.removeChild(article);
+                    document.getElementById('id_form-TOTAL_FORMS').value --;
+		    update_price();
+		}
+	    )
     }
 
-    function set_cheque_info_visibility(){
-        var visible = document.getElementById("id_paiement").value == document.getElementById("id_paiement").getAttribute('data-cheque');
-        p = document.getElementById("id_paiement")
-        console.log(p);
+    function set_cheque_info_visibility() {
+        var paiement = document.getElementById("id_Facture-paiement");
+        var visible = paiement.value == paiement.getAttribute('data-cheque');
+        p = document.getElementById("id_Facture-paiement");
         var display = 'none';
         if (visible) {
             display = 'block';
         }
-        document.getElementById("id_cheque").parentNode.style.display = display;
-        document.getElementById("id_banque").parentNode.style.display = display;
+        document.getElementById("id_Facture-cheque")
+		.parentNode.style.display = display;
+        document.getElementById("id_Facture-banque")
+		.parentNode.style.display = display;
     }
 
     // Add events manager when DOM is fully loaded
@@ -129,7 +145,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
         for (i = 0; i < product_count; ++i){
             add_listenner_for_id(i);
         }
-        document.getElementById("id_paiement")
+        document.getElementById("id_Facture-paiement")
             .addEventListener("change", set_cheque_info_visibility, true);
         set_cheque_info_visibility();
         update_price();