Pessoal bom dia, estou criando um sistema de venda de produtos, este tópico ficará um pouco longo, pois quero deixar bem explicado.
Sistema sendo elaborado em Vaadin + MySQL + SpringBoot + Maven
Na tela inicial temos a grid com os botões Novo, Alterar e Excluir:
Ao clicar no botão novo uma janela se abre para começarmos a “vender” o produto:
O problema aqui é o seguinte, quando clico em “+ item” ocorre o seguinte:
Problema: uma barra de rolagem é criada (a direita da janela), os botões Salvar, Fechar e + Item é deslocado para baixo (só aparecendo ao rolar a barra de rolagem para baixo). Toda vez que tento adicionar um produto(+ item), o processo se repete, os botões são jogados para baixo.
Solução desejada: Gostaria que os botões ficassem “congelados ou fixos” na parte inferior da janela, e que ao adicionar produtos a barra de rolagem até pode ser criada, porem sem deslocar os botões para baixo
Pensei em algo como isso:
a div que ira receber os produtos não pode em hipotese alguma invadir as divs (superior e inferior)
Mas confesso que não consegui criar isso…tentei de varias formas, mas todas falharam
Se alguem puder me ajudar fico grato
meu código:
package br.com.fjsistemas.cadastros.view;
import java.text.NumberFormat;
import java.text.ParseException;
import java.time.LocalDate;
import java.util.HashMap;
import java.util.List;
import java.util.Locale;
import java.util.Map;
import javax.annotation.PostConstruct;
import org.springframework.beans.factory.annotation.Autowired;
import org.vaadin.textfieldformatter.CustomStringBlockFormatter;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.datepicker.DatePicker;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.GridVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.textfield.NumberField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.data.binder.PropertyId;
import com.vaadin.flow.data.renderer.NumberRenderer;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import br.com.fjsistemas.backend.Cliente;
import br.com.fjsistemas.backend.Produto;
import br.com.fjsistemas.backend.Venda;
import br.com.fjsistemas.main.MainView;
import br.com.fjsistemas.repository.ClienteRepository;
import br.com.fjsistemas.repository.ProdutoRepository;
import br.com.fjsistemas.service.VendaService;
@Route(value = "venda-view", layout = MainView.class)
@PageTitle("Lançamento de Vendas")
public class VendaView extends VerticalLayout {
private static final long serialVersionUID = 1L;
private HorizontalLayout hltVenda = new HorizontalLayout();
Grid<Venda> grdVenda = new Grid<>(Venda.class, false);
private HorizontalLayout hltBarraBotoes = new HorizontalLayout();
Button btnNovo = new Button("Novo");
Button btnAlterar = new Button("Alterar");
Button btnExcluir = new Button("Excluir");
private Dialog dlgJanela = new Dialog();
private FormLayout fltCamposVenda = new FormLayout();
HorizontalLayout primeiraLinhaGuiaVenda = new HorizontalLayout();
HorizontalLayout segundaLinhaGuiaVenda = new HorizontalLayout();
HorizontalLayout terceiraLinhaGuiaVenda = new HorizontalLayout();
Tab vender = new Tab("Vendas");
Div venderDiv = new Div();
Tab entrega = new Tab("Entregas");
Div entregaDiv = new Div();
Tab financeiro = new Tab("Financeiro");
Div financeiroDiv = new Div();
@PropertyId("data")
private DatePicker txtDataVenda = new DatePicker("Data Venda");
@PropertyId("nome")
private ComboBox<Cliente> txtNomeCliente = new ComboBox<>();
@PropertyId("telefone")
private TextField txtTelefone = new TextField("Telefone");
@PropertyId("celular")
private TextField txtCelular = new TextField("Celular");
@PropertyId("campoSomaValores")
private TextField campoSomaValores = new TextField();
private HorizontalLayout htlDlgBarraBotoes = new HorizontalLayout();
private Button btnSalvar = new Button("Salvar");
private Button btnFechar = new Button("Fechar");
private Button btnAdicionarItem = new Button("+ Item");
@Autowired
VendaService vendaService;
@Autowired
ClienteRepository clienteRepository;
@Autowired
ProdutoRepository produtoRepository;
private List<Venda> listaVendas;
private Venda venda;
Binder<Venda> binderVenda = new Binder<>(Venda.class);
public VendaView() {
}
@PostConstruct
public void init() {
configuraTela();
}
private void configuraTela() {
setMargin(false);
setPadding(false);
configuraHltVenda();
configuraFltBarraBotoes();
configuraDlgJanela();
populaGrdVenda();
configuraBinder();
add(hltVenda, hltBarraBotoes);
}
private void configuraFltBarraBotoes() {
btnNovo.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnNovo.addClickListener(e -> {
novoClick();
});
btnAlterar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnAlterar.addClickListener(e -> {
alterarClick();
});
btnExcluir.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnExcluir.addClickListener(e -> {
excluirClick();
});
hltBarraBotoes.add(btnNovo, btnAlterar, btnExcluir);
}
private void excluirClick() {
if (venda != null) {
listaVendas.remove(venda);
vendaService.delete(venda);
atualizaGrdVenda();
}
}
private void configuraHltVenda() {
hltVenda.setWidthFull();
configuraGrdVenda();
hltVenda.add(grdVenda);
}
private void configuraGrdVenda() {
grdVenda.setHeight("820px");
grdVenda.setWidthFull();
grdVenda.addColumn(Venda::getId).setHeader("ID:").setAutoWidth(true);
grdVenda.addColumn(Venda::getDataVenda).setHeader("Data Venda:").setAutoWidth(true).setKey("dataVenda");
grdVenda.addColumn(Venda::getNomeCliente).setHeader("Nome:").setAutoWidth(true).setKey("nome");
grdVenda.addColumn(new NumberRenderer<>(Venda::getValorTotalVenda, "R$ %(,.2f", Locale.getDefault(), "R$ 0.00"))
.setHeader("Valor Total:").setAutoWidth(true).setKey("valorTotalVenda");
grdVenda.addThemeVariants(GridVariant.LUMO_COMPACT, GridVariant.LUMO_COLUMN_BORDERS);
grdVenda.getColumns().forEach(col -> col.setAutoWidth(true).setSortable(true).setResizable(true));
grdVenda.addItemClickListener(e -> {
venda = e.getItem();
});
}
private void configuraDlgJanela() {
dlgJanela.setHeight("755px");
dlgJanela.setWidth("860px");
//=====================================================================================================================
txtNomeCliente.setWidth("390px");
txtNomeCliente.setLabel("Nome Cliente");
List<Cliente> listaDeClientes = clienteRepository.findAll();
txtNomeCliente.setItemLabelGenerator(Cliente::getNome);
txtNomeCliente.setItems(listaDeClientes);
txtNomeCliente.addValueChangeListener(event -> {
txtTelefone.setValue(event.getValue().getFone());
txtCelular.setValue(event.getValue().getCelular());
});
new CustomStringBlockFormatter.Builder().blocks(0, 2, 4, 4).delimiters("(", ")", "-").numeric().build()
.extend(txtTelefone);
new CustomStringBlockFormatter.Builder().blocks(0, 2, 5, 4).delimiters("(", ")", "-").numeric().build()
.extend(txtCelular);
//=====================================================================================================================
Label text = new Label("Valor Total da Compra");
text.getElement().getStyle().set("fontWeight", "bold");
text.getStyle().set("margin-top", "30em");
text.getStyle().set("margin-left", "5em");
text.getStyle().set("text-align", "center");
campoSomaValores.getStyle().set("margin-top", "30em");
campoSomaValores.setWidth("30em");
//==========================================================================================================================
segundaLinhaGuiaVenda.add(txtNomeCliente, txtTelefone, txtCelular);
fltCamposVenda.add(venderDiv, entregaDiv, financeiroDiv);
venderDiv.add(txtDataVenda, segundaLinhaGuiaVenda, terceiraLinhaGuiaVenda);
vender.add(venderDiv);
LocalDate now = LocalDate.now();
txtDataVenda.setValue(now);
Map<Tab, Component> tabsToPages = new HashMap<>();
tabsToPages.put(vender, venderDiv);
tabsToPages.put(entrega, entregaDiv);
tabsToPages.put(financeiro, financeiroDiv);
Tabs tabs = new Tabs(vender, entrega, financeiro);
Div pages = new Div(venderDiv, entregaDiv, financeiroDiv);
tabs.addSelectedChangeListener(event -> {
tabsToPages.values().forEach(page -> page.setVisible(false));
Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
selectedPage.setVisible(true);
});
dlgJanela.add(tabs, pages);
btnSalvar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnSalvar.getStyle().set("margin-top", "30em");
btnSalvar.getStyle().set("margin-left", "0em");
btnSalvar.addClickListener(e -> {
salvarClick();
});
btnFechar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnFechar.getStyle().set("margin-top", "30em");
btnFechar.addClickListener(e -> {
dlgJanela.close();
});
btnAdicionarItem.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
btnAdicionarItem.getStyle().set("margin-top", "30em");
btnAdicionarItem.addClickListener(e -> {
adicionaProduto();
});
htlDlgBarraBotoes.add(btnSalvar, btnFechar, btnAdicionarItem, text, campoSomaValores);
dlgJanela.add(fltCamposVenda, htlDlgBarraBotoes);
}
private void salvarClick() {
venda = binderVenda.getBean();
boolean adicionarLista = venda.getId() == null ? true : false;
vendaService.create(venda);
if (adicionarLista) {
listaVendas.add(venda);
}
atualizaGrdVenda();
novaVenda();
txtNomeCliente.focus();
binderVenda.setBean(venda);
if (adicionarLista) {
dlgJanela.close();
}
}
private void populaGrdVenda() {
listaVendas = vendaService.read();
atualizaGrdVenda();
}
private void atualizaGrdVenda() {
grdVenda.setItems(listaVendas);
}
private void configuraBinder() {
binderVenda.bindInstanceFields(this);
}
private void novoClick() {
novaVenda();
binderVenda.setBean(venda);
dlgJanela.open();
txtNomeCliente.focus();
}
private void alterarClick() {
if (venda != null) {
binderVenda.setBean(venda);
dlgJanela.open();
}
}
private void adicionaProduto() {
ComboBox<Produto> txtProdutos = new ComboBox<>();
NumberField txtQuantidade = new NumberField("Quantidade");
TextField txtValorUnitario = new TextField("Valor Unitário");
TextField txtValorTotalItem = new TextField("Valor Total Item");
txtProdutos.setWidth("370px");
txtProdutos.setLabel("Produtos");
List<Produto> listaDeProdutos = produtoRepository.findAll();
txtProdutos.setItemLabelGenerator(Produto::getNome);
txtProdutos.setItems(listaDeProdutos);
txtProdutos.addValueChangeListener(event -> {
NumberFormat formatter = NumberFormat.getCurrencyInstance(new Locale("pt", "BR"));
try {
txtValorUnitario.setValue(formatter.format(event.getValue().getValor()));
} catch (Exception e) {
e.printStackTrace();
}
});
//==========================================================================================================================
txtQuantidade.setHasControls(true);
txtQuantidade.setValue(null);
txtQuantidade.setMin(1);
txtQuantidade.addValueChangeListener(event -> {
NumberFormat formatter = NumberFormat.getCurrencyInstance(new Locale("pt", "BR"));
double valorTotal = 0;
try {
valorTotal = formatter.parse(txtValorUnitario.getValue()).doubleValue() * txtQuantidade.getValue();
} catch (ParseException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
txtValorTotalItem.setValue(formatter.format(valorTotal));
campoSomaValores.setValue(formatter.format(valorTotal));
});
HorizontalLayout linhaNova = new HorizontalLayout();
linhaNova.add(txtProdutos, txtQuantidade, txtValorUnitario, txtValorTotalItem);
venderDiv.add(linhaNova);
}
private void novaVenda() {
venda = new Venda();
venda.setNomeCliente(" ");
dlgJanela.close();
}
}
