bkp

src/playground/tabela.playground.vue

@@ -29,7 +29,7 @@ export default defineComponent({
   name: "TabelaPlayground",
   components: { EliTabela },
   setup() {
-    const acoesTabela: EliTabelaConsulta<Linha>["acoes"] = [
+    const acoesTabela: EliTabelaConsulta<Linha>["acoesLinha"] = [
       {
         icone: Eye,
         cor: "#2563eb",
@@ -200,19 +200,33 @@ export default defineComponent({
     ];
 
 
+    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" }
+      parametros?: { coluna_ordem?: keyof Linha; direcao_ordem?: "asc" | "desc"; texto_busca?: string }
     ) => {
+      const listaFiltrada = filtrarPorBusca(linhas, parametros?.texto_busca);
+
       if (!parametros?.coluna_ordem) {
-        return [...linhas];
+        return listaFiltrada;
       }
 
       const direcao = parametros.direcao_ordem ?? "asc";
       const chave = parametros.coluna_ordem;
       const multiplicador = direcao === "asc" ? 1 : -1;
 
-      return [...linhas].sort((a, b) => {
+      return [...listaFiltrada].sort((a, b) => {
         const valorA = a[chave];
         const valorB = b[chave];
 
@@ -241,6 +255,7 @@ export default defineComponent({
 
     const tabelaOk: EliTabelaConsulta<Linha> = {
       registros_por_consulta: 10,
+      mostrarCaixaDeBusca: true,
       colunas: [
         {
           rotulo: "Empreendedor",
@@ -272,7 +287,7 @@ export default defineComponent({
           coluna_ordem: "telefone",
         },
       ],
-      acoes: acoesTabela,
+      acoesLinha: acoesTabela,
       consulta: async (parametrosConsulta) => {
         const ordenadas = ordenarLinhas(linhasPadrao, parametrosConsulta);
         const valores = aplicarPaginacao(ordenadas, parametrosConsulta);
@@ -283,7 +298,7 @@ export default defineComponent({
           eErro: false,
           mensagem: undefined,
           valor: {
-            quantidade: linhasPadrao.length,
+            quantidade: ordenadas.length,
             valores,
           },
         };
@@ -292,6 +307,7 @@ export default defineComponent({
 
     const tabelaVazia: EliTabelaConsulta<Linha> = {
       registros_por_consulta: tabelaOk.registros_por_consulta,
+      mostrarCaixaDeBusca: tabelaOk.mostrarCaixaDeBusca,
       colunas: tabelaOk.colunas,
       consulta: async (_parametrosConsulta) => {
         return {
@@ -306,13 +322,14 @@ export default defineComponent({
         };
       },
       mensagemVazio: "Nada para mostrar aqui.",
-      acoes: acoesTabela,
+      acoesLinha: acoesTabela,
     };
 
     const tabelaErro: EliTabelaConsulta<Linha> = {
       registros_por_consulta: tabelaOk.registros_por_consulta,
+      mostrarCaixaDeBusca: tabelaOk.mostrarCaixaDeBusca,
       colunas: tabelaOk.colunas,
-      acoes: acoesTabela,
+      acoesLinha: acoesTabela,
       consulta: async (_parametrosConsulta) => {
         return {
           cod: codigosResposta.erroConhecido,