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
|
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { FileInfoItem } from "../actions";
import { Button } from "@/components/ui/button";
import { Download, Trash2, Loader2 } from "lucide-react";
import { formatDolceDateTime } from "../utils/date-formatter";
interface FileListColumnsProps {
onDownload: (file: FileInfoItem) => void;
onDelete?: (file: FileInfoItem) => void;
lng?: string;
downloadingFileId?: string | null;
}
export const createFileListColumns = ({
onDownload,
onDelete,
lng = "ko",
downloadingFileId,
}: FileListColumnsProps): ColumnDef<FileInfoItem>[] => [
{
accessorKey: "FileSeq",
header: lng === "ko" ? "순번" : "No.",
minSize: 80,
cell: ({ row }) => {
if (row.original.FileServerId === "LOCAL") {
return <div className="text-center">-</div>;
}
return <div className="text-center">{row.getValue("FileSeq")}</div>;
},
},
{
accessorKey: "FileName",
header: lng === "ko" ? "파일명" : "File Name",
minSize: 300,
cell: ({ row }) => {
return <div className="font-medium">{row.getValue("FileName")}</div>;
},
},
{
accessorKey: "FileSize",
header: lng === "ko" ? "파일크기" : "File Size",
minSize: 100,
cell: ({ row }) => {
const size = parseInt(row.getValue("FileSize") as string);
if (isNaN(size) || size === 0) return "-";
if (size < 1024) return `${size} B`;
if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
return `${(size / (1024 * 1024)).toFixed(2)} MB`;
},
},
{
accessorKey: "CreateDt",
header: lng === "ko" ? "생성일시" : "Created Date",
minSize: 200,
cell: ({ row }) => {
const date = row.getValue("CreateDt") as string;
return <div className="text-sm text-muted-foreground">{formatDolceDateTime(date)}</div>;
},
},
{
id: "actions",
header: "Action",
minSize: 160,
cell: ({ row }) => {
const isLocal = row.original.FileServerId === "LOCAL";
const isDownloading = downloadingFileId === row.original.FileId;
return (
<div className="flex gap-2 items-center justify-center">
<Button
variant="outline"
size="sm"
disabled={isDownloading}
onClick={(e) => {
e.stopPropagation();
onDownload(row.original);
}}
>
{isDownloading ? (
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
) : (
<Download className="h-4 w-4 mr-2" />
)}
{lng === "ko" ? "다운로드" : "Download"}
</Button>
{isLocal && onDelete && (
<Button
variant="destructive"
size="sm"
disabled={isDownloading}
onClick={(e) => {
e.stopPropagation();
onDelete(row.original);
}}
>
<Trash2 className="h-4 w-4" />
</Button>
)}
</div>
);
},
},
];
|
