132 lines
3.4 KiB
Svelte
132 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { api } from '@sgse-app/backend/convex/_generated/api';
|
|
import { useQuery } from 'convex-svelte';
|
|
|
|
interface Props {
|
|
value?: string; // Matrícula do funcionário
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
let {
|
|
value = $bindable(''),
|
|
placeholder = 'Digite a matrícula do funcionário',
|
|
disabled = false
|
|
}: Props = $props();
|
|
|
|
// Usar value diretamente como busca para evitar conflitos de sincronização
|
|
let mostrarDropdown = $state(false);
|
|
|
|
// Buscar funcionários
|
|
const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
|
|
|
|
let funcionarios = $derived(funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []);
|
|
|
|
// Filtrar funcionários baseado na busca (por matrícula ou nome)
|
|
let funcionariosFiltrados = $derived.by(() => {
|
|
if (!value || !value.trim()) return funcionarios.slice(0, 10); // Limitar a 10 quando vazio
|
|
|
|
const termo = value.toLowerCase().trim();
|
|
return funcionarios
|
|
.filter((f) => {
|
|
const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
|
|
const nomeMatch = f.nome?.toLowerCase().includes(termo);
|
|
return matriculaMatch || nomeMatch;
|
|
})
|
|
.slice(0, 20); // Limitar resultados
|
|
});
|
|
|
|
function selecionarFuncionario(matricula: string) {
|
|
value = matricula;
|
|
mostrarDropdown = false;
|
|
}
|
|
|
|
function handleFocus() {
|
|
if (!disabled) {
|
|
mostrarDropdown = true;
|
|
}
|
|
}
|
|
|
|
function handleBlur() {
|
|
// Delay para permitir click no dropdown
|
|
setTimeout(() => {
|
|
mostrarDropdown = false;
|
|
}, 200);
|
|
}
|
|
|
|
function handleInput() {
|
|
mostrarDropdown = true;
|
|
}
|
|
</script>
|
|
|
|
<div class="relative w-full">
|
|
<input
|
|
type="text"
|
|
bind:value
|
|
oninput={handleInput}
|
|
{placeholder}
|
|
{disabled}
|
|
onfocus={handleFocus}
|
|
onblur={handleBlur}
|
|
class="input input-bordered w-full pr-10"
|
|
autocomplete="off"
|
|
/>
|
|
|
|
<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-base-content/40 h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
{#if mostrarDropdown && funcionariosFiltrados.length > 0}
|
|
<div
|
|
class="bg-base-100 border-base-300 absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border shadow-lg"
|
|
>
|
|
{#each funcionariosFiltrados as funcionario}
|
|
<button
|
|
type="button"
|
|
onclick={() => selecionarFuncionario(funcionario.matricula || '')}
|
|
class="hover:bg-base-200 border-base-200 w-full border-b px-4 py-3 text-left transition-colors last:border-b-0"
|
|
>
|
|
<div class="font-medium">
|
|
{#if funcionario.matricula}
|
|
Matrícula: {funcionario.matricula}
|
|
{:else}
|
|
Sem matrícula
|
|
{/if}
|
|
</div>
|
|
<div class="text-base-content/60 text-sm">
|
|
{funcionario.nome}
|
|
{#if funcionario.descricaoCargo}
|
|
{funcionario.nome ? ' • ' : ''}
|
|
{funcionario.descricaoCargo}
|
|
{/if}
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{#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"
|
|
>
|
|
<div class="text-sm">Nenhum funcionário encontrado</div>
|
|
<div class="mt-1 text-xs opacity-70">
|
|
Você pode continuar digitando para buscar livremente
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|