POS-Server/app/views/product_wastes/new.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>Merma de productos</h1>
				</div>
				<!-- END PAGE TITLE -->
			</div>
		</div>
		<!-- END PAGE HEAD-->
		<!-- BEGIN PAGE CONTENT BODY -->
		<div class="page-content">
			<div class="container-fluid">
				<%= link_to product_wastes_path, {:class=>"btn blue-hoki pull-right margin-bottom-10"} do %>  <i class="fa fa-angle-left "></i> Regresar
				<% end %>
				<!-- 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"><%= notice %></div>
					<div class="row">
						<div class="col-md-12">
							<div class="portlet light">
								<div class="portlet-title">
									<div class="caption">
										<i class="fa fa-plus font-green"></i>
										<span class="caption-subject font-green bold uppercase">Resgistro de merma de productos</span>
										<span class="caption-helper"></span>
									</div>
								</div>
								<div class="portlet-body form form-horizontal">
									<div id="error_explanation"></div>
										<div class="form-body">
											<h4 class="form-section"> Agregar producto</h4>
											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<%= label_tag "product",  {:class=>"col-md-3 control-label"} do %>Producto <span class="required">*</span>
														<% end %>
														<div class="col-md-6">
															<input class="form-control" type="text" id="typeahead">
														</div>
													</div>
													<div class="form-group">
														<%= label_tag "quantity",  {:class=>"col-md-3 control-label"} do %>Cantidad mermada <span class="required">*</span>
														<% end %>
														<div class="col-md-9">
															<%= number_field_tag "quantity", "", class: 'form-control input-small' %>
														</div>
													</div>
													<div class="form-group">
														<%= label_tag "reason", {:class=>"col-md-3 control-label"} do %> Motivo <span class="required">*</span>
														<% end %>
														<div class="col-md-6">
															<%= text_area_tag "reason", "", class: 'form-control', rows: 5 %>
														</div>
													</div>
													<div class="form-group">
														<div class="col-md-offset-3 col-md-9">
															<button id="products_new" disabled class="btn btn-success" type="button" onclick="addRow()"> Agregar <i class="fa fa-plus"></i> </button>
														</div>
													</div>
												</div>
											</div>
											<!-- lista de productos -->
											<div class='row'>
												<div class="col-md-12">
													<h4 class="form-section"> Lista de productos a mermar</h4>
													<table class="table table-striped table-bordered table-hover tableadvanced" id="products_table">
														<thead>
															<tr>
																<th>#</th>
																<th>SKU</th>
																<th>Producto</th>
																<th>Stock anterior</th>
																<th>Merma</th>
																<th>Stock actual</th>
																<th>Motivo</th>
																<th>Acciones</th>
															</tr>
														</thead>
														<tbody>
														</tbody>
													</table>
													<%= render 'form' %>
												</div>
											</div>
										</div>
										<div class="form-actions">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var timeout = null;
	var selectedProduct;


	// initialize bloodhound engine
	var bloodhound = new Bloodhound({
		datumTokenizer: function (d) {
			return Bloodhound.tokenizers.whitespace(d.value);
		},
		queryTokenizer: Bloodhound.tokenizers.whitespace,
		remote: {
			url: '/find_products_from_stock?query=%QUERY',
			wildcard: '%QUERY'
		}
	});
	bloodhound.initialize();


	$('#typeahead').typeahead(
		{
			minLength: 3
		},
		{
			displayKey: 'name',
			source: bloodhound.ttAdapter(),
			limit: Infinity,
			templates: {
				empty: [
					'<div class="empty-message">',
						'No se encontró ningun producto. Favor de verificar',
					'</div>'
				].join('\n'),
				 suggestion: Handlebars.compile(
						'<div class="media">' +
							'<div class="pull-left">' +
									'<div class="media-object">' +
											'<img src="{{small_img}}" width="50" height="50"/>' +
									'</div>' +
							'</div>' +
							'<div class="media-body">' +
									'<h4 class="media-heading"><strong>{{name}}</strong> | {{sku}}</h4>' +
									'<p>{{barcode}}</p>' +
									'<p>{{description}}</p>' +
									'<p>{{display_attributes}}</p>' +
							'</div>' +
						'</div>')
			}
	});

	// this is the event that is fired when a user clicks on a suggestion
	$('#typeahead').bind('typeahead:selected', function(event, datum, name) {
		selectedProduct = datum;
		$('#products_new').attr('disabled', false);
	});

	function addRow() {
		if(selectedProduct && $('#quantity').val()) {
			$('#product_waste_product_id').val(selectedProduct.id);
			$('#product_waste_quantity').val($('#quantity').val());
			$('#product_waste_reason').val($('#reason').val());
			$('#new_product_waste').submit();
		$('#typeahead').typeahead('val','');
				$('#products_new').attr('disabled', true);
				$('#quantity').val("");
				$('#reason').val("");
		} else {
		toastr["error"]("Error, Se debe indicar la cantidad.");
		}
	}

		function deleteRow(input) {
			var table = $('#products_table').DataTable();
			var idText = input.closest('tr').attr('id');
			var productWasteId = idText.substring(idText.lastIndexOf('_') + 1, idText.length);
			$.ajax({
				type: "DELETE",
				url: "/product_wastes/" + productWasteId,
				dataType: "json",
				data: "",
				success: function(xhr, status, error) {
					table.row(input.closest('tr')).remove().draw();
				}
			});
		}


</script>