145 lines
7.1 KiB
JavaScript
145 lines
7.1 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import { D as DataSortModal } from "./data-sort-modal-DUjsJmGW.js";
|
|
import { D as DeleteModal } from "./delete-modal-BrX_mlY2.js";
|
|
import { B as Button } from "./button-CdJZJLGw.js";
|
|
import { C as Card } from "./card-B-gBwpxd.js";
|
|
import { D as Dialog, a as DialogTrigger, b as DialogContent, c as DialogHeader, d as DialogTitle, e as DialogFooter, f as DialogClose } from "./dialog-DGP_3dPQ.js";
|
|
import { S as ScrollArea } from "./scroll-area-CDdrLubh.js";
|
|
import { T as TabsList, a as TabsTrigger } from "./tabs-DmCK9qzK.js";
|
|
import { c as cn } from "./utils-DLCPGU0v.js";
|
|
import { usePage, useForm, router } from "@inertiajs/react";
|
|
import { Trash2, Pencil } from "lucide-react";
|
|
import { useState, useEffect } from "react";
|
|
import { Renderer } from "richtor";
|
|
/* empty css */
|
|
import QuestionForm from "./question-form-e29UMxa-.js";
|
|
import "nprogress";
|
|
import "@radix-ui/react-slot";
|
|
import "class-variance-authority";
|
|
import "@radix-ui/react-dialog";
|
|
import "@radix-ui/react-scroll-area";
|
|
import "@radix-ui/react-tabs";
|
|
import "clsx";
|
|
import "tailwind-merge";
|
|
import "./input-error-D1JIzedA.js";
|
|
import "./loading-button-CCIxhJrY.js";
|
|
import "./tabs-DgXFE6Gu.js";
|
|
import "./tag-input-D5O17wz6.js";
|
|
import "@yaireo/tagify";
|
|
import "./input-BsvJqbcd.js";
|
|
import "./label-0rIIfpX0.js";
|
|
import "@radix-ui/react-label";
|
|
import "./select-BYx0MCUK.js";
|
|
import "@radix-ui/react-select";
|
|
const getQuestionTypes = (translate) => [
|
|
{ value: "single", label: translate.dashboard.single_choice, flag: false },
|
|
{ value: "multiple", label: translate.dashboard.multiple_choice, flag: false },
|
|
{ value: "boolean", label: translate.dashboard.true_false, flag: false }
|
|
];
|
|
const QuestionQuestions = ({ title, handler, quiz, question }) => {
|
|
const [open, setOpen] = useState(false);
|
|
const [questionType, setQuestionType] = useState(question ? "add-question" : "questions");
|
|
const { props } = usePage();
|
|
const { translate } = props;
|
|
const { input, button, dashboard, frontend } = translate;
|
|
getQuestionTypes(translate);
|
|
const maxSort = quiz.quiz_questions.length > 0 ? Math.max(...quiz.quiz_questions.map((question2) => question2.sort)) : 0;
|
|
const initialOptions = (question == null ? void 0 : question.options) ? typeof question.options === "string" ? JSON.parse(question.options) : question.options : [];
|
|
const initialAnswer = (question == null ? void 0 : question.answer) ? typeof question.answer === "string" ? JSON.parse(question.answer) : question.answer : [];
|
|
const { data, setData, post, put, reset, processing, errors } = useForm({
|
|
title: (question == null ? void 0 : question.title) || "",
|
|
type: (question == null ? void 0 : question.type) || "single",
|
|
options: initialOptions,
|
|
answer: initialAnswer,
|
|
sort: (question == null ? void 0 : question.sort) || maxSort + 1,
|
|
section_quiz_id: quiz.id
|
|
});
|
|
useEffect(() => {
|
|
if (!open) {
|
|
reset();
|
|
setQuestionType(question ? "add-question" : "questions");
|
|
}
|
|
}, [open]);
|
|
return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
|
|
/* @__PURE__ */ jsx(DialogTrigger, { children: handler }),
|
|
/* @__PURE__ */ jsx(DialogContent, { className: "p-0", children: /* @__PURE__ */ jsxs(ScrollArea, { className: "max-h-[90vh] p-6", children: [
|
|
/* @__PURE__ */ jsx(DialogHeader, { className: "mb-6", children: /* @__PURE__ */ jsx(DialogTitle, { children: title }) }),
|
|
/* @__PURE__ */ jsxs("div", { className: "space-y-7", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
/* @__PURE__ */ jsx(
|
|
QuestionForm,
|
|
{
|
|
quiz,
|
|
title: button.add_question,
|
|
question,
|
|
handler: /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-8 text-xs", children: button.add_question })
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(
|
|
DataSortModal,
|
|
{
|
|
title: button.sort,
|
|
data: quiz.quiz_questions,
|
|
handler: /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-8 text-xs", children: button.sort }),
|
|
onOrderChange: (newOrder) => {
|
|
router.post(
|
|
route("quiz.question.sort"),
|
|
{
|
|
sortedData: newOrder
|
|
},
|
|
{ preserveScroll: true }
|
|
);
|
|
},
|
|
renderContent: (item) => /* @__PURE__ */ jsx(Card, { className: "w-full px-4 py-3", children: /* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
dangerouslySetInnerHTML: {
|
|
__html: item.title
|
|
}
|
|
}
|
|
) })
|
|
}
|
|
)
|
|
] }),
|
|
/* @__PURE__ */ jsx("div", { className: "space-y-2", children: quiz.quiz_questions.length > 0 ? quiz.quiz_questions.map((question2) => /* @__PURE__ */ jsxs(
|
|
"div",
|
|
{
|
|
className: "group border-border flex w-full items-center justify-between rounded-md border px-4 py-3",
|
|
children: [
|
|
/* @__PURE__ */ jsx(Renderer, { value: question2.title }),
|
|
/* @__PURE__ */ jsxs("div", { className: "invisible flex items-center gap-2 group-hover:visible", children: [
|
|
/* @__PURE__ */ jsx(
|
|
DeleteModal,
|
|
{
|
|
routePath: route("quiz.question.delete", {
|
|
id: question2.id
|
|
}),
|
|
actionComponent: /* @__PURE__ */ jsx(Button, { size: "icon", variant: "secondary", className: "text-destructive h-7 w-7", children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" }) })
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(
|
|
QuestionForm,
|
|
{
|
|
quiz,
|
|
title: dashboard.edit_question,
|
|
question: question2,
|
|
handler: /* @__PURE__ */ jsx(Button, { size: "icon", variant: "secondary", className: "h-7 w-7", children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" }) })
|
|
}
|
|
)
|
|
] })
|
|
]
|
|
},
|
|
question2.id
|
|
)) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: frontend.no_results }) }) })
|
|
] }),
|
|
/* @__PURE__ */ jsx(DialogFooter, { className: "w-full justify-between space-x-2 pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-4", children: [
|
|
/* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", children: button.close }) }),
|
|
/* @__PURE__ */ jsx(TabsList, { className: "p-0", children: /* @__PURE__ */ jsx(TabsTrigger, { asChild: true, value: "questions", className: cn(questionType === "questions" ? "hidden" : "block"), children: /* @__PURE__ */ jsx(Button, { children: button.back }) }) })
|
|
] }) })
|
|
] }) })
|
|
] });
|
|
};
|
|
export {
|
|
QuestionQuestions as default
|
|
};
|