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
|
"use client"
import * as React from "react"
import { type RfqDetailView } from "./rfq-detail-column"
import { Loader, Trash } from "lucide-react"
import { useMediaQuery } from "@/hooks/use-media-query"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
} from "@/components/ui/drawer"
interface DeleteVendorsDialogProps
extends React.ComponentPropsWithoutRef<typeof Dialog> {
vendors: RfqDetailView[]
onConfirm: () => void
isLoading?: boolean
}
export function DeleteVendorsDialog({
vendors,
onConfirm,
isLoading = false,
...props
}: DeleteVendorsDialogProps) {
const isDesktop = useMediaQuery("(min-width: 640px)")
const vendorNames = vendors.map(v => v.vendorName).filter(Boolean).join(", ")
if (isDesktop) {
return (
<Dialog {...props}>
<DialogContent>
<DialogHeader>
<DialogTitle>벤더 삭제 확인</DialogTitle>
<DialogDescription>
정말로 선택한 <span className="font-medium">{vendors.length}개</span>의 벤더를 삭제하시겠습니까?
<br />
<br />
삭제될 벤더: <span className="font-medium">{vendorNames}</span>
<br />
<br />
이 작업은 되돌릴 수 없습니다.
</DialogDescription>
</DialogHeader>
<DialogFooter className="gap-2 sm:space-x-0">
<DialogClose asChild>
<Button variant="outline" disabled={isLoading}>취소</Button>
</DialogClose>
<Button
aria-label="선택한 벤더들 삭제"
variant="destructive"
onClick={onConfirm}
disabled={isLoading}
>
{isLoading && (
<Loader
className="mr-2 size-4 animate-spin"
aria-hidden="true"
/>
)}
삭제
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
return (
<Drawer {...props}>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>벤더 삭제 확인</DrawerTitle>
<DrawerDescription>
정말로 선택한 <span className="font-medium">{vendors.length}개</span>의 벤더를 삭제하시겠습니까?
<br />
<br />
삭제될 벤더: <span className="font-medium">{vendorNames}</span>
<br />
<br />
이 작업은 되돌릴 수 없습니다.
</DrawerDescription>
</DrawerHeader>
<DrawerFooter className="gap-2 sm:space-x-0">
<DrawerClose asChild>
<Button variant="outline" disabled={isLoading}>취소</Button>
</DrawerClose>
<Button
aria-label="선택한 벤더들 삭제"
variant="destructive"
onClick={onConfirm}
disabled={isLoading}
>
{isLoading && (
<Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
)}
삭제
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
)
}
|
