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
|
"use client";
import React, { FC, Dispatch, SetStateAction, useState } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { TempDownloadBtn } from "./temp-download-btn";
import { VarListDownloadBtn } from "./var-list-download-btn";
import { FormDataReportTempUploadTab } from "./form-data-report-temp-upload-tab";
import { FormDataReportTempUploadedListTab } from "./form-data-report-temp-uploaded-list-tab";
import { DataTableColumnJSON } from "./form-data-table-columns";
interface FormDataReportTempUploadDialogProps {
columnsJSON: DataTableColumnJSON[];
open: boolean;
setOpen: Dispatch<SetStateAction<boolean>>;
packageId: number;
formCode: string;
formId: number;
uploaderType: string;
}
export const FormDataReportTempUploadDialog: FC<
FormDataReportTempUploadDialogProps
> = ({
columnsJSON,
open,
setOpen,
packageId,
formId,
formCode,
uploaderType,
}) => {
const [tabValue, setTabValue] = useState<"upload" | "uploaded">("upload");
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="w-[600px]" style={{ maxWidth: "none" }}>
<DialogHeader>
<DialogTitle>Vendor Document Template</DialogTitle>
<DialogDescription>
{/* 사용하시고자 하는 Vendor Document Template(.docx)를 업로드
하여주시기 바랍니다. */}
</DialogDescription>
</DialogHeader>
<Tabs value={tabValue}>
<div className="flex justify-between items-center">
<TabsList>
<TabsTrigger value="upload" onClick={() => setTabValue("upload")}>
Upload Template File
</TabsTrigger>
<TabsTrigger
value="uploaded"
onClick={() => setTabValue("uploaded")}
>
Uploaded Template File List
</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<TempDownloadBtn />
</TooltipTrigger>
<TooltipContent>
<Label>Template Sample Download</Label>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<VarListDownloadBtn
columnsJSON={columnsJSON}
formCode={formCode}
/>
</TooltipTrigger>
<TooltipContent>
<Label>Variable List Download</Label>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
<TabsContent value="upload">
<FormDataReportTempUploadTab
packageId={packageId}
formId={formId}
uploaderType={uploaderType}
/>
</TabsContent>
<TabsContent value="uploaded">
<FormDataReportTempUploadedListTab
packageId={packageId}
formId={formId}
/>
</TabsContent>
</Tabs>
</DialogContent>
</Dialog>
);
};
|
