Adicionado celular do tipo componente
This commit is contained in:
parent
1446d6225b
commit
9b2651d5c7
17 changed files with 1386 additions and 1075 deletions
53
src/playground/CelulaAtivoCustom.vue
Normal file
53
src/playground/CelulaAtivoCustom.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="celula-ativo-custom">
|
||||
<span
|
||||
class="celula-ativo-custom__indicador"
|
||||
:class="[ativo ? 'celula-ativo-custom__indicador--ativo' : 'celula-ativo-custom__indicador--inativo']"
|
||||
>
|
||||
<component :is="ativo ? CircleCheck : CircleX" :size="16" />
|
||||
{{ ativo ? 'Ativo' : 'Inativo' }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { CircleCheck, CircleX } from "@lucide/vue"
|
||||
import { defineComponent } from "vue"
|
||||
|
||||
export default defineComponent({
|
||||
name: "CelulaAtivoCustom",
|
||||
components: { CircleCheck, CircleX },
|
||||
props: {
|
||||
ativo: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return { CircleCheck, CircleX }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.celula-ativo-custom__indicador {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.celula-ativo-custom__indicador--ativo {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.celula-ativo-custom__indicador--inativo {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,11 +7,11 @@
|
|||
*/
|
||||
import { BadgeCheck, Eye, Pencil, Trash2 } from "@lucide/vue"
|
||||
|
||||
import type { ComponenteEntrada } from "@/componentes/EliEntrada/tiposEntradas"
|
||||
import type { tipoEliTabelaConsulta } from "@/componentes/EliTabela"
|
||||
import { celulaTabela } from "@/componentes/EliTabela"
|
||||
|
||||
import { AreaAtuacaoDetalhes, type tipoEmpreendedores } from "./api_simulador/dados"
|
||||
import CelulaAtivoCustom from "./CelulaAtivoCustom.vue"
|
||||
|
||||
/** Mapeamento de cor por área de atuação para uso nos chips da tabela */
|
||||
const corAreaAtuacao: Record<tipoEmpreendedores["areas_atuacao"][number], string> = {
|
||||
|
|
@ -112,6 +112,15 @@ export const colunasTabela: tipoEliTabelaConsulta<tipoEmpreendedores>["colunas"]
|
|||
celula: (l) => celulaTabela("numero", { numero: l.peso_kg, sufixo: "kg" }),
|
||||
visivel: false,
|
||||
},
|
||||
{
|
||||
rotulo: "Ativo (Custom)",
|
||||
celula: (l) =>
|
||||
celulaTabela("componente", {
|
||||
componente: CelulaAtivoCustom,
|
||||
props: () => Promise.resolve({ ativo: l.ativo }),
|
||||
}),
|
||||
visivel: true,
|
||||
},
|
||||
{
|
||||
rotulo: "Status",
|
||||
celula: (l) =>
|
||||
|
|
@ -145,100 +154,7 @@ export const colunasTabela: tipoEliTabelaConsulta<tipoEmpreendedores>["colunas"]
|
|||
},
|
||||
]
|
||||
|
||||
/** Filtros avançados da tabela de empreendedores */
|
||||
export const filtrosAvancados: tipoEliTabelaConsulta<tipoEmpreendedores>["filtroAvancado"] = [
|
||||
{
|
||||
chave: "empreendedor",
|
||||
rotulo: "Empreendedor",
|
||||
filtro: (valor: unknown) => {
|
||||
if (!valor) return undefined
|
||||
return { coluna: "empreendedor", operador: "like" as const, valor: valor as string }
|
||||
},
|
||||
entrada: ["texto", { rotulo: "Empreendedor" }] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "empreendimento",
|
||||
rotulo: "Empreendimento",
|
||||
filtro: (valor: unknown) => {
|
||||
if (!valor) return undefined
|
||||
return { coluna: "empreendimento", operador: "like" as const, valor: valor as string }
|
||||
},
|
||||
entrada: ["texto", { rotulo: "Empreendimento" }] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "documento",
|
||||
rotulo: "Documento",
|
||||
filtro: (valor: unknown) => {
|
||||
if (!valor) return undefined
|
||||
return { coluna: "documento", operador: "like" as const, valor: valor as string }
|
||||
},
|
||||
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "email",
|
||||
rotulo: "E-mail",
|
||||
filtro: (valor: unknown) => {
|
||||
if (!valor) return undefined
|
||||
return { coluna: "email", operador: "like" as const, valor: valor as string }
|
||||
},
|
||||
entrada: ["texto", { rotulo: "E-mail", formato: "email" }] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "ativo",
|
||||
rotulo: "Ativo",
|
||||
filtro: (valor: unknown) => {
|
||||
return { coluna: "ativo", operador: "=" as const, valor: valor as boolean }
|
||||
},
|
||||
entrada: [
|
||||
"confirmacao",
|
||||
{ rotulo: "Ativo", rotuloAtivo: "Apenas ativos", rotuloInativo: "Apenas inativos" },
|
||||
] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "faturamento_min",
|
||||
rotulo: "Faturamento mínimo",
|
||||
filtro: (valor: unknown) => {
|
||||
if (valor === null || valor === undefined) return undefined
|
||||
return { coluna: "faturamento", operador: ">=" as const, valor: valor as number }
|
||||
},
|
||||
entrada: ["numero", { rotulo: "Faturamento mínimo (R$)" }] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "areas_atuacao",
|
||||
rotulo: "Área de Atuação",
|
||||
filtro: (valor: unknown) => {
|
||||
const arr = valor as string[]
|
||||
if (!arr.length) return undefined
|
||||
return { coluna: "areas_atuacao", operador: "∩" as const, valor: arr }
|
||||
},
|
||||
entrada: [
|
||||
"selecaoMultipla",
|
||||
{
|
||||
rotulo: "Área de Atuação",
|
||||
limpavel: true,
|
||||
itens: () =>
|
||||
Object.entries(AreaAtuacaoDetalhes).map(([chave, rotulo]) => ({ chave, rotulo })),
|
||||
},
|
||||
] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "areas_atuacao2",
|
||||
rotulo: "Área de Atuação (2)",
|
||||
filtro: (valor: unknown) => {
|
||||
if (!valor) return undefined
|
||||
return { coluna: "areas_atuacao", operador: "in" as const, valor }
|
||||
},
|
||||
entrada: [
|
||||
"selecao",
|
||||
{
|
||||
rotulo: "Área de Atuação",
|
||||
limpavel: true,
|
||||
itens: () =>
|
||||
Object.entries(AreaAtuacaoDetalhes).map(([chave, rotulo]) => ({ chave, rotulo })),
|
||||
},
|
||||
] as ComponenteEntrada,
|
||||
},
|
||||
]
|
||||
export { filtrosAvancados } from "./useTabelaPlaygroundFiltros"
|
||||
|
||||
/**
|
||||
* Executa a consulta na ApiSimulacao, traduzindo busca textual e filtros avançados para FiltroDelta.
|
||||
|
|
|
|||
107
src/playground/useTabelaPlaygroundFiltros.ts
Normal file
107
src/playground/useTabelaPlaygroundFiltros.ts
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
/**
|
||||
* useTabelaPlaygroundFiltros
|
||||
* Definições de filtros avançados do playground da EliTabela.
|
||||
* Extraído de useTabelaPlaygroundConfig.ts para manter cada arquivo abaixo de 250 linhas.
|
||||
*
|
||||
* @see useTabelaPlaygroundConfig.ts — definições de colunas e ações
|
||||
* @see useTabelaPlayground.ts — composable que consome estas configurações
|
||||
*/
|
||||
import type { ComponenteEntrada } from "@/componentes/EliEntrada/tiposEntradas"
|
||||
import type { tipoEliTabelaConsulta } from "@/componentes/EliTabela"
|
||||
|
||||
import { AreaAtuacaoDetalhes, type tipoEmpreendedores } from "./api_simulador/dados"
|
||||
|
||||
/** Filtros avançados da tabela de empreendedores */
|
||||
export const filtrosAvancados: tipoEliTabelaConsulta<tipoEmpreendedores>["filtroAvancado"] = [
|
||||
{
|
||||
chave: "empreendedor",
|
||||
rotulo: "Empreendedor",
|
||||
filtro: (valor: unknown) => {
|
||||
if (!valor) return undefined
|
||||
return { coluna: "empreendedor", operador: "like" as const, valor: valor as string }
|
||||
},
|
||||
entrada: ["texto", { rotulo: "Empreendedor" }] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "empreendimento",
|
||||
rotulo: "Empreendimento",
|
||||
filtro: (valor: unknown) => {
|
||||
if (!valor) return undefined
|
||||
return { coluna: "empreendimento", operador: "like" as const, valor: valor as string }
|
||||
},
|
||||
entrada: ["texto", { rotulo: "Empreendimento" }] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "documento",
|
||||
rotulo: "Documento",
|
||||
filtro: (valor: unknown) => {
|
||||
if (!valor) return undefined
|
||||
return { coluna: "documento", operador: "like" as const, valor: valor as string }
|
||||
},
|
||||
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "email",
|
||||
rotulo: "E-mail",
|
||||
filtro: (valor: unknown) => {
|
||||
if (!valor) return undefined
|
||||
return { coluna: "email", operador: "like" as const, valor: valor as string }
|
||||
},
|
||||
entrada: ["texto", { rotulo: "E-mail", formato: "email" }] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "ativo",
|
||||
rotulo: "Ativo",
|
||||
filtro: (valor: unknown) => {
|
||||
return { coluna: "ativo", operador: "=" as const, valor: valor as boolean }
|
||||
},
|
||||
entrada: [
|
||||
"confirmacao",
|
||||
{ rotulo: "Ativo", rotuloAtivo: "Apenas ativos", rotuloInativo: "Apenas inativos" },
|
||||
] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "faturamento_min",
|
||||
rotulo: "Faturamento mínimo",
|
||||
filtro: (valor: unknown) => {
|
||||
if (valor === null || valor === undefined) return undefined
|
||||
return { coluna: "faturamento", operador: ">=" as const, valor: valor as number }
|
||||
},
|
||||
entrada: ["numero", { rotulo: "Faturamento mínimo (R$)" }] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "areas_atuacao",
|
||||
rotulo: "Área de Atuação",
|
||||
filtro: (valor: unknown) => {
|
||||
const arr = valor as string[]
|
||||
if (!arr.length) return undefined
|
||||
return { coluna: "areas_atuacao", operador: "∩" as const, valor: arr }
|
||||
},
|
||||
entrada: [
|
||||
"selecaoMultipla",
|
||||
{
|
||||
rotulo: "Área de Atuação",
|
||||
limpavel: true,
|
||||
itens: () =>
|
||||
Object.entries(AreaAtuacaoDetalhes).map(([chave, rotulo]) => ({ chave, rotulo })),
|
||||
},
|
||||
] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
chave: "areas_atuacao2",
|
||||
rotulo: "Área de Atuação (2)",
|
||||
filtro: (valor: unknown) => {
|
||||
if (!valor) return undefined
|
||||
return { coluna: "areas_atuacao", operador: "in" as const, valor }
|
||||
},
|
||||
entrada: [
|
||||
"selecao",
|
||||
{
|
||||
rotulo: "Área de Atuação",
|
||||
limpavel: true,
|
||||
itens: () =>
|
||||
Object.entries(AreaAtuacaoDetalhes).map(([chave, rotulo]) => ({ chave, rotulo })),
|
||||
},
|
||||
] as ComponenteEntrada,
|
||||
},
|
||||
]
|
||||
Loading…
Add table
Add a link
Reference in a new issue