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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
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 { Check, ChevronsUpDown, Loader2 } from "lucide-react"
interface ContractInfo {
contractId: number
contractName: string
}
interface ProjectInfo {
projectId: number
projectCode: string
projectName: string
contracts: ContractInfo[]
}
interface ProjectSwitcherProps {
isCollapsed: boolean
projects: ProjectInfo[]
// 상위가 관리하는 "현재 선택된 contractId"
selectedContractId: number | null
// 콜백: 사용자가 "어떤 contract"를 골랐는지
// => 우리가 projectId도 찾아서 상위 state를 같이 갱신해야 함
onSelectContract: (projectId: number, contractId: number) => void
// 로딩 상태 (선택사항)
isLoading?: boolean
}
export function ProjectSwitcher({
isCollapsed,
projects,
selectedContractId,
onSelectContract,
isLoading = false,
}: ProjectSwitcherProps) {
const [popoverOpen, setPopoverOpen] = React.useState(false)
const [searchTerm, setSearchTerm] = React.useState("")
// 현재 선택된 contract 객체 찾기
const selectedContract = React.useMemo(() => {
if (!selectedContractId) return null
for (const proj of projects) {
const found = proj.contracts.find((c) => c.contractId === selectedContractId)
if (found) {
return { ...found, projectId: proj.projectId, projectName: proj.projectName }
}
}
return null
}, [projects, selectedContractId])
// Trigger label => 계약 이름 or placeholder
const triggerLabel = selectedContract?.contractName ?? "Select a contract"
// 검색어에 따른 필터링된 프로젝트/계약 목록
const filteredProjects = React.useMemo(() => {
if (!searchTerm) return projects
return projects.map(project => ({
...project,
contracts: project.contracts.filter(contract =>
contract.contractName.toLowerCase().includes(searchTerm.toLowerCase()) ||
project.projectName.toLowerCase().includes(searchTerm.toLowerCase())
)
})).filter(project => project.contracts.length > 0)
}, [projects, searchTerm])
// 계약 선택 핸들러
function handleSelectContract(projectId: number, contractId: number) {
onSelectContract(projectId, contractId)
setPopoverOpen(false)
setSearchTerm("") // 검색어 초기화
}
// 총 계약 수 계산 (빈 상태 표시용)
const totalContracts = filteredProjects.reduce((sum, project) => sum + project.contracts.length, 0)
return (
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
<PopoverTrigger asChild>
<Button
type="button"
variant="outline"
className={cn(
"justify-between relative",
isCollapsed ? "h-9 w-9 shrink-0 items-center justify-center p-0" : "w-full h-9"
)}
disabled={isLoading}
aria-label="Select Contract"
>
{isLoading ? (
<>
<span className={cn(isCollapsed && "hidden")}>Loading...</span>
<Loader2 className={cn("h-4 w-4 animate-spin", !isCollapsed && "ml-2")} />
</>
) : (
<>
<span className={cn("truncate flex-grow text-left", isCollapsed && "hidden")}>
{triggerLabel}
</span>
<ChevronsUpDown className={cn("h-4 w-4 opacity-50 flex-shrink-0", isCollapsed && "hidden")} />
</>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-[320px] p-0" align="start">
<Command>
<CommandInput
placeholder="Search contracts..."
value={searchTerm}
onValueChange={setSearchTerm}
/>
<CommandList
className="max-h-[320px]"
onWheel={(e) => {
e.stopPropagation() // 이벤트 전파 차단
const target = e.currentTarget
target.scrollTop += e.deltaY // 직접 스크롤 처리
}}
>
<CommandEmpty>
{totalContracts === 0 ? "No contracts found." : "No search results."}
</CommandEmpty>
{filteredProjects.map((project) => (
<CommandGroup key={project.projectCode} heading={project.projectName}>
{project.contracts.map((contract) => (
<CommandItem
key={contract.contractId}
onSelect={() => handleSelectContract(project.projectId, contract.contractId)}
value={`${project.projectName} ${contract.contractName}`}
className="truncate"
title={contract.contractName}
>
<span className="truncate">{contract.contractName}</span>
<Check
className={cn(
"ml-auto h-4 w-4 flex-shrink-0",
selectedContractId === contract.contractId ? "opacity-100" : "opacity-0"
)}
/>
</CommandItem>
))}
</CommandGroup>
))}
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
}
|
