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
123
124
125
126
127
|
'use client';
/* IMPORT */
import { Button } from '@/components/ui/button';
import { Check, ChevronsUpDown } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
} from '@/components/ui/command';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/components/ui/popover';
import { useMemo, useState } from 'react';
import { User } from '@/db/schema';
// ----------------------------------------------------------------------------------------------------
/* TYPES */
interface UserComboBoxProps {
users: Partial<User>[];
value: number | null;
onChange: (value: number) => void;
placeholder?: string;
disabled?: boolean;
}
// ----------------------------------------------------------------------------------------------------
/* User Combo Box Component */
function UserComboBox(props: UserComboBoxProps) {
const {
users,
value,
onChange,
placeholder = '담당자 선택...',
disabled = false,
} = props;
const [open, setOpen] = useState(false);
const [inputValue, setInputValue] = useState('');
const selectedUser = 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.deptName && (
<span className="ml-2 text-xs text-muted-foreground">
({selectedUser.deptName})
</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}
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.deptName && (
<span className="ml-2 text-xs text-muted-foreground">
({user.deptName})
</span>
)}
</div>
<span className="text-xs text-muted-foreground truncate">
{user.email}
</span>
</div>
</CommandItem>
))}
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
)
}
// ----------------------------------------------------------------------------------------------------
/* EXPORT */
export default UserComboBox;
|
