0

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 json 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

2
  • Al cargar un nuevo servicio, recorre el array de servicios dentro de citaObject 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.
    – Liyo
    Commented el 11 jun. 2022 a las 11:19
  • @Liyo lo que sugieres es poco eficiente, pero es válido. Existen formas de hacerlo sin recorrer el Array. Saludos Commented el 11 jun. 2022 a las 17:09

1 respuesta 1

0

Si lo que necesitas es limpiar el array de servicios cuando añades un nuevo item, lo puedes hacer añadiendo por ejemplo este código antes de hacer el push del item en la función add() del objeto:

this.items.servicios.length = 0; 
5
  • No necesita limpiar el array de servicios por lo que entiendo, solo necesita que no se carguen servicios duplicados.
    – Liyo
    Commented el 11 jun. 2022 a las 11:17
  • Entiendo que al agregar un servicio, se añade el seleccionado y el anterior, entonces esto evita que al añadirlo estén duplicados en el array. Otra cosa, es validar que no se puedan insertar el mismo dos veces, pero entiendo que no va por ahí la pregunta.
    – user246049
    Commented el 11 jun. 2022 a las 11:21
  • Entiendo el punto, pero que pasaría si se carga dos veces el mismo? Borrar el array no limita que el usuario duplique un servicio, o estoy en un error? Corrígeme si es así.
    – Liyo
    Commented el 11 jun. 2022 a las 11:24
  • Exacto, no lo limita de esa forma. Yo he propuesto una solución que le ayudaría en el caso de que por lo que fuese, el problema fuese que en el momento de añadir un servicio, este se añadiese junto con el resto del array todas las veces. Entonces, la primera vez te lo añade solo, la segunda te añade ese más el otro, ya tienes 3 elementos en el array, la tercera te añade ese más los otros 3. Igual he entendido mal el planteamiento de la pregunta, pero mi solución es para el problema que acabo de describir. Evidentemente no soluciona un problema de validación.
    – user246049
    Commented el 11 jun. 2022 a las 11:30
  • 1
    Si es un problema de validación, se podría hacer lo siguiente: if(!this.items.servicios.includes(nuevo item)) { this.items.servicios.push( nuevo item)}
    – user246049
    Commented el 11 jun. 2022 a las 11:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.