cell coloring if product not available for supplier

orders/static/css/oders_helper_style.css

@@ -2,6 +2,14 @@
     margin-top: 30px;
 }
 
+#products_table_filter{
+    text-align: right !important;
+}
+
+#products_table_filter input{
+    height: 50px;
+}
+
 #supplier_input {
     width: 500px;
     margin-right: 10px;
@@ -12,6 +20,10 @@
     width: 100px;
 }
 
+.product_not_from_supplier {
+    background-color: #e7e9ed;
+}
+
 
 #suppliers_container {
     display: flex;
@@ -39,3 +51,6 @@
     margin-left: 5px;
     cursor: pointer;
 }
+
+
+

orders/static/js/orders_helper.js

@@ -255,14 +255,12 @@ function prepare_datatable_columns() {
             data: supplier_column_name(supplier),
             title: supplier.display_name,
             width: "8%",
-            className:"dt-body-center",
+            className:"dt-body-center supplier_input_cell",
             render: function (data, type, full) {
                 if (data === false) {
                     return "X";
                 } else {
                     const input_id = `product_${full.id}_supplier_${supplier.id}_qty_input`;
-
-
                     return `<input type="number" class="product_qty_input" id=${input_id} value=${data}>`;
                 }
             }
@@ -302,13 +300,31 @@ function display_products() {
         columns: columns,
         order: [
             [
-                2,
+                5,  // Order by default by first supplier
                 "asc"
             ]
         ],
-        dom: 'lrtip', // TODO: change DOM display?
+        stripeClasses: [],  // Remove datatable cells coloring
+        orderClasses: false,
         iDisplayLength: 100,
-        language: {url : '/static/js/datatables/french.json'}
+        language: {url : '/static/js/datatables/french.json'},
+        createdRow: function( row, data, dataIndex ) {
+            for (const cell_node of row.cells) {
+                const cell = $(cell_node);
+                if (cell.hasClass("supplier_input_cell")) {
+                    if (cell.text() == "X") {
+                        cell.addClass( 'product_not_from_supplier' );
+                    } else {
+                        // TODO: supplier shortage cell coloring, when supplier shortage usecase is defined
+
+                        // let val = parseFloat(cell.find('.product_qty_input').val());
+                        // if (!isNaN(val) && val < 0) {
+                        //     cell.addClass( 'product_supplier_shortage' );
+                        // }
+                    }
+                }
+            }
+          }
     });
 
     $('.main').show();