display total values on top of the screen

orders/static/css/oders_helper_style.css

@@ -14,13 +14,13 @@
 .pill {
     border-radius: 30px;
     min-width: 200px;
-    min-height: 35px;
+    min-height: 40px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 8px 15px 8px 15px;
-    margin: 0 10px 5px 0;
+    padding: 10px 20px 10px 20px;
+    margin: 0 10px 5px 10px;
 }
 
 .disabled {
@@ -84,6 +84,14 @@
 
 /* -- Order data */
 #order_data_container {
+    font-size: 1.8rem;
+}
+
+#order_data_separator {
+    margin: 0 10px 0 10px;
+}
+
+#order_forms_container {
     margin-top: 30px;
     display: flex;  
     justify-content: space-evenly;
@@ -157,14 +165,7 @@
 /* -- Footer */
 
 #main_content_footer {
-    margin: 10px 0 35px 0;
-}
-
-#footer_orders_recap {
-    width: 100%;
-    display: flex;
-    justify-content: space-evenly;
-    margin-bottom: 15px;
+    margin: 20px 0 40px 0;
 }
 
 #footer_actions {
@@ -173,28 +174,23 @@
     justify-content: space-between;
 }
 
-#suppliers_total_values {
-    display: flex;
-}
-
-.supplier_total_item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
 /* -- Suppliers list */
 #suppliers_container {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap; 
-    margin: 20px 0 20px 0;
+    margin: 30px 0 20px 0;
 }
 
 .supplier_pill {
-    background-color: #e7e9ed;
+    background-color: #e7e9edc5;
+    border: 1px solid black;
+}
+
+.supplier_total_value_container {
+    font-size: 1.5rem;
+    font-style: italic;
 }
 
 .remove_supplier_icon {

orders/static/js/orders_helper.js

@@ -214,8 +214,11 @@ function check_products_data() {
                         // Update suppliers info 
                         for (let psi_index in products[p_index].suppliersinfo) {
                             const updated_psi = updated_suppliersinfo.find(psi => psi.supplier_id == products[p_index].suppliersinfo[psi_index].supplier_id);
-                            products[p_index].suppliersinfo[psi_index].package_qty = updated_psi.package_qty;
-                            products[p_index].suppliersinfo[psi_index].price = updated_psi.price;
+                            if (updated_psi !== undefined) {
+                                products[p_index].suppliersinfo[psi_index].package_qty = updated_psi.package_qty;
+                                products[p_index].suppliersinfo[psi_index].price = updated_psi.price;
+                            }
+
                         }
                     }
 
@@ -958,6 +961,7 @@ function display_suppliers() {
         let template = $("#templates #supplier_pill_template");
 
         template.find(".pill_supplier_name").text(supplier.display_name);
+        template.find(".supplier_pill").attr('id', `pill_supplier_${supplier.id}`);
         template.find(".remove_supplier_icon").attr('id', `remove_supplier_${supplier.id}`);
 
         supplier_container.append(template.html());
@@ -1441,17 +1445,14 @@ function unselect_all_rows() {
 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>`;
+        $(`#pill_supplier_${supplier.id}`).find('.supplier_total_value').text(supplier.total_value);
         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}€`);
+
+    order_total_value = parseFloat(order_total_value).toFixed(2);
+    $('#order_total_value').text(order_total_value);
 }
 
 /**

products/models.py

@@ -503,8 +503,8 @@ class CagetteProducts(models.Model):
 
             sales_average_params = {
                 'ids': ptids, 
-                'from': '2019-04-10', 
-                'to': '2019-08-10',
+                # 'from': '2019-04-10', 
+                # 'to': '2019-08-10',
             }
             sales = CagetteProducts.get_template_products_sales_average(sales_average_params)
 

templates/orders/helper.html

@@ -41,10 +41,14 @@
     
         <div class="header txtcenter">
             <h1>Aide à la commande</h1>
-            <i>Commande : <span class="order_name_container"></span></i>
+            <p id="order_data_container">
+                Commande : <span class="order_name_container"></span> 
+                <span id="order_data_separator"> | </span>
+                Total : <span id="order_total_value">0</span>€
+            </p>
         </div>
     
-        <div class="txtcenter" id="order_data_container">
+        <div class="txtcenter" id="order_forms_container">
             <form action="javascript:;" id="coverage_form">
                 <input type="number" name="coverage_days" id="coverage_days_input" placeholder="Nb jours de couverture" min="1">
                 <button type="submit" class='btn--primary'>Calculer les besoins</button>
@@ -55,7 +59,7 @@
             </form>
         </div>
     
-        <div class="txtcenter" id="suppliers_container"></div>
+        <div id="suppliers_container"></div>
     
         <div class="main" style="display:none;">
             <div class="table_area">
@@ -64,14 +68,6 @@
         </div>
 
         <div id="main_content_footer" style="display:none;">
-            <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>
             <div id="footer_actions">
                 <div class="add_product_container">
                     <div id="product_form_container">
@@ -121,6 +117,9 @@
                     <span class="pill_supplier_name"></span>
                     <i class="fas fa-times remove_supplier_icon"></i>
                 </div>
+                <div class="supplier_total_value_container">
+                    Total: <span class="supplier_total_value">0</span>€
+                </div>
             </div>
         </div>