fix: table and upload task TA

This commit is contained in:
Sabda Yagra 2025-12-02 10:40:54 +07:00
parent 5fa74cc716
commit 702bf29d6c
2 changed files with 297 additions and 111 deletions

View File

@ -172,21 +172,89 @@ const TaskTaTable = () => {
);
}
const data = res?.data?.data;
const contentData = data?.content || [];
let contentData = res?.data?.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);
setTotalPage(data?.totalPages);
setTotalData(res?.data?.data?.totalElements);
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")

View File

@ -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: {
id?: number;
title: string;
assignedToUsers: any;
assignmentTypeId: string;
narration: string;
assignmentType: string;
expertCompetencies: string;
attachmentUrl: string[];
} = {
const requestData = {
...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);
console.log("response", response);
// Set block table TA
localStorage.setItem("TA_UPLOAD_IN_PROGRESS", "true");
const id = response?.data?.data.id;
loading();
if (imageFiles?.length == 0) {
setIsImageUploadFinish(true);
}
imageFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "1", "0");
});
loading(); // SHOW SWAL LOADING
if (videoFiles?.length == 0) {
setIsVideoUploadFinish(true);
}
videoFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "2", "0");
});
// Kumpulkan semua upload
const allUploads: Promise<any>[] = [];
if (textFiles?.length == 0) {
setIsTextUploadFinish(true);
}
textFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "3", "0");
});
imageFiles.forEach((item, idx) =>
allUploads.push(uploadResumableFile(idx, id, item, "1", "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;
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: { "X-XSRF-TOKEN": csrfToken },
retryDelays: [0, 3000, 6000, 12000],
chunkSize: 20000,
metadata: {
assignmentId: id,
filename: file.name,
contentType: file.type,
fileTypeId,
duration,
},
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);
}
},
onBeforeRequest(req) {
req.getUnderlyingObject().withCredentials = true;
},
onError(err) {
console.error("Upload error:", err);
reject(err);
},
onSuccess() {
console.log("Upload selesai:", file.name);
resolve(true);
},
});
upload.start();
});
upload.start();
}
useEffect(() => {