bkp

src/components/eli/EliTabela/EliTabela.vue

@@ -8,6 +8,7 @@ import { computed, defineComponent, h, onBeforeUnmount, onMounted, PropType, ref
 import type { ComponentPublicInstance } from "vue";
 import { ArrowDown, ArrowUp, MoreVertical } from "lucide-vue-next";
 import { codigosResposta } from "p-respostas";
+import EliTabelaCaixaDeBusca from "./EliTabelaCaixaDeBusca.vue";
 import EliTabelaPaginacao from "./EliTabelaPaginacao.vue";
 import type { EliTabelaConsulta } from "./types-eli-tabela";
 
@@ -31,9 +32,11 @@ export default defineComponent({
     const acoesVisiveis = ref<boolean[][]>([]);
     const menuAberto = ref<number | null>(null);
     const menuElementos = new Map<number, HTMLElement>();
+    const valorBusca = ref<string>("");
     const paginaAtual = ref(1);
     const colunaOrdenacao = ref<string | null>(null);
     const direcaoOrdenacao = ref<"asc" | "desc">("asc");
+    const exibirBusca = computed(() => Boolean(props.tabela.mostrarCaixaDeBusca));
     const registrosPorConsulta = computed(() => {
       const valor = props.tabela.registros_por_consulta;
       if (typeof valor === "number" && valor > 0) {
@@ -94,6 +97,18 @@ export default defineComponent({
       }
     }
 
+    function atualizarBusca(texto: string) {
+      if (valorBusca.value === texto) {
+        return;
+      }
+      valorBusca.value = texto;
+      if (paginaAtual.value !== 1) {
+        paginaAtual.value = 1;
+      } else {
+        void carregar();
+      }
+    }
+
     function irParaPagina(pagina: number) {
       const alvo = Math.min(Math.max(1, pagina), totalPaginas.value);
       if (alvo !== paginaAtual.value) {
@@ -174,11 +189,16 @@ export default defineComponent({
         direcao_ordem?: "asc" | "desc";
         offSet: number;
         limit: number;
+        texto_busca?: string;
       } = {
         offSet: offset,
         limit: limite,
       };
 
+      if (valorBusca.value) {
+        parametrosConsulta.texto_busca = valorBusca.value;
+      }
+
       if (colunaOrdenacao.value) {
         parametrosConsulta.coluna_ordem = colunaOrdenacao.value as never;
         parametrosConsulta.direcao_ordem = direcaoOrdenacao.value;
@@ -215,7 +235,7 @@ export default defineComponent({
           return;
         }
 
-        const acoes = tabelaConfig.acoes ?? [];
+        const acoes = tabelaConfig.acoesLinha ?? [];
 
         if (!acoes.length) {
           acoesVisiveis.value = [];
@@ -284,6 +304,20 @@ export default defineComponent({
       void carregar();
     });
 
+    watch(
+      () => props.tabela.mostrarCaixaDeBusca,
+      (mostrar) => {
+        if (!mostrar && valorBusca.value) {
+          valorBusca.value = "";
+          if (paginaAtual.value !== 1) {
+            paginaAtual.value = 1;
+          } else {
+            void carregar();
+          }
+        }
+      }
+    );
+
     watch(paginaAtual, (nova, antiga) => {
       if (nova !== antiga) {
         void carregar();
@@ -301,6 +335,7 @@ export default defineComponent({
         menuElementos.clear();
         colunaOrdenacao.value = null;
         direcaoOrdenacao.value = "asc";
+        valorBusca.value = "";
         if (paginaAtual.value !== 1) {
           paginaAtual.value = 1;
         } else {
@@ -337,7 +372,7 @@ export default defineComponent({
       }
 
       const colunas = tabela.colunas;
-      const acoes = tabela.acoes ?? [];
+      const acoes = tabela.acoesLinha ?? [];
       const temAcoes = acoes.length > 0;
 
       if (!linhas.value.length) {
@@ -408,7 +443,18 @@ export default defineComponent({
         );
       }
 
-      const conteudoTabela = [
+      const conteudoTabela: ReturnType<typeof h>[] = [];
+
+      if (exibirBusca.value) {
+        conteudoTabela.push(
+          h(EliTabelaCaixaDeBusca, {
+            modelo: valorBusca.value,
+            onBuscar: atualizarBusca,
+          })
+        );
+      }
+
+      conteudoTabela.push(
         h("table", { class: "eli-tabela__table" }, [
           h(
             "thead",
@@ -583,8 +629,8 @@ export default defineComponent({
               );
             })
           ),
-        ]),
-      ];
+        ])
+      );
 
       if (totalPaginas.value > 1 && quantidade.value > 0) {
         conteudoTabela.push(