0

Estoy laburando un proyecto para la facu en el que elegí hacer una especie de sistema de punto de venta/inventario, etc., utilizando html, css y js. Decidí hacer uso en html de etiquetas tipo "select" para poder seleccionar sucursales, filtrar por stock, etc. Hasta ahora venía bárbaro, pero me topé con un gran problema y es que, después de haber codeado el select de las sucursales, me puse a desarrollar la función del select del stock, y claro, las dos funciones cumplen... Por separado...
Cuando seleccionás una sucursal, te va a mostrar todos los productos, independientemente de que tengan stock o no, y cuando sobre esa sucursal, seleccionás con o sin stock, te muestra en esa sucursal los respectivos productos; ahora, cuando queda seleccionado "con stock" o "sin stock" y vuelvo a hacer una selección de sucursal, se vuelven a mostrar todos los productos de la sucursal sin el filtro de stock que quedó seleccionado. ¿Cómo relacionarlos entre sí, para que cuando tenga seleccionado con o sin stock y cambie la sucursal, se vean los productos ya filtrados por dicha selección?

Página del proyecto: https://xaviervergara.github.io/segundaPreentrega/

Repositorio: https://github.com/xaviervergara/segundaPreentrega.git (main.js)

Función para mostrar productos según sucursal:

const borrar = (etiqueta) => {
  const secciones = document.querySelectorAll(etiqueta);
  secciones.forEach((ele) => ele.remove());
};

//traemos el select sucursal
const selectSucursal = document.getElementById('sucursalSelect');
//traemos el select stock
const selectStock = document.getElementById('stockSelect');

//////////////////////////////////////////////
// FUNCION SELECT DE SUCURSAL
selectSucursal.addEventListener('change', () => {
  const sucursalValue = selectSucursal.value;
  const sucursalSeleccionada =
    sucursalValue === '1' ? sucCapFederal : sucAvellaneda;
  borrar('.produDisplay');

  if (sucursalValue === '1') {
    aplicarFiltro(sucursalSeleccionada, sucursalSeleccionada.items);
  } else if (sucursalValue === '2') {
    aplicarFiltro(sucursalSeleccionada, sucursalSeleccionada.items);
  }
});

Función para filtrar por stock:

selectStock.addEventListener('change', filtrarPorStock);

function filtrarPorStock() {
  //obtiene valor numerico de la sucursal seleccionada
  const valorSucursal = selectSucursal.value;
  //valor numerico usado para obtener variable de sucursal
  const sucursalSeleccionada =
    valorSucursal === '1' ? sucCapFederal : sucAvellaneda;
  //obtiene value del select de stock
  const valorStock = selectStock.value;
  //Productos con stock
  const productoConStock = sucursalSeleccionada.items.filter(
    (ele) => ele.cant > 0
  );
  //Productos sin stock
  const productoSinStock = sucursalSeleccionada.items.filter(
    (ele) => ele.cant == 0
  );
  //borrar contenido
  borrar('.produDisplay');

  if (valorStock === '0') {
    // seleccionarSucursal(sucursalSeleccionada);
    aplicarFiltro(sucursalSeleccionada, sucursalSeleccionada.items);
  } else if (valorStock === '1') {
    aplicarFiltro(sucursalSeleccionada, productoConStock);
  } else if (valorStock === '2') {
    aplicarFiltro(sucursalSeleccionada, productoSinStock);
  }
}

Aclaración: la función "aplicar filtro" crea estructuras html que se encargan de mostrar ciertas propiedades de los productos (objetos) en pantalla.

HTML:

     <!--MAIN DISPLAY-->

      <section class="mainDisplay">
        <div id="mDisplay-content" class="mainDisplay-content">
          <!-- PRIMERA FILA -->

          <!--BOTON SUCURSAL-->

          <div class="firstRow">
            <select
              id="sucursalSelect"
              class="form-select sucursalButton"
              aria-label="Default select example"
            >
              <option>Sucursal</option>
              <option value="1">Capital Federal</option>
              <option value="2">Avellaneda</option>
              <option value="3">Martinez</option>
            </select>

            <!--BOTON  SIN/CON STOCK-->

            <select
              id="stockSelect"
              class="form-select stockButton"
              aria-label="Default select example"
            >
              <option value="0">Todos los productos</option>
              <option value="1">Con stock</option>
              <option value="2">Sin stock</option>
            </select>
1
  • incluir el html Commented el 2 sept. 2023 a las 12:43

1 respuesta 1

1

Llama a la función filtrarPorStock() al cambiar el valor de la sucursal seleccionada. Agregas una condición al principio dentro de dicha función que, si no hay filtro de stocks (todos los productos seleccionados) entonces se pinten todos los productos de la sucursal, y si hay un filtro seleccionado, filtre los productos y luego los pinte, lo he modificado un poco para que el código no se repita tanto, tenias algunos ifs innecesarios también, quizás podría optimizarse aun mas, este es el evento change del select de sucursales:

selectElement.addEventListener('change', () => {
  const selectedValue = selectElement.value;
  const sucursalSeleccionada =
    selectedValue === '1' ? sucCapFederal : sucAvellaneda;
  sucursalSeleccionada.items.forEach((ele) => ele.agregarCant(sucursalSeleccionada));
  filtrarPorStock()
});

La función filtrarPorStock() quedaría así:

function filtrarPorStock() {
  const valorSucursal = selectElement.value;
  const sucursalSeleccionada =
    valorSucursal === '1' ? sucCapFederal : sucAvellaneda;
  const valorStock = selectStock.value;
  borrar('.produDisplay');
  if(valorStock === '0') {
    aplicarFiltro(sucursalSeleccionada, sucursalSeleccionada.items);
    return
  }
  const productoConStock = sucursalSeleccionada.items.filter(
    (ele) => ele.cant > 0
  );
  const productoSinStock = sucursalSeleccionada.items.filter(
    (ele) => ele.cant == 0
  );
  if (valorStock === '1') {
    aplicarFiltro(sucursalSeleccionada, productoConStock);
  } else if (valorStock === '2') {
    aplicarFiltro(sucursalSeleccionada, productoSinStock);
  }
}
2
  • La verdad que me funcionó bastante bien tu solución. Mí pregunta es si entonces puedo sacar el eventListener del SelectStock, y si siguiendo este criterio, cada vez que quiera aplicar la funcionalidad a los demás filtros tipo Select, en vez de agregarle el eventListener específico, solo controlarlo desde el eventListener de la sucursal..porque cuando no hay suc seleccionada y cambio el tipo de stock la pantalla se pinta con algún producto y creo que es porque le dejé el eventListener tipo change a la selección de stock Commented el 4 sept. 2023 a las 17:55
  • @XavierVergara si al no tener sucursal seleccionada y cambiar el stock se pinta con algun producto, es porque tu en tu código estas diciendo que si el valor del input de la sucursal es 1 devuelva 'sucCapFederal', y en caso contrario devuelva 'sucAvellaneda', esto quiere decir que cualquier selección que no sea 1 sera 'sucAvellaneda', tienes que ser mas especifico en tu condicional. Commented el 4 sept. 2023 a las 18:10

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.