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 { Table } from "@tanstack/react-table"
import { Plus, Trash2 } from "lucide-react"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import type { TechVendorPossibleItem } from "../validations"
import { deleteTechVendorPossibleItemsNew } from "../service"
interface PossibleItemsTableToolbarActionsProps {
table: Table<TechVendorPossibleItem>
vendorId: number
onAdd: () => void
}
export function PossibleItemsTableToolbarActions({
table,
vendorId,
onAdd,
}: PossibleItemsTableToolbarActionsProps) {
const [showDeleteAlert, setShowDeleteAlert] = React.useState(false)
const [isDeleting, setIsDeleting] = React.useState(false)
const selectedRows = table.getFilteredSelectedRowModel().rows
async function handleDelete() {
setIsDeleting(true)
try {
const ids = selectedRows.map((row) => row.original.id)
const { error } = await deleteTechVendorPossibleItemsNew(ids, vendorId)
if (error) {
throw new Error(error)
}
toast.success(`${ids.length}개의 아이템이 삭제되었습니다`)
table.resetRowSelection()
setShowDeleteAlert(false)
} catch {
toast.error("아이템 삭제 중 오류가 발생했습니다")
} finally {
setIsDeleting(false)
}
}
return (
<>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={onAdd}
>
<Plus className="mr-2 h-4 w-4" />
아이템 추가
</Button>
{selectedRows.length > 0 && (
<>
<Separator orientation="vertical" className="mx-2 h-4" />
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={() => setShowDeleteAlert(true)}
disabled={selectedRows.length === 0}
>
<Trash2 className="mr-2 h-4 w-4" />
삭제 ({selectedRows.length})
</Button>
</TooltipTrigger>
<TooltipContent>
선택된 {selectedRows.length}개 아이템을 삭제합니다
</TooltipContent>
</Tooltip>
</>
)}
</div>
<AlertDialog open={showDeleteAlert} onOpenChange={setShowDeleteAlert}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>아이템 삭제</AlertDialogTitle>
<AlertDialogDescription>
선택된 {selectedRows.length}개의 아이템을 삭제하시겠습니까?
이 작업은 되돌릴 수 없습니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>취소</AlertDialogCancel>
<AlertDialogAction
onClick={handleDelete}
disabled={isDeleting}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
{isDeleting ? "삭제 중..." : "삭제"}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
)
}
|
