112 lines
4 KiB
TypeScript
112 lines
4 KiB
TypeScript
'use client';
|
|
|
|
import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
|
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from '@/components/ui/command';
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
|
import { cn } from '@/lib/utils';
|
|
import GetCapitalize from '@/shared/actions/text/GetCapitalize';
|
|
|
|
import { useGEmolumentoPeriodoIndexHook } from '@/packages/administrativo/hooks/GEmolumentoPeriodo/useGEmolumentoPeriodoIndexHook';
|
|
import GEmolumentoPeriodoSelectInterface from '@/packages/administrativo/interfaces/GEmolumentoPeriodo/GEmolumentoPeriodoSelectInterface';
|
|
|
|
export default function GEmolumentoPeriodoSelect({
|
|
onSelectedEmolumentoPeriodo,
|
|
}: GEmolumentoPeriodoSelectInterface) {
|
|
const [open, setOpen] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [selectedId, setSelectedId] = useState<number | null>(null);
|
|
|
|
const { gEmolumentoPeriodo, indexGEmolumentoPeriodo } = useGEmolumentoPeriodoIndexHook();
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Carrega os períodos apenas uma vez
|
|
// ---------------------------------------------------------------------------
|
|
const loadData = useCallback(async () => {
|
|
if (gEmolumentoPeriodo.length) return;
|
|
setIsLoading(true);
|
|
await indexGEmolumentoPeriodo();
|
|
setIsLoading(false);
|
|
}, [gEmolumentoPeriodo.length, indexGEmolumentoPeriodo]);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [loadData]);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Item selecionado
|
|
// ---------------------------------------------------------------------------
|
|
const selected = useMemo(
|
|
() =>
|
|
gEmolumentoPeriodo.find((b) => String(b.emolumento_periodo_id) === String(selectedId ?? '')),
|
|
[gEmolumentoPeriodo, selectedId],
|
|
);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Ao selecionar um item → dispara novo hook
|
|
// ---------------------------------------------------------------------------
|
|
const handleSelect = async (id: number) => {
|
|
setSelectedId(id);
|
|
setOpen(false);
|
|
onSelectedEmolumentoPeriodo(id);
|
|
};
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
disabled={isLoading}
|
|
className="w-full justify-between"
|
|
>
|
|
{isLoading
|
|
? 'Carregando...'
|
|
: selected
|
|
? GetCapitalize(selected.descricao)
|
|
: 'Selecione...'}
|
|
<ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="mb-5 w-full p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Buscar período..." disabled={isLoading} />
|
|
<CommandList>
|
|
<CommandEmpty>
|
|
{isLoading ? 'Carregando...' : 'Nenhum resultado encontrado.'}
|
|
</CommandEmpty>
|
|
<CommandGroup>
|
|
{gEmolumentoPeriodo.map((item) => (
|
|
<CommandItem
|
|
key={item.emolumento_periodo_id}
|
|
value={item.descricao?.toLowerCase() ?? ''}
|
|
onSelect={() => handleSelect(Number(item.emolumento_periodo_id))}
|
|
>
|
|
<CheckIcon
|
|
className={cn(
|
|
'mr-2 h-4 w-4',
|
|
String(selectedId ?? '') === String(item.emolumento_periodo_id)
|
|
? 'opacity-100'
|
|
: 'opacity-0',
|
|
)}
|
|
/>
|
|
{GetCapitalize(item.descricao ?? '')}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|