POS-Server/app/views/pointsales/_assign_delete_prods.html.erb

<%= form_for(@pointsale, :remote => true ,:html => {:class=>"form-horizontal"}) do |f| %>
	<%= hidden_field_tag :todo, @todo %>
	<div class="portlet-body form">

		<% if @pointsale.errors.any? %>
			<div class="alert alert-danger">
				<strong>Tiene <%= pluralize(@pointsale.errors.count, "error") %> no se puede guardar el punto de venta</strong><br>
			</div>
		<% end %>
		<div class="form-body">
			<div class="form-group">
				<div class="row">
					<div class="col-md-offset-2 col-md-6">
						<div class="row static-info">
							<div class="col-md-3 name text-right"> Punto de venta </div>
							<div class="col-md-9 value"> <%= @pointsale.name %> <hr></div>
						</div>
						<div class="row static-info">
							<div class="col-md-3 name text-right"> Prefijo </div>
							<div class="col-md-9 value"> <%= @pointsale.prefix %> <hr></div>
						</div>
						<div class="row static-info">
							<div class="col-md-3 name text-right"> Dirección </div>
							<div class="col-md-9 value"> <%= @pointsale.address %> <hr></div>
						</div>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="row">
					<div class="col-md-12">
						<div class="tabbable-custom">
							<ul class="nav nav-tabs">
								<li class="active">
									<a href="#availables" data-toggle="tab" aria-expanded="false">Productos disponibles</a>
								</li>
								<li>
									<a href="#products_pointsale" data-toggle="tab" aria-expanded="false"> Productos del punto de venta </a>
								</li>
							</ul>
							<div class="tab-content">
								<div class="tab-pane fade active in" id="availables">
									<div class="row">
										<div class="col-md-12">
											<div class="col-md-12">
												<div class="note note-success">
													<h4>Productos disponibles para asignar al punto de venta</h4>
													<p> En esta tabla se muestran todos los productos disponibles para asignarse al punto de venta para vender.</p><br>
													<p> Para hacer una busqueda avanzada utiliza el siguiente formato, nombre del producto :atributo a buscar<br>
														ejemplo. <strong>blusa :verde</strong> (Solo se puede buscar un atributo, ya sea estilo, talla ó color).
													</p>
												</div>
											</div>
											<div class="col-md-12">
												<table class="table table-striped table-bordered table-hover table_availables" data-source="<%= edit_pointsale_path(format: "json") %>">
													<thead>
													  <tr>
														<th class="text-center">
															<input name="select_all" value="1" id="select-all" type="checkbox" />
														</th>
														<th>SKU</th>
														<th>Producto</th>
														<th>Linea</th>
														<th>Sub linea</th>
													  </tr>
													</thead>
													<tbody>
													</tbody>
												</table>
											</div>
											<div class="col-md-12" style="margin-top:15px">
												<button type="button" title="Asignar los productos seleccionados al punto de venta" class="btn blue btn-block btn-lg" onclick="assignProducts()">
													<i class="fa fa-long-arrow-right" aria-hidden="true"></i> Asignar productos
												</button>
											</div>
										</div>
									</div>
								</div>
								<div class="tab-pane" id="products_pointsale">
									<div class="row">
										<div class="col-md-12">
											<div class="col-md-12">
												<div class="note note-success">
													<h4>Productos asignados al punto de venta</h4>
													<p> En esta tabla se muestran todos los productos que se han asignado al punto de venta para vender. </p><br>
													<p> Para hacer una busqueda avanzada utiliza el siguiente formato, nombre del producto :atributo a buscar<br>
														ejemplo. <strong>blusa :verde</strong> (Solo se puede buscar un atributo, ya sea estilo, talla ó color).
												</div>
											</div>
											<div class="col-md-12">
												<table class="table table-striped table-bordered table-hover table_prod_pointsale" data-source="<%= edit_pointsale_path(format: "json") %>">
													<thead>
													  <tr>
														<th class="text-center"><input name="select_all" value="1" id="select-all" type="checkbox" /></th>
														<th>SKU</th>
														<th>Producto</th>
														<th>Linea</th>
														<th>Sub linea</th>
														<th>Stock</th>
													  </tr>
													</thead>
													<tbody>
													</tbody>
												</table>
											</div>
											<div class="col-md-12" style="margin-top:15px">
												<button type="button" title="Desasignar los productos seleccionados del punto de venta" class="btn red btn-block btn-lg" onclick="deleteProducts()">
													<i class="fa fa-long-arrow-left" aria-hidden="true"></i> Desasignar productos
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<% end %>

<script type="text/javascript">
	var rows_selected_1 = [];
	var rows_selected_2 = [];
	var class_1 = '.table_availables';
	var class_2 = '.table_prod_pointsale';
	var columns_1 = [{ "data": "0"}, { "data": "1" }, { "data": "2" }, { "data": "3" }, { "data": "4" }];
	var columns_2 = [{ "data": "0"}, { "data": "1" }, { "data": "2" }, { "data": "3" }, { "data": "4" }, { "data": "5" }];
	var order_1 = 2;
	var order_2 = 2;
	var data_1 = { table: 'new_availables' };
	var data_2 = { table: 'in_pointsale' };

	// $(document).on("page:change", function() {

		tableWithCheckboxAjax.init(class_1, columns_1, order_1, data_1, rows_selected_1);
		tableWithCheckboxAjax.init(class_2, columns_2, order_2, data_2, rows_selected_2);

	// });

	function assignProducts() {
		if (rows_selected_1.length > 0) {
			$.ajax({
			  type: "POST",
			  url: "/pointsales/" + <%= @pointsale.id %> + "/assign_or_delete_products",
			  dataType: "script",
			  data: { ids: rows_selected_1, todo: 'assign' },
			  success: function(xhr, status, error) { }
			});
		} else {
			toastr["error"]("Seleccione productos para asignarlos al punto de venta.");
		}
	}

	function deleteProducts() {
		if (rows_selected_2.length > 0) {
			$.ajax({
			  type: "POST",
			  url: "/pointsales/" + <%= @pointsale.id %> + "/assign_or_delete_products",
			  dataType: "script",
			  data: { ids: rows_selected_2, todo: 'delete' },
			  success: function(xhr, status, error) { }
			});
		} else {
			toastr["error"]("Seleccione los productos que desee eliminar del punto de venta.");
		}
	}
</script>