Nama
+
{praktikan.nama}
+
NIM
+
{praktikan.nim}
+
Modul
+
{modul.judul}
@@ -47,6 +166,7 @@ export default function ContentLihatTP({ jawabanData, praktikan, modul }) {
Jawaban Tugas Pendahuluan
+
{hasData && (
{jawabanData.length} soal
@@ -58,19 +178,32 @@ export default function ContentLihatTP({ jawabanData, praktikan, modul }) {
);
-}
\ No newline at end of file
+}
diff --git a/resources/js/Components/Assistants/Modals/ModalInputNilai.jsx b/resources/js/Components/Assistants/Modals/ModalInputNilai.jsx
index dddb471..be40db5 100644
--- a/resources/js/Components/Assistants/Modals/ModalInputNilai.jsx
+++ b/resources/js/Components/Assistants/Modals/ModalInputNilai.jsx
@@ -251,18 +251,30 @@ export default function ModalInputNilai({
: [];
return {
- questions: entries.map((item, index) => ({
- soalId: item.soal_id ?? index,
- question:
- item.soal_text ?? "Soal tidak tersedia",
- answer:
- typeof item.jawaban === "string"
- ? item.jawaban
- : "-",
- options: [],
- selectedOptionId: null,
- correctOptionId: null,
- })),
+ questions: entries.map((item, index) => {
+ const parsed =
+ normalizeAnswerWithAttachment(item);
+
+ return {
+ soalId: item.soal_id ?? index,
+ question:
+ item.soal_text ??
+ "Soal tidak tersedia",
+
+ answer: parsed.answerText,
+
+ attachmentUrl:
+ parsed.attachmentUrl,
+
+ attachmentFileId:
+ parsed.attachmentFileId,
+
+ options: [],
+ selectedOptionId: null,
+ correctOptionId: null,
+ };
+ }),
+
notice: data?.message,
};
}
@@ -325,18 +337,30 @@ export default function ModalInputNilai({
: [];
return {
- questions: entries.map((item, index) => ({
- soalId: item.soal_id ?? index,
- question:
- item.soal_text ?? "Soal tidak tersedia",
- answer:
- typeof item.jawaban === "string"
- ? item.jawaban
- : "-",
- options: [],
- selectedOptionId: null,
- correctOptionId: null,
- })),
+ questions: entries.map((item, index) => {
+ const parsed =
+ normalizeAnswerWithAttachment(item);
+
+ return {
+ soalId: item.soal_id ?? index,
+ question:
+ item.soal_text ??
+ "Soal tidak tersedia",
+
+ answer: parsed.answerText,
+
+ attachmentUrl:
+ parsed.attachmentUrl,
+
+ attachmentFileId:
+ parsed.attachmentFileId,
+
+ options: [],
+ selectedOptionId: null,
+ correctOptionId: null,
+ };
+ }),
+
notice: data?.message,
};
}
diff --git a/resources/js/Components/Assistants/Soal/SoalInputEssay.jsx b/resources/js/Components/Assistants/Soal/SoalInputEssay.jsx
index 1f338e8..d2e114e 100644
--- a/resources/js/Components/Assistants/Soal/SoalInputEssay.jsx
+++ b/resources/js/Components/Assistants/Soal/SoalInputEssay.jsx
@@ -53,7 +53,7 @@ export default function SoalInputEssay({ kategoriSoal, modul, modules = [], onMo
const controller = getSoalController(kategoriSoal);
const supportsFileUpload = useMemo(
- () => ["jurnal", "fitb"].includes(kategoriSoal),
+ () => ["tp", "jurnal", "fitb"].includes(kategoriSoal),
[kategoriSoal]
);
diff --git a/resources/js/Components/Praktikans/Sections/TugasPendahuluan.jsx b/resources/js/Components/Praktikans/Sections/TugasPendahuluan.jsx
index 1891ed5..e3223bb 100644
--- a/resources/js/Components/Praktikans/Sections/TugasPendahuluan.jsx
+++ b/resources/js/Components/Praktikans/Sections/TugasPendahuluan.jsx
@@ -1,6 +1,9 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { Image } from "@imagekit/react";
+
import QuestionCommentInput from "./QuestionCommentInput";
import MarkdownRenderer from "../../MarkdownRenderer";
+import { useImageKitUpload } from "@/hooks/useImageKitUpload";
export default function TugasPendahuluan({
isLoading = false,
@@ -16,26 +19,196 @@ export default function TugasPendahuluan({
showSubmitButton = false,
submitLabel = "Simpan Jawaban",
}) {
+ const [uploadingIndexes, setUploadingIndexes] =
+ useState({});
+
+ const [uploadProgress, setUploadProgress] =
+ useState({});
+
+ const [previews, setPreviews] =
+ useState({});
+
+ const { upload } = useImageKitUpload();
+
useEffect(() => {
- setQuestionsCount(questions.length);
+ setQuestionsCount(
+ Array.isArray(questions)
+ ? questions.length
+ : 0
+ );
}, [questions, setQuestionsCount]);
const handleInputChange = (index, value) => {
const updated = [...answers];
+
updated[index] = value;
+
+ setAnswers(updated);
+ };
+
+ const triggerFileInput = (index) => {
+ const input = document.getElementById(
+ `tp-file-upload-${index}`
+ );
+
+ if (input) {
+ input.click();
+ }
+ };
+
+ const handleFileUpload = async (index, file) => {
+ if (!file) {
+ return;
+ }
+
+ // Same 10MB limit as Journal/FITB
+ if (file.size > 10485760) {
+ alert("File size must be less than 10MB");
+ return;
+ }
+
+ // Images only
+ if (!file.type.startsWith("image/")) {
+ alert("Please upload an image file");
+ return;
+ }
+
+ setUploadingIndexes((previous) => ({
+ ...previous,
+ [index]: true,
+ }));
+
+ setUploadProgress((previous) => ({
+ ...previous,
+ [index]: 0,
+ }));
+
+ try {
+ /*
+ * Local preview while upload is happening.
+ */
+ const previewUrl =
+ URL.createObjectURL(file);
+
+ setPreviews((previous) => ({
+ ...previous,
+ [index]: previewUrl,
+ }));
+
+ /*
+ * Same ImageKit hook used by Journal/FITB.
+ *
+ * Only change is the folder:
+ * daskom/jawaban-tp
+ */
+ const uploadResult = await upload(
+ file,
+ "daskom/jawaban-tp",
+ null,
+ true
+ );
+
+ /*
+ * Use the exact same answer format
+ * as Journal/FITB.
+ */
+ const updated = [...answers];
+
+ updated[index] = {
+ type: "file",
+ url: uploadResult.url,
+ fileId: uploadResult.fileId,
+ filePath: uploadResult.filePath,
+ };
+
+ setAnswers(updated);
+ } catch (error) {
+ console.error(
+ "TP upload error:",
+ error
+ );
+
+ alert(
+ "Failed to upload file. Please try again."
+ );
+
+ setPreviews((previous) => {
+ const next = {
+ ...previous,
+ };
+
+ if (next[index]) {
+ URL.revokeObjectURL(
+ next[index]
+ );
+
+ delete next[index];
+ }
+
+ return next;
+ });
+ } finally {
+ setUploadingIndexes((previous) => {
+ const next = {
+ ...previous,
+ };
+
+ delete next[index];
+
+ return next;
+ });
+
+ setUploadProgress((previous) => {
+ const next = {
+ ...previous,
+ };
+
+ delete next[index];
+
+ return next;
+ });
+ }
+ };
+
+ const handleDeleteFile = (index) => {
+ const updated = [...answers];
+
+ updated[index] = "";
+
setAnswers(updated);
+
+ setPreviews((previous) => {
+ const next = {
+ ...previous,
+ };
+
+ if (next[index]) {
+ URL.revokeObjectURL(
+ next[index]
+ );
+
+ delete next[index];
+ }
+
+ return next;
+ });
};
const handleSubmit = () => {
if (onSubmitTask) {
- onSubmitTask("TugasPendahuluan", answers);
+ onSubmitTask(
+ "TugasPendahuluan",
+ answers
+ );
}
};
if (isLoading) {
return (
Jawaban Tugas Pendahuluan
+
{hasData && (
{jawabanData.length} soal
@@ -58,19 +178,32 @@ export default function ContentLihatTP({ jawabanData, praktikan, modul }) {
{hasData ? (
jawabanData.map((item, index) => (
-
+
{/* Question */}
{index + 1}
+
- Belum ada jawaban yang tersubmit untuk modul ini.
+
+
+ Belum ada jawaban yang
+ tersubmit untuk modul ini.
+
)}
+
{/* Question */}
)}
{index + 1}
+
{/* Answer */}
-
-
+
@@ -111,14 +249,26 @@ export default function ContentLihatTP({ jawabanData, praktikan, modul }) {
stroke="currentColor"
strokeWidth={1.5}
>
-
-
+
- {item.jawaban ? (
-
Belum ada jawaban yang tersubmit untuk modul ini.
+ ++ Belum ada jawaban yang + tersubmit untuk modul ini. +
-
);
}
@@ -43,15 +216,23 @@ export default function TugasPendahuluan({
if (errorMessage) {
return (
Memuat soal tugas pendahuluan...
++ Memuat soal tugas pendahuluan... +
-
);
}
- if (!Array.isArray(questions) || questions.length === 0) {
+ if (
+ !Array.isArray(questions) ||
+ questions.length === 0
+ ) {
return (
{errorMessage}
++ {errorMessage} +
-
);
}
@@ -60,31 +241,277 @@ export default function TugasPendahuluan({
<>
Belum ada soal tugas pendahuluan untuk modul ini.
++ Belum ada soal tugas pendahuluan + untuk modul ini. +
- {questions.map((question, index) => (
-
-
)}
diff --git a/resources/js/Pages/Praktikan/TugasPendahuluanPage.jsx b/resources/js/Pages/Praktikan/TugasPendahuluanPage.jsx
index 3ed2510..6589331 100644
--- a/resources/js/Pages/Praktikan/TugasPendahuluanPage.jsx
+++ b/resources/js/Pages/Praktikan/TugasPendahuluanPage.jsx
@@ -21,8 +21,88 @@ const normaliseQuestions = (items) =>
id: item.id,
text: item.soal ?? item.pertanyaan ?? "",
questionType: "essay",
+ enable_file_upload: Boolean(item.enable_file_upload),
}));
+const isLikelyJsonObjectString = (value) => {
+ if (typeof value !== "string") {
+ return false;
+ }
+
+ const trimmed = value.trim();
+
+ if (trimmed === "") {
+ return false;
+ }
+
+ return (
+ (trimmed.startsWith("{") && trimmed.endsWith("}")) ||
+ (trimmed.startsWith("[") && trimmed.endsWith("]"))
+ );
+};
+
+const hydrateAnswer = (storedAnswer) => {
+ if (storedAnswer === null || storedAnswer === undefined) {
+ return "";
+ }
+
+ if (typeof storedAnswer === "object") {
+ return storedAnswer;
+ }
+
+ if (typeof storedAnswer !== "string") {
+ return String(storedAnswer ?? "");
+ }
+
+ const trimmed = storedAnswer.trim();
+
+ if (trimmed === "") {
+ return "";
+ }
+
+ if (isLikelyJsonObjectString(trimmed)) {
+ try {
+ const parsed = JSON.parse(trimmed);
+
+ if (parsed && typeof parsed === "object") {
+ return parsed;
+ }
+ } catch (error) {
+ console.warn(
+ "[TP] Failed to parse stored answer",
+ error
+ );
+ }
+ }
+
+ return storedAnswer;
+};
+
+const serialiseAnswerForSubmission = (answerValue) => {
+ if (answerValue === null || answerValue === undefined) {
+ return "";
+ }
+
+ if (typeof answerValue === "object") {
+ try {
+ return JSON.stringify(answerValue);
+ } catch (error) {
+ console.warn(
+ "[TP] Failed to stringify answer",
+ error
+ );
+
+ return "";
+ }
+ }
+
+ if (typeof answerValue === "string") {
+ return answerValue;
+ }
+
+ return String(answerValue ?? "");
+};
+
export default function TugasPendahuluanPage() {
const { auth } = usePage().props ?? {};
const praktikan = auth?.praktikan ?? null;
@@ -153,7 +233,10 @@ export default function TugasPendahuluanPage() {
storedAnswers.map((item) => [Number(item?.soal_id), item?.jawaban ?? ""])
);
- const initialAnswers = data.map((question) => answerMap.get(Number(question.id)) ?? "");
+ const initialAnswers = data.map((question) => {
+ const storedAnswer = answerMap.get(Number(question.id));
+ return hydrateAnswer(storedAnswer);
+ });
setAnswers(initialAnswers);
}, [answersQuery.data, questionsQuery.data]);
@@ -186,7 +269,7 @@ export default function TugasPendahuluanPage() {
soal_id: Number(question.id),
praktikan_id: praktikanId,
modul_id: Number(selectedModul),
- jawaban: String(currentAnswers[index] ?? "-").trim() || "-",
+ jawaban: serialiseAnswerForSubmission(currentAnswers[index]) || "-",
}));
submitMutation.mutate(payload);
-
- {index + 1}
-
-
@@ -93,9 +520,18 @@ export default function TugasPendahuluan({
-
+
- ))}
+ );
+ }
+ )}
+
+ {index + 1}
+
+
+
+
+
+
+
+ {!isFileAnswer &&
+ !previews[
+ index
+ ] ? (
+
+ ) : (
+
-
+
+
+
+ ) : (
+
+
+
+
+ {uploadingIndexes[
+ index
+ ] ? (
+ 
+ ) : null}
+
+
+
+
+ )}
+
+ {
+ const file =
+ event
+ .target
+ .files?.[0];
+
+ if (
+ file
+ ) {
+ handleFileUpload(
+ index,
+ file
+ );
+ }
+
+ event.target.value =
+ "";
+ }}
+ disabled={
+ uploadingIndexes[
+ index
+ ]
+ }
+ />
+
+
+
+
+ ) : (
+ <>
+ {isFileAnswer &&
+ currentAnswer?.url ? (
+ + Uploading... +
+
+
+
+
+ )}
+