PHP Classes

File: front-produtos/js/components/ProdutoForm.js

Recommend this page to a friend!
  Classes of Rodrigo Faustino   App MFE   front-produtos/js/components/ProdutoForm.js   Download  
File: front-produtos/js/components/ProdutoForm.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: App MFE
Single-page application with micro-frontends
Author: By
Last change:
Date: 1 month ago
Size: 1,843 bytes
 

Contents

Class file image Download
class ProdutoForm { constructor(fetchService, renderCallback) { this.fetchService = fetchService; this.refreshProdutosList = renderCallback; } render() { return ` <form id="addForm"> Nome: <input type="text" id="nome"><br> Preço: <input type="number" id="preco" step="0.01"><br> Quantidade: <input type="number" id="quantidade"><br> <button type="submit">Adicionar Produto</button> </form> `; } afterRender() { document.getElementById('addForm').addEventListener('submit', (e) => this.addItem(e)); } async addItem(event) { event.preventDefault(); const nome = document.getElementById('nome').value; const preco = parseFloat(document.getElementById('preco').value); const quantidade = parseInt(document.getElementById('quantidade').value, 10); if (nome.length < 4) { alert("O nome do produto deve ter pelo menos 4 caracteres."); return; } if (preco < 0) { alert("O preço do produto não pode ser inferior a zero."); return; } if (quantidade < 0) { alert("A quantidade do produto não pode ser inferior a zero."); return; } await this.fetchService.fetch('/produtos', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ nome, preco, quantidade }), }); alert('Produto adicionado com sucesso.'); document.getElementById('nome').value = ''; document.getElementById('preco').value = ''; document.getElementById('quantidade').value = ''; this.refreshProdutosList(); } } export default ProdutoForm;