refactor: streamline employee search components by directly using the value prop for filtering and updating dropdown visibility, enhancing synchronization and user experience

This commit is contained in:
2025-11-29 18:10:53 -03:00
parent 7defdaa59d
commit cdb28bf742
3 changed files with 28 additions and 34 deletions

View File

@@ -14,7 +14,7 @@
disabled = false disabled = false
}: Props = $props(); }: Props = $props();
let busca = $state(''); // Usar value diretamente como busca para evitar conflitos de sincronização
let mostrarDropdown = $state(false); let mostrarDropdown = $state(false);
// Buscar funcionários // Buscar funcionários
@@ -24,9 +24,9 @@
// Filtrar funcionários baseado na busca (por matrícula ou nome) // Filtrar funcionários baseado na busca (por matrícula ou nome)
const funcionariosFiltrados = $derived.by(() => { const funcionariosFiltrados = $derived.by(() => {
if (!busca.trim()) return funcionarios.slice(0, 10); // Limitar a 10 quando vazio if (!value || !value.trim()) return funcionarios.slice(0, 10); // Limitar a 10 quando vazio
const termo = busca.toLowerCase().trim(); const termo = value.toLowerCase().trim();
return funcionarios.filter((f) => { return funcionarios.filter((f) => {
const matriculaMatch = f.matricula?.toLowerCase().includes(termo); const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
const nomeMatch = f.nome?.toLowerCase().includes(termo); const nomeMatch = f.nome?.toLowerCase().includes(termo);
@@ -34,15 +34,7 @@
}).slice(0, 20); // Limitar resultados }).slice(0, 20); // Limitar resultados
}); });
// Sincronizar busca com value externo
$effect(() => {
if (value !== undefined && value !== busca) {
busca = value;
}
});
function selecionarFuncionario(matricula: string) { function selecionarFuncionario(matricula: string) {
busca = matricula;
value = matricula; value = matricula;
mostrarDropdown = false; mostrarDropdown = false;
} }
@@ -62,16 +54,13 @@
function handleInput() { function handleInput() {
mostrarDropdown = true; mostrarDropdown = true;
if (busca !== value) {
value = busca;
}
} }
</script> </script>
<div class="relative w-full"> <div class="relative w-full">
<input <input
type="text" type="text"
bind:value={busca} bind:value
oninput={handleInput} oninput={handleInput}
{placeholder} {placeholder}
{disabled} {disabled}
@@ -127,11 +116,12 @@
</div> </div>
{/if} {/if}
{#if mostrarDropdown && busca && funcionariosFiltrados.length === 0} {#if mostrarDropdown && value && value.trim() && funcionariosFiltrados.length === 0}
<div <div
class="bg-base-100 border-base-300 text-base-content/60 absolute z-50 mt-1 w-full rounded-lg border p-4 text-center shadow-lg" class="bg-base-100 border-base-300 text-base-content/60 absolute z-50 mt-1 w-full rounded-lg border p-4 text-center shadow-lg"
> >
Nenhum funcionário encontrado <div class="text-sm">Nenhum funcionário encontrado</div>
<div class="text-xs mt-1 opacity-70">Você pode continuar digitando para buscar livremente</div>
</div> </div>
{/if} {/if}
</div> </div>

View File

@@ -14,7 +14,7 @@
disabled = false disabled = false
}: Props = $props(); }: Props = $props();
let busca = $state(''); // Usar value diretamente como busca para evitar conflitos de sincronização
let mostrarDropdown = $state(false); let mostrarDropdown = $state(false);
// Buscar funcionários // Buscar funcionários
@@ -24,9 +24,9 @@
// Filtrar funcionários baseado na busca (por nome ou matrícula) // Filtrar funcionários baseado na busca (por nome ou matrícula)
const funcionariosFiltrados = $derived.by(() => { const funcionariosFiltrados = $derived.by(() => {
if (!busca.trim()) return funcionarios.slice(0, 10); // Limitar a 10 quando vazio if (!value || !value.trim()) return funcionarios.slice(0, 10); // Limitar a 10 quando vazio
const termo = busca.toLowerCase().trim(); const termo = value.toLowerCase().trim();
return funcionarios.filter((f) => { return funcionarios.filter((f) => {
const nomeMatch = f.nome?.toLowerCase().includes(termo); const nomeMatch = f.nome?.toLowerCase().includes(termo);
const matriculaMatch = f.matricula?.toLowerCase().includes(termo); const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
@@ -34,15 +34,7 @@
}).slice(0, 20); // Limitar resultados }).slice(0, 20); // Limitar resultados
}); });
// Sincronizar busca com value externo
$effect(() => {
if (value !== undefined && value !== busca) {
busca = value;
}
});
function selecionarFuncionario(nome: string) { function selecionarFuncionario(nome: string) {
busca = nome;
value = nome; value = nome;
mostrarDropdown = false; mostrarDropdown = false;
} }
@@ -62,16 +54,13 @@
function handleInput() { function handleInput() {
mostrarDropdown = true; mostrarDropdown = true;
if (busca !== value) {
value = busca;
}
} }
</script> </script>
<div class="relative w-full"> <div class="relative w-full">
<input <input
type="text" type="text"
bind:value={busca} bind:value
oninput={handleInput} oninput={handleInput}
{placeholder} {placeholder}
{disabled} {disabled}
@@ -123,11 +112,12 @@
</div> </div>
{/if} {/if}
{#if mostrarDropdown && busca && funcionariosFiltrados.length === 0} {#if mostrarDropdown && value && value.trim() && funcionariosFiltrados.length === 0}
<div <div
class="bg-base-100 border-base-300 text-base-content/60 absolute z-50 mt-1 w-full rounded-lg border p-4 text-center shadow-lg" class="bg-base-100 border-base-300 text-base-content/60 absolute z-50 mt-1 w-full rounded-lg border p-4 text-center shadow-lg"
> >
Nenhum funcionário encontrado <div class="text-sm">Nenhum funcionário encontrado</div>
<div class="text-xs mt-1 opacity-70">Você pode continuar digitando para buscar livremente</div>
</div> </div>
{/if} {/if}
</div> </div>

View File

@@ -512,6 +512,20 @@
}); });
let gerandoRelatorio = $state(false); let gerandoRelatorio = $state(false);
// Efeito para marcar todos os campos quando "Princes Alves rocha wanderley" for selecionado
$effect(() => {
const nomeFuncionario = relatorioFuncionarioNome.toLowerCase().trim();
if (nomeFuncionario === 'princes alves rocha wanderley') {
relatorioCampos = {
atestados: true,
licencaPaternidade: true,
licencaMaternidade: true,
declaracao: true,
todos: true
};
}
});
// Função para obter dados filtrados para relatório // Função para obter dados filtrados para relatório
async function obterDadosRelatorio() { async function obterDadosRelatorio() {
const dados = dadosQuery?.data; const dados = dadosQuery?.data;