Merge branch 'ticket_2416' into 'dev_cooperatic'

#2416 Fixing Mozilla input number lack off blur event firing

See merge request !135

orders/static/js/orders_helper.js

@@ -9,7 +9,8 @@ var suppliers_list = [],
     new_product_supplier_association = {
         package_qty: null,
         price: null
-    };
+    },
+    qties_values = {};
 
 var dbc = null,
     sync = null,
@@ -30,6 +31,10 @@ var dbc = null,
 
 var clicked_order_pill = null;
 
+let userAgent = navigator.userAgent;
+
+
+
 var timerId;
 /* - UTILS */
 
@@ -124,12 +129,74 @@ function debounceFunction(func, delay = 1000) {
     timerId = setTimeout(func, delay);
 }
 /* - PRODUCTS */
+var process_new_product_qty = function(input) {
+    // Remove line coloring on input blur
+    const row = $(input).closest('tr');
+
+    row.removeClass('focused_line');
+
+    let val = ($(input).val() == '') ? 0 : $(input).val();
+
+    const id_split = $(input).attr('id')
+        .split('_');
+    const prod_id = id_split[1];
+    const supplier_id = id_split[3];
+
+    if (val == -1) {
+        let modal_end_supplier_product_association = $('#templates #modal_end_supplier_product_association');
+
+        const product = products.find(p => p.id == prod_id);
+
+        modal_end_supplier_product_association.find(".product_name").text(product.name);
+        const supplier = selected_suppliers.find(s => s.id == supplier_id);
+
+        modal_end_supplier_product_association.find(".supplier_name").text(supplier.display_name);
+
+        openModal(
+            modal_end_supplier_product_association.html(),
+            () => {
+                if (is_time_to('validate_end_supplier_product_association')) {
+                    end_supplier_product_association(product, supplier);
+                }
+            },
+            'Valider',
+            false,
+            true,
+            () => {
+                // Reset value in input on cancel
+                const psi = product.suppliersinfo.find(psi_item => psi_item.supplier_id == supplier_id);
+
+                $(input).val(psi.qty);
+            }
+        );
+    } else {
+        val = parseFloat(val);
 
+        // If value is a number
+        if (!isNaN(val)) {
+            // Save value
+            save_product_supplier_qty(prod_id, supplier_id, val);
+
+            // Update row
+            const product = products.find(p => p.id == prod_id);
+            const new_row_data = prepare_datatable_data([product.id])[0];
+
+            products_table.row($(input).closest('tr')).data(new_row_data)
+                .draw();
+
+            debounceFunction(update_cdb_order);
+            display_total_values();
+        } else {
+            $(input).val('');
+        }
+    }
+};
 /**
  * Add a product.
  *
  * @returns -1 if validation failed, 0 otherwise
  */
+
 function add_product() {
     const user_input = $("#product_input").val();
 
@@ -192,6 +259,7 @@ function add_product() {
 }
 function compute_purchase_qty_for_coverage(product, coeff, stock, incoming_qty, daily_conso, days) {
     let purchase_qty_for_coverage = null;
+
     purchase_qty_for_coverage = days * daily_conso - stock - incoming_qty + product.minimal_stock;
     purchase_qty_for_coverage = (purchase_qty_for_coverage < 0) ? 0 : purchase_qty_for_coverage;
 
@@ -207,20 +275,21 @@ function compute_purchase_qty_for_coverage(product, coeff, stock, incoming_qty,
 
 function compute_and_affect_product_supplier_quantities(coeff, days) {
     for (const [
-                key,
-                product
-            ] of Object.entries(products)) {
-                if ('suppliersinfo' in product && product.suppliersinfo.length > 0) {
-                    let purchase_qty_for_coverage = null;
-
-                    // Durée couverture produit = (stock + qté entrante + qté commandée ) / conso quotidienne
-                    const stock = product.qty_available;
-                    const incoming_qty = product.incoming_qty;
-                    const daily_conso = product.daily_conso;
-                    purchase_package_qty_for_coverage = compute_purchase_qty_for_coverage(product, coeff, stock, incoming_qty, daily_conso, days);
-                    // Set qty to purchase for first supplier only
-                    products[key].suppliersinfo[0].qty = purchase_package_qty_for_coverage;
-                }
+        key,
+        product
+    ] of Object.entries(products)) {
+        if ('suppliersinfo' in product && product.suppliersinfo.length > 0) {
+            let purchase_qty_for_coverage = null;
+
+            // Durée couverture produit = (stock + qté entrante + qté commandée ) / conso quotidienne
+            const stock = product.qty_available;
+            const incoming_qty = product.incoming_qty;
+            const daily_conso = product.daily_conso;
+
+            purchase_package_qty_for_coverage = compute_purchase_qty_for_coverage(product, coeff, stock, incoming_qty, daily_conso, days);
+            // Set qty to purchase for first supplier only
+            products[key].suppliersinfo[0].qty = purchase_package_qty_for_coverage;
+        }
     }
 }
 
@@ -231,9 +300,10 @@ function compute_and_affect_product_supplier_quantities(coeff, days) {
  * Set the computed qty for the first supplier only.
  */
 function compute_products_coverage_qties() {
-   return new Promise((resolve) => {
+    return new Promise((resolve) => {
         const pc_adjust = $('#percent_adjust_input').val();
         let coeff = 1;
+
         if (!isNaN(parseFloat(pc_adjust))) {
             coeff = (1 + parseFloat(pc_adjust) /100);
         }
@@ -242,20 +312,20 @@ function compute_products_coverage_qties() {
             compute_and_affect_product_supplier_quantities(coeff, order_doc.coverage_days);
         } else if (order_doc.targeted_amount != null) {
             const small_step = 0.1,
-                  max_iter = 182; // Assume that no more than 1/2 year coverage is far enough
+                max_iter = 182; // Assume that no more than 1/2 year coverage is far enough
             let go_on = true,
                 iter = 0,
                 days = 1,
-                step = 1; 
+                step = 1;
 
             //Let's compute the nearst amount, by changing days quantity
-            while(go_on == true && iter < max_iter) {
+            while (go_on == true && iter < max_iter) {
                 order_total_value = 0;
                 compute_and_affect_product_supplier_quantities(coeff, days);
                 _compute_total_values_by_supplier();
                 for (let supplier of selected_suppliers) {
                     order_total_value += supplier.total_value;
-                 }
+                }
                 let order_total_value_f = parseFloat(order_total_value),
                     targeted_amount_f = parseFloat(order_doc.targeted_amount);
 
@@ -277,7 +347,7 @@ function compute_products_coverage_qties() {
                 iter++;
             }
 
-        } 
+        }
 
         resolve();
     });
@@ -1674,71 +1744,14 @@ function display_products(params) {
         row.addClass('focused_line');
     });
 
-    // Manage data on inputs blur
-    $('#products_table').on('blur', 'tbody td .product_qty_input', function () {
-        // Remove line coloring on input blur
-        const row = $(this).closest('tr');
-
-        row.removeClass('focused_line');
-
-        let val = ($(this).val() == '') ? 0 : $(this).val();
-
-        const id_split = $(this).attr('id')
-            .split('_');
-        const prod_id = id_split[1];
-        const supplier_id = id_split[3];
-
-        if (val == -1) {
-            let modal_end_supplier_product_association = $('#templates #modal_end_supplier_product_association');
-
-            const product = products.find(p => p.id == prod_id);
-
-            modal_end_supplier_product_association.find(".product_name").text(product.name);
-            const supplier = selected_suppliers.find(s => s.id == supplier_id);
-
-            modal_end_supplier_product_association.find(".supplier_name").text(supplier.display_name);
-
-            openModal(
-                modal_end_supplier_product_association.html(),
-                () => {
-                    if (is_time_to('validate_end_supplier_product_association')) {
-                        end_supplier_product_association(product, supplier);
-                    }
-                },
-                'Valider',
-                false,
-                true,
-                () => {
-                    // Reset value in input on cancel
-                    const psi = product.suppliersinfo.find(psi_item => psi_item.supplier_id == supplier_id);
-
-                    $(this).val(psi.qty);
-                }
-            );
-        } else {
-            val = parseFloat(val);
-
-            // If value is a number
-            if (!isNaN(val)) {
-                // Save value
-                save_product_supplier_qty(prod_id, supplier_id, val);
-
-                // Update row
-                const product = products.find(p => p.id == prod_id);
-                const new_row_data = prepare_datatable_data([product.id])[0];
 
-                products_table.row($(this).closest('tr')).data(new_row_data)
-                    .draw();
-
-                debounceFunction(update_cdb_order);
-                display_total_values();
-            } else {
-                $(this).val('');
-            }
-        }
-    })
+    // Manage data on inputs blur
+    $('#products_table')
+        .on('blur', 'tbody td .product_qty_input', function () {
+            process_new_product_qty(this);
+        })
         .on('keypress', 'tbody td .product_qty_input', function(e) {
-            // Validate on Enter pressed
+        // Validate on Enter pressed
             if (e.which == 13) {
                 $(this).blur();
             }
@@ -1756,9 +1769,9 @@ function display_products(params) {
 
                 // Scroll to a position where the target input is not hidden by the sticky suppliers container
                 const suppliers_container_top_offset =
-                    $("#suppliers_container").offset().top
-                    - $(window).scrollTop()
-                    + $("#suppliers_container").outerHeight();
+                $("#suppliers_container").offset().top
+                - $(window).scrollTop()
+                + $("#suppliers_container").outerHeight();
                 const next_input_top_offset = next_input.offset().top - $(window).scrollTop();
 
                 if (next_input_top_offset < suppliers_container_top_offset) {
@@ -1786,7 +1799,7 @@ function display_products(params) {
             }
         })
         .on('click', 'tbody td .product_actions', function(e) {
-            // Save / unsave selected row
+        // Save / unsave selected row
             const p_id = products_table.row($(this).closest('tr')).data().id;
             const product = products.find(p => p.id == p_id);
 
@@ -2251,15 +2264,15 @@ $(document).ready(function() {
                     order_doc.coverage_days = days_val;
                     order_doc.targeted_amount = amount_val;
                     compute_products_coverage_qties()
-                    .then(() => {
-                        debounceFunction(update_cdb_order);
-                        update_main_screen();
-                    })
+                        .then(() => {
+                            debounceFunction(update_cdb_order);
+                            update_main_screen();
+                        });
 
                 } else {
                     $("#coverage_days_input").val(order_doc.coverage_days || '');
                     $('#targeted_amount_input').val(order_doc.targeted_amount || '');
-                    alert("Ni le nombre de jours de couverture, ni le montant à atteindre sont correctement renseignés")
+                    alert("Ni le nombre de jours de couverture, ni le montant à atteindre sont correctement renseignés");
 
                 }
             }
@@ -2315,11 +2328,11 @@ $(document).ready(function() {
                 check_products_data()
                     .then(() => {
                         compute_products_coverage_qties()
-                        .then(() => {
-                            update_main_screen();
-                            debounceFunction(update_cdb_order);
-                            closeModal();
-                        })
+                            .then(() => {
+                                update_main_screen();
+                                debounceFunction(update_cdb_order);
+                                closeModal();
+                            });
 
                     });
             }
@@ -2590,6 +2603,30 @@ $(document).ready(function() {
                 panel.style.display = "block";
             }
         });
+
+        if (/Firefox\//.exec(userAgent)) {
+            // needed to prevent bug using number input arrow to change quantity (https://bugzilla.mozilla.org/show_bug.cgi?id=1012818)
+            // Have to capture mousedown and mouseup events, instead of using only click event
+            // Indeed, capturing click only remove the ability to click to have focus on the input to type a number.
+            $(document).on("mousedown", '[type="number"]', function() {
+                const clicked = this;
+
+                qties_values[$(clicked).attr('id')] = $(clicked).val();
+
+            });
+            $(document).on("mouseup", '[type="number"]', function() {
+                const clicked = this;
+
+                try {
+                    if ($(clicked).val() != qties_values[$(clicked).attr('id')]) {
+                        process_new_product_qty(clicked);
+                    }
+                } catch (err) {
+                    console.log(err);
+                }
+            });
+        }
+
     } else {
         $('#not_connected_content').show();
     }