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
|
"use client"
import * as React from "react"
import { Loader, Trash } from "lucide-react"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { type ApprovalTemplate } from "@/lib/approval-template/service"
import { deleteApprovalTemplate } from "../service"
interface DeleteApprovalTemplateDialogProps extends React.ComponentPropsWithRef<typeof Dialog> {
templates: ApprovalTemplate[]
showTrigger?: boolean
onSuccess?: () => void
}
export function DeleteApprovalTemplateDialog({
templates,
showTrigger = true,
onSuccess,
...props
}: DeleteApprovalTemplateDialogProps) {
const [isDeletePending, startDeleteTransition] = React.useTransition()
const isMultiple = templates.length > 1
const templateName = isMultiple ? `${templates.length}개 템플릿` : templates[0]?.name
function onDelete() {
startDeleteTransition(async () => {
if (templates.length === 0) return
// 여러 개면 순차 삭제 (간단히 처리)
for (const t of templates) {
const result = await deleteApprovalTemplate(t.id)
if (result.error) {
toast.error(result.error)
return
}
}
props.onOpenChange?.(false)
onSuccess?.()
toast.success(
isMultiple ? `${templates.length}개 템플릿이 삭제되었습니다` : "템플릿이 삭제되었습니다",
)
// 새로고침으로 반영
window.location.reload()
})
}
return (
<Dialog {...props}>
{showTrigger && (
<DialogTrigger asChild>
<Button
variant="outline"
size="sm"
className="text-destructive hover:text-destructive"
>
<Trash className="mr-2 size-4" aria-hidden="true" />
삭제
</Button>
</DialogTrigger>
)}
<DialogContent>
<DialogHeader>
<DialogTitle>템플릿 삭제 확인</DialogTitle>
<DialogDescription>
정말로 <strong>{templateName}</strong>을(를) 삭제하시겠습니까?
{!isMultiple && (
<>
<br />이 작업은 되돌릴 수 없습니다.
</>
)}
</DialogDescription>
</DialogHeader>
{templates.length > 0 && (
<div className="rounded-lg bg-muted p-3 max-h-40 overflow-y-auto">
<h4 className="text-sm font-medium mb-2">삭제될 템플릿</h4>
<div className="space-y-1">
{templates.map((t) => (
<div key={t.id} className="text-xs text-muted-foreground">
<div className="font-medium">{t.name}</div>
<div>ID: <code className="bg-background px-1 rounded">{t.id}</code></div>
</div>
))}
</div>
</div>
)}
<DialogFooter>
<Button
variant="outline"
onClick={() => props.onOpenChange?.(false)}
disabled={isDeletePending}
>
취소
</Button>
<Button
variant="destructive"
onClick={onDelete}
disabled={isDeletePending}
>
{isDeletePending && <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />}
{isMultiple ? `${templates.length}개 삭제` : "삭제"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
|
