129 lines
3.5 KiB
TypeScript
129 lines
3.5 KiB
TypeScript
import { formatCPF } from '@brazilian-utils/brazilian-utils'
|
|
import { AlertTriangleIcon, CheckIcon, UserIcon, XIcon } from 'lucide-react'
|
|
import type { ControllerFieldState } from 'react-hook-form'
|
|
|
|
import { Abbr } from '@repo/ui/components/abbr'
|
|
import { SearchFilter } from '@repo/ui/components/search-filter'
|
|
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
|
|
import { CommandItem } from '@repo/ui/components/ui/command'
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupButton,
|
|
InputGroupInput
|
|
} from '@repo/ui/components/ui/input-group'
|
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
|
import { cn, initials } from '@repo/ui/lib/utils'
|
|
|
|
import type { User } from './data'
|
|
|
|
interface UserPickerProps {
|
|
value?: User
|
|
onChange: (value: User | null) => void
|
|
onSearch: (search: string) => Promise<User[]>
|
|
fieldState: ControllerFieldState
|
|
}
|
|
|
|
export function UserPicker({
|
|
value,
|
|
onChange,
|
|
onSearch,
|
|
fieldState
|
|
}: UserPickerProps) {
|
|
return (
|
|
<SearchFilter
|
|
align="start"
|
|
onChange={onChange}
|
|
onSearch={onSearch}
|
|
placeholder="Digite para pesquisar"
|
|
render={({ id, name, email, cpf, onSelect, onClose }) => (
|
|
<CommandItem
|
|
key={id}
|
|
value={id}
|
|
className="cursor-pointer"
|
|
disabled={!cpf}
|
|
onSelect={() => {
|
|
onSelect()
|
|
onClose()
|
|
}}
|
|
>
|
|
<div className="flex gap-2.5 items-start">
|
|
<Avatar className="size-10 hidden lg:block">
|
|
<AvatarFallback className="border">
|
|
{initials(name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<ul>
|
|
<li className="font-bold">
|
|
<Abbr>{name}</Abbr>
|
|
</li>
|
|
<li className="text-muted-foreground text-sm">
|
|
<Abbr>{email}</Abbr>
|
|
</li>
|
|
|
|
{cpf ? (
|
|
<li className="text-muted-foreground text-sm">
|
|
{formatCPF(cpf)}
|
|
</li>
|
|
) : (
|
|
<li className="flex gap-1 items-center text-red-400">
|
|
<AlertTriangleIcon className="text-red-400" />
|
|
Inelegível
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
|
|
<CheckIcon
|
|
className={cn(
|
|
'ml-auto',
|
|
value?.id === id ? 'opacity-100' : 'opacity-0'
|
|
)}
|
|
/>
|
|
</CommandItem>
|
|
)}
|
|
>
|
|
{({ loading }) => (
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
readOnly
|
|
value={value?.name || ''}
|
|
autoFocus={true}
|
|
placeholder="Colaborador"
|
|
className="cursor-pointer"
|
|
autoComplete="off"
|
|
aria-invalid={!!fieldState.error}
|
|
/>
|
|
<InputGroupAddon>
|
|
<UserIcon />
|
|
</InputGroupAddon>
|
|
|
|
{value && (
|
|
<InputGroupAddon align="inline-end" className="mr-0">
|
|
<InputGroupButton
|
|
variant="ghost"
|
|
tabIndex={-1}
|
|
size="icon-xs"
|
|
className="cursor-pointer"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
onChange?.(null)
|
|
}}
|
|
>
|
|
<XIcon />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
)}
|
|
|
|
{loading && (
|
|
<InputGroupAddon align="inline-end">
|
|
<Spinner />
|
|
</InputGroupAddon>
|
|
)}
|
|
</InputGroup>
|
|
)}
|
|
</SearchFilter>
|
|
)
|
|
}
|