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
|
"use client"
import * as React from "react"
import { useParams } from "next/navigation"
import { cn } from "@/lib/utils"
import { useTranslation } from "@/i18n/client"
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
interface PackageItem {
itemId: number
itemName: string
}
interface ContractInfo {
contractId: number
contractNo: string
contractName: string
packages: PackageItem[]
}
export interface ProjectInfo {
projectId: number
projectCode: string
projectName: string
projectType: string
contracts: ContractInfo[]
}
interface ProjectSwitcherProps {
isCollapsed: boolean
projects: ProjectInfo[]
// 상위가 관리하는 "현재 선택된 contractId"
selectedContractId: number | null
// 콜백: 사용자가 "어떤 contract"를 골랐는지
onSelectContract: (projectId: number, contractId: number) => void
}
/**
* ProjectSwitcher:
* - 프로젝트들(contracts 포함)을 그룹화하여 Select 표시
* - 너무 긴 계약명 등을 ellipsis로 축약
*/
export function ProjectSwitcher({
isCollapsed,
projects,
selectedContractId,
onSelectContract,
}: ProjectSwitcherProps) {
const params = useParams()
const lng = (params?.lng as string) || "ko"
const { t } = useTranslation(lng, "engineering")
// Select value = stringified contractId
const selectValue = selectedContractId ? String(selectedContractId) : ""
// 현재 선택된 계약 정보를 찾기
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 }
}
}
return null
}, [projects, selectedContractId])
// Trigger Label => 계약 이름 or placeholder
const triggerLabel = selectedContract?.contractName ?? t("vendorDocuments.projectSwitcher.selectContractPlaceholder")
function handleValueChange(val: string) {
const contractId = Number(val)
let foundProjectId = 0
for (const proj of projects) {
const found = proj.contracts.find((c) => c.contractId === contractId)
if (found) {
foundProjectId = proj.projectId
break
}
}
onSelectContract(foundProjectId, contractId)
}
return (
<Select value={selectValue} onValueChange={handleValueChange}>
{/*
아래 SelectTrigger에 max-w, whitespace-nowrap, overflow-hidden, text-ellipsis 적용
가로폭이 200px 넘어가면 "…" 으로 표시
*/}
<SelectTrigger
className={cn(
"flex items-center gap-2",
isCollapsed && "flex h-9 w-9 shrink-0 items-center justify-center p-0",
"max-w-[300px] whitespace-nowrap overflow-hidden text-ellipsis"
)}
aria-label={t("vendorDocuments.projectSwitcher.selectContract")}
>
<SelectValue placeholder={t("vendorDocuments.projectSwitcher.selectContractPlaceholder")}>
{/* 실제 표시부분에도 ellipsis 처리. */}
<span
className={cn(
"ml-2 block max-w-[250px] truncate",
isCollapsed && "hidden"
)}
>
{triggerLabel}
</span>
</SelectValue>
</SelectTrigger>
<SelectContent>
{projects.map((project) => (
<SelectGroup key={project.projectCode}>
{/* 프로젝트명 표시 */}
<SelectLabel>
{/* 필요하다면 projectCode만 보이도록 하는 등 조정 가능 */}
{project.projectName}
</SelectLabel>
{project.contracts.map((contract) => (
<SelectItem
key={contract.contractId}
value={String(contract.contractId)}
>
{/* 계약명 + 계약번호 등 원하는 형식 */}
{contract.contractName} ({contract.contractNo})
</SelectItem>
))}
</SelectGroup>
))}
</SelectContent>
</Select>
)
}
|
