POS-Server/app/views/transfers/verify_transfer.html.erb

<!-- BEGIN CONTAINER -->
<div class="page-container">
	<!-- BEGIN CONTENT -->
	<div class="page-content-wrapper">
		<!-- BEGIN CONTENT BODY -->
		<!-- BEGIN PAGE HEAD-->
		<div class="page-head">
			<div class="container-fluid">
				<!-- BEGIN PAGE TITLE -->
				<div class="page-title">
					<h1>Traspasos</h1>
				</div>
				<!-- END PAGE TITLE -->
			</div>
		</div>
		<!-- END PAGE HEAD-->
		<!-- BEGIN PAGE CONTENT BODY -->
		<div class="page-content">
			<div class="container-fluid">
				<!-- BEGIN PAGE BREADCRUMBS -->
				<ul class="page-breadcrumb breadcrumb">
					<%= render_breadcrumbs :tag => :li, :separator => ' <i class="fa fa-circle"></i> ' %>
				</ul>
				<!-- END PAGE BREADCRUMBS -->
				<!-- BEGIN PAGE CONTENT INNER -->
				<div class="page-content-inner">
					<div id="notice">
						<% if success %>
						<div class="alert alert-success">
							<p><%= success %></p>
						</div>
						<% elsif warning %>
						<div class="alert alert-warning">
							<p><%= warning %></p>
						</div>
						<% end %>
					 </div>
					<div class="row">
						<div class="col-md-12">
							<div class="portlet light ">
								<div class="portlet-title">
									<div class="caption">
										<i class="fa fa-list "></i>
										<span class="caption-subject bold uppercase">Verificar traspaso</span>
									</div>
									<div class="actions">
										<%= link_to  transfers_path, {:class=>"btn blue-hoki pull-right margin-bottom-10"} do %>  <i class="fa fa-angle-left "></i> Regresar
										<% end %>
									</div>
								</div>
								<div class="form-horizontal">
									<div class="portlet-body form">
										<div class="row" style='margin-bottom: 20px'>
											<div class="col-md-6">
												<%= hidden_field_tag :transfer_id, @transfer.id %>
												<!-- fecha traspaso -->
										        <div class="form-group">
										          <%= label_tag "transfer_date", "Fecha", {:class=>"col-md-3 control-label"} do %> Fecha del traspaso
										          <span class="required">*</span>
										          <% end %>
										              <div class="col-sm-6" style="padding-left:0px;padding-right:0px;">
										                  <div class='input-group date' id='datetimepicker1'>
										                      <input type='text' class="form-control" disabled/>
										                      <span class="input-group-addon">
										                          <span class="glyphicon glyphicon-calendar"></span>
										                      </span>
										                  </div>
										              </div>
										        </div>
									        	<!-- origen traspaso -->  
										        <div class="form-group">
													<%= label_tag "origin", "Punto de venta origen", {:class=>"col-md-3 control-label"} do %>Origen
														<span class="required">*</span>
														<% end %>
													<div class="input-group col-md-6 select2-bootstrap-prepend">
														<%= text_field_tag "origin", (@transfer.origin_is_pointsale == 1 ? Pointsale.find(@transfer.origin_id).name : Warehouse.find(@transfer.origin_id).name), class: 'form-control', disabled: true %>
													</div>
												</div> 		
											</div>	
											<div class="col-md-6">
										        <div class="form-group">
										           <%= label_tag :observations, "Observaciones", {:class=>"col-md-3 control-label"} %>
										           <div class="col-md-9">
										             <%= text_area_tag :observations, nil, :rows => 5, :cols => 15, :class => 'form-control' %>
										           </div>
									         	</div>
											</div>										
										</div>
										<h4 class="form-section">Lista de productos</h4>
								      	<table class="table table-striped table-bordered table-hover tableadvanced" id="products_table">
								        	<thead>
								          		<tr>
								            		<th width="5%">#</th>
								            		<th width="10%">Imagen</th>            
								            		<th width="15%">SKU</th>
								            		<th width="15%">Producto</th>
								            		<th width="20%">Cantidad enviada</th>
								            		<th width="20%">Cantidad recibida</th>
								          		</tr>
									        </thead>
								        	<tbody>
									          <% @transfer.transfer_details.each_with_index do |detail, key| %>
									          	<tr id="transfer_detail_<%= detail.id %>">
									          		<td>
									          			<%= key + 1 %>
									          		</td>
									          		<td class="text-center">
									          			<img src="<%= detail.product.small_img %>" width="100" height="100"/>
									          		</td>
									          		<td>
									          			<%= detail.product.sku %>
									          		</td>
									          		<td>
									          			<%= detail.product.name %><br>
    													<%= detail.product.display_attributes %>

									          		</td>
									          		<td>
									          			<%= detail.quantity %>
									          		</td>
									          		<td>
									          			<input type="number" min="0" max="<%=detail.quantity %>" class="form-control input-medium" oninput="sendAdjustment($(this))" value="<%= detail.adjustment %>">
									          		</td>
									          	</tr>
									          <% end %>
									        </tbody>
								      	</table>
									</div>
								    <!-- acciones del form -->
								    <div class="form-actions">
								      <div class="row">
								        <div class="col-md-9">
								          <button type="button" class="btn green" onclick="acceptTransfer()">Guardar</button>
								          <%= link_to 'Cancelar', transfers_path, {:class=>"btn default"} %>
								        </div>
								      </div>
								    </div>
								  </div>									
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- END PAGE CONTENT INNER -->
			</div>
		</div>
		<!-- END PAGE CONTENT BODY -->
		<!-- END CONTENT BODY -->
	</div>
	<!-- END CONTENT -->	
</div>
<script type="text/javascript">
  	var timeout = null;
   	$(document).on("page:change", function() {
 		App.init();

     $('#datetimepicker1').datetimepicker({
      icons: {
        date: "fa fa-calendar"
      },
      format: "DD/MM/YYYY",
      defaultDate: new Date(<%= Time.parse(@transfer.transfer_date.to_s).utc.to_i*1000 %>)
     }); 

 	});

 	function sendAdjustment(input) {
 		if(input.val()) {
 			clearTimeout(timeout);
 			timeout = setTimeout(function () {
	  			var idText = input.closest('tr').attr('id');
	      		var transferDetailId = idText.substring(idText.lastIndexOf('_') + 1, idText.length);
  		      	$('#products_table tbody tr td:nth-child(6) input').each(function() {
	         		$(this).attr('disabled', true);
		      	}); 

		      	$.ajax({
		          	type: "PUT",
		          	url: "/transfers/" + $('#transfer_id').val() +"/detail_adjustment/" + transferDetailId,		          	
		          	dataType: "json",
		          	data: {transfer_details: {adjustment: input.val()}},
		          	success: function(xhr, status, error) {
		  		      	$('#products_table tbody tr td:nth-child(6) input').each(function() {
			         		$(this).attr('disabled', false);
				      	}); 		          		
		          	}
	      		});  
			}, 300);
 		}
 	}

 	function acceptTransfer() {
      	$.ajax({
          	type: "PUT",
          	url: "/transfers/" + $('#transfer_id').val() +"/accept_transfer",
          	dataType: "script",
          	data: {
          		transfer: {
          			observations: $('#observations').val()
          		}
          	},
          	success: function(xhr, status, error) {		

          	}
  		});   		
 	}
</script>