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
|
"use client"
import * as React from "react"
import { Loader2, Trash2Icon } from "lucide-react"
import {
AlertDialog,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import { toast } from "@/hooks/use-toast"
import { deleteContactPossibleItems, type ContactPossibleItemDetail } from "../service"
interface DeleteContactPossibleItemsDialogProps {
contactPossibleItems: ContactPossibleItemDetail[]
showTrigger?: boolean
trigger?: React.ReactNode
open?: boolean
onOpenChange?: (open: boolean) => void
onSuccess?: () => void
}
export function DeleteContactPossibleItemsDialog({
contactPossibleItems,
showTrigger = true,
trigger,
open,
onOpenChange,
onSuccess,
}: DeleteContactPossibleItemsDialogProps) {
const [isDeletePending, startDeleteTransition] = React.useTransition()
function onDelete() {
startDeleteTransition(async () => {
try {
const ids = contactPossibleItems.map((item) => item.id)
const result = await deleteContactPossibleItems(ids)
if (result.success) {
toast({
title: "성공",
description: `${contactPossibleItems.length}개의 담당자별 아이템이 삭제되었습니다.`,
})
onSuccess?.()
onOpenChange?.(false)
} else {
toast({
title: "오류",
description: result.error || "담당자별 아이템 삭제에 실패했습니다.",
variant: "destructive",
})
}
} catch {
toast({
title: "오류",
description: "담당자별 아이템 삭제 중 오류가 발생했습니다.",
variant: "destructive",
})
}
})
}
const isMultiple = contactPossibleItems.length > 1
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
{showTrigger && (
<AlertDialogTrigger asChild>
{trigger ?? (
<Button variant="outline" size="sm">
<Trash2Icon className="mr-2 size-4" aria-hidden="true" />
삭제 ({contactPossibleItems.length})
</Button>
)}
</AlertDialogTrigger>
)}
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
{isMultiple
? `${contactPossibleItems.length}개의 담당자별 아이템을 삭제하시겠습니까?`
: "담당자별 아이템을 삭제하시겠습니까?"}
</AlertDialogTitle>
<AlertDialogDescription>
이 작업은 되돌릴 수 없습니다. 선택한 담당자별 아이템{isMultiple ? "들이" : "이"} 영구적으로 삭제됩니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={isDeletePending}>취소</AlertDialogCancel>
<Button
variant="destructive"
onClick={onDelete}
disabled={isDeletePending}
>
{isDeletePending && (
<Loader2 className="mr-2 size-4 animate-spin" aria-hidden="true" />
)}
삭제
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}
|
