script.js

// ======= Banco de dados local e LocalStorage ====== // =======================================================
let dBaseProdutos = [];

// ------ Recupera os valores de html ------ // --------------------------------------------------------------------
const botoesFiltro = document.getElementById("botoes-filtro")
const ulEstoque = document.getElementById("lista-item")


// ------ Insere valores do Local storage ------ // -----------------------------------------------------------------
const setprodutos = (bancoDeDados) => {
    localStorage.setItem("Produtos", JSON.stringify(bancoDeDados))
}

const getProdutos = () => {
    const valoresSalvos = localStorage.getItem("Produtos")
    return valoresSalvos ? JSON.parse(valoresSalvos) : []
}

// ------ Renderiza as listas na tela ------ // ----------------------------------------------------------------------
const renderProduct = (listProdutos) => {
    //Limpa a pagina
    ulEstoque.innerHTML = ""
    listProdutos.forEach(item => {
        //Cria o elemento
        const li = document.createElement("li")
        const divPreco = document.createElement("div")
        const divItem = document.createElement("div")
        const divCod = document.createElement("div")
        const divQuant = document.createElement("div")

        //Inclui o elemento no html
        divItem.textContent = item.nome
        divPreco.textContent = `R$${item.preco},00`
        divCod.textContent = `#${item.codigo}`
        divQuant.textContent = `Quant: ${item.quant}`
        ulEstoque.appendChild(li)
        li.appendChild(divCod)
        li.appendChild(divItem)
        li.appendChild(divQuant)
        li.appendChild(divPreco)

        //Atribui classes aos elementos
        divCod.classList.add("divItens")
        divItem.classList.add("divItens")
        divQuant.classList.add("divItens")
        divPreco.classList.add("divItens")


        divCod.classList.add("divCod")
        divItem.classList.add("divItem")
        divQuant.classList.add("divQuant")
        divPreco.classList.add("divPreco")
    })
}

// ------ Renderiza o cadastro na tela ------ // -------------------------------------------------------------------
const renderInserir = () => {
    //Limpa a pagina
    ulEstoque.innerHTML = ""

    //Cria os elementos de input

    const listaInput = document.createElement("li")
    const tituloH1 = document.createElement("div")

    //Input cod
    const inputCod = document.createElement("input")
    inputCod.type = 'number';
    inputCod.id = 'input-cod';
    inputCod.placeholder = 'Digite o código do produto';

    //Input Item
    const inputItem = document.createElement("input")
    inputItem.type = 'text';
    inputItem.id = 'input-item';
    inputItem.placeholder = 'Digite o nome do produto';

    //Input Categoria
    const inputCategoria = document.createElement("input")
    inputCategoria.type = 'text';
    inputCategoria.id = 'input-categoria';
    inputCategoria.placeholder = 'Digite a categoria do produto';

    //Input Quant
    const inputQuant = document.createElement("input")
    inputQuant.type = 'number';
    inputQuant.id = 'input-quant';
    inputQuant.placeholder = 'Digite a quantidade do produto';

    //InputPreco
    const inputPreco = document.createElement("input")
    inputPreco.type = 'number';
    inputPreco.id = 'input-preco';
    inputPreco.placeholder = 'Digite o preço do produto';

    //Botao cadastrar
    const btnCadastro = document.createElement("button")
    btnCadastro.type = 'button'; // ou 'submit' se estiver num formulário
    btnCadastro.id = 'botao-salvar';
    btnCadastro.textContent = "Cadastrar"

    // ================== função do botão de cadastro ================== //
    btnCadastro.addEventListener("click", () => {
        const dadosCode = document.getElementById("input-cod");
        const dadosItem = document.getElementById("input-item");
        const dadosCategoria = document.getElementById("input-categoria");
        const dadosQuant = document.getElementById("input-quant");
        const dadosPreco = document.getElementById("input-preco");

        //Teste de input vazio
        const inputsValue = [dadosCode, dadosCategoria, dadosItem, dadosPreco, dadosQuant];
        const testeVazio = inputsValue.some(input => !input.value);
        if (testeVazio) {
            alert('Atenção: Por favor, preencha todos os campos!');
            return;
        }

        //Teste de existencia de produto

        const valorProcurado = parseInt(dadosCode.value);
        const indexCodigo = dBaseProdutos.findIndex(item => item.codigo === valorProcurado);
        if (indexCodigo !== -1) {
            const atualizarProd = confirm("Produto ja existe no estoque, deseja atualizar sua quantidade?");

            if (atualizarProd) {
                const novaQuant = parseInt(dadosQuant.value);
                const quantAtual = parseInt(dBaseProdutos[indexCodigo].quant)
                dBaseProdutos[indexCodigo].quant = novaQuant + quantAtual;
                alert("Quantidade atualizada");
            };
        }else{
            //Inserção do novo produto
        dBaseProdutos.push({
            codigo: parseInt(dadosCode.value),
            nome: dadosItem.value, 
            categoria:dadosCategoria.value,
            quant: parseInt(dadosQuant.value),
            preco: parseInt(dadosPreco.value)
        });
        }

        setprodutos(dBaseProdutos)
        renderProduct(dBaseProdutos)

    })

    //titulo h1
    tituloH1.textContent = "Cadastrar novo produto"

    //Adiciona classes
    listaInput.classList.add("lista-new-product")

    inputCod.classList.add("input-list")
    inputItem.classList.add("input-list")
    inputCategoria.classList.add("input-list")
    inputQuant.classList.add("input-list")
    inputPreco.classList.add("input-list")
    btnCadastro.classList.add("input-list")
    btnCadastro.classList.add("btn-input")

    tituloH1.classList.add("titulo-h1")

    //Inclui no HTML
    ulEstoque.appendChild(tituloH1)
    ulEstoque.appendChild(listaInput)

    listaInput.appendChild(inputCod)
    listaInput.appendChild(inputItem)
    listaInput.appendChild(inputCategoria)
    listaInput.appendChild(inputQuant)
    listaInput.appendChild(inputPreco)
    listaInput.appendChild(btnCadastro)
}

// ------ Ao iniciar exibe a lista na página  ------ // ----------------------------------------------------------------
if (ulEstoque.children.length === 0) {
    dBaseProdutos = getProdutos()
    renderProduct(dBaseProdutos)
}

// ------ Executa o clique de acordo com o botão children de botoesFiltro ------ // ------------------------------------
botoesFiltro.addEventListener("click", (evento) => {
    // Ignora cliques que não sejam em botões
    if (evento.target.tagName !== 'BUTTON') return;
    if (evento.target.dataset.categoria === "inputItens") {
        return renderInserir()
    }

    const categoriaClicada = evento.target.dataset.categoria;

    let produtosParaMostrar;

    if (categoriaClicada === 'all-product') {
        produtosParaMostrar = dBaseProdutos;
    } else {
        produtosParaMostrar = dBaseProdutos.filter(item => item.categoria === categoriaClicada);
    }


    // Chama a nossa função de renderização com a lista correta!
    renderProduct(produtosParaMostrar);

});