1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
"use client"
import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
} from "@/components/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
interface User {
id: number
name: string
email: string
department?: string
}
interface UserComboboxProps {
users: User[]
value: number | null
onChange: (value: number) => void
placeholder?: string
disabled?: boolean
}
export function UserCombobox({
users,
value,
onChange,
placeholder = "담당자 선택...",
disabled = false
}: UserComboboxProps) {
const [open, setOpen] = React.useState(false)
const [inputValue, setInputValue] = React.useState("")
const selectedUser = React.useMemo(() => {
return users.find(user => user.id === value)
}, [users, value])
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className={cn(
"w-full justify-between",
!value && "text-muted-foreground"
)}
disabled={disabled}
>
{selectedUser ? (
<span className="flex items-center">
<span className="font-medium">{selectedUser.name}</span>
{selectedUser.department && (
<span className="ml-2 text-xs text-muted-foreground">
({selectedUser.department})
</span>
)}
</span>
) : (
placeholder
)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[300px] p-0">
<Command>
<CommandInput
placeholder="담당자 검색..."
value={inputValue}
onValueChange={setInputValue}
/>
<CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
<CommandGroup className="max-h-[200px] overflow-y-auto">
{users.map((user) => (
<CommandItem
key={user.id}
value={`${user.name} ${user.email}`} // 이메일 및 이름을 value로 사용
onSelect={() => {
onChange(user.id)
setOpen(false)
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
value === user.id ? "opacity-100" : "opacity-0"
)}
/>
<div className="flex flex-col truncate">
<div className="flex items-center">
<span className="font-medium">{user.name}</span>
{user.department && (
<span className="ml-2 text-xs text-muted-foreground">
({user.department})
</span>
)}
</div>
<span className="text-xs text-muted-foreground truncate">
{user.email}
</span>
</div>
</CommandItem>
))}
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
)
}
|
