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>