modify foodcourt order UI

app/assets/javascripts/addorder.js

@@ -481,7 +481,7 @@ $(function() {
         parent        = $('.set-item').attr('data-parent');
         total         = qty * price ;
         row ="<tr class='item_box' data-price ='"
-              +price+ "' data-toggle='modal' data-target='#sx_itemModal' 'data-instance ='"
+              +price+ "' data-toggle='modal' data-target='#sx_itemModal' data-instance ='"
               +name+ "' data-code='"+item_code+"' data-instance-code='"
               +code+"' data-attributes='"
               +attribute_arr+"' data-options ='"
@@ -506,7 +506,7 @@ $(function() {
         total             = qty * price ;
 
         row ="<tr class='item_box' data-price ='"
-              +price+ "' data-toggle='modal' data-target='#sx_itemModal' 'data-instance ='"
+              +price+ "' data-toggle='modal' data-target='#sx_itemModal' data-instance ='"
               +name+ "' data-code='"+item_code+"' data-instance-code='"
               +code+"' data-attributes='"
               +attribute_arr+"' data-options ='"
@@ -832,30 +832,39 @@ $(function() {
     }
     show_item_detail(item_data,"add_to_order");
     calculate_sub_total();
+    code = $('#item_code').text()
+    autoScrollToItem(code);
 
   }); //End add order  Click
 
   // click plus icon for add
   $(document).on('click', '.add_icon', function(event){
     var item_data = $(this);
+    code = $(this).data('item-code');
+
     if ($('#server_mode').val() != "cloud" && second_display_lookup == 2) {
       item = get_item(item_data,"add_icon");
       customer_display_view(item,"add");
     }
 
     show_item_detail(item_data,"add_icon");
-    code = $(this).data('item-code');
+    calculate_sub_total();
+    autoScrollToItem(code)
+  }); //End Add Icon Click
+
+  // scroll to element
+  function autoScrollToItem(code) {
+    console.log(code)
     element = $('.summary-items').find(`[data-code='${code}']`);
     item_qty = element.find('#item_qty').text()
-
     parent = element.parents('.card-text')
-    // auto scroll to last order item
+
     if (item_qty == 1) {
       $(parent).animate({
         scrollTop: $('.summary-items tbody tr:last').position().top - $('.summary-items tbody tr:first').position().top
       })
     }
-    // set border to current item
+
     $('.summary-items tbody tr').css({
       'background-color': '',
       'color': ''
@@ -865,18 +874,19 @@ $(function() {
       'background-color': '#2091F3',
       'color': '#fff'
     })
-    // element.css('background-color', '#2091F3').delay(500)
-    //        .queue(function() {
-    //           $(this).css('background-color', '').dequeue();
-    //        })
-
-    calculate_sub_total();
 
     if (isNotInView(element, parent)) {
       element.css({'background-color': '#2091F3'});
       scrollToELement(element);
     }
-  }); //End Add Icon Click
+  }
+
+  $(document.body).on('click', function() {
+    $('.summary-items tbody tr').css({
+      'background-color': '',
+      'color': ''
+    })
+  })
 
   function isNotInView(elem, parent){
     //            for scroll up                               |                       for  scroll down
@@ -938,7 +948,7 @@ $(function() {
     });
     if (append===0) {
       row ="<tr class='item_box' data-price ='"
-          +price+ " 'data-toggle='modal' data-target='#sx_itemModal' 'data-instance ='"
+          +price+ " 'data-toggle='modal' data-target='#sx_itemModal' data-instance ='"
           +instance+ "' data-qty='"+qty +"' data-code='"+data.attr('data-item-code')+"' data-instance-code='"
           +data.attr('data-instance-code')+"' data-attributes='"
           +data.attr('data-attributes')+"' data-options ='"
@@ -1104,7 +1114,7 @@ $(function() {
     name =  $(this).children('#item_name').text();
     qty  =  $(this).children('#item_qty').text();
     $('#modal-item-name').text(name);
-    $('#modal-qty').val(qty);
+    $(this).addClass('set-bg-color')
   });
 
   //click remove buttom in modal box
@@ -1131,11 +1141,15 @@ $(function() {
     $("#sx_item_set_detailModal").css({ 'display': "none" });
   });
   //click save buttom after change qty
-  $('#sx_itemModal').on('click','#save', function(){
+  $(document).on('click','#save', function(){
     if ($('#modal-qty').val()>0) {
       summary_items_filter();
       calculate_sub_total();
-
+      $('.set-bg-color').css({
+        'background-color': '#2091F3',
+        'color': '#fff'
+      })
+      $('.summary-items tbody tr').removeClass('set-bg-color');
     }else{
       swal("Opps", "Please enter number for qty ","warning");
     }

app/assets/stylesheets/reset.css

@@ -17,6 +17,16 @@ html, body {
   flex: 1 !important;  
 }
 
+table.fixed-header {
+  position: relative;
+  
+  thead th{
+    background: white;
+    position: sticky;
+    top: 0;
+  }
+}
+
 .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;