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 {

envelops/static/js/envelops.js

 var cash_envelops = [];
 var ch_envelops = [];
+var envelop_to_update = null;
 
 function reset() {
     $('#cash_envelops').empty();
@@ -12,7 +13,8 @@ function toggle_error_alert() {
     $('#envelop_cashing_error').toggle(250);
 }
 
-function toggle_success_alert() {
+function toggle_success_alert(message) {
+    $('#envelop_cashing_success').find(".success_alert_content").text(message);
     $('#envelop_cashing_success').toggle(250);
 }
 
@@ -20,6 +22,41 @@ function toggle_deleted_alert() {
     $('#envelop_deletion_success').toggle(250);
 }
 
+/**
+ * Get an envelop from the cash or cheque lists dependings on the params
+ * @param {String} type 
+ * @param {String} index 
+ * @returns 
+ */
+function get_envelop_from_type_index(type, index) {
+    if (type === "cash") {
+        return cash_envelops[index];
+    } else {
+        return ch_envelops[index];
+    }
+}
+
+/**
+ * Define a name for an envelop depending on its type, with or with its type
+ * @param {Object} envelop 
+ * @param {String} name_type short | long
+ * @returns 
+ */
+function get_envelop_name(envelop, name_type = 'short') {
+    let envelop_name = "";
+
+    if (envelop.type === "cash") {
+        let split_id = envelop._id.split('_');
+        let envelop_date = split_id[3].padStart(2, '0') + "/" + split_id[2].padStart(2, '0') + "/" + split_id[1];
+
+        envelop_name = `Enveloppe${(name_type === "short") ? "" : " de liquide"} du ${envelop_date}`;
+    } else if (envelop.type == "ch") {
+        envelop_name = `Enveloppe${(name_type === "short") ? "" : " de chèques"} #${envelop.display_id}`;
+    }
+
+    return envelop_name;
+}
+
 // Set an envelop content on the document
 function set_envelop_dom(envelop, envelop_name, envelop_content_id, envelop_index) {
     var envelops_section = $('#' + envelop.type + '_envelops');
@@ -37,14 +74,14 @@ function set_envelop_dom(envelop, envelop_name, envelop_content_id, envelop_inde
     // Allow checking for all cash and first check envelops
     if (envelop.type == 'cash' || envelop.type == 'ch' && envelop_index == 0) {
         new_html += '<button class="accordion w80">' + envelop_name + ' - <i>' + total_amount + '€</i></button>'
-    + '<button class="btn--success archive_button item-fluid" onClick="openModal(\'<h3>Êtes-vous sûr ?</h3>\', function() {archive_envelop(\'' + envelop.type + '\', ' + envelop_index + ');}, \'Encaisser\')">Encaisser</button>';
+    + '<button class="btn--success archive_button item-fluid" onClick="openModal(\'<h3>Êtes-vous sûr ?</h3>\', function() {archive_envelop(\'' + envelop.type + '\', ' + envelop_index + ');}, \'Encaisser\', false)">Encaisser</button>';
     } else {
         new_html += '<button class="accordion w100">' + envelop_name + ' - <i>' + total_amount + '€</i></button>';
     }
 
     new_html += '</div>'
-            + '<div class="panel panel_' + envelop_content_id + '"><ol id="' + envelop_content_id + '"></ol></div>'
-          + '</div>';
+        + '<div class="panel panel_' + envelop_content_id + '"><ol class="envelop_content_list" id="' + envelop_content_id + '"></ol></div>'
+        + '</div>';
 
     $(new_html).appendTo(envelops_section);
 
@@ -64,7 +101,38 @@ function set_envelop_dom(envelop, envelop_name, envelop_content_id, envelop_inde
     }
 
     let envelop_panel = $(`.panel_${envelop_content_id}`);
-    envelop_panel.append('<button class="btn--danger delete_envelop_button item-fluid" onClick="openModal(\'<h3>Supprimer enveloppe ?</h3>\', function() {delete_envelop(\'' + envelop.type + '\', ' + envelop_index + ');}, \'Supprimer\')">Supprimer l\'enveloppe</button>');
+    envelop_panel.append(`<button class="btn--danger delete_envelop_button item-fluid" id="update_envelop_${envelop.type}_${envelop_index}">Supprimer l'enveloppe</button>`);
+    envelop_panel.append(`<button class="btn--primary update_envelop_button item-fluid" id="update_envelop_${envelop.type}_${envelop_index}">Modifier</button>`);
+
+    $(".update_envelop_button").off("click");
+    $(".update_envelop_button").on("click", function() {
+        let el_id = $(this).attr("id").split("_");
+
+        envelop_to_update = {
+            type: el_id[2],
+            index: el_id[3],
+            lines_to_delete: []
+        }
+        
+        set_update_envelop_modal();
+    });
+
+    $(".delete_envelop_button").off("click");
+    $(".delete_envelop_button").on("click", function() {
+        let el_id = $(this).attr("id").split("_");
+        let type = el_id[2];
+        let index = el_id[3];
+        let envelop = get_envelop_from_type_index(type, index);
+
+        openModal(
+            "<h3>Supprimer l'enveloppe ?</h3>",
+            function() {
+                delete_envelop(envelop);
+            },
+            'Supprimer'
+        );
+    });
+
 }
 
 // Set the envelops data according to their type
@@ -79,9 +147,7 @@ function set_envelops(envelops) {
         if (envelop.type == "cash") {
             cash_envelops.push(envelop);
 
-            let split_id = envelop._id.split('_');
-            let envelop_date = split_id[3] + "/" + split_id[2] + "/" + split_id[1];
-            let envelop_name = 'Enveloppe du ' + envelop_date;
+            let envelop_name = get_envelop_name(envelop);
             let envelop_content_id = 'content_cash_list_' + cash_index;
 
             set_envelop_dom(envelop, envelop_name, envelop_content_id, cash_index);
@@ -90,7 +156,7 @@ function set_envelops(envelops) {
         } else if (envelop.type == "ch") {
             ch_envelops.push(envelop);
 
-            let envelop_name = 'Enveloppe #' + envelop.display_id;
+            let envelop_name = get_envelop_name(envelop);
             let envelop_content_id = 'content_ch_list_' + ch_index;
 
             set_envelop_dom(envelop, envelop_name, envelop_content_id, ch_index);
@@ -125,18 +191,112 @@ function set_envelops(envelops) {
     }
 }
 
-function delete_envelop(type, index) {
-    if (is_time_to('delete_envelop', 1000)) {
-        openModal();
+/**
+ * Generate content & set listeners for the modal to update an envelop
+ */
+function set_update_envelop_modal() {
+    let envelop = get_envelop_from_type_index(envelop_to_update.type, envelop_to_update.index);
+    let envelop_name = get_envelop_name(envelop, 'long');
+
+    let modal_update_envelop = $('#templates #modal_update_envelop');
+    modal_update_envelop.find(".envelop_name").text(envelop_name);
+    modal_update_envelop.find(".envelop_lines").empty();
+
+    let update_line_template = $('#templates #update_envelop_line_template');
+
+    let cpt = 1;
+    for (let partner_id in envelop.envelop_content) {
+        let line = envelop.envelop_content[partner_id];
+    
+        update_line_template.find(".update_envelop_line").attr('id', `update_line_${partner_id}`);
+        update_line_template.find(".line_number").html(`${cpt}.&nbsp;`);
+        update_line_template.find(".line_partner_name").text(line.partner_name);
+
+        modal_update_envelop.find(".envelop_lines").append(update_line_template.html());
+
+        cpt += 1;
+    }
+
+    openModal(
+        modal_update_envelop.html(),
+        () => {
+            update_envelop();
+        },
+        'Mettre à jour',
+        true,
+        true,
+        () => {
+            envelop_to_update = null;
+        }
+    );
+
+    // Elements needs to be on the document so value & listeners can be set
+    for (let partner_id in envelop.envelop_content) {
+        let line = envelop.envelop_content[partner_id];
 
-        var envelop = null;
-        if (type == "cash") {
-            envelop = cash_envelops[index];
-        } else {
-            envelop = ch_envelops[index];
+        $(`#update_line_${partner_id}`).find('.line_partner_amount').val(line.amount);
+    }
+
+    modal.find('.envelop_comments').val((envelop.comments !== undefined) ? envelop.comments : '');
+
+    $(".delete_envelop_line_icon").off("click");
+    $(".delete_envelop_line_icon").on("click", function() {
+        let line_id = $(this).closest(".update_envelop_line").attr("id").split("_");
+        let partner_id = line_id[line_id.length-1];
+        
+        envelop_to_update.lines_to_delete.push(partner_id);
+        
+        $(this).hide();
+        $(this).closest(".update_envelop_line").find(".deleted_line_through").show();
+    })
+}
+
+/**
+ * Update an envelop in couchdb
+ */
+function update_envelop() {
+    if (is_time_to('update_envelop', 1000)) {
+        let envelop = get_envelop_from_type_index(envelop_to_update.type, envelop_to_update.index);
+
+        // Update lines amounts
+        let amount_inputs = modal.find('.line_partner_amount');
+        amount_inputs.each(function (i,e) {
+            let line_id = $(e).closest(".update_envelop_line").attr("id").split("_");
+            let partner_id = line_id[line_id.length-1];
+
+            envelop.envelop_content[partner_id].amount = parseInt($(e).val());
+        });
+
+        // Delete lines
+        for (let partner_id of envelop_to_update.lines_to_delete) {
+            delete(envelop.envelop_content[partner_id])
         }
 
+        // Envelop comments
+        envelop.comments = modal.find('.envelop_comments').val();
+        
+        dbc.put(envelop, function callback(err, result) {
+            envelop_to_update = null;
+
+            if (!err && result !== undefined) {
+                get_envelops();
+                toggle_success_alert("Enveloppe modifiée !");
+            } else {
+                alert("Erreur lors de la mise à jour de l'enveloppe. Si l'erreur persiste contactez un administrateur svp.");
+                console.log(err);
+            }
+        });
+    }
+}
+
+/**
+ * Delete an envelop from couchdb.
+ * @param {Object} envelop 
+ */
+function delete_envelop(envelop) {
+    if (is_time_to('delete_envelop', 1000)) {
         envelop._deleted = true;
+
         dbc.put(envelop, function callback(err, result) {
             if (!err && result !== undefined) {
                 toggle_deleted_alert();
@@ -150,6 +310,11 @@ function delete_envelop(type, index) {
     }
 }
 
+/**
+ * Send the request to save an envelop payments in Odoo. The envelop will be deleted from couchdb.
+ * @param {String} type 
+ * @param {String} index 
+ */
 function archive_envelop(type, index) {
     if (is_time_to('archive_envelop', 1000)) {
         $('#envelop_cashing_error').hide();
@@ -157,11 +322,7 @@ function archive_envelop(type, index) {
         // Loading on
         openModal();
 
-        if (type == "cash") {
-            envelop = cash_envelops[index];
-        } else {
-            envelop = ch_envelops[index];
-        }
+        let envelop = get_envelop_from_type_index(type, index);
 
         // Proceed to envelop cashing
         $.ajax({
@@ -204,7 +365,7 @@ function archive_envelop(type, index) {
                 }
 
                 if (display_success_alert) {
-                    toggle_success_alert();
+                    toggle_success_alert("Enveloppe encaissée !");
                 }
             },
             error: function() {
@@ -223,10 +384,10 @@ function get_envelops() {
     }).then(function (result) {
         set_envelops(result.rows);
     })
-        .catch(function (err) {
-            alert('Erreur lors de la récupération des enveloppes.');
-            console.log(err);
-        });
+    .catch(function (err) {
+        alert('Erreur lors de la récupération des enveloppes.');
+        console.log(err);
+    });
 }
 
 // Hande change in couc db

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 %}