create interface to update an envelop + refactoring

envelops/static/css/envelops.css

@@ -16,6 +16,70 @@
   margin-top: 30px;
 }
 
+.update_envelop_button, .delete_envelop_button {
+  margin: 0 0 10px 15px;
+}
+
+.envelop_content_list {
+  margin: 20px 0 15px 0;
+}
+
+/* Update envelop modal */
+
+.envelop_lines {
+  margin: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.update_envelop_line {
+  margin: 5px 0;
+  width: 60%;
+  display: flex;
+  position: relative;
+}
+
+.deleted_line_through {
+  border-bottom: 1px solid #d9534f;
+  position: absolute;
+  content: "";
+  width: 95%;
+  height: 50%;
+  display: none;
+}
+
+.update_envelop_line div {
+  flex: 50% 1 0;
+}
+
+.line_partner_name_container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.line_partner_name {
+  text-align: left;
+  padding: 0 5px;
+}
+
+.line_partner_input_container {
+  display: flex;
+  align-items: center;
+}
+
+.delete_envelop_line_icon {
+  margin-left: 10px;
+  color: #d9534f;
+  cursor: pointer;
+}
+
+.envelop_comments {
+  width: 60%;
+  margin-bottom: 20px;
+}
+
 /* Accordion style */
 /* Style the buttons that are used to open and close the accordion panel */
 .accordion {
@@ -23,7 +87,6 @@
   color: #212529;
   cursor: pointer;
   padding: 18px;
-  /* width: 80%; */
   text-align: left;
   border: none;
   outline: none;
@@ -32,7 +95,6 @@
 
 .archive_button {
   padding: 18px;
-  /* width: 20%; */
 }
 
 hr {

orders/static/js/orders_helper.js

@@ -2492,6 +2492,21 @@ $(document).ready(function() {
                 alert('Erreur lors de la récupération des articles, rechargez la page plus tard');
             }
         });
+
+        $(document).on('click', '.accordion', function(){
+            /* Toggle between adding and removing the "active" class,
+            to highlight the button that controls the panel */
+            this.classList.toggle("active");
+        
+            /* Toggle between hiding and showing the active panel */
+            var panel = this.nextElementSibling;
+        
+            if (panel.style.display === "block") {
+              panel.style.display = "none";
+            } else {
+              panel.style.display = "block";
+            }
+        });
     } else {
         $('#not_connected_content').show();
     }

outils/static/js/all_common.js

@@ -460,22 +460,6 @@ for (i = 0; i < acc.length; i++) {
     });
 }
 
-$(document).on('click', '.accordion', function(){
-    /* Toggle between adding and removing the "active" class,
-    to highlight the button that controls the panel */
-    this.classList.toggle("active");
-
-    /* Toggle between hiding and showing the active panel */
-    var panel = this.nextElementSibling;
-
-    if (panel.style.display === "block") {
-      panel.style.display = "none";
-    } else {
-      panel.style.display = "block";
-    }
-     console.log(panel)
-});
-
 function report_JS_error(e, m) {
     try {
         $.post('/log_js_error', {module: m, error: JSON.stringify(e)});

templates/envelops/index.html

@@ -17,7 +17,7 @@
     <div style="width: 10%" class="fr txtright"><i class="fas fa-times"></i></div>
 </div>
 <div id="envelop_cashing_success" class="alert--success clearfix custom_alert" onClick="toggle_success_alert()">
-  <div style="width: 90%" class="fl txtleft">Enveloppe encaissée !</div>
+  <div style="width: 90%" class="fl txtleft success_alert_content">Enveloppe encaissée !</div>
   <div style="width: 10%" class="fr txtright"><i class="fas fa-times"></i></div>
 </div>
 <div id="envelop_deletion_success" class="alert--success clearfix custom_alert" onClick="toggle_deleted_alert()">
@@ -41,6 +41,33 @@
   </section>
 </section>
 
+<div id="templates" style="display:none;">
+  <div id="modal_update_envelop">
+    <div class="modal_update_envelop_content">
+      <h3 class="envelop_name"></h3>
+      <div class="envelop_lines"></div>
+      <div class="envelop_comments_area">
+        <p>Commentaires</p>
+        <textarea class="envelop_comments"></textarea>
+      </div>
+    </div>
+  </div>
+
+  <div id="update_envelop_line_template">
+    <div class="update_envelop_line">
+      <div class="line_partner_name_container">
+        <span class="line_number"></span>
+        <span class="line_partner_name"></span>
+      </div>
+      <div class="line_partner_input_container">
+        <input type="text" class="line_partner_amount" placeholder="Montant">
+        <i class="fas fa-trash-alt fa-lg delete_envelop_line_icon"></i>
+      </div>
+      <div class="deleted_line_through"></div>
+    </div>
+  </div>
+</div>
+
 <script src="{% static "js/pouchdb.min.js" %}"></script>
 <script type="text/javascript">
         {%if must_identify %}