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
|
"use client";
import React, { FC, Dispatch, SetStateAction, useState } from "react";
import { useParams } from "next/navigation";
import { useTranslation } from "@/i18n/client";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
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";
import { FileActionsDropdown } from "../ui/file-actions";
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 params = useParams();
const lng = (params?.lng as string) || "ko";
const { t } = useTranslation(lng, "engineering");
const [tabValue, setTabValue] = useState<"upload" | "uploaded">("upload");
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="w-[600px]" style={{ maxWidth: "none" }}>
<DialogHeader className="gap-2">
<DialogTitle>{t("templateUpload.dialogTitle")}</DialogTitle>
<DialogDescription className="flex justify-around gap-[16px] ">
<FileActionsDropdown
filePath={"/vendorFormReportSample/sample_template_file.docx"}
fileName={"sample_template_file.docx"}
variant="ghost"
size="icon"
description={t("templateUpload.sampleFile")}
/>
<VarListDownloadBtn columnsJSON={columnsJSON} formCode={formCode} />
</DialogDescription>
</DialogHeader>
<Tabs value={tabValue}>
<div className="flex justify-between items-center">
<TabsList className="w-full">
<TabsTrigger
value="upload"
onClick={() => setTabValue("upload")}
className="flex-1"
>
{t("templateUpload.uploadTab")}
</TabsTrigger>
<TabsTrigger
value="uploaded"
onClick={() => setTabValue("uploaded")}
className="flex-1"
>
{t("templateUpload.uploadedListTab")}
</TabsTrigger>
</TabsList>
</div>
<TabsContent value="upload">
<FormDataReportTempUploadTab
packageId={packageId}
formId={formId}
uploaderType={uploaderType}
/>
</TabsContent>
<TabsContent value="uploaded">
<FormDataReportTempUploadedListTab
packageId={packageId}
formId={formId}
/>
</TabsContent>
</Tabs>
</DialogContent>
</Dialog>
);
};
|
