update edit form

app/assets/stylesheets/addorder.scss

@@ -62,6 +62,9 @@ section .content{
 .nav-tabs {
    background-color: #eeeeee;
 }
+.nav-tabs .nav-link {
+  padding: 0.7286rem 0.2575
+}
 .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
     background-color: #fff;
     border-left: 6px solid #111;

app/views/origami/sale_edit/edit.html.erb

@@ -1,7 +1,7 @@
 <div class="container-fluid">
 <div class="row">
   <!-- Column Two -->
-  <div class="col-lg-10 col-md-10 col-sm-10">
+  <div class="col-lg-8 col-md-8 col-sm-8">
     <div class="card">
       <div class="card-header">
         <div><strong id="order-title">INVOICE DETAILS </strong></div>
@@ -29,12 +29,12 @@
           <table class="table " id="order-items-table">
             <thead>
             <tr>
-              <th width="4%">#</th>
+              <th width="2%">#</th>
               <th class="" width="20%">Items</th>
-              <th style="" width="13%">QTY
+              <th style="" width="5%">QTY
-              </td>
+              </th>
-              <th class="" width="13%">Price
+              <th class="" width="10%">Price
-              </td>
+              </th>
               <!-- <th class='' width="17%"> Total </th> -->
               <th class='' width="20%"> Action</th>
             </tr>
@@ -53,46 +53,46 @@
                   unless sale_item.price == 0
                 %>
                     <tr>
-                      <td width="4%"><%= count %></td>
+                      <td class="p-1" width="2%"><%= count %></td>
-                      <td class='' width="20%">
+                      <td class="p-2" width="20%">
                         <%= sale_item.product_name %>
                       </td>
                       <% if sale_item.remark != 'void' && sale_item.remark != 'edit' && sale_item.remark != 'foc' %>
-                          <td class='' width="10%">
+                          <td class="p-1" width="5%">
                             <input id="<%= sale_item.id %>_qty" data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.qty %>" class="form-control "/>
                           </td>
-                          <td class='' width="13%">
+                          <td class="p-1" width="10%">
                             <input id="<%= sale_item.id %>_price" data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.unit_price %>" class="form-control"/>
                           </td>
                           <!-- <td class='' width="17%">
                         <input id="<%= sale_item.id %>_price" data-id ="<%= sale_item.id %>" type="text" value="<%= sale_item.price %>" class="form-control"/>
                     </td> -->
-                          <td class='' width="25%">
+                          <td class="p-1" width="25%">
                             <button data-id="<%= sale_item.id %>" class='btn btn-lg bg-blue waves-effect update'>Update</button>
                             <button data-id="<%= sale_item.id %>" class='btn btn-lg bg-danger waves-effect void'>Void</button>
                             <button data-id="<%= sale_item.id %>" class='btn btn-lg bg-red waves-effect foc'>FOC</button>
                           </td>
 
                       <% elsif sale_item.qty.to_i < 0 || sale_item.remark == 'edit' %>
-                          <td class='' width="10%">
+                          <td class="p-1" width="5%">
                             <input data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.qty %>" class="form-control" disabled/>
                           </td>
-                          <td class='' width="13%">
+                          <td class='' width="10%">
                             <input data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.unit_price %>" class="form-control" disabled/>
                           </td>
                           <!-- <td class='' width="17%">
                     <input data-id ="<%= sale_item.id %>" type="text" value="<%= sale_item.price %>" class="form-control" disabled/>
                  </td> -->
-                          <td class='' width="25%">
+                          <td class="p-1" width="25%">
                             <button data-id="<%= sale_item.id %>" class='btn btn-lg bg-danger waves-effect cancel'>Cancel
                               Void/Update
                             </button>
                           </td>
                       <% else %>
-                          <td class='' width="13%">
+                          <td class="p-1" width="5%">
                             <input data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.qty %>" class="form-control" disabled/>
                           </td>
-                          <td class='' width="13%">
+                          <td class="p-1" width="10%">
                             <input data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.price %>" class="form-control" disabled/>
                           </td>
                           <td></td>
@@ -108,7 +108,7 @@
         <div class="card-footer">
           <table class="table" id="order-charges-table" border="0">
             <tr>
-              <td width="50%"><strong>Sub Total:</strong></td>
+              <td class="p-1" width="50%"><strong>Sub Total:</strong></td>
               <td><strong id="order-sub-total"><%= sub_total %></strong></td>
             </tr>
             <tr class="rebate_amount"></tr>
@@ -117,12 +117,42 @@
       </div>
     </div>
   </div>
-
+  <div class="col-md-3">
+    <div class="card p-l-15 p-r-15">
+      <div class="card-block">
+        <div class="row bottom">
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="1" data-type="num">1</div>
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="2" data-type="num">2</div>
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="3" data-type="num">3</div>
+       </div>
+       <div class="row bottom">
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="4" data-type="num">4</div>
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="5" data-type="num">5</div>
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="6" data-type="num">6</div>
+       </div>
+       <div class="row bottom">
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="7" data-type="num">7</div>
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="8" data-type="num">8</div>
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="9" data-type="num">9</div>
+       </div>
+       <div class="row bottom">
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="0" data-type="num">0</div>
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="." data-type="num">.</div>
+         <div class="col-md-4 cashier_number border-top border- border-left" data-value="00" data-type="num">00</div>
+       </div>
+       <div class="row bottom">
+         <div class="col-md-4 cashier_number border-top border- border-left green" data-type="nett">Nett</div>
+         <div class="col-md-4 cashier_number border-top border- border-left red" data-type="del">Del</div>
+         <div class="col-md-4 cashier_number border-top border- border-left orange" data-type="clr">Clr</div>
+       </div>  
+     </div>   
+   </div>  
+ </div>
   <!-- Column Three -->
-  <div class="col-lg-2 col-md-2 col-sm-2">
+  <div class="col-lg-1 col-md-1 col-sm-1">
     <!-- Waiter Buttons -->
     <button type="button" class="btn btn-block btn-lg bg-default waves-effect" id='back'><i class="material-icons">reply</i>Back</button>
-    <button type="button" class="btn btn-block btn-lg bg-danger waves-effect" id='cancel_all_void'>Cancel All Void</button>
+    <button type="button" class="btn btn-danger btn- action-btn" id='cancel_all_void'>Cancel All Void</button>
     <button type="button" class="btn btn-block btn-lg bg-blue waves-effect" id='apply'>Apply</button>
   </div>
 </div>
@@ -225,4 +255,49 @@
             }
         });
     })
+
+    $( "input" ).focusin(function() {
+      $('.addfocus').removeClass('addfocus'); 
+      $( this ).addClass('addfocus');
+    });
+
+    $(".cashier_number").on('click', function(event){
+      if(event.handled !== true) {
+        
+        var original_value='';
+        // original_value = $('.addfocus').val();
+
+        var input_type = $(this).attr("data-type");
+
+        switch (input_type) {
+          case 'num':
+          var input_value = $(this).attr("data-value");         
+          if (original_value == "0.0"){
+            $('.addfocus').val(input_value);            
+          }
+          else{
+            $('.addfocus').val(original_value + '' + input_value);            
+          }
+          break;
+
+          case 'add':
+          var input_value = $(this).attr("data-value");
+          amount = parseInt(input_value);
+          $('.addfocus').val(amount);                   
+          break;
+
+          case 'del' :
+          var discount_text=$('.addfocus').val();
+          $('.addfocus').val(discount_text.substr(0,discount_text.length-1));   
+          break;
+
+          case 'clr':
+          $('.addfocus').val("");              
+          break;
+        }
+        event.handled = true;
+      } else {
+        return false;
+      }
+    });
 </script>