estoy haciendo un objeto de javascript que tiene unos atributos como un empleado o un cliente, etc el atributo mas importante son los servicios que es un array.
var citaObject = {
items:{
cliente: '',
empleado:'',
dia:'',
hora:'',
descricpion:'',
total:'',
items:'',
servicios:[],
ids:[],
},
}
hay se van a almacenar todos los servicios que va a tener mi cita, además de esas propiedades tengo unos métodos, como el de agregar o el de listar, aqui el objeto completo
var citaObject = {
items:{
cliente: '',
empleado:'',
dia:'',
hora:'',
descricpion:'',
total:'',
items:'',
servicios:[],
},
add : function(item){
this.items.servicios.push(item)
this.list()
},
list: function(){
tblServices = $('#ServiciosTable').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
responsive: true,
autoWidth: false,
destroy: true,
data: this.items.servicios,
columns: [
{"data": "id_servicio"},
{"data": "img_servicio"},
{"data": "nombre"},
{"data": "tipo_servicio_id"},
{"data": "precio"},
],
columnDefs: [
{
targets: [0],
class: 'text-center',
orderable: false,
render: function (data, type, row) {
return '<a rel="remove" class="btn btn-danger btn-xs btn-flat" style="color: white;"><i class="fas fa-trash-alt"></i></a>';
}
},
{
targets: [1],
class: 'text-center',
orderable: false,
render: function (data, type, row) {
return '<img src="'+row.img_servicio+'" style="border-radius: 15px;" width="80" height="50">'
}
},
],
initComplete: function (settings, json) {
}
});
}
}
el objeto lo que hace es recibir un ítem y guardarlo en el array luego ejecuta el método que lista, estoy utilizando jquery ui mas específicamente el plugin de autocomplete, lo que hago es buscar en la base de datos y cuando selecciono un elemento del select ese es el item que se va a mi objeto de javascript
$('input[name="buscarServicio"]').autocomplete({
source: function(request, response) {
$.ajax({
url: window.location.pathname,
type: "POST",
data: {"csrfmiddlewaretoken":csrftoken, "busqueda":request.term, "accion":"BuscarServicio"},
dataType: "json",
}).done(function(data){
response(data);
}).fail(function(jqXHR, textStatus, errorThrown){
});
},
minLength: 1,
delay: 250,
select: function(event, ui) {
event.preventDefault();
citaObject.add(ui.item)
$(this).val("")
}
});
});
esta es mi vista
class AgregarCita(TemplateView,PermissionMixin):
permission_required = ['add_cita']
template_name = "AgregarCita.html"
form_class = CitaForm
def post(self, request, *args, **kwargs):
accion = request.POST.get("accion")
errores ={}
if accion == "BuscarServicio":
busqueda = request.POST.get("busqueda", "")
if busqueda == "":
errores["BuscarServicio"] = "Este campo no puede estar vacío."
else:
data = []
consulta = Servicio.objects.filter(Q(nombre__icontains=busqueda)).filter(estado=True).distinct()
for i in consulta:
item = i.toJSON()
item["value"] = i.nombre
data.append(item)
return JsonResponse(data, safe=False)
return super(AgregarCita, self).get(request, *args, **kwargs)
y esto es lo que retorna la vista
El problema recae en el JavaScript que no se como evitar que hayan dos servicios iguales en la tabla en este momento los servicios se repiten y la idea es que los servicios no se puedan repetir, intente muchas formas pero todas funcionaban la primera vez, evitaba que se repitiera el primer servicio, ya después del primero si seleccionaba otro este se duplicaba, si seleccionaba 1 se convertía en 2 luego en 4 y así,
agradecería mucho su ayuda ya que llevo varios días intentando encontrar una solución
servicios
dentro decitaObject
y valida que ese servicio que estás por ingresar no se encuentre ingresado previamente, si existe no lo agregues, si no existe lo agregas.