227 lines
9.0 KiB
JavaScript
227 lines
9.0 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import { I as InputError } from "./input-error-D1JIzedA.js";
|
|
import { L as LoadingButton } from "./loading-button-CCIxhJrY.js";
|
|
import { B as Button } from "./button-CdJZJLGw.js";
|
|
import { D as Dialog, a as DialogTrigger, b as DialogContent, c as DialogHeader, d as DialogTitle } from "./dialog-DGP_3dPQ.js";
|
|
import { I as Input } from "./input-BsvJqbcd.js";
|
|
import { L as Label } from "./label-0rIIfpX0.js";
|
|
import { S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, d as SelectItem } from "./select-BYx0MCUK.js";
|
|
import { o as onHandleChange } from "./inertia-BtwbgBI3.js";
|
|
import { useForm } from "@inertiajs/react";
|
|
import { useState, useEffect } from "react";
|
|
import { Editor } from "richtor";
|
|
/* empty css */
|
|
import FillBlankForm from "./fill-blank-form-BcDCvDw3.js";
|
|
import ListeningForm from "./listening-form-BiqPdcp5.js";
|
|
import MatchingForm from "./matching-form-hmM-nMXg.js";
|
|
import MultipleChoiceForm from "./multiple-choice-form-oVIXwxmn.js";
|
|
import OrderingForm from "./ordering-form-TxongDlm.js";
|
|
import ShortAnswerForm from "./short-answer-form-D3SsHnIm.js";
|
|
import "./utils-DLCPGU0v.js";
|
|
import "clsx";
|
|
import "tailwind-merge";
|
|
import "lucide-react";
|
|
import "@radix-ui/react-slot";
|
|
import "class-variance-authority";
|
|
import "@radix-ui/react-dialog";
|
|
import "@radix-ui/react-label";
|
|
import "@radix-ui/react-select";
|
|
import "./chunked-uploader-input-CZfv7yqS.js";
|
|
import "axios";
|
|
import "sonner";
|
|
import "./radio-group-Wf8uu9ZY.js";
|
|
import "@radix-ui/react-radio-group";
|
|
import "./textarea-Z0d4V-ti.js";
|
|
import "./checkbox--3Zj5G-w.js";
|
|
import "@radix-ui/react-checkbox";
|
|
const questionTypes = [
|
|
{ value: "multiple_choice", label: "Multiple Choice" },
|
|
{ value: "multiple_select", label: "Multiple Select" },
|
|
{ value: "matching", label: "Matching" },
|
|
{ value: "fill_blank", label: "Fill in the Blank" },
|
|
{ value: "ordering", label: "Ordering" },
|
|
{ value: "short_answer", label: "Short Answer" },
|
|
{ value: "listening", label: "Listening" }
|
|
];
|
|
const QuestionDialog = ({ exam, question, handler }) => {
|
|
const [open, setOpen] = useState(false);
|
|
const [isSubmit, setIsSubmit] = useState(false);
|
|
const [isFileSelected, setIsFileSelected] = useState(false);
|
|
const [isFileUploaded, setIsFileUploaded] = useState(false);
|
|
const initialFormData = {
|
|
exam_id: exam.id,
|
|
title: (question == null ? void 0 : question.title) || "",
|
|
description: (question == null ? void 0 : question.description) || "",
|
|
marks: (question == null ? void 0 : question.marks) || 1,
|
|
options: (question == null ? void 0 : question.options) || {},
|
|
question_options: ((question == null ? void 0 : question.question_options) || []).map((opt) => ({
|
|
id: opt.id ? Number(opt.id) : void 0,
|
|
option_text: opt.option_text,
|
|
is_correct: opt.is_correct,
|
|
sort: opt.sort
|
|
})),
|
|
question_type: (question == null ? void 0 : question.question_type) || "multiple_choice",
|
|
exam_question_id: (question == null ? void 0 : question.id) ? Number(question.id) : null
|
|
};
|
|
const { data, setData, post, put, errors, processing, reset, clearErrors } = useForm(initialFormData);
|
|
const handleSubmit = (e) => {
|
|
var _a;
|
|
e.preventDefault();
|
|
if (data.question_type === "listening" && ((_a = data.options) == null ? void 0 : _a.audio_source) === "upload") {
|
|
if (!question || isFileSelected) {
|
|
if (!isFileUploaded) {
|
|
setIsSubmit(true);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
submitForm();
|
|
};
|
|
const submitForm = () => {
|
|
clearErrors();
|
|
if (question) {
|
|
put(route("exam-questions.update", question.id), {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
setOpen(false);
|
|
reset();
|
|
setIsSubmit(false);
|
|
setIsFileUploaded(false);
|
|
}
|
|
});
|
|
} else {
|
|
post(route("exam-questions.store"), {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
setOpen(false);
|
|
reset();
|
|
setIsSubmit(false);
|
|
setIsFileUploaded(false);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
if (isFileUploaded && isSubmit) {
|
|
submitForm();
|
|
}
|
|
}, [isFileUploaded, isSubmit]);
|
|
useEffect(() => {
|
|
if (!open) {
|
|
setIsSubmit(false);
|
|
setIsFileSelected(false);
|
|
setIsFileUploaded(false);
|
|
}
|
|
}, [open]);
|
|
const renderQuestionTypeForm = () => {
|
|
const props = {
|
|
data,
|
|
setData,
|
|
errors
|
|
};
|
|
switch (data.question_type) {
|
|
case "multiple_choice":
|
|
case "multiple_select":
|
|
return /* @__PURE__ */ jsx(MultipleChoiceForm, { ...props, isMultipleSelect: data.question_type === "multiple_select" });
|
|
case "matching":
|
|
return /* @__PURE__ */ jsx(MatchingForm, { ...props });
|
|
case "fill_blank":
|
|
return /* @__PURE__ */ jsx(FillBlankForm, { ...props });
|
|
case "ordering":
|
|
return /* @__PURE__ */ jsx(OrderingForm, { ...props });
|
|
case "short_answer":
|
|
return /* @__PURE__ */ jsx(ShortAnswerForm, { ...props });
|
|
case "listening":
|
|
return /* @__PURE__ */ jsx(
|
|
ListeningForm,
|
|
{
|
|
...props,
|
|
isSubmit,
|
|
setIsSubmit,
|
|
setIsFileSelected,
|
|
setIsFileUploaded
|
|
}
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
|
|
/* @__PURE__ */ jsx(DialogTrigger, { children: handler }),
|
|
/* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] max-w-4xl overflow-y-auto", children: [
|
|
/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: question ? "Edit Question" : "Create Question" }) }),
|
|
/* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx(Label, { children: "Question Type *" }),
|
|
/* @__PURE__ */ jsxs(
|
|
Select,
|
|
{
|
|
value: data.question_type,
|
|
onValueChange: (value) => setData("question_type", value),
|
|
disabled: question ? true : false,
|
|
children: [
|
|
/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select question type" }) }),
|
|
/* @__PURE__ */ jsx(SelectContent, { children: questionTypes.map((type) => /* @__PURE__ */ jsx(SelectItem, { value: type.value, children: type.label }, type.value)) })
|
|
]
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(InputError, { message: errors.question_type })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx(Label, { children: "Marks *" }),
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
type: "number",
|
|
step: "0.5",
|
|
min: "0.5",
|
|
name: "marks",
|
|
value: data.marks.toString(),
|
|
onChange: (e) => setData("marks", parseFloat(e.target.value) || 0),
|
|
placeholder: "Enter marks"
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(InputError, { message: errors.marks })
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx(Label, { children: "Question Title *" }),
|
|
/* @__PURE__ */ jsx(Input, { name: "title", value: data.title, onChange: (e) => onHandleChange(e, setData), placeholder: "Enter question title" }),
|
|
/* @__PURE__ */ jsx(InputError, { message: errors.title })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx(Label, { children: "Description (Optional)" }),
|
|
/* @__PURE__ */ jsx(
|
|
Editor,
|
|
{
|
|
ssr: true,
|
|
output: "html",
|
|
placeholder: {
|
|
paragraph: "Add additional context or instructions...",
|
|
imageCaption: "Add additional context or instructions..."
|
|
},
|
|
contentMinHeight: 150,
|
|
contentMaxHeight: 300,
|
|
initialContent: data.description,
|
|
onContentChange: (value) => setData((prev) => ({
|
|
...prev,
|
|
description: value
|
|
}))
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(InputError, { message: errors.description })
|
|
] }),
|
|
renderQuestionTypeForm(),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3 border-t pt-4", children: [
|
|
/* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setOpen(false), disabled: processing || isSubmit, children: "Cancel" }),
|
|
/* @__PURE__ */ jsx(LoadingButton, { loading: processing || isSubmit, disabled: processing || isSubmit, children: question ? "Update Question" : "Create Question" })
|
|
] })
|
|
] })
|
|
] })
|
|
] });
|
|
};
|
|
export {
|
|
QuestionDialog as default
|
|
};
|