From ab69780b867fd5e6443a52baaef26ce73448c85f Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Fri, 8 Nov 2024 09:37:37 +0700
Subject: [PATCH] create: add separate component for file upload on assessment

---
 .../fileUpload/fileUpload.tsx                 | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 apps/frontend/src/modules/assessmentManagement/fileUpload/fileUpload.tsx

diff --git a/apps/frontend/src/modules/assessmentManagement/fileUpload/fileUpload.tsx b/apps/frontend/src/modules/assessmentManagement/fileUpload/fileUpload.tsx
new file mode 100644
index 0000000..e2b6cfa
--- /dev/null
+++ b/apps/frontend/src/modules/assessmentManagement/fileUpload/fileUpload.tsx
@@ -0,0 +1,95 @@
+import React, { useRef } from 'react';
+import { TbUpload } from 'react-icons/tb';
+import { Text, Stack, Group, CloseButton, Flex } from '@mantine/core';
+import FileSizeValidationModal from "@/modules/assessmentManagement/modals/FileSizeValidationModal";
+
+interface Question {
+    questionId: string;
+    needFile: boolean;
+    // Add any other properties needed for question
+}
+
+interface FileUploadProps {
+    question: Question;
+    handleFileChange: (event: React.ChangeEvent<HTMLInputElement>, question: Question) => void;
+    handleRemoveFile: (question: Question) => void;
+    uploadedFiles: Record<string, File | null>;
+    dragActive: boolean;
+    handleDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
+    handleDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
+    handleDrop: (event: React.DragEvent<HTMLDivElement>, question: Question) => void;
+    modalOpenFileSize: boolean;
+    setModalOpenFileSize: React.Dispatch<React.SetStateAction<boolean>>;
+    exceededFileName: string;
+    handleClick: () => void;
+}
+
+const FileUpload: React.FC<FileUploadProps> = ({
+    question,
+    handleFileChange,
+    handleRemoveFile,
+    uploadedFiles,
+    dragActive,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    modalOpenFileSize,
+    setModalOpenFileSize,
+    exceededFileName,
+    handleClick
+}) => {
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    return (
+        <div className="mx-11">
+            {question.needFile && (
+                <div
+                    className={`pt-5 pb-5 pr-5 pl-5 border-2 rounded-lg border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"} shadow-lg`}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    onDrop={(event) => handleDrop(event, question)}
+                    onClick={() => {
+                        handleClick();
+                        fileInputRef.current?.click();
+                    }}
+                >
+                    <Flex align="center" justify="space-between" gap="sm">
+                        <TbUpload size={24} style={{ marginLeft: "8px", marginRight: "8px" }} />
+                        <div className="flex-grow text-right">
+                            <Text className="font-bold">Klik untuk unggah atau geser file disini</Text>
+                            <Text className="text-sm text-gray-400">PNG, JPG, PDF</Text>
+                            <Text className="text-sm text-gray-400">(Max.File size : 64 MB)</Text>
+                        </div>
+                    </Flex>
+                    <input
+                        type="file"
+                        ref={fileInputRef}
+                        onChange={(event) => handleFileChange(event, question)}
+                        style={{ display: "none" }}
+                        accept="image/png, image/jpeg, application/pdf"
+                    />
+                </div>
+            )}
+
+            <div className="mx-2">
+                {uploadedFiles[question.questionId] && (
+                    <Stack gap="sm" mt="sm">
+                        <Text className="font-bold">File yang diunggah:</Text>
+                        <Group align="center">
+                            <Text>{uploadedFiles[question.questionId]?.name}</Text>
+                        </Group>
+                    </Stack>
+                )}
+            </div>
+
+            {/* File Size Validation Modal */}
+            <FileSizeValidationModal
+                opened={modalOpenFileSize}
+                onClose={() => setModalOpenFileSize(false)}
+                fileName={exceededFileName}
+            />
+        </div>
+    );
+};
+
+export default FileUpload;
\ No newline at end of file