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
|
"use client";
import * as React from "react";
import { Table } from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import { Users, RefreshCw, FileDown, Plus } from "lucide-react";
import { RfqsLastView } from "@/db/schema";
import { RfqAssignPicDialog } from "./rfq-assign-pic-dialog";
import { CreateGeneralRfqDialog } from "./create-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);
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 === "구매담당지정")
);
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 || "")
};
}, [selectedRows]);
// 담당자 지정 가능 여부 체크 (상태가 "RFQ 생성" 또는 "구매담당지정"인 ITB가 있는지)
const canAssignPic = selectedRfqData.assignableItbCount > 0;
const handleAssignSuccess = () => {
// 테이블 선택 초기화
table.toggleAllPageRowsSelected(false);
// 데이터 새로고침
onRefresh?.();
};
const handleCreateGeneralRfqSuccess = () => {
onRefresh?.(); // 테이블 데이터 새로고침
};
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} />
)}
<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}
/>
</>
);
}
|
