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
|
"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { toast } from "sonner"
import { useRouter } from "next/navigation"
import { CheckCircle, FileText, Loader, AlertTriangle } from "lucide-react"
import { updateVendorDocumentStatus } from "../service"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
interface UpdateVendorDocumentStatusButtonProps {
vendorDocumentId: number
documentId: number
vendorId: number
currentStatus: "draft" | "approved" | "reviewing" // reviewing 상태 추가
}
export function UpdateVendorDocumentStatusButton({
vendorDocumentId,
documentId,
vendorId,
currentStatus
}: UpdateVendorDocumentStatusButtonProps) {
console.log(currentStatus)
const [isLoading, setIsLoading] = useState(false)
const [isOpen, setIsOpen] = useState(false)
const router = useRouter()
// 토글할 새로운 상태 결정
const newStatus = currentStatus === "approved" ? "draft" : "approved"
// 상태에 따른 버튼 텍스트
const buttonText = currentStatus === "approved"
? "협의 취소"
: "협의 완료 처리"
// 상태에 따른 다이얼로그 제목
const dialogTitle = newStatus === "approved"
? "협의를 완료 처리하시겠습니까?"
: "협의 완료를 취소하시겠습니까?"
// 상태에 따른 다이얼로그 설명
const dialogDescription = newStatus === "approved"
? "협의가 완료 처리되면 협력업체가 계약서에 서명할 수 있게 됩니다. 모든 조항 검토가 완료되었는지 확인해주세요."
: "협의 완료를 취소하면 협력업체가 계약서에 서명할 수 없게 됩니다. 추가 수정이 필요한 경우에만 취소해주세요."
// 상태에 따른 토스트 메시지
const successMessage = newStatus === "approved"
? "협의가 완료 처리되었습니다. 협력업체가 서명할 수 있습니다."
: "협의 완료가 취소되었습니다. 협력업체가 서명할 수 없습니다."
const handleUpdateStatus = async () => {
try {
setIsLoading(true)
setIsOpen(false)
// 서버 액션 호출 - 새로운 상태로 업데이트
const result = await updateVendorDocumentStatus({
status: newStatus,
vendorDocumentId,
documentId,
vendorId
})
if (!result.success) {
throw new Error(result.error || "상태 업데이트 실패")
}
toast.success(successMessage)
router.refresh() // 페이지 새로고침
} catch (error) {
toast.error(error instanceof Error ? error.message : "상태 업데이트 중 오류가 발생했습니다")
console.error(error)
} finally {
setIsLoading(false)
}
}
return (
<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
<AlertDialogTrigger asChild>
<Button
variant={currentStatus === "approved" ? "secondary" : "outline"}
size="sm"
disabled={isLoading}
className={currentStatus === "approved" ? "bg-green-50 hover:bg-green-100 text-green-700" : ""}
>
{isLoading ? (
<Loader className="h-4 w-4 mr-2 animate-spin" />
) : currentStatus === "approved" ? (
<FileText className="h-4 w-4 mr-2" />
) : (
<CheckCircle className="h-4 w-4 mr-2" />
)}
{buttonText}
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-amber-500" />
{dialogTitle}
</AlertDialogTitle>
<AlertDialogDescription className="space-y-2">
<p>{dialogDescription}</p>
{newStatus === "approved" && (
<div className="bg-blue-50 border border-blue-200 rounded-md p-3 mt-3">
<p className="text-sm text-blue-800">
<strong>확인사항:</strong>
</p>
<ul className="text-sm text-blue-700 mt-1 ml-4 list-disc">
<li>모든 필수 조항이 검토되었습니까?</li>
<li>협력업체와의 협의 내용이 모두 반영되었습니까?</li>
<li>법무팀 검토가 완료되었습니까?</li>
</ul>
</div>
)}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>취소</AlertDialogCancel>
<AlertDialogAction
onClick={handleUpdateStatus}
className={newStatus === "approved" ? "bg-green-600 hover:bg-green-700" : "bg-amber-600 hover:bg-amber-700"}
>
{newStatus === "approved" ? "완료 처리" : "완료 취소"}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}
|
