Good morning. Attached an image of how is the functionality. For example, for this case, I have selected the first checkbox, this executes a function that displays the table that says You can choose from this list 1 , by clicking "+" in any of those products what I'm adding it in an array of objects, I'll go through that array to show it in the table Products you've selected in this case I've selected Product 1
The detail I have is to select the next checkbox that would be the Client 2. Attached image for the explanation. If you can notice in the selected checkbox of client 2, he displays another list of products that I can select. As you will see what is highlighted in red was the product that I had selected from the previous checkbox and what is highlighted in blue is the other product that I have selected from the client 2 checkbox. This product is also added to an array as an object to display in the selected product table.
The problem I want to solve is when I remove the checkbox from client 1, when deselecting it automatically, I must delete the products that I have selected for that client, in this case, if I deselect it, you should remove the product 30909 - 48.3 and thus have control of the selected products according to your checkbox.
Function for the 1st table, where it shows customers.
var cupones_bienvenida_todos = $('.cupones_bienvenida_todos');
var tipoCupon ='';
$.each(response.data, function (i) {
if (response.data[i].Tipo_cupon == 1){
tipoCupon = "Cupón de 60%";
}
else if(response.data[i].Tipo_cupon == 1){
tipoCupon = "Cupón de 80%";
}
else{
tipoCupon = "Cupón de 100%";
}
$('<tr class="cupones"/>')
.append($('<td/>').addClass('nuevo-td')
.append($('<label/>').addClass('label-radio item-content').text(response.data[i].Cod_Cliente +" - "+response.data[i].Nombre)))
.append($('<td/>').addClass('label-cell nuevo-td').text(tipoCupon))
.append('<div class="cod_cupon" style="display:none">' + response.data[i].Identificador + '</div>')
.append($('<td/>').addClass('label-cell nuevo-td')
.append($('<label/>').addClass('label-checkbox item-content')
.append('<input type="checkbox" name="cupon_check" class="cupon_check" value="' + response.data[i].Identificador + '"/>')
.append($('<span/>').addClass('item-media').append('<i class="icon icon-form-checkbox"></i>'))))
.appendTo(cupones_bienvenida_todos);
if (cantidad_llaves === 0) {
$('.cupon_check').prop('disabled', true)
}
});
Function by clicking on the checkbox, this sends you to call other functions
$(".cupones_bienvenida_todos").on("click", '.cupon_check', function(){
if ($(this).is(':checked')){
productos_seleccionados_lista1 =[];
productos_seleccionados_lista3 =[];
$(".lista_productos_elegir > li").remove();
$(".lista_productos_elegir3 > li").remove();
$(".lista_productos_elegir4 > li").remove();
console.log("Cupon seleccionado");
var cupones = $(this).closest('.cupones');
cod_cupon = cupones.find('.cod_cupon').text();
var tipo_cupon = $(this).val();
cuponesDescuentoProducto1(idPedido);
cuponesDescuentoProducto3(idPedido);
cuponesDescuentoProducto4(idPedido);
$('.tbla-productos1').show();
$('.tbla-productos3').show();
$('.tbla-productos4').show();
}
else{
var valor_check = $(this).val();
console.log(productos_seleccionados_lista1);
console.log(productos_seleccionados);
productos_seleccionados_lista1 = [];
productos_seleccionados =[];
console.log(productos_seleccionados_lista1);
console.log(productos_seleccionados);
var lista_productos_seleccionado = $('.lista_productos_seleccionado');
console.log(lista_productos_seleccionado);
console.log(valor_check);
}
});
List of products to choose
var lista_productos_elegir = $('.lista_productos_elegir');
valCarrito = response.data;
$.each(valCarrito, function (i) {
$('<li/>').addClass('swipeout swipeout_productos1')
.append($('<div/>').addClass('swipeout-content item-content')
.append($('<div/>').addClass('item-media')
.append('<img src="' + valCarrito[i].Url + '" onerror="this.onerror=null;" alt="" width="40" height="60" />'))
.append($('<div/>').addClass('item-inner')
.append($('<div/>').addClass('item-text item-title-row')
/*.append('<input type="number" class="add_material_impreso" value="0" min="0" placeholder="Ingrese cantidad">')*/
.append($('<div tyle="border-radius: 1px;"/>').addClass('chip chip-small').append('<div class="chip-label"><span class="product-quantity">' + valCarrito[i].Cantidad + '</span></div>'))
.append($('<div style="background: rgba(0, 0, 0, 0);"/>').addClass('chip chip-small chip-small-nuevo').append('<div class="chip-label"><button class="sumarProducto1 button-list-swipeout">+</button></div>'))
.append($('<div style="background: rgba(0, 0, 0, 0);"/>').addClass('chip chip-small').append('<div class="chip-label"><button class="restarProducto1 button-list-swipeout">-</button></div>'))
.append('<div class="item-after" data-unit-price="' + valCarrito[i].PrecioSocio + '"><span class="product-amount" style="font-size: 12px;">' + valCarrito[i].PrecioSocio.toLocaleString(undefined, {minimumFractionDigits: 2}) + '</span></div>')
)
.append($('<div/>').addClass('item-title-row')
.append($('<div style="font-size: 12px;"/>').addClass('item-title').append(valCarrito[i].Codigo_Inventario + " - " + valCarrito[i].Descripcion))
.append('<div class="codInventario_material" style="display:none">' + valCarrito[i].Codigo_Inventario + '</div>')
.append('<div class="tipo_material" style="display:none">' + valCarrito[i].Tipo + '</div>')
.append('<div class="tipo_costo_material" style="display:none">' + valCarrito[i].TipoCosto + '</div>')
.append('<div class="tipo_seleccion" style="display:none">' + valCarrito[i].tipo_seleccion + '</div>')
.append('<div class="preciosocio_material" style="display:none">' + valCarrito[i].PrecioSocio + '</div>')
.append('<div class="volumenNegocio_material" style="display:none">' + valCarrito[i].VolumenNegocio + '</div>')
.append('<div class="cantidadProducto_material" style="display:none">' + valCarrito[i].Cantidad + '</div>')
)
)
)
.appendTo(lista_productos_elegir);
});
Function to add a product
var productos_seleccionados = [];
var productos_seleccionados_lista1 = [];
///---------- Sumar y Restar Productos 1 ---------
$$('.lista_productos_elegir').on('click','.sumarProducto1', function(e){
if (productos_seleccionados_lista3.length != 0){
myApp.alert("No puede llevar cupones de otra categoría");
}
else{
var list = $(this).closest('.swipeout_productos1');
var el_product_quantity_producto1 = list.find('.product-quantity');
var tipo_material = list.find('.tipo_material').text();
var tipo_costo_material = list.find('.tipo_costo_material').text();
var codinv_material = list.find('.codInventario_material').text();
var preciosocio_material = list.find('.preciosocio_material').text();
var volumenNegocio_material = list.find('.volumenNegocio_material').text();
var tipo_seleccion = list.find('.tipo_seleccion').text();
product_sum = parseInt(el_product_quantity_producto1.text());
cantidad_suma = product_sum+1;
//el_product_quantity_producto1.text(cantidad_suma);
var cantidad_valor1 =0;
var lista;
$('.lista_productos_elegir li').each(function(e){
lista = $(this).find('.product-quantity');
cantidad_valor1 += parseInt(lista.text());
});
if (cantidad_valor1 >=1){
myApp.alert("Puede llevar un máximo de 1 productos");
el_product_quantity_producto1.text(el_product_quantity_producto1.text());
}
else{
$(".lista_productos_seleccionado > tr").remove();
productos_seleccionados = deleteItem(productos_seleccionados, codinv_material);
productos_seleccionados.push({
"codigo": codinv_material,
"precio": preciosocio_material,
"cantidad": cantidad_suma
});
productos_seleccionados_lista1.push({
"codigo": codinv_material,
"precio": preciosocio_material,
"cantidad": cantidad_suma
});
el_product_quantity_producto1.text(cantidad_suma);
agregarCupon(idPedido, codinv_material, tipo_costo_material,preciosocio_material,volumenNegocio_material,cantidad_suma,cod_cliente,tipo_cliente,cod_cupon,parseInt(tipo_seleccion));
productosSeleccionados();
//$('.cupones_bienvenida_todos .cupon_check').attr('disabled', true);
}
}
});
Function of the selected products
function productosSeleccionados(){
$(".lista_productos_seleccionado > tr").remove();
var lista_productos_seleccionado = $('.lista_productos_seleccionado');
if (productos_seleccionados.length === 0){
//$('.cupones_bienvenida_todos .cupon_check').attr('disabled', true);
cantidad_cuponseleccionado = 0;
localStorage.setItem("Cupones_Selecionados", cantidad_cuponseleccionado);
}
else{
cantidad_cuponseleccionado = 1;
localStorage.setItem("Cupones_Selecionados", cantidad_cuponseleccionado);
}
$.each(productos_seleccionados, function(i){
$('<tr/>')
.append($('<td/>').addClass('label-cell nuevo-td').text(productos_seleccionados[i].codigo))
.append($('<td/>').addClass('label-cell nuevo-td').text(productos_seleccionados[i].precio))
.append($('<td/>').addClass('label-cell nuevo-td').text(productos_seleccionados[i].cantidad))
.appendTo(lista_productos_seleccionado);
});
}