sgse-app/apps/web/src/lib/components/FuncionarioSelect.svelte

<script lang="ts">
	import { useQuery } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';

	interface Props {
		value?: string; // Id do funcionário selecionado
		placeholder?: string;
		disabled?: boolean;
		required?: boolean;
	}

	let {
		value = $bindable(),
		placeholder = 'Selecione um funcionário',
		disabled = false,
		required = false
	}: Props = $props();

	let busca = $state('');
	let mostrarDropdown = $state(false);

	// Buscar funcionários
	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});

	const funcionarios = $derived(funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []);

	// Filtrar funcionários baseado na busca
	const funcionariosFiltrados = $derived.by(() => {
		if (!busca.trim()) return funcionarios;

		const termo = busca.toLowerCase().trim();
		return funcionarios.filter((f) => {
			const nomeMatch = f.nome?.toLowerCase().includes(termo);
			const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
			const cpfMatch = f.cpf?.replace(/\D/g, '').includes(termo.replace(/\D/g, ''));
			return nomeMatch || matriculaMatch || cpfMatch;
		});
	});

	// Funcionário selecionado
	const funcionarioSelecionado = $derived.by(() => {
		if (!value) return null;
		return funcionarios.find((f) => f._id === value);
	});

	function selecionarFuncionario(funcionarioId: string) {
		value = funcionarioId;
		const funcionario = funcionarios.find((f) => f._id === funcionarioId);
		busca = funcionario?.nome || '';
		mostrarDropdown = false;
	}

	function limpar() {
		value = undefined;
		busca = '';
		mostrarDropdown = false;
	}

	// Atualizar busca quando funcionário selecionado mudar externamente
	$effect(() => {
		if (value && !busca) {
			const funcionario = funcionarios.find((f) => f._id === value);
			busca = funcionario?.nome || '';
		}
	});

	function handleFocus() {
		if (!disabled) {
			mostrarDropdown = true;
		}
	}

	function handleBlur() {
		// Delay para permitir click no dropdown
		setTimeout(() => {
			mostrarDropdown = false;
		}, 200);
	}
</script>

<div class="form-control relative w-full">
	<label class="label">
		<span class="label-text font-medium">
			Funcionário
			{#if required}
				<span class="text-error">*</span>
			{/if}
		</span>
	</label>

	<div class="relative">
		<input
			type="text"
			bind:value={busca}
			{placeholder}
			{disabled}
			onfocus={handleFocus}
			onblur={handleBlur}
			class="input input-bordered w-full pr-10"
			autocomplete="off"
		/>

		{#if value}
			<button
				type="button"
				onclick={limpar}
				class="btn btn-xs btn-circle absolute top-1/2 right-2 -translate-y-1/2"
				{disabled}
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-4 w-4"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M6 18L18 6M6 6l12 12"
					/>
				</svg>
			</button>
		{:else}
			<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}

		{#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._id)}
						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">{funcionario.nome}</div>
						<div class="text-base-content/60 text-sm">
							{#if funcionario.matricula}
								Matrícula: {funcionario.matricula}
							{/if}
							{#if funcionario.descricaoCargo}
								{funcionario.matricula ? ' • ' : ''}
								{funcionario.descricaoCargo}
							{/if}
						</div>
					</button>
				{/each}
			</div>
		{/if}

		{#if mostrarDropdown && busca && 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>
		{/if}
	</div>

	{#if funcionarioSelecionado}
		<div class="text-base-content/60 mt-1 text-xs">
			Selecionado: {funcionarioSelecionado.nome}
			{#if funcionarioSelecionado.matricula}
				- {funcionarioSelecionado.matricula}
			{/if}
		</div>
	{/if}
</div>