>,
@@ -76,6 +68,14 @@ export default function ListFiles() {
}
};
+ useEffect(() => {
+ if (!hasFetched.current) {
+ fetchFiles("xlsx", setXlsxFiles, setXlsxLastEvaluatedKey);
+ fetchFiles("html", setHtmlFiles, setHtmlLastEvaluatedKey);
+ hasFetched.current = true;
+ }
+ }, [fetchFiles]);
+
const handleOpenUpload = () => {
setShowUpload(true);
};
diff --git a/src/app/ui/select-dropdown.tsx b/src/app/ui/select-dropdown.tsx
index 519829d..a7b0e0b 100644
--- a/src/app/ui/select-dropdown.tsx
+++ b/src/app/ui/select-dropdown.tsx
@@ -15,7 +15,7 @@ interface fileDataType {
}
interface SelectDropdownProps {
- onSelect: (file_id: string) => void;
+ onSelect: (file_id: string, file_url: string) => void;
fileExtension: string;
}
@@ -65,8 +65,7 @@ export default function SelectDropdown({
const fetchFiles = async (file_extension: string, limit: number) => {
try {
setIsLoading(true);
- const base_url =
- "https://8um2zizr80.execute-api.ap-northeast-1.amazonaws.com/dev";
+ const base_url = process.env.NEXT_PUBLIC_API_ENDPOINT;
const url = new URL(`${base_url}/files`);
url.searchParams.append("file_extension", file_extension);
url.searchParams.append("limit", limit.toString());
@@ -96,8 +95,12 @@ export default function SelectDropdown({
setIsOpen(!isOpen);
};
- const handleSelect = (file_id: string, file_name: string) => {
- onSelect(file_id);
+ const handleSelect = (
+ file_id: string,
+ file_url: string,
+ file_name: string
+ ) => {
+ onSelect(file_id, file_url);
console.log("Selected file:", file_id);
setSelectedFileName(file_name);
setIsOpen(false);
@@ -195,7 +198,11 @@ export default function SelectDropdown({
key={option.file_id}
className="hover:bg-gray-200 cursor-pointer active:bg-gray-300"
onClick={() =>
- handleSelect(option.file_id, option.file_name)
+ handleSelect(
+ option.file_id,
+ option.file_url,
+ option.file_name
+ )
}
>
|
diff --git a/src/app/ui/send-email-form.tsx b/src/app/ui/send-email-form.tsx
index fc5841c..8a5fa94 100644
--- a/src/app/ui/send-email-form.tsx
+++ b/src/app/ui/send-email-form.tsx
@@ -1,9 +1,10 @@
"use client";
-import React, { useRef, useState, useEffect, FormEvent } from "react";
+import React, { useRef, useState, FormEvent } from "react";
import { submitForm } from "@/lib/actions";
import SelectDropdown from "@/app/ui/select-dropdown";
-// import FileUpload from "@/app/ui/file-upload";
+import AttachDropdown from "./attach-dropdown";
import FileUpload from "@/app/ui/file-upload";
+import IframePreview from "@/app/ui/iframe-preview";
interface SubmitResponse {
status: string;
@@ -30,22 +31,40 @@ export default function SendEmailForm() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [selectedHtmlFile, setSelectedHtmlFile] = useState("");
const [selectedXlsxFile, setSelectedXlsxFile] = useState("");
+ const [htmlPreviewLink, setHtmlPreviewLink] = useState("");
+ const [xlsxPreviewLink, setXlsxPreviewLink] = useState("");
const [errors, setErrors] = useState<{ [key: string]: string }>({});
const [showHtmlUpload, setShowHtmlUpload] = useState(false);
const [showXlsxUpload, setShowXlsxUpload] = useState(false);
+ const [previewHtml, setPreviewHtml] = useState(false);
+ const [previewXlsx, setPreviewXlsx] = useState(false);
+ const [showAttachUpload, setShowAttachUpload] = useState(false);
+
+ const [attachment_file_ids, setAttachment_file_ids] = useState([]);
+ const [isGenerateCertificate, setIsGenerateCertificate] =
+ useState(false);
const onSubmit = async (event: FormEvent) => {
event.preventDefault();
if (!ref.current) return;
- const formData = new FormData(ref.current);
- formData.append("template_file_id", selectedHtmlFile);
- formData.append("spreadsheet_file_id", selectedXlsxFile);
+ const formData = {
+ subject: (ref.current.querySelector("[id='subject']") as HTMLInputElement)
+ .value,
+ display_name: (
+ ref.current.querySelector("[id='display_name']") as HTMLInputElement
+ ).value,
+ template_file_id: selectedHtmlFile,
+ spreadsheet_file_id: selectedXlsxFile,
+ attachment_file_ids: attachment_file_ids,
+ is_generate_certificate: isGenerateCertificate,
+ };
+ console.log(formData.attachment_file_ids);
setIsSubmitting(true);
try {
const response: SubmitResponse = (await submitForm(
- formData
+ JSON.stringify(formData)
)) as SubmitResponse;
if (response.status === "error" && response.errors) {
@@ -59,7 +78,7 @@ export default function SendEmailForm() {
}
alert(response.status + ": " + response.message);
- setErrors({}); // Clear previous errors
+ setErrors({});
ref.current.reset();
} catch (error: any) {
alert("Failed to send form data: " + error.message);
@@ -67,14 +86,20 @@ export default function SendEmailForm() {
setIsSubmitting(false);
};
- const handleHtmlSelect = (file_id: string) => {
- // console.log("selected html file id", file_id);
+ const handleHtmlSelect = (file_id: string, file_url: string) => {
setSelectedHtmlFile(file_id);
+ setHtmlPreviewLink(file_url);
};
- const handleXlsxSelect = (file_id: string) => {
- // console.log("selected xlsx file id", file_id);
+ const handleXlsxSelect = (file_id: string, file_url: string) => {
setSelectedXlsxFile(file_id);
+ setXlsxPreviewLink(file_url);
+ };
+
+ const handleAttachSelect = (selectedFiles: any) => {
+ const selected_ids = selectedFiles.map((file: any) => file.file_id);
+ setAttachment_file_ids(selected_ids);
+ console.log("selected attachment file ids", selected_ids);
};
const handleOpenHtmlUpload = () => {
@@ -91,6 +116,36 @@ export default function SendEmailForm() {
setShowXlsxUpload(false);
};
+ const handleAttachOpenUpload = () => {
+ setShowAttachUpload(true);
+ };
+
+ const handleAttachCloseUpload = () => {
+ setShowAttachUpload(false);
+ };
+
+ const handlePreviewHtml = () => {
+ setPreviewHtml(true);
+ };
+
+ const handlePreviewHtmlClose = () => {
+ setPreviewHtml(false);
+ };
+
+ const handlePreviewXlsx = () => {
+ setPreviewXlsx(true);
+ };
+
+ const handlePreviewXlsxClose = () => {
+ setPreviewXlsx(false);
+ };
+
+ // const handleCertificateChange = (
+ // event: React.ChangeEvent
+ // ) => {
+ // setIsGenerateCertificate(event.target.value === "yes");
+ // };
+
return (
<>
@@ -150,6 +205,13 @@ export default function SendEmailForm() {
onSelect={handleHtmlSelect}
fileExtension="html"
/>
+
)}
+ {previewHtml && (
+
+
+
+
+ Preview Html
+ {htmlPreviewLink ? (
+
+ ) : (
+
+ )}
+
+
+ {errors.template_file_id}
@@ -194,6 +293,13 @@ export default function SendEmailForm() {
onSelect={handleXlsxSelect}
fileExtension="xlsx"
/>
+
|