From e7b37a6279099fd2fb017d3baa57b4b7cde13028 Mon Sep 17 00:00:00 2001 From: abiyasa05 Date: Fri, 25 Oct 2024 09:51:45 +0700 Subject: [PATCH] update: index lazy for file size validation and change component radio group to shadcn --- .../assessment/index.lazy.tsx | 121 ++++++++++++------ 1 file changed, 81 insertions(+), 40 deletions(-) diff --git a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx index 9445f1c..a0938ab 100644 --- a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx +++ b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx @@ -4,14 +4,15 @@ import { Flex, Pagination, Stack, - Radio, Text, - Textarea, Loader, ActionIcon, CloseButton, Group, } from "@mantine/core"; +import { Textarea } from "@/shadcn/components/ui/textarea"; +import { Label } from "@/shadcn/components/ui/label"; +import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group"; import { useQuery, useMutation } from "@tanstack/react-query"; import { submitAssessmentMutationOptions, @@ -26,6 +27,7 @@ import { import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronDown } from "react-icons/tb"; import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal"; import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal"; +import FileSizeValidationModal from "@/modules/assessmentManagement/modals/FileSizeValidationModal"; import { useState, useRef, useEffect } from "react"; const getQueryParam = (param: string) => { @@ -62,6 +64,7 @@ export default function AssessmentPage() { }>({}); const fileInputRef = useRef(null); const [modalOpen, setModalOpen] = useState(false); + const [modalOpenFileSize, setModalOpenFileSize] = useState(false); const [selectedAspectId, setSelectedAspectId] = useState(null); const [selectedSubAspectId, setSelectedSubAspectId] = useState(null); const [assessmentId, setAssessmentId] = useState(null); @@ -70,6 +73,7 @@ export default function AssessmentPage() { const [uploadedFiles, setUploadedFiles] = useState<{ [key: string]: File | null }>({}); const [unansweredQuestions, setUnansweredQuestions] = useState(0); const [validationModalOpen, setValidationModalOpen] = useState(false); + const [exceededFileName, setExceededFileName] = useState(""); // Fetch aspects and sub-aspects const aspectsQuery = useQuery({ @@ -380,13 +384,26 @@ export default function AssessmentPage() { }); }, [assessmentId]); + // Max file size in bytes (25 MB) + const MAX_FILE_SIZE = 25 * 1024 * 1024; + const handleDrop = (event: React.DragEvent, question: { questionId: string }) => { event.preventDefault(); setDragActive(false); const droppedFiles = Array.from(event.dataTransfer.files); + if (droppedFiles.length > 0) { + const file = droppedFiles[0]; + + // Validate file size + if (file.size > MAX_FILE_SIZE) { + setExceededFileName(file.name); // Simpan nama file yang melebihi ukuran + setModalOpenFileSize(true); // Tampilkan modal + return; + } + const formData = new FormData(); - formData.append('file', droppedFiles[0]); // Hanya menyertakan file pertama + formData.append('file', file); // Hanya menyertakan file pertama // Pastikan assessmentId tidak null sebelum menambahkannya ke FormData if (assessmentId) { @@ -409,13 +426,14 @@ export default function AssessmentPage() { // Simpan file dalam state dan local storage menggunakan questionId dan assessmentId sebagai kunci setUploadedFiles(prev => ({ ...prev, - [question.questionId]: droppedFiles[0], // Simpan file berdasarkan questionId + [question.questionId]: file, // Simpan file berdasarkan questionId })); + localStorage.setItem(`uploadedFile_${assessmentId}_${question.questionId}`, JSON.stringify({ - name: droppedFiles[0].name, - type: droppedFiles[0].type, - lastModified: droppedFiles[0].lastModified, - })); // Simpan info file ke local storage + name: file.name, + type: file.type, + lastModified: file.lastModified, + })); } }; @@ -429,8 +447,17 @@ export default function AssessmentPage() { if (event.target.files) { const fileArray = Array.from(event.target.files); if (fileArray.length > 0) { + const file = fileArray[0]; + + // Validate file size + if (file.size > MAX_FILE_SIZE) { + setExceededFileName(file.name); // Simpan nama file yang melebihi ukuran + setModalOpenFileSize(true); // Tampilkan modal + return; // Hentikan eksekusi fungsi jika ukuran file melebihi batas + } + const formData = new FormData(); - formData.append('file', fileArray[0]); // Hanya menyertakan file pertama + formData.append('file', file); // Hanya menyertakan file pertama // Tambahkan assessmentId ke FormData if (assessmentId) { @@ -453,13 +480,14 @@ export default function AssessmentPage() { // Simpan file dalam state dan local storage menggunakan questionId dan assessmentId sebagai kunci setUploadedFiles(prev => ({ ...prev, - [question.questionId]: fileArray[0], // Simpan file berdasarkan questionId + [question.questionId]: file, // Simpan file berdasarkan questionId })); + localStorage.setItem(`uploadedFile_${assessmentId}_${question.questionId}`, JSON.stringify({ - name: fileArray[0].name, - type: fileArray[0].type, - lastModified: fileArray[0].lastModified, - })); // Simpan info file ke local storage + name: file.name, + type: file.type, + lastModified: file.lastModified, + })); } } }; @@ -652,33 +680,36 @@ export default function AssessmentPage() { {/* Opsi Radio Button */} {question.options?.length > 0 ? (
- -
- {question.options.map((option: any) => ( - +
+ ))} +
) : ( Tidak ada opsi untuk pertanyaan ini. @@ -717,6 +748,9 @@ export default function AssessmentPage() { PNG, JPG, PDF + + (Max.File size : 25 MB) + + {/* File Size Validation Modal */} + setModalOpenFileSize(false)} + fileName={exceededFileName} + /> + {/* Garis pembatas setiap soal */}