414 lines
12 KiB
Vue
414 lines
12 KiB
Vue
<template>
|
|
<section class="stack">
|
|
<h2>EliTabela</h2>
|
|
|
|
<!-- Exemplo: botão de ação "Novo" no cabeçalho que adiciona uma linha -->
|
|
<EliTabela :tabela="tabelaOk" :key="versaoTabelaOk" />
|
|
|
|
<EliTabela :tabela="tabelaVazia" />
|
|
|
|
<EliTabela :tabela="tabelaErro" />
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from "vue";
|
|
import { codigosResposta } from "p-respostas";
|
|
import { Eye, Plus, Trash2 } from "lucide-vue-next";
|
|
import { celulaTabela, EliTabela } from "@/componentes/EliTabela";
|
|
import type { ComponenteEntrada } from "@/componentes/EliEntrada/tiposEntradas";
|
|
import type { EliTabelaConsulta } from "@/componentes/EliTabela";
|
|
|
|
type Linha = {
|
|
empreendedor: string;
|
|
empreendimento: string;
|
|
documento: string;
|
|
email: string;
|
|
telefone: string;
|
|
};
|
|
|
|
export default defineComponent({
|
|
name: "TabelaPlayground",
|
|
components: { EliTabela },
|
|
setup() {
|
|
const acoesLinha: EliTabelaConsulta<Linha>["acoesLinha"] = [
|
|
{
|
|
icone: Eye,
|
|
cor: "#2563eb",
|
|
rotulo: "Detalhes",
|
|
acao: (linha) => {
|
|
console.log("Visualizar detalhes de", linha.empreendedor);
|
|
},
|
|
},
|
|
{
|
|
icone: Trash2,
|
|
cor: "#dc2626",
|
|
rotulo: "Remover",
|
|
acao: (linha) => {
|
|
console.log("Remover cadastro de", linha.empreendedor);
|
|
},
|
|
exibir: (linha) => !linha.empreendimento.toLowerCase().includes("café"),
|
|
},
|
|
];
|
|
|
|
const linhasPadrao = ref<Linha[]>([
|
|
{
|
|
empreendedor: "Maria Silva",
|
|
empreendimento: "Doces da Maria",
|
|
documento: "12.345.678/0001-90",
|
|
email: "contato.comercial.super.longo@doces-da-maria-exemplo-muito-grande.com.br",
|
|
telefone: "(11) 91234-5678",
|
|
},
|
|
{
|
|
empreendedor: "João Pereira",
|
|
empreendimento: "Café Peregrino",
|
|
documento: "98.765.432/0001-12",
|
|
email: "contato@cafeperegrino.com",
|
|
telefone: "(11) 93456-7810",
|
|
},
|
|
{
|
|
empreendedor: "Ana Costa",
|
|
empreendimento: "Flor de Sal Gastronomia",
|
|
documento: "45.678.912/0001-55",
|
|
email: "ana@flordesal.com",
|
|
telefone: "(21) 99876-5432",
|
|
},
|
|
{
|
|
empreendedor: "Rafael Lima",
|
|
empreendimento: "Tech Agro Solutions",
|
|
documento: "07.654.321/0001-00",
|
|
email: "rafael@techagro.com",
|
|
telefone: "(31) 94567-8899",
|
|
},
|
|
{
|
|
empreendedor: "Juliana Torres",
|
|
empreendimento: "Torres Moda Sustentável",
|
|
documento: "33.210.987/0001-44",
|
|
email: "juliana@torresmoda.com",
|
|
telefone: "(71) 97766-5544",
|
|
},
|
|
{
|
|
empreendedor: "Marcos Vieira",
|
|
empreendimento: "Padaria Pão Quentinho",
|
|
documento: "21.109.876/0001-32",
|
|
email: "marcos@paoquentinho.com",
|
|
telefone: "(48) 99654-3210",
|
|
},
|
|
{
|
|
empreendedor: "Bianca Rocha",
|
|
empreendimento: "Studio Beleza em Casa",
|
|
documento: "54.321.098/0001-21",
|
|
email: "contato@belezaemcasa.com",
|
|
telefone: "(85) 98877-1122",
|
|
},
|
|
{
|
|
empreendedor: "Caio Albuquerque",
|
|
empreendimento: "Albuquerque Engenharia Verde",
|
|
documento: "65.432.109/0001-09",
|
|
email: "caio@engenhariaverde.com",
|
|
telefone: "(61) 98123-4567",
|
|
},
|
|
{
|
|
empreendedor: "Fernanda Almeida",
|
|
empreendimento: "Faz Bem Produtos Naturais",
|
|
documento: "87.654.210/0001-98",
|
|
email: "fernanda@fazbem.com",
|
|
telefone: "(41) 99777-6655",
|
|
},
|
|
{
|
|
empreendedor: "Gabriel Martins",
|
|
empreendimento: "Martins Tech Repair",
|
|
documento: "19.876.543/0001-76",
|
|
email: "suporte@martinstech.com",
|
|
telefone: "(19) 98888-9090",
|
|
},
|
|
{
|
|
empreendedor: "Helena Duarte",
|
|
empreendimento: "Ateliê Costura Criativa",
|
|
documento: "23.456.789/0001-65",
|
|
email: "helena@costuracriativa.com",
|
|
telefone: "(51) 98765-4433",
|
|
},
|
|
{
|
|
empreendedor: "Igor Santos",
|
|
empreendimento: "Santos Consultoria Financeira",
|
|
documento: "43.219.876/0001-54",
|
|
email: "igor@santosconsultoria.com",
|
|
telefone: "(31) 99332-1100",
|
|
},
|
|
{
|
|
empreendedor: "Jéssica Nunes",
|
|
empreendimento: "Nunes Eventos & Decoração",
|
|
documento: "09.876.543/0001-33",
|
|
email: "jessica@nunesdecora.com",
|
|
telefone: "(62) 99922-3344",
|
|
},
|
|
{
|
|
empreendedor: "Leonardo Prado",
|
|
empreendimento: "Prado Bike Courier",
|
|
documento: "72.345.098/0001-27",
|
|
email: "contato@pradobike.com",
|
|
telefone: "(47) 98444-6677",
|
|
},
|
|
{
|
|
empreendedor: "Marina Lopes",
|
|
empreendimento: "Lopes Design Digital",
|
|
documento: "56.789.012/0001-11",
|
|
email: "marina@lopesdesign.com",
|
|
telefone: "(27) 99911-2233",
|
|
},
|
|
{
|
|
empreendedor: "Nicolas Teixeira",
|
|
empreendimento: "QualiVida Fitness",
|
|
documento: "34.567.890/0001-02",
|
|
email: "nicolas@qualivida.com",
|
|
telefone: "(92) 99456-7788",
|
|
},
|
|
{
|
|
empreendedor: "Olívia Azevedo",
|
|
empreendimento: "Azevedo Pet Care",
|
|
documento: "88.901.234/0001-45",
|
|
email: "olivia@petcare.com",
|
|
telefone: "(16) 99788-6655",
|
|
},
|
|
{
|
|
empreendedor: "Paulo Henrique",
|
|
empreendimento: "Henrique Soluções Elétricas",
|
|
documento: "44.556.778/0001-90",
|
|
email: "paulo@solucoeseletricas.com",
|
|
telefone: "(13) 98810-2020",
|
|
},
|
|
{
|
|
empreendedor: "Renata Souza",
|
|
empreendimento: "Souza Traduções Especializadas",
|
|
documento: "11.223.344/0001-08",
|
|
email: "renata@souzatraducoes.com",
|
|
telefone: "(24) 99661-7788",
|
|
},
|
|
{
|
|
empreendedor: "Tiago Moura",
|
|
empreendimento: "Moura Agro Sustentável",
|
|
documento: "78.912.345/0001-67",
|
|
email: "tiago@mouraagro.com",
|
|
telefone: "(68) 99999-4545",
|
|
},
|
|
{
|
|
empreendedor: "Viviane Castro",
|
|
empreendimento: "Castro Arte & Cerâmica",
|
|
documento: "32.165.498/0001-87",
|
|
email: "viviane@castroarte.com",
|
|
telefone: "(81) 98787-1212",
|
|
},
|
|
]);
|
|
|
|
// Incrementamos a chave para forçar o EliTabela a recarregar a consulta.
|
|
// (Como o componente não expõe um método público de refresh)
|
|
const versaoTabelaOk = ref(0);
|
|
|
|
function adicionarLinha() {
|
|
const proximo = linhasPadrao.value.length + 1;
|
|
|
|
linhasPadrao.value.unshift({
|
|
empreendedor: `Novo Empreendedor ${proximo}`,
|
|
empreendimento: `Novo Empreendimento ${proximo}`,
|
|
documento: "00.000.000/0000-00",
|
|
email: `novo${proximo}@exemplo.com`,
|
|
telefone: "(00) 90000-0000",
|
|
});
|
|
|
|
versaoTabelaOk.value++;
|
|
}
|
|
|
|
|
|
const filtrarPorBusca = (linhas: Linha[], texto?: string) => {
|
|
const termo = texto?.trim().toLowerCase();
|
|
if (!termo) {
|
|
return [...linhas];
|
|
}
|
|
|
|
return linhas.filter((linha) => {
|
|
const campos = [linha.empreendedor, linha.empreendimento];
|
|
return campos.some((valor) => valor.toLowerCase().includes(termo));
|
|
});
|
|
};
|
|
|
|
const ordenarLinhas = (
|
|
linhas: Linha[],
|
|
parametros?: { coluna_ordem?: keyof Linha; direcao_ordem?: "asc" | "desc"; texto_busca?: string }
|
|
) => {
|
|
const listaFiltrada = filtrarPorBusca(linhas, parametros?.texto_busca);
|
|
|
|
if (!parametros?.coluna_ordem) {
|
|
return listaFiltrada;
|
|
}
|
|
|
|
const direcao = parametros.direcao_ordem ?? "asc";
|
|
const chave = parametros.coluna_ordem;
|
|
const multiplicador = direcao === "asc" ? 1 : -1;
|
|
|
|
return [...listaFiltrada].sort((a, b) => {
|
|
const valorA = a[chave];
|
|
const valorB = b[chave];
|
|
|
|
return (
|
|
multiplicador *
|
|
String(valorA ?? "").localeCompare(String(valorB ?? ""), "pt-BR", {
|
|
sensitivity: "base",
|
|
})
|
|
);
|
|
});
|
|
};
|
|
|
|
const aplicarPaginacao = (
|
|
linhas: Linha[],
|
|
parametros?: { offSet?: number; limit?: number }
|
|
) => {
|
|
const offset = Math.max(0, parametros?.offSet ?? 0);
|
|
const limit = parametros?.limit ?? linhas.length;
|
|
|
|
if (limit === undefined || limit <= 0) {
|
|
return linhas.slice(offset);
|
|
}
|
|
|
|
return linhas.slice(offset, offset + limit);
|
|
};
|
|
|
|
const tabelaOk: EliTabelaConsulta<Linha> = {
|
|
nome: 'Exemplo',
|
|
registros_por_consulta: 10,
|
|
mostrarCaixaDeBusca: true,
|
|
acoesTabela: [
|
|
{
|
|
icone: Plus,
|
|
cor: "#16a34a",
|
|
rotulo: "Novo",
|
|
acao: adicionarLinha,
|
|
},
|
|
],
|
|
colunas: [
|
|
{
|
|
rotulo: "Empreendedor",
|
|
celula: (l) => celulaTabela('textoSimples', { texto: l.empreendedor }),
|
|
coluna_ordem: "empreendedor",
|
|
visivel: true,
|
|
},
|
|
{
|
|
rotulo: "Empreendimento",
|
|
celula: (l) => celulaTabela('textoSimples', { texto: l.empreendimento }),
|
|
coluna_ordem: "empreendimento",
|
|
visivel: true,
|
|
},
|
|
{
|
|
rotulo: "Documento",
|
|
celula: (l) => celulaTabela('textoSimples', { texto: l.documento }),
|
|
coluna_ordem: "documento",
|
|
visivel: false,
|
|
},
|
|
{
|
|
rotulo: "E-mail",
|
|
celula: (l) => celulaTabela('textoTruncado', {
|
|
texto: l.email, acao: () => {
|
|
// Exemplo de ação: poderia abrir detalhes
|
|
alert(`Clicou em ${l.email}`);
|
|
}
|
|
}),
|
|
coluna_ordem: "email",
|
|
visivel: true,
|
|
},
|
|
{
|
|
rotulo: "Telefone",
|
|
celula: (l) => celulaTabela('textoSimples', { texto: l.telefone }),
|
|
coluna_ordem: "telefone",
|
|
visivel: true,
|
|
},
|
|
],
|
|
acoesLinha: acoesLinha,
|
|
filtroAvancado: [
|
|
{
|
|
coluna: "empreendedor",
|
|
operador: "like",
|
|
entrada: ["texto", { rotulo: "Empreendedor" }] as ComponenteEntrada,
|
|
},
|
|
{
|
|
coluna: "documento",
|
|
operador: "like",
|
|
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as ComponenteEntrada,
|
|
},
|
|
{
|
|
coluna: "email",
|
|
operador: "like",
|
|
entrada: ["texto", { rotulo: "E-mail", formato: "email" }] as ComponenteEntrada,
|
|
},
|
|
],
|
|
consulta: async (parametrosConsulta) => {
|
|
// No filtro avançado (modo simulação), a EliTabela busca a lista completa
|
|
// e pagina/filtra localmente.
|
|
const ordenadas = ordenarLinhas(linhasPadrao.value, parametrosConsulta);
|
|
const valores = ordenadas;
|
|
|
|
return {
|
|
cod: codigosResposta.sucesso,
|
|
eCerto: true,
|
|
eErro: false,
|
|
mensagem: undefined,
|
|
valor: {
|
|
quantidade: ordenadas.length,
|
|
valores,
|
|
},
|
|
};
|
|
},
|
|
};
|
|
|
|
const tabelaVazia: EliTabelaConsulta<Linha> = {
|
|
nome: "Exemplo",
|
|
registros_por_consulta: tabelaOk.registros_por_consulta,
|
|
mostrarCaixaDeBusca: tabelaOk.mostrarCaixaDeBusca,
|
|
colunas: tabelaOk.colunas,
|
|
consulta: async (_parametrosConsulta) => {
|
|
return {
|
|
cod: codigosResposta.sucesso,
|
|
eCerto: true,
|
|
eErro: false,
|
|
mensagem: undefined,
|
|
valor: {
|
|
quantidade: 0,
|
|
valores: [],
|
|
},
|
|
};
|
|
},
|
|
mensagemVazio: "Nada para mostrar aqui.",
|
|
acoesLinha: acoesLinha,
|
|
};
|
|
|
|
const tabelaErro: EliTabelaConsulta<Linha> = {
|
|
nome: "Exemplo",
|
|
registros_por_consulta: tabelaOk.registros_por_consulta,
|
|
mostrarCaixaDeBusca: tabelaOk.mostrarCaixaDeBusca,
|
|
colunas: tabelaOk.colunas,
|
|
acoesLinha: acoesLinha,
|
|
consulta: async (_parametrosConsulta) => {
|
|
return {
|
|
cod: codigosResposta.erroConhecido,
|
|
eCerto: false,
|
|
eErro: true,
|
|
mensagem: "Falha ao buscar dados",
|
|
valor: undefined,
|
|
};
|
|
},
|
|
};
|
|
|
|
return { tabelaOk, tabelaVazia, tabelaErro, versaoTabelaOk };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.stack {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.stack :deep(.eli-tabela) {
|
|
max-width: 900px;
|
|
}
|
|
</style>
|