@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.3

package/dist/components/questions/types/true-false/TrueFalseCreator.js

@@ -1,244 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ImagePreview } from '../../../../components/ui/image-preview';
-import { useState, useRef, useEffect } from 'react';
-import { Button } from '../../../../components/ui/button';
-import { Label } from '../../../../components/ui/label';
-import { Textarea } from '../../../../components/ui/textarea';
-import { PointsInput } from '../../../../components/ui/points-input';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { Checkbox } from '../../../../components/ui/checkbox';
-import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { Pencil, Eye, ImageIcon, MessageSquare, HelpCircle, BookOpen, Check, X } from 'lucide-react';
-import { FileUpload } from '../../../../components/ui/file-upload';
-import { TrueFalseClient } from './TrueFalseClient';
-import { cn } from '../../../../shared/lib/utils';
-import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
-import { ArticlesGroupCard } from '../../groups/ArticlesGroupCard';
-import { DocumentGroupCard } from '../../groups/DocumentGroupCard';
-import { useBasicQuestionGroup } from '../../_shared/hooks/useBasicQuestionGroup';
-function TrueFalseCreatorContent({ initialData, onSave, onCancel, onChange, externalErrors, onUnsavedChangesChange, validationRef, groups, questionIndexInPart = 0, partId = '', groupType, groupConfig, articleCount = 0, headerExtra, }) {
-    // Initialize state from initialData
-    const apiData = initialData;
-    const [question, setQuestion] = useState(apiData?.question || '');
-    const [answer, setAnswer] = useState(typeof apiData?.answer === 'boolean' ? apiData.answer : undefined);
-    const [imageUrl, setImageUrl] = useState(apiData?.imageUrl || '');
-    const [isExample, setIsExample] = useState(apiData?.isExample || false);
-    const [explanation, setExplanation] = useState(apiData?.explanation || '');
-    const [points, setPoints] = useState(apiData?.points ?? 1);
-    // UI State
-    const [isClientMode, setIsClientMode] = useState(false);
-    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
-    // ============ GROUP ============
-    const { isGrouped, currentGroupNumber, isFirstInGroup, groupTitle, groupSubtitle, groupContent, imageUrl: groupImageUrl, articles, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl: setGroupImageUrl, setArticles, } = useBasicQuestionGroup({
-        partId,
-        groups,
-        questionIndexInPart,
-        initialData: {
-            title: apiData?.groupTitle || apiData?.questionGroup?.payload?.title || apiData?.title || '',
-            subtitle: apiData?.groupSubtitle || apiData?.questionGroup?.payload?.subtitle || '',
-            content: apiData?.groupContent || apiData?.questionGroup?.payload?.content || '',
-            imageUrl: apiData?.groupImageUrl || apiData?.questionGroup?.payload?.imageUrl || '',
-            articles: apiData?.articles || apiData?.questionGroup?.payload?.articles || undefined,
-        },
-        articleCount,
-    });
-    const effectiveGroupType = (groupType || 'BASIC').toUpperCase();
-    // Validation errors
-    const [validationErrors, setValidationErrors] = useState({});
-    // Refs
-    const isInitializingRef = useRef(false);
-    const previousInitialDataRef = useRef(initialData);
-    const onChangeRef = useRef(onChange);
-    const previousPayloadRef = useRef('');
-    const savedStateRef = useRef('');
-    // Presigned URL for image
-    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(imageUrl);
-    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
-    // Update onChange ref
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    // Debounced onChange
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    // Get current state string
-    const getCurrentStateString = () => {
-        return JSON.stringify({ question, answer, imageUrl, isExample, explanation, points, groupTitle, groupSubtitle, groupContent, groupImageUrl, currentGroupNumber, articles });
-    };
-    // Expose validation function via ref
-    useEffect(() => {
-        if (validationRef) {
-            validationRef.current = {
-                triggerValidation: async () => {
-                    const errors = {};
-                    let isValid = true;
-                    if (!question || question.trim() === '') {
-                        errors.question = 'Vui lòng nhập câu hỏi';
-                        isValid = false;
-                    }
-                    if (answer === undefined) {
-                        errors.answer = 'Vui lòng chọn đáp án Đúng hoặc Sai';
-                        isValid = false;
-                    }
-                    setValidationErrors(errors);
-                    return isValid;
-                },
-                getFormData: () => ({
-                    question,
-                    answer,
-                    imageUrl,
-                    isExample,
-                    explanation,
-                    points,
-                    groupTitle,
-                    groupSubtitle,
-                    groupContent,
-                    groupImageUrl,
-                    groupNumber: currentGroupNumber,
-                    ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
-                }),
-            };
-        }
-    }, [validationRef, question, answer, imageUrl, isExample, explanation, points, groupTitle, groupSubtitle, groupContent, groupImageUrl, currentGroupNumber, effectiveGroupType, articles]);
-    // Sync from initialData when it changes
-    useEffect(() => {
-        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
-        if (!initialDataChanged)
-            return;
-        previousInitialDataRef.current = initialData;
-        isInitializingRef.current = true;
-        const data = initialData;
-        if (data) {
-            setQuestion(data.question || '');
-            setAnswer(typeof data.answer === 'boolean' ? data.answer : undefined);
-            setImageUrl(data.imageUrl || '');
-            setIsExample(data.isExample || false);
-            setExplanation(data.explanation || '');
-            setPoints(data.points ?? 1);
-        }
-        setTimeout(() => {
-            isInitializingRef.current = false;
-        }, 150);
-    }, [initialData]);
-    // Call onChange when data changes
-    useEffect(() => {
-        if (isInitializingRef.current)
-            return;
-        const payload = {
-            question,
-            answer,
-            imageUrl,
-            isExample,
-            explanation,
-            points,
-            groupTitle,
-            groupSubtitle,
-            groupContent,
-            groupImageUrl,
-            groupNumber: currentGroupNumber,
-            ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
-        };
-        const payloadString = JSON.stringify(payload);
-        if (previousPayloadRef.current !== payloadString) {
-            previousPayloadRef.current = payloadString;
-            debouncedOnChange(payload);
-        }
-    }, [question, answer, imageUrl, isExample, explanation, points, groupTitle, groupSubtitle, groupContent, groupImageUrl, currentGroupNumber, effectiveGroupType, articles, debouncedOnChange]);
-    // Track unsaved changes
-    useEffect(() => {
-        if (isInitializingRef.current)
-            return;
-        if (!savedStateRef.current) {
-            savedStateRef.current = getCurrentStateString();
-            return;
-        }
-        const currentState = getCurrentStateString();
-        const hasChanges = currentState !== savedStateRef.current;
-        onUnsavedChangesChange?.(hasChanges);
-    }, [question, answer, imageUrl, isExample, explanation, points, groupTitle, groupSubtitle, groupContent, groupImageUrl, currentGroupNumber, articles]);
-    // Validate
-    const validate = () => {
-        const errors = {};
-        let isValid = true;
-        if (!question || question.trim() === '') {
-            errors.question = 'Vui lòng nhập câu hỏi';
-            isValid = false;
-        }
-        if (answer === undefined) {
-            errors.answer = 'Vui lòng chọn đáp án Đúng hoặc Sai';
-            isValid = false;
-        }
-        setValidationErrors(errors);
-        return isValid;
-    };
-    // Handle save
-    const handleSave = () => {
-        if (!validate())
-            return;
-        const payload = {
-            question,
-            answer,
-            imageUrl,
-            isExample,
-            explanation,
-            points,
-            groupTitle,
-            groupSubtitle,
-            groupContent,
-            groupImageUrl,
-            groupNumber: currentGroupNumber,
-            ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
-        };
-        savedStateRef.current = getCurrentStateString();
-        onUnsavedChangesChange?.(false);
-        onSave?.(payload);
-    };
-    // Client mode preview
-    if (isClientMode) {
-        const questionData = {
-            question: question || '',
-            answer,
-            imageUrl: displayPreviewUrl || imageUrl,
-            isExample,
-            explanation,
-            isGroup: isGrouped,
-            groupTitle,
-            groupSubtitle,
-            groupContent,
-            groupImageUrl,
-            groupNumber: currentGroupNumber,
-            ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
-        };
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "\u0110\u00FAng/Sai (Xem tr\u01B0\u1EDBc)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(TrueFalseClient, { questionData: questionData, isReviewMode: true, userAnswer: answer })] }));
-    }
-    // Creator UI
-    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && effectiveGroupType === 'ARTICLES' && (_jsx(ArticlesGroupCard, { groupNumber: currentGroupNumber, articleCount: articleCount, articles: articles, onArticlesChange: setArticles, title: groupTitle, onTitleChange: setGroupTitle, isReadOnly: !isFirstInGroup, uploadIdPrefix: `true-false-${partId ?? 'articles'}` })), isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `true-false-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `true-false-${partId ?? 'document'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm", children: _jsx(HelpCircle, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110\u00FAng / Sai" }), _jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n \u0110\u00FAng ho\u1EB7c Sai cho c\u00E2u h\u1ECFi" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !question, className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsx(PointsInput, { value: points, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "isExample", checked: isExample, onCheckedChange: (checked) => setIsExample(!!checked) }), _jsx(Label, { htmlFor: "isExample", className: "flex items-center gap-1.5 cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: imageUrl || '', onChange: (url) => setImageUrl(url), onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Textarea, { id: "question", value: question, onChange: (e) => {
-                                            setQuestion(e.target.value);
-                                            if (validationErrors.question) {
-                                                setValidationErrors((prev) => ({ ...prev, question: undefined }));
-                                            }
-                                        }, placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi... (vd: Paris is the capital of France.)", className: cn('min-h-[100px] border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200', validationErrors.question && 'border-red-400 focus:border-red-500 focus:ring-red-200'), rows: 3 }), validationErrors.question && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.question }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(HelpCircle, { className: "h-4 w-4 text-emerald-500" }), "\u0110\u00E1p \u00E1n ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("button", { type: "button", onClick: () => {
-                                                    setAnswer(true);
-                                                    if (validationErrors.answer) {
-                                                        setValidationErrors((prev) => ({ ...prev, answer: undefined }));
-                                                    }
-                                                }, className: cn('group flex items-center justify-center gap-2 rounded-lg border-2 px-4 py-2.5 text-center transition-all', answer === true
-                                                    ? 'border-emerald-500 bg-emerald-50 shadow-sm ring-1 ring-emerald-100'
-                                                    : 'border-gray-200 bg-white hover:border-emerald-300 hover:bg-emerald-50/50'), children: [_jsx("div", { className: cn('flex h-7 w-7 items-center justify-center rounded-full transition-all', answer === true
-                                                            ? 'bg-emerald-500 text-white'
-                                                            : 'bg-gray-100 text-gray-500 group-hover:bg-emerald-100 group-hover:text-emerald-600'), children: _jsx(Check, { className: "h-3.5 w-3.5" }) }), _jsx("span", { className: cn('text-sm font-semibold', answer === true ? 'text-emerald-700' : 'text-gray-600'), children: "\u0110\u00FAng (True)" })] }), _jsxs("button", { type: "button", onClick: () => {
-                                                    setAnswer(false);
-                                                    if (validationErrors.answer) {
-                                                        setValidationErrors((prev) => ({ ...prev, answer: undefined }));
-                                                    }
-                                                }, className: cn('group flex items-center justify-center gap-2 rounded-lg border-2 px-4 py-2.5 text-center transition-all', answer === false
-                                                    ? 'border-red-500 bg-red-50 shadow-sm ring-1 ring-red-100'
-                                                    : 'border-gray-200 bg-white hover:border-red-300 hover:bg-red-50/50'), children: [_jsx("div", { className: cn('flex h-7 w-7 items-center justify-center rounded-full transition-all', answer === false
-                                                            ? 'bg-red-500 text-white'
-                                                            : 'bg-gray-100 text-gray-500 group-hover:bg-red-100 group-hover:text-red-600'), children: _jsx(X, { className: "h-3.5 w-3.5" }) }), _jsx("span", { className: cn('text-sm font-semibold', answer === false ? 'text-red-700' : 'text-gray-600'), children: "Sai (False)" })] })] }), validationErrors.answer && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.answer }))] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
-}
-export function TrueFalseCreator(props) {
-    return _jsx(TrueFalseCreatorContent, { ...props });
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ImagePreview as t}from"../../../../components/ui/image-preview";import{useState as a,useRef as i,useEffect as n}from"react";import{Button as s}from"../../../../components/ui/button";import{Label as o}from"../../../../components/ui/label";import{Textarea as l}from"../../../../components/ui/textarea";import{PointsInput as c}from"../../../../components/ui/points-input";import{Card as d,CardContent as m,CardHeader as u,CardTitle as p}from"../../../../components/ui/card";import{Checkbox as g}from"../../../../components/ui/checkbox";import{usePresignedFileUrl as h,useDebouncedCallback as x}from"../../../../shared/lib/hooks";import{Pencil as b,Eye as f,ImageIcon as N,MessageSquare as v,HelpCircle as y,BookOpen as w,Check as C,X as S}from"lucide-react";import{FileUpload as U}from"../../../../components/ui/file-upload";import{TrueFalseClient as q}from"./TrueFalseClient";import{cn as I}from"../../../../shared/lib/utils";import{BasicQuestionGroupCard as T}from"../../groups/BasicQuestionGroupCard";import{ArticlesGroupCard as G}from"../../groups/ArticlesGroupCard";import{DocumentGroupCard as E}from"../../groups/DocumentGroupCard";import{useBasicQuestionGroup as j}from"../../_shared/hooks/useBasicQuestionGroup";function k({initialData:k,onSave:A,onCancel:R,onChange:F,externalErrors:O,onUnsavedChangesChange:P,validationRef:D,groups:L,questionIndexInPart:z=0,partId:B="",groupType:J,groupConfig:V,articleCount:M=0,headerExtra:Q}){const $=k,[H,X]=a($?.question||""),[K,_]=a("boolean"==typeof $?.answer?$.answer:void 0),[W,Y]=a($?.imageUrl||""),[Z,ee]=a($?.isExample||!1),[re,te]=a($?.explanation||""),[ae,ie]=a($?.points??1),[ne,se]=a(!1),[oe,le]=a(""),{isGrouped:ce,currentGroupNumber:de,isFirstInGroup:me,groupTitle:ue,groupSubtitle:pe,groupContent:ge,imageUrl:he,articles:xe,setGroupTitle:be,setGroupSubtitle:fe,setGroupContent:Ne,setImageUrl:ve,setArticles:ye}=j({partId:B,groups:L,questionIndexInPart:z,initialData:{title:$?.groupTitle||$?.questionGroup?.payload?.title||$?.title||"",subtitle:$?.groupSubtitle||$?.questionGroup?.payload?.subtitle||"",content:$?.groupContent||$?.questionGroup?.payload?.content||"",imageUrl:$?.groupImageUrl||$?.questionGroup?.payload?.imageUrl||"",articles:$?.articles||$?.questionGroup?.payload?.articles||void 0},articleCount:M}),we=(J||"BASIC").toUpperCase(),[Ce,Se]=a({}),Ue=i(!1),qe=i(k),Ie=i(F),Te=i(""),Ge=i(""),{previewUrl:Ee}=h(W),je=oe||Ee||"";n(()=>{Ie.current=F},[F]);const ke=x(e=>{Ie.current?.(e)},300),Ae=()=>JSON.stringify({question:H,answer:K,imageUrl:W,isExample:Z,explanation:re,points:ae,groupTitle:ue,groupSubtitle:pe,groupContent:ge,groupImageUrl:he,currentGroupNumber:de,articles:xe});n(()=>{D&&(D.current={triggerValidation:async()=>{const e={};let r=!0;return H&&""!==H.trim()||(e.question="Vui lòng nhập câu hỏi",r=!1),void 0===K&&(e.answer="Vui lòng chọn đáp án Đúng hoặc Sai",r=!1),Se(e),r},getFormData:()=>({question:H,answer:K,imageUrl:W,isExample:Z,explanation:re,points:ae,groupTitle:ue,groupSubtitle:pe,groupContent:ge,groupImageUrl:he,groupNumber:de,..."ARTICLES"===we?{articles:xe}:{}})})},[D,H,K,W,Z,re,ae,ue,pe,ge,he,de,we,xe]),n(()=>{if(!(JSON.stringify(qe.current)!==JSON.stringify(k)))return;qe.current=k,Ue.current=!0;const e=k;e&&(X(e.question||""),_("boolean"==typeof e.answer?e.answer:void 0),Y(e.imageUrl||""),ee(e.isExample||!1),te(e.explanation||""),ie(e.points??1)),setTimeout(()=>{Ue.current=!1},150)},[k]),n(()=>{if(Ue.current)return;const e={question:H,answer:K,imageUrl:W,isExample:Z,explanation:re,points:ae,groupTitle:ue,groupSubtitle:pe,groupContent:ge,groupImageUrl:he,groupNumber:de,..."ARTICLES"===we?{articles:xe}:{}},r=JSON.stringify(e);Te.current!==r&&(Te.current=r,ke(e))},[H,K,W,Z,re,ae,ue,pe,ge,he,de,we,xe,ke]),n(()=>{if(Ue.current)return;if(!Ge.current)return void(Ge.current=Ae());const e=Ae()!==Ge.current;P?.(e)},[H,K,W,Z,re,ae,ue,pe,ge,he,de,xe]);if(ne){const t={question:H||"",answer:K,imageUrl:je||W,isExample:Z,explanation:re,isGroup:ce,groupTitle:ue,groupSubtitle:pe,groupContent:ge,groupImageUrl:he,groupNumber:de,..."ARTICLES"===we?{articles:xe}:{}};return r("div",{className:"space-y-4",children:[e(d,{children:e(u,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(p,{children:"Đúng/Sai (Xem trước)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),r(s,{variant:"outline",size:"sm",onClick:()=>se(!1),children:[e(b,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(q,{questionData:t,isReviewMode:!0,userAnswer:K})]})}return r("div",{className:"space-y-4",children:[ce&&"ARTICLES"===we&&e(G,{groupNumber:de,articleCount:M,articles:xe,onArticlesChange:ye,title:ue,onTitleChange:be,isReadOnly:!me,uploadIdPrefix:`true-false-${B??"articles"}`}),ce&&"BASIC"===we&&e(T,{groupNumber:de,title:ue,subtitle:pe,content:ge,imageUrl:he,onTitleChange:be,onSubtitleChange:fe,onContentChange:Ne,onImageChange:ve,groupConfig:J?V:void 0,isReadOnly:!me,uploadIdPrefix:`true-false-${B??"group"}`}),ce&&"DOCUMENT"===we&&e(E,{groupNumber:de,title:ue,subtitle:pe,content:ge,imageUrl:he,onTitleChange:be,onSubtitleChange:fe,onContentChange:Ne,onImageChange:ve,groupConfig:J?V:void 0,isReadOnly:!me,uploadIdPrefix:`true-false-${B??"document"}`}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e(u,{className:"px-4 py-3",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm",children:e(y,{className:"h-4 w-4 text-white"})}),r("div",{children:[e(p,{className:"text-base font-bold text-gray-900",children:"Đúng / Sai"}),e("p",{className:"text-xs text-gray-500",children:"Chọn đáp án Đúng hoặc Sai cho câu hỏi"})]})]}),r("div",{className:"flex items-center gap-2",children:[Q,r(s,{variant:"outline",size:"sm",onClick:()=>se(!0),disabled:!H,className:"gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700",children:[e(f,{className:"h-4 w-4"}),"Xem trước"]})]})]})}),r(m,{className:"space-y-4 px-4 pb-4",children:[r("div",{className:"flex items-center gap-6",children:[e(c,{value:ae,onChange:e=>ie(parseFloat(e.target.value)||1)}),r("div",{className:"flex items-center gap-2",children:[e(g,{id:"isExample",checked:Z,onCheckedChange:e=>ee(!!e)}),e(o,{htmlFor:"isExample",className:"flex items-center gap-1.5 cursor-pointer text-sm font-medium text-gray-700",children:"Đánh dấu là câu hỏi Example"})]})]}),r("div",{className:"space-y-2",children:[r(o,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(N,{className:"h-4 w-4 text-teal-500"}),"Hình ảnh ",e("span",{className:"text-sm font-normal text-gray-500",children:"(tùy chọn)"})]}),e(U,{id:"question-image",label:"",accept:"image/*",value:W||"",onChange:e=>Y(e),onPresignedUrlChange:le,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),je&&e(t,{src:je,alt:"Preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),r("div",{className:"space-y-2",children:[r(o,{htmlFor:"question",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(v,{className:"h-4 w-4 text-teal-500"}),"Câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(l,{id:"question",value:H,onChange:e=>{X(e.target.value),Ce.question&&Se(e=>({...e,question:void 0}))},placeholder:"Nhập câu hỏi... (vd: Paris is the capital of France.)",className:I("min-h-[100px] border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200",Ce.question&&"border-red-400 focus:border-red-500 focus:ring-red-200"),rows:3}),Ce.question&&e("p",{className:"text-sm text-red-600",children:Ce.question})]}),r("div",{className:"space-y-3",children:[r(o,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(y,{className:"h-4 w-4 text-emerald-500"}),"Đáp án ",e("span",{className:"text-red-500",children:"*"})]}),r("div",{className:"grid grid-cols-2 gap-3",children:[r("button",{type:"button",onClick:()=>{_(!0),Ce.answer&&Se(e=>({...e,answer:void 0}))},className:I("group flex items-center justify-center gap-2 rounded-lg border-2 px-4 py-2.5 text-center transition-all",!0===K?"border-emerald-500 bg-emerald-50 shadow-sm ring-1 ring-emerald-100":"border-gray-200 bg-white hover:border-emerald-300 hover:bg-emerald-50/50"),children:[e("div",{className:I("flex h-7 w-7 items-center justify-center rounded-full transition-all",!0===K?"bg-emerald-500 text-white":"bg-gray-100 text-gray-500 group-hover:bg-emerald-100 group-hover:text-emerald-600"),children:e(C,{className:"h-3.5 w-3.5"})}),e("span",{className:I("text-sm font-semibold",!0===K?"text-emerald-700":"text-gray-600"),children:"Đúng (True)"})]}),r("button",{type:"button",onClick:()=>{_(!1),Ce.answer&&Se(e=>({...e,answer:void 0}))},className:I("group flex items-center justify-center gap-2 rounded-lg border-2 px-4 py-2.5 text-center transition-all",!1===K?"border-red-500 bg-red-50 shadow-sm ring-1 ring-red-100":"border-gray-200 bg-white hover:border-red-300 hover:bg-red-50/50"),children:[e("div",{className:I("flex h-7 w-7 items-center justify-center rounded-full transition-all",!1===K?"bg-red-500 text-white":"bg-gray-100 text-gray-500 group-hover:bg-red-100 group-hover:text-red-600"),children:e(S,{className:"h-3.5 w-3.5"})}),e("span",{className:I("text-sm font-semibold",!1===K?"text-red-700":"text-gray-600"),children:"Sai (False)"})]})]}),Ce.answer&&e("p",{className:"text-sm text-red-600",children:Ce.answer})]}),O&&O.length>0&&r("div",{className:"flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),r("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Lỗi:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:O.map((r,t)=>e("li",{children:r},t))})]})]})]})]}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e(u,{className:"px-4 py-3",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(w,{className:"h-3.5 w-3.5 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(p,{className:"text-base font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-xs text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(m,{className:"px-4 pb-4",children:e(l,{id:"explanation",value:re,onChange:e=>te(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}export function TrueFalseCreator(r){return e(k,{...r})}

package/dist/components/questions/types/true-false/index.js

@@ -1,2 +1 @@
-export * from './TrueFalseCreator';
-export * from './TrueFalseClient';
+export*from"./TrueFalseCreator";export*from"./TrueFalseClient";

package/dist/components/questions/types/true-false/register.js

@@ -1,77 +1 @@
-import { TrueFalseCreator } from './TrueFalseCreator';
-export const trueFalseRegistration = {
-    component: TrueFalseCreator,
-    transformInitialData: (initialData) => {
-        const content = initialData?.content;
-        const answer = initialData?.answer;
-        const points = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (initialData?.points || content?.points || answer?.points || 1);
-        const explanation = initialData?.explanation || content?.explanation || answer?.explanation || '';
-        // Extract group info from API format
-        const questionGroup = initialData?.questionGroup || {};
-        const groupPayload = questionGroup?.payload || {};
-        // From API format (content + correctAnswer)
-        if (content && typeof content === 'object' && content.question !== undefined) {
-            const correctAnswer = answer?.answer;
-            return {
-                question: content.question || '',
-                answer: typeof correctAnswer === 'boolean' ? correctAnswer : undefined,
-                imageUrl: content.imageUrl || '',
-                isExample: content.isExample || false,
-                explanation,
-                points,
-                // Add group stuff
-                groupTitle: groupPayload?.title || answer?.groupTitle || '',
-                groupContent: groupPayload?.content || answer?.groupContent || '',
-                groupImageUrl: groupPayload?.imageUrl || answer?.groupImageUrl || content?.groupImageUrl || '',
-                groupNumber: questionGroup.groupNumber || answer?.groupNumber || 1,
-                articles: groupPayload?.articles || answer?.articles || undefined,
-            };
-        }
-        // From flat/answer format
-        if (answer && typeof answer === 'object' && answer.question !== undefined) {
-            return {
-                ...answer,
-                imageUrl: answer.imageUrl || content?.imageUrl || '',
-                explanation,
-                points,
-                // Add group stuff
-                groupTitle: groupPayload?.title || answer?.groupTitle || '',
-                groupContent: groupPayload?.content || answer?.groupContent || '',
-                groupImageUrl: groupPayload?.imageUrl || answer?.groupImageUrl || content?.groupImageUrl || '',
-                groupNumber: questionGroup.groupNumber || answer?.groupNumber || 1,
-                articles: groupPayload?.articles || answer?.articles || undefined,
-            };
-        }
-        return initialData?.answer;
-    },
-    getExtraProps: (ctx) => ({
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-        groups: ctx.groups,
-        groupType: ctx.groupType,
-        articleCount: ctx.articleCount,
-        questionIndexInPart: ctx.questionIndexInPart,
-        partId: ctx.partId,
-        groupConfig: ctx.groupConfig,
-    }),
-    wrapOnSave: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-    }),
-    wrapOnChange: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-    }),
-};
+import{TrueFalseCreator as t}from"./TrueFalseCreator";export const trueFalseRegistration={component:t,transformInitialData:t=>{const e=t?.content,o=t?.answer,n=t?.total_points?parseFloat(t.total_points):t?.points||e?.points||o?.points||1,a=t?.explanation||e?.explanation||o?.explanation||"",r=t?.questionGroup||{},i=r?.payload||{};if(e&&"object"==typeof e&&void 0!==e.question){const t=o?.answer;return{question:e.question||"",answer:"boolean"==typeof t?t:void 0,imageUrl:e.imageUrl||"",isExample:e.isExample||!1,explanation:a,points:n,groupTitle:i?.title||o?.groupTitle||"",groupContent:i?.content||o?.groupContent||"",groupImageUrl:i?.imageUrl||o?.groupImageUrl||e?.groupImageUrl||"",groupNumber:r.groupNumber||o?.groupNumber||1,articles:i?.articles||o?.articles||void 0}}return o&&"object"==typeof o&&void 0!==o.question?{...o,imageUrl:o.imageUrl||e?.imageUrl||"",explanation:a,points:n,groupTitle:i?.title||o?.groupTitle||"",groupContent:i?.content||o?.groupContent||"",groupImageUrl:i?.imageUrl||o?.groupImageUrl||e?.groupImageUrl||"",groupNumber:r.groupNumber||o?.groupNumber||1,articles:i?.articles||o?.articles||void 0}:t?.answer},getExtraProps:t=>({onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef,groups:t.groups,groupType:t.groupType,articleCount:t.articleCount,questionIndexInPart:t.questionIndexInPart,partId:t.partId,groupConfig:t.groupConfig}),wrapOnSave:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t}),wrapOnChange:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t})};

package/dist/components/questions/types/true-false/transform.js

@@ -1,32 +1 @@
-export const transformTrueFalse = (question) => {
-    const answerData = question.answer;
-    if (!answerData?.question) {
-        return { apiContent: {}, apiCorrectAnswer: {} };
-    }
-    const apiContent = {
-        question: answerData.question,
-    };
-    if (answerData.imageUrl) {
-        apiContent.imageUrl = answerData.imageUrl;
-    }
-    // Build basicGroupData when any group field is present
-    const hasGroupData = !!(answerData.groupTitle || answerData.groupSubtitle || answerData.groupContent || answerData.groupImageUrl || (answerData.articles && answerData.articles.length > 0));
-    const basicGroupData = hasGroupData
-        ? {
-            title: answerData.groupTitle || '',
-            subtitle: answerData.groupSubtitle || '',
-            content: answerData.groupContent || '',
-            imageUrl: answerData.groupImageUrl || '',
-            ...(answerData.articles ? { articles: answerData.articles } : {}),
-        }
-        : undefined;
-    return {
-        apiContent,
-        apiCorrectAnswer: {
-            answer: answerData.answer,
-        },
-        isExample: answerData.isExample || false,
-        basicGroupData,
-        groupNumber: answerData.groupNumber || 1,
-    };
-};
+export const transformTrueFalse=e=>{const r=e.answer;if(!r?.question)return{apiContent:{},apiCorrectAnswer:{}};const t={question:r.question};r.imageUrl&&(t.imageUrl=r.imageUrl);const o=!!(r.groupTitle||r.groupSubtitle||r.groupContent||r.groupImageUrl||r.articles&&r.articles.length>0)?{title:r.groupTitle||"",subtitle:r.groupSubtitle||"",content:r.groupContent||"",imageUrl:r.groupImageUrl||"",...r.articles?{articles:r.articles}:{}}:void 0;return{apiContent:t,apiCorrectAnswer:{answer:r.answer},isExample:r.isExample||!1,basicGroupData:o,groupNumber:r.groupNumber||1}};