display total order values

orders/static/css/oders_helper_style.css

@@ -154,12 +154,34 @@
     cursor: pointer;
 }
 
-/* -- Bottom action button */
+/* -- Footer */
 
 #main_content_footer {
+    margin: 10px 0 35px 0;
+}
+
+#footer_orders_recap {
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    margin-bottom: 15px;
+}
+
+#footer_actions {
+    width: 100%;
     display: flex;
     justify-content: space-between;
-    margin: 15px 0 35px 0;
+}
+
+#suppliers_total_values {
+    display: flex;
+}
+
+.supplier_total_item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 /* -- Suppliers list */

orders/static/js/orders_helper.js

@@ -252,7 +252,7 @@ function add_supplier() {
     const user_input = $("#supplier_input").val();
 
     // Check if user input is a valid supplier
-    const supplier = suppliers_list.find(s => s.display_name === user_input);
+    let supplier = suppliers_list.find(s => s.display_name === user_input);
 
     if (supplier === undefined) {
         alert("Le fournisseur renseigné n'est pas valide.\n"
@@ -271,6 +271,7 @@ function add_supplier() {
 
     openModal();
 
+    supplier.total_value = 0;
     selected_suppliers.push(supplier);
 
     let url = "/orders/get_supplier_products";
@@ -467,6 +468,25 @@ function is_product_related_to_supplier(product, supplier) {
     return product.suppliersinfo.find(s => s.supplier_id === supplier.id) !== undefined;
 }
 
+/**
+ * Calculate the total value purchased for all supplier
+ */
+function _compute_total_values_by_supplier() {
+    // Reinit
+    for (let s of selected_suppliers) {
+        s.total_value = 0;
+    }
+
+    for (let p of products) {
+        for (let supinfo of p.suppliersinfo) {
+            let supplier_index = selected_suppliers.findIndex(s => s.id == supinfo.supplier_id);
+
+            let product_supplier_value = ('qty' in supinfo) ? supinfo.qty * supinfo.price : 0;
+            selected_suppliers[supplier_index].total_value += product_supplier_value;
+        }
+    }
+}
+
 /* - PRODUCT */
 
 /**
@@ -1263,6 +1283,7 @@ function display_products(params) {
                 .draw();
 
             update_cdb_order();
+            display_total_values();
         } else {
             $(this).val('');
         }
@@ -1408,6 +1429,25 @@ function unselect_all_rows() {
 }
 
 /**
+ * Display the total values for each supplier & the global total value
+ */
+function display_total_values() {
+    _compute_total_values_by_supplier();
+
+    $('#suppliers_total_values_container').empty();
+
+    let total_values_content = '<ul>';
+    let order_total_value = 0;
+    for (let supplier of selected_suppliers) {
+        total_values_content += `<li>${supplier.display_name} : ${supplier.total_value}€</li>`;
+        order_total_value += supplier.total_value;
+    }
+    total_values_content += '</ul>';
+    $('#suppliers_total_values_container').append(total_values_content);
+    $('#order_total_value').text(`${order_total_value}€`);
+}
+
+/**
  * Update DOM display on main screen
  */
 function update_main_screen(params) {
@@ -1421,6 +1461,7 @@ function update_main_screen(params) {
     $(".order_name_container").text(order_doc._id);
     display_suppliers();
     display_products(params);
+    display_total_values();
 
     // Re-select previously selected rows
     if (selected_rows.length > 0) {

templates/orders/helper.html

@@ -64,18 +64,28 @@
         </div>
 
         <div id="main_content_footer" style="display:none;">
-            <div class="add_product_container">
-                <div id="product_form_container">
-                    <form action="javascript:;" id="product_form">
-                        <input type="text" name="article" id="product_input" placeholder="Rechercher un article">
-                        <button type="submit" class='btn--primary'>Ajouter l'article</button>
-                    </form>
+            <div id="footer_orders_recap">
+                <div id="suppliers_total_values">
+                    <h4>Total /fournisseur : </h4><div id="suppliers_total_values_container"></div>
+                </div>
+                <div id="order_total_value_container">
+                    <h4>Total : <span id="order_total_value"></span></h4>
                 </div>
             </div>
-            <button type="button" class='btn--primary' id="create_orders">
-                Générer les commandes
-            </button>
-        </div>
+            <div id="footer_actions">
+                <div class="add_product_container">
+                    <div id="product_form_container">
+                        <form action="javascript:;" id="product_form">
+                            <input type="text" name="article" id="product_input" placeholder="Rechercher un article">
+                            <button type="submit" class='btn--primary'>Ajouter l'article</button>
+                        </form>
+                    </div>
+                </div>
+                <button type="button" class='btn--primary' id="create_orders">
+                    Générer les commandes
+                </button>
+            </div>
+            </div>
     </div>
 
     <div id="orders_created" class="page_content" style="display:none;">