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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
"use client";
import * as React from "react";
import { Table } from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import { Users, RefreshCw, FileDown, Plus, Edit } from "lucide-react";
import { RfqsLastView } from "@/db/schema";
import { RfqAssignPicDialog } from "./rfq-assign-pic-dialog";
import { CreateGeneralRfqDialog } from "./create-general-rfq-dialog"; // 추가
import { UpdateGeneralRfqDialog } from "./update-general-rfq-dialog"; // 수정용
import { Badge } from "@/components/ui/badge";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
interface RfqTableToolbarActionsProps<TData> {
table: Table<TData>;
rfqCategory?: "general" | "itb" | "rfq";
onRefresh?: () => void;
}
export function RfqTableToolbarActions<TData>({
table,
rfqCategory = "itb",
onRefresh
}: RfqTableToolbarActionsProps<TData>) {
const [showAssignDialog, setShowAssignDialog] = React.useState(false);
const [showUpdateDialog, setShowUpdateDialog] = React.useState(false);
const [selectedRfqForUpdate, setSelectedRfqForUpdate] = React.useState<number | null>(null);
console.log(rfqCategory)
// 선택된 행 가져오기
const selectedRows = table.getFilteredSelectedRowModel().rows;
// 선택된 RFQ의 ID와 코드 추출
const selectedRfqData = React.useMemo(() => {
const rows = selectedRows.map(row => row.original as RfqsLastView);
const assignableRows = rows.filter(row =>
row.rfqCode?.startsWith("I") &&
(row.status === "RFQ 생성" || row.status === "구매담당지정")
);
// 수정 가능한 RFQ (general 카테고리에서 RFQ 생성 상태인 항목, 단일 선택만)
const updatableRfq = rfqCategory === "general" && rows.length === 1 && rows[0].status === "RFQ 생성" ? rows[0] : null;
return {
ids: rows.map(row => row.id),
codes: rows.map(row => row.rfqCode || ""),
statuses: rows.map(row => row.status || ""),
// "I"로 시작하는 ITB만 필터링
itbCount: rows.filter(row => row.rfqCode?.startsWith("I")).length,
totalCount: rows.length,
// 담당자 지정 가능한 ITB (상태가 "RFQ 생성" 또는 "구매담당지정"인 ITB)
assignableItbCount: assignableRows.length,
assignableIds: assignableRows.map(row => row.id),
assignableCodes: assignableRows.map(row => row.rfqCode || ""),
// 수정 가능한 RFQ 정보
updatableRfq: updatableRfq,
canUpdate: updatableRfq !== null,
};
}, [selectedRows, rfqCategory]);
// 담당자 지정 가능 여부 체크 (상태가 "RFQ 생성" 또는 "구매담당지정"인 ITB가 있는지)
const canAssignPic = selectedRfqData.assignableItbCount > 0;
const handleAssignSuccess = () => {
// 테이블 선택 초기화
table.toggleAllPageRowsSelected(false);
// 데이터 새로고침
onRefresh?.();
};
const handleCreateGeneralRfqSuccess = () => {
onRefresh?.(); // 테이블 데이터 새로고침
};
const handleUpdateGeneralRfqSuccess = () => {
// 테이블 선택 초기화
table.toggleAllPageRowsSelected(false);
// 데이터 새로고침
onRefresh?.();
};
const handleUpdateClick = () => {
if (selectedRfqData.updatableRfq) {
setSelectedRfqForUpdate(selectedRfqData.updatableRfq.id);
setShowUpdateDialog(true);
}
};
return (
<>
<div className="flex items-center gap-2">
{/* 담당자 지정 버튼 - 선택된 항목 중 ITB가 있을 때만 표시 */}
{selectedRfqData.totalCount > 0 && canAssignPic && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="default"
size="sm"
onClick={() => setShowAssignDialog(true)}
className="flex items-center gap-2"
>
<Users className="h-4 w-4" />
담당자 지정
<Badge variant="secondary" className="ml-1">
{selectedRfqData.assignableItbCount}건
</Badge>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>선택한 ITB에 구매 담당자를 지정합니다</p>
{selectedRfqData.assignableItbCount !== selectedRfqData.itbCount && (
<p className="text-xs text-muted-foreground mt-1">
전체 ITB {selectedRfqData.itbCount}건 중 {selectedRfqData.assignableItbCount}건만 지정 가능합니다
</p>
)}
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{/* 선택된 항목 표시 */}
{selectedRfqData.totalCount > 0 && (
<div className="flex items-center gap-2 px-3 py-1.5 bg-muted rounded-md">
<span className="text-sm text-muted-foreground">
선택된 항목:
</span>
<Badge variant="secondary">
{selectedRfqData.totalCount}건
</Badge>
{selectedRfqData.totalCount !== selectedRfqData.itbCount && (
<Badge variant="outline" className="text-xs">
ITB {selectedRfqData.itbCount}건 (지정가능 {selectedRfqData.assignableItbCount}건)
</Badge>
)}
</div>
)}
{/* 기존 버튼들 */}
<Button
variant="outline"
size="sm"
onClick={onRefresh}
className="flex items-center gap-2"
>
<RefreshCw className="h-4 w-4" />
새로고침
</Button>
{rfqCategory === "general" && (
<>
<CreateGeneralRfqDialog onSuccess={handleCreateGeneralRfqSuccess} />
{/* 일반견적 수정 버튼 - 선택된 항목이 1개이고 RFQ 생성 상태일 때만 활성화 */}
{selectedRfqData.canUpdate && (
<Button
variant="outline"
size="sm"
onClick={handleUpdateClick}
className="flex items-center gap-2"
>
<Edit className="h-4 w-4" />
일반견적 수정
</Button>
)}
</>
)}
<Button
variant="outline"
size="sm"
className="flex items-center gap-2"
disabled={selectedRfqData.totalCount === 0}
>
<FileDown className="h-4 w-4" />
엑셀 다운로드
</Button>
</div>
{/* 담당자 지정 다이얼로그 */}
<RfqAssignPicDialog
open={showAssignDialog}
onOpenChange={setShowAssignDialog}
selectedRfqIds={selectedRfqData.assignableIds}
selectedRfqCodes={selectedRfqData.assignableCodes}
onSuccess={handleAssignSuccess}
/>
{/* 일반견적 수정 다이얼로그 */}
<UpdateGeneralRfqDialog
open={showUpdateDialog}
onOpenChange={setShowUpdateDialog}
rfqId={selectedRfqForUpdate || 0}
onSuccess={handleUpdateGeneralRfqSuccess}
/>
</>
);
}
|
