SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
deyvisonwanderley
2025-11-29 18:10:53 -03:00
parent 7defdaa59d
commit cdb28bf742
3 changed files with 28 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/src/lib/components/FuncionarioMatriculaAutocomplete.svelte
View File

@@ -14,7 +14,7 @@
disabled = false
}: Props = $props();
let busca = $state('');
// Usar value diretamente como busca para evitar conflitos de sincronização
let mostrarDropdown = $state(false);
// Buscar funcionários
@@ -24,9 +24,9 @@
// Filtrar funcionários baseado na busca (por matrícula ou nome)
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) => {
const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
const nomeMatch = f.nome?.toLowerCase().includes(termo);
@@ -34,15 +34,7 @@
}).slice(0, 20); // Limitar resultados
});
// Sincronizar busca com value externo
$effect(() => {
if (value !== undefined && value !== busca) {
busca = value;
}
});
function selecionarFuncionario(matricula: string) {
busca = matricula;
value = matricula;
mostrarDropdown = false;
}
@@ -62,16 +54,13 @@
function handleInput() {
mostrarDropdown = true;
if (busca !== value) {
value = busca;
}
}
</script>
<div class="relative w-full">
<input
type="text"
bind:value={busca}
bind:value
oninput={handleInput}
{placeholder}
{disabled}
@@ -127,11 +116,12 @@
</div>
{/if}
{#if mostrarDropdown && busca && funcionariosFiltrados.length === 0}
{#if mostrarDropdown && value && value.trim() && funcionariosFiltrados.length === 0}
<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"
>
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>
{/if}
</div>

24
apps/web/src/lib/components/FuncionarioNomeAutocomplete.svelte
View File

@@ -14,7 +14,7 @@
disabled = false
}: Props = $props();
let busca = $state('');
// Usar value diretamente como busca para evitar conflitos de sincronização
let mostrarDropdown = $state(false);
// Buscar funcionários
@@ -24,9 +24,9 @@
// Filtrar funcionários baseado na busca (por nome ou matrícula)
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) => {
const nomeMatch = f.nome?.toLowerCase().includes(termo);
const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
@@ -34,15 +34,7 @@
}).slice(0, 20); // Limitar resultados
});
// Sincronizar busca com value externo
$effect(() => {
if (value !== undefined && value !== busca) {
busca = value;
}
});
function selecionarFuncionario(nome: string) {
busca = nome;
value = nome;
mostrarDropdown = false;
}
@@ -62,16 +54,13 @@
function handleInput() {
mostrarDropdown = true;
if (busca !== value) {
value = busca;
}
}
</script>
<div class="relative w-full">
<input
type="text"
bind:value={busca}
bind:value
oninput={handleInput}
{placeholder}
{disabled}
@@ -123,11 +112,12 @@
</div>
{/if}
{#if mostrarDropdown && busca && funcionariosFiltrados.length === 0}
{#if mostrarDropdown && value && value.trim() && funcionariosFiltrados.length === 0}
<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"
>
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>
{/if}
</div>