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
|
"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,
CommandList,
} from "@/components/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
interface PackageData {
packageCode: string
packageName: string | null
}
interface ProjectData {
projectId: number
projectCode: string
projectName: string
projectType: string
packages: PackageData[]
}
interface ProjectSwitcherProps {
isCollapsed: boolean
projects: ProjectData[]
selectedProjectId: number
selectedPackageCode: string | null
onSelectPackage: (projectId: number, packageCode: string) => void
}
export function ProjectSwitcher({
isCollapsed,
projects,
selectedProjectId,
selectedPackageCode,
onSelectPackage,
}: ProjectSwitcherProps) {
const [open, setOpen] = React.useState(false)
// 현재 선택된 프로젝트와 패키지 정보
const selectedProject = projects.find(p => p.projectId === selectedProjectId)
const selectedPackage = selectedProject?.packages.find(
pkg => pkg.packageCode === selectedPackageCode
)
const displayText = selectedPackage
? `${selectedProject?.projectCode} - ${selectedPackage.packageCode}`
: selectedProject?.projectCode || "Select Package"
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
aria-label="Select a package"
className={cn("w-full justify-between", isCollapsed && "w-[50px]")}
>
{isCollapsed ? (
<ChevronsUpDown className="h-4 w-4" />
) : (
<>
<span className="truncate">{displayText}</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-[300px] p-0">
<Command>
<CommandInput placeholder="Search package..." />
<CommandList>
<CommandEmpty>No package found.</CommandEmpty>
{projects.map((project) => (
<CommandGroup key={project.projectId} heading={project.projectName}>
{project.packages.map((pkg) => (
<CommandItem
key={`${project.projectId}-${pkg.packageCode}`}
onSelect={() => {
onSelectPackage(project.projectId, pkg.packageCode)
setOpen(false)
}}
className="text-sm"
>
<Check
className={cn(
"mr-2 h-4 w-4",
selectedProjectId === project.projectId &&
selectedPackageCode === pkg.packageCode
? "opacity-100"
: "opacity-0"
)}
/>
<div className="flex flex-col">
<span className="font-medium">{pkg.packageCode}</span>
{pkg.packageName && (
<span className="text-xs text-muted-foreground">
{pkg.packageName}
</span>
)}
</div>
</CommandItem>
))}
</CommandGroup>
))}
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
}
|
