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:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user