fix: table and upload task TA

app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx

@@ -172,21 +172,89 @@ const TaskTaTable = () => {
         );
       }
 
-      const data = res?.data?.data;
+      let contentData = res?.data?.data?.content || [];
-      const contentData = data?.content || [];
+
+      // ⛔ Jika upload belum selesai → sembunyikan task baru
+      const isUploadingTA =
+        localStorage.getItem("TA_UPLOAD_IN_PROGRESS") === "true";
+
+      if (isUploadingTA) {
+        const now = new Date();
+        // Filter task yg dibuat < 5 menit terakhir (belum selesai upload)
+        contentData = contentData.filter((item: any) => {
+          const created = new Date(item.createdAt);
+          const diff = now.getTime() - created.getTime();
+          return diff > 5 * 60 * 1000; // lebih dari 5 menit
+        });
+      }
 
       contentData.forEach((item: any, index: number) => {
         item.no = (page - 1) * Number(showData) + index + 1;
       });
 
       setDataTable(contentData);
-      setTotalData(data?.totalElements);
+      setTotalData(res?.data?.data?.totalElements);
-      setTotalPage(data?.totalPages);
+      setTotalPage(res?.data?.data?.totalPages);
     } catch (error) {
       console.error("Error fetching tasks:", error);
     }
   }
 
+  // async function fetchData() {
+  //   const formattedStartDate = dateFilter
+  //     ? format(new Date(dateFilter), "yyyy-MM-dd")
+  //     : "";
+
+  //   try {
+  //     let res;
+
+  //     if (activeTab === "ta") {
+  //       res = await listTaskTa(
+  //         page - 1,
+  //         search,
+  //         showData,
+  //         filterByCode,
+  //         formattedStartDate,
+  //         "atensi-khusus",
+  //         statusFilter
+  //       );
+  //     } else if (activeTab === "daily") {
+  //       res = await listTaskTa(
+  //         page - 1,
+  //         search,
+  //         showData,
+  //         filterByCode,
+  //         formattedStartDate,
+  //         "tugas-harian",
+  //         statusFilter
+  //       );
+  //     } else if (activeTab === "special") {
+  //       res = await listTask(
+  //         page - 1,
+  //         search,
+  //         showData,
+  //         filterByCode,
+  //         formattedStartDate,
+  //         "atensi-khusus",
+  //         statusFilter
+  //       );
+  //     }
+
+  //     const data = res?.data?.data;
+  //     const contentData = data?.content || [];
+
+  //     contentData.forEach((item: any, index: number) => {
+  //       item.no = (page - 1) * Number(showData) + index + 1;
+  //     });
+
+  //     setDataTable(contentData);
+  //     setTotalData(data?.totalElements);
+  //     setTotalPage(data?.totalPages);
+  //   } catch (error) {
+  //     console.error("Error fetching tasks:", error);
+  //   }
+  // }
+
   // async function fetchData() {
   //   const formattedStartDate = dateFilter
   //     ? format(new Date(dateFilter), "yyyy-MM-dd")

components/form/task-ta/task-ta-form.tsx

@@ -260,71 +260,147 @@ export default function FormTaskTa() {
     });
   };
 
+  // const save = async (data: TaskSchema) => {
+  //   const cleanedLinks = links
+  //     .map((link) => link.trim())
+  //     .filter((link) => link !== "" && link.startsWith("http"));
+
+  //   const requestData: {
+  //     id?: number;
+  //     title: string;
+  //     assignedToUsers: any;
+  //     assignmentTypeId: string;
+  //     narration: string;
+  //     assignmentType: string;
+  //     expertCompetencies: string;
+  //     attachmentUrl: string[];
+  //   } = {
+  //     ...data,
+  //     assignedToUsers: handleExpertChange(),
+  //     assignmentType: taskType,
+  //     assignmentTypeId: type,
+  //     narration: data.narration,
+  //     expertCompetencies: Array.from(selectedCompetencies).join(","),
+  //     title: data.title,
+  //     attachmentUrl: cleanedLinks,
+  //   };
+
+  //   const response = await createTaskTa(requestData);
+
+  //   localStorage.setItem("TA_UPLOAD_IN_PROGRESS", "true");
+
+  //   console.log("Form Data Submitted:", requestData);
+  //   console.log("response", response);
+
+  //   const id = response?.data?.data.id;
+  //   loading();
+  //   if (imageFiles?.length == 0) {
+  //     setIsImageUploadFinish(true);
+  //   }
+
+  //   const allUploads: Promise<any>[] = [];
+
+  //   imageFiles.forEach((item, index) => {
+  //     allUploads.push(uploadResumableFile(index, String(id), item, "1", "0"));
+  //   });
+
+  //   videoFiles.forEach((item, index) => {
+  //     allUploads.push(uploadResumableFile(index, String(id), item, "2", "0"));
+  //   });
+
+  //   textFiles.forEach((item, index) => {
+  //     allUploads.push(uploadResumableFile(index, String(id), item, "3", "0"));
+  //   });
+
+  //   audioFiles.forEach((item, index) => {
+  //     allUploads.push(uploadResumableFile(index, String(id), item, "4", "0"));
+  //   });
+
+  //   // ⬅ WAJIB
+  //   await Promise.all(allUploads);
+  //   localStorage.removeItem("TA_UPLOAD_IN_PROGRESS");
+
+  //   // imageFiles?.map(async (item: any, index: number) => {
+  //   //   await uploadResumableFile(index, String(id), item, "1", "0");
+  //   // });
+
+  //   // if (videoFiles?.length == 0) {
+  //   //   setIsVideoUploadFinish(true);
+  //   // }
+  //   // videoFiles?.map(async (item: any, index: number) => {
+  //   //   await uploadResumableFile(index, String(id), item, "2", "0");
+  //   // });
+
+  //   // if (textFiles?.length == 0) {
+  //   //   setIsTextUploadFinish(true);
+  //   // }
+  //   // textFiles?.map(async (item: any, index: number) => {
+  //   //   await uploadResumableFile(index, String(id), item, "3", "0");
+  //   // });
+
+  //   // if (audioFiles?.length == 0) {
+  //   //   setIsAudioUploadFinish(true);
+  //   // }
+  //   // audioFiles.map(async (item: FileWithPreview, index: number) => {
+  //   //   await uploadResumableFile(
+  //   //     index,
+  //   //     String(id),
+  //   //     item, // Use .file to access the actual File object
+  //   //     "4",
+  //   //     "0" // Optional: Replace with actual duration if available
+  //   //   );
+  //   // });
+  // };
+
   const save = async (data: TaskSchema) => {
     const cleanedLinks = links
       .map((link) => link.trim())
-      .filter((link) => link !== "" && link.startsWith("http"));
+      .filter((link) => link.startsWith("http"));
 
-    const requestData: {
+    const requestData = {
-      id?: number;
-      title: string;
-      assignedToUsers: any;
-      assignmentTypeId: string;
-      narration: string;
-      assignmentType: string;
-      expertCompetencies: string;
-      attachmentUrl: string[];
-    } = {
       ...data,
       assignedToUsers: handleExpertChange(),
       assignmentType: taskType,
       assignmentTypeId: type,
-      narration: data.narration,
       expertCompetencies: Array.from(selectedCompetencies).join(","),
-      title: data.title,
       attachmentUrl: cleanedLinks,
     };
 
     const response = await createTaskTa(requestData);
+    const id = String(response?.data?.data.id);
 
-    console.log("Form Data Submitted:", requestData);
+    // Set block table TA
-    console.log("response", response);
+    localStorage.setItem("TA_UPLOAD_IN_PROGRESS", "true");
 
-    const id = response?.data?.data.id;
+    loading(); // SHOW SWAL LOADING
-    loading();
-    if (imageFiles?.length == 0) {
-      setIsImageUploadFinish(true);
-    }
-    imageFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "1", "0");
-    });
 
-    if (videoFiles?.length == 0) {
+    // Kumpulkan semua upload
-      setIsVideoUploadFinish(true);
+    const allUploads: Promise<any>[] = [];
-    }
-    videoFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "2", "0");
-    });
 
-    if (textFiles?.length == 0) {
+    imageFiles.forEach((item, idx) =>
-      setIsTextUploadFinish(true);
+      allUploads.push(uploadResumableFile(idx, id, item, "1", "0"))
-    }
-    textFiles?.map(async (item: any, index: number) => {
-      await uploadResumableFile(index, String(id), item, "3", "0");
-    });
-
-    if (audioFiles?.length == 0) {
-      setIsAudioUploadFinish(true);
-    }
-    audioFiles.map(async (item: FileWithPreview, index: number) => {
-      await uploadResumableFile(
-        index,
-        String(id),
-        item, // Use .file to access the actual File object
-        "4",
-        "0" // Optional: Replace with actual duration if available
     );
-    });
+
+    videoFiles.forEach((item, idx) =>
+      allUploads.push(uploadResumableFile(idx, id, item, "2", "0"))
+    );
+
+    textFiles.forEach((item, idx) =>
+      allUploads.push(uploadResumableFile(idx, id, item, "3", "0"))
+    );
+
+    audioFiles.forEach((item, idx) =>
+      allUploads.push(uploadResumableFile(idx, id, item, "4", "0"))
+    );
+
+    // Tunggu upload selesai
+    await Promise.all(allUploads);
+
+    // Hapus flag
+    localStorage.removeItem("TA_UPLOAD_IN_PROGRESS");
+
+    // Close loading + redirect
+    successSubmit("/in/contributor/task-ta");
   };
 
   const onSubmit = (data: TaskSchema) => {
@@ -397,75 +473,117 @@ export default function FormTaskTa() {
     setAudioFiles((prev) => prev.filter((_, idx) => idx !== index));
   };
 
-  async function uploadResumableFile(
+  // async function uploadResumableFile(
+  //   idx: number,
+  //   id: string,
+  //   file: any,
+  //   fileTypeId: string,
+  //   duration: string
+  // ) {
+  //   console.log("Tus Upload : ", idx, id, file, fileTypeId, duration);
+
+  //   const resCsrf = await getCsrfToken();
+  //   const csrfToken = resCsrf?.data?.token;
+  //   console.log("CSRF TOKEN : ", csrfToken);
+  //   const headers = {
+  //     "X-XSRF-TOKEN": csrfToken,
+  //   };
+
+  //   const upload = new Upload(file, {
+  //     endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
+  //     headers: headers,
+  //     retryDelays: [0, 3000, 6000, 12_000, 24_000],
+  //     chunkSize: 20_000,
+  //     metadata: {
+  //       assignmentId: id,
+  //       filename: file.name,
+  //       contentType: file.type,
+  //       fileTypeId: fileTypeId,
+  //       duration,
+  //     },
+  //     onBeforeRequest: function (req) {
+  //       var xhr = req.getUnderlyingObject();
+  //       xhr.withCredentials = true;
+  //     },
+  //     onError: async (e: any) => {
+  //       console.log("Error upload :", e);
+  //       error(e);
+  //     },
+  //     onChunkComplete: (
+  //       chunkSize: any,
+  //       bytesAccepted: any,
+  //       bytesTotal: any
+  //     ) => {
+  //       // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+  //       // progressInfo[idx].percentage = uploadPersen;
+  //       // counterUpdateProgress++;
+  //       // console.log(counterUpdateProgress);
+  //       // setProgressList(progressInfo);
+  //       // setCounterProgress(counterUpdateProgress);
+  //     },
+  //     onSuccess: async () => {
+  //       // uploadPersen = 100;
+  //       // progressInfo[idx].percentage = 100;
+  //       // counterUpdateProgress++;
+  //       // setCounterProgress(counterUpdateProgress);
+  //       successTodo();
+  //       if (fileTypeId == "1") {
+  //         setIsImageUploadFinish(true);
+  //       } else if (fileTypeId == "2") {
+  //         setIsVideoUploadFinish(true);
+  //       }
+  //       if (fileTypeId == "3") {
+  //         setIsTextUploadFinish(true);
+  //       }
+  //       if (fileTypeId == "4") {
+  //         setIsAudioUploadFinish(true);
+  //       }
+  //     },
+  //   });
+
+  //   upload.start();
+  // }
+  function uploadResumableFile(
     idx: number,
     id: string,
     file: any,
     fileTypeId: string,
     duration: string
   ) {
-    console.log("Tus Upload : ", idx, id, file, fileTypeId, duration);
+    return new Promise(async (resolve, reject) => {
-
       const resCsrf = await getCsrfToken();
       const csrfToken = resCsrf?.data?.token;
-    console.log("CSRF TOKEN : ", csrfToken);
-    const headers = {
-      "X-XSRF-TOKEN": csrfToken,
-    };
 
       const upload = new Upload(file, {
         endpoint: `${process.env.NEXT_PUBLIC_API}/assignment-expert/file/upload`,
-      headers: headers,
+        headers: { "X-XSRF-TOKEN": csrfToken },
-      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+        retryDelays: [0, 3000, 6000, 12000],
-      chunkSize: 20_000,
+        chunkSize: 20000,
         metadata: {
           assignmentId: id,
           filename: file.name,
           contentType: file.type,
-        fileTypeId: fileTypeId,
+          fileTypeId,
           duration,
         },
-      onBeforeRequest: function (req) {
+
-        var xhr = req.getUnderlyingObject();
+        onBeforeRequest(req) {
-        xhr.withCredentials = true;
+          req.getUnderlyingObject().withCredentials = true;
         },
-      onError: async (e: any) => {
+
-        console.log("Error upload :", e);
+        onError(err) {
-        error(e);
+          console.error("Upload error:", err);
+          reject(err);
         },
-      onChunkComplete: (
+
-        chunkSize: any,
+        onSuccess() {
-        bytesAccepted: any,
+          console.log("Upload selesai:", file.name);
-        bytesTotal: any
+          resolve(true);
-      ) => {
-        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
-        // progressInfo[idx].percentage = uploadPersen;
-        // counterUpdateProgress++;
-        // console.log(counterUpdateProgress);
-        // setProgressList(progressInfo);
-        // setCounterProgress(counterUpdateProgress);
-      },
-      onSuccess: async () => {
-        // uploadPersen = 100;
-        // progressInfo[idx].percentage = 100;
-        // counterUpdateProgress++;
-        // setCounterProgress(counterUpdateProgress);
-        successTodo();
-        if (fileTypeId == "1") {
-          setIsImageUploadFinish(true);
-        } else if (fileTypeId == "2") {
-          setIsVideoUploadFinish(true);
-        }
-        if (fileTypeId == "3") {
-          setIsTextUploadFinish(true);
-        }
-        if (fileTypeId == "4") {
-          setIsAudioUploadFinish(true);
-        }
         },
       });
 
       upload.start();
+    });
   }
 
   useEffect(() => {