@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

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

@@ -1 +1,244 @@
-"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})}
+'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 });
+}

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

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

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

@@ -1 +1,77 @@
-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})};
+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,
+    }),
+};

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

@@ -1 +1,32 @@
-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}};
+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,
+    };
+};

package/dist/components/questions/types/true-false-group/TrueFalseGroupClient.js

@@ -1 +1,25 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Check as t,CircleHelp as s,Lightbulb as a,Star as i,X as l}from"lucide-react";import{cn as n}from"../../../../shared/lib/utils";export function TrueFalseGroupClient({questionData:d,isReviewMode:o=!1,userAnswers:m=[]}){const c=d.items||[];return r("div",{className:"space-y-4",children:[d.instruction&&e("div",{className:"rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800",children:d.instruction}),c.map((a,d)=>{const c=m[d],x=a.correctAnswer;return r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5",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-blue-500 to-indigo-600 text-white",children:e(s,{className:"h-3.5 w-3.5"})}),r("span",{className:"text-sm font-medium text-gray-700",children:["Câu ",a.questionNumber||d+1]}),a.isExample&&r("span",{className:"inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700",children:[e(i,{className:"h-3 w-3"}),"Example"]})]}),r("span",{className:"text-xs text-gray-500",children:[a.points||0," điểm"]})]}),r("div",{className:"space-y-3 p-4",children:[e("p",{className:"text-sm font-semibold leading-relaxed text-gray-800",children:a.question||"Câu hỏi chưa được nhập"}),e("div",{className:"flex items-center gap-3",children:[{value:!0,label:"True"},{value:!1,label:"False"}].map(s=>{const a=s.value===x,i=s.value===c;return r("div",{className:n("flex flex-1 items-center justify-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-semibold transition-colors",o&&a?"border-green-500 bg-green-50 text-green-700":o&&i&&!a?"border-red-500 bg-red-50 text-red-700":i?"border-blue-500 bg-blue-50 text-blue-700":"border-gray-200 bg-white text-gray-700"),children:[s.value?e(t,{className:"h-4 w-4"}):e(l,{className:"h-4 w-4"}),e("span",{children:s.label})]},String(s.value))})})]})]},`${a.questionNumber}-${d}`)}),o&&d.explanation&&r("div",{className:"flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800",children:[e(a,{className:"mt-0.5 h-4 w-4 flex-shrink-0"}),d.explanation]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, CircleHelp, Lightbulb, Star, X } from 'lucide-react';
+import { cn } from '../../../../shared/lib/utils';
+export function TrueFalseGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
+    const items = questionData.items || [];
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), items.map((item, itemIndex) => {
+                const userValue = userAnswers[itemIndex];
+                const correctAnswer = item.correctAnswer;
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", 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-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "flex items-center gap-3", children: [
+                                        { value: true, label: 'True' },
+                                        { value: false, label: 'False' },
+                                    ].map((opt) => {
+                                        const isCorrect = opt.value === correctAnswer;
+                                        const isSelected = opt.value === userValue;
+                                        return (_jsxs("div", { className: cn('flex flex-1 items-center justify-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-semibold transition-colors', isReviewMode && isCorrect
+                                                ? 'border-green-500 bg-green-50 text-green-700'
+                                                : isReviewMode && isSelected && !isCorrect
+                                                    ? 'border-red-500 bg-red-50 text-red-700'
+                                                    : isSelected
+                                                        ? 'border-blue-500 bg-blue-50 text-blue-700'
+                                                        : 'border-gray-200 bg-white text-gray-700'), children: [opt.value ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(X, { className: "h-4 w-4" }), _jsx("span", { children: opt.label })] }, String(opt.value)));
+                                    }) })] })] }, `${item.questionNumber}-${itemIndex}`));
+            }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
+}

package/dist/components/questions/types/true-false-group/TrueFalseGroupCreator.js

@@ -1 +1,129 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as n,useRef as r,useState as i}from"react";import{Button as s}from"../../../../components/ui/button";import{Label as a}from"../../../../components/ui/label";import{Input as c}from"../../../../components/ui/input";import{Textarea as l}from"../../../../components/ui/textarea";import{PointsInput as o}from"../../../../components/ui/points-input";import{Card as m,CardContent as h,CardHeader as u,CardTitle as d}from"../../../../components/ui/card";import{Switch as p}from"../../../../components/ui/switch";import{useDebouncedCallback as g}from"../../../../shared/lib/hooks";import{Eye as x,Pencil as N,Plus as f,Star as b,Trash2 as v}from"lucide-react";import{TrueFalseGroupClient as y}from"./TrueFalseGroupClient";function w(e,t=!1){if(""===e)return t?0:1;const n=parseInt(e.replace(/[^0-9]/g,""),10);if(Number.isNaN(n))return t?0:1;const r=t?0:1;return Math.max(r,n)}function C(e){return{question:"",correctAnswer:!0,isExample:!1,points:1,questionNumber:e}}function q(e){return e.reduce((e,t)=>t.isExample?e:e+("number"==typeof t.points?t.points:1),0)}export function TrueFalseGroupCreator({initialData:k,onChange:E,externalErrors:T,onUnsavedChangesChange:A,validationRef:F}){const[j,D]=i(k?.instruction||"Tick True or False."),[z,$]=i(()=>{return e=k?.items,Array.isArray(e)&&0!==e.length?e.map((e,t)=>({question:e.question||"",correctAnswer:"boolean"!=typeof e.correctAnswer||e.correctAnswer,isExample:!0===e.isExample,points:e.isExample?0:"number"==typeof e.points?e.points:1,questionNumber:e.questionNumber||t+1})):[C(1)];var e}),[G,H]=i(k?.explanation||""),[I,V]=i(!1),[S,X]=i([]),J=r(E),M=r("");n(()=>{J.current=E},[E]);const O=(e=j,t=z,n=G)=>({instruction:e,items:t,explanation:n,points:q(t)}),R=g(e=>{J.current?.(e)},300);n(()=>{const e=O(),t=JSON.stringify(e);t!==M.current&&(M.current=t,R(e),A?.(!0))},[j,z,G,R,A]);n(()=>{F&&(F.current={triggerValidation:async()=>(()=>{const e=[];return j.trim()||e.push("Hướng dẫn (Instruction) không được để trống."),0===z.length&&e.push("Cần ít nhất một câu hỏi trong nhóm."),z.forEach((t,n)=>{t.question.trim()||e.push(`Câu ${n+1}: Nội dung câu hỏi không được để trống.`)}),X(e),0===e.length})(),getFormData:()=>O()})},[F,j,z,G]);const U=(e,t)=>{$(n=>{const r=[...n],i=r[e];return i?(r[e]={...i,...t},r):n})},Z=O(),B=T&&T.length>0?T:S;return t("div",{className:"space-y-6",children:[t("div",{className:"flex items-center justify-between",children:[t("div",{children:[e("h3",{className:"text-lg font-medium text-gray-900",children:"Tạo câu hỏi Đúng / Sai (Nhóm)"}),e("p",{className:"text-sm text-gray-500",children:"Thêm danh sách các câu hỏi True/False trong 1 nhóm"})]}),t(s,{type:"button",variant:"outline",size:"sm",onClick:()=>V(e=>!e),className:"gap-2",children:[e(I?N:x,{className:"h-4 w-4"}),I?"Chế độ chỉnh sửa":"Xem trước học sinh"]})]}),B.length>0&&e("div",{className:"rounded-lg bg-red-50 p-4 border border-red-200",children:e("div",{className:"flex",children:t("div",{className:"ml-3",children:[e("h3",{className:"text-sm font-medium text-red-800",children:"Cần sửa các lỗi sau:"}),e("div",{className:"mt-2 text-sm text-red-700",children:e("ul",{className:"list-disc space-y-1 pl-5",children:B.map((t,n)=>e("li",{children:t},n))})})]})})}),I?t(m,{children:[e(u,{children:e(d,{className:"text-base font-semibold",children:"Xem trước hiển thị học sinh"})}),e(h,{children:e(y,{questionData:Z})})]}):t("div",{className:"space-y-6",children:[t(m,{children:[e(u,{children:e(d,{className:"text-base font-semibold",children:"Hướng dẫn chung (Instruction)"})}),e(h,{className:"space-y-4",children:t("div",{children:[e(a,{htmlFor:"instruction",children:"Hướng dẫn bài làm"}),e(c,{id:"instruction",value:j,onChange:e=>D(e.target.value),placeholder:"VD: Tick True or False.",className:"mt-1"})]})})]}),t(m,{children:[t(u,{className:"flex flex-row items-center justify-between",children:[t(d,{className:"text-base font-semibold",children:["Danh sách câu hỏi (",z.length,")"]}),t(s,{type:"button",variant:"outline",size:"sm",onClick:()=>{$(e=>[...e,C(e.length+1)])},className:"gap-2",children:[e(f,{className:"h-4 w-4"}),"Thêm câu hỏi"]})]}),e(h,{className:"space-y-4",children:z.map((n,r)=>t("div",{className:"space-y-4 rounded-lg border border-gray-200 bg-gray-50/50 p-4 transition-colors hover:border-gray-300",children:[t("div",{className:"flex items-center justify-between gap-4",children:[t("div",{className:"flex items-center gap-2",children:[e("span",{className:"flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700",children:n.questionNumber||r+1}),t("span",{className:"text-sm font-medium text-gray-700",children:["Câu hỏi ",r+1]})]}),t("div",{className:"flex items-center gap-4",children:[t("div",{className:"flex items-center gap-2",children:[e(p,{id:`example-${r}`,checked:n.isExample||!1,onCheckedChange:e=>U(r,{isExample:e,points:e?0:1})}),t(a,{htmlFor:`example-${r}`,className:"flex items-center gap-1 text-xs cursor-pointer",children:[e(b,{className:"h-3 w-3 text-amber-500"}),"Câu mẫu (Example)"]})]}),!n.isExample&&e("div",{className:"w-24",children:e(o,{value:n.points,allowZero:!0,onChange:e=>U(r,{points:w(e.target.value,!0)})})}),z.length>1&&e(s,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{$(t=>t.length<=1?t:t.filter((t,n)=>n!==e).map((e,t)=>({...e,questionNumber:t+1})))})(r),className:"text-red-500 hover:bg-red-50 hover:text-red-600",children:e(v,{className:"h-4 w-4"})})]})]}),t("div",{children:[e(a,{htmlFor:`question-${r}`,children:"Nội dung câu hỏi"}),e(l,{id:`question-${r}`,value:n.question,onChange:e=>U(r,{question:e.target.value}),placeholder:"Nhập nội dung câu hỏi...",className:"mt-1 bg-white",rows:2})]}),t("div",{children:[e(a,{className:"mb-2 block text-xs font-medium text-gray-700",children:"Đáp án đúng"}),t("div",{className:"flex items-center gap-4",children:[e(s,{type:"button",variant:!0===n.correctAnswer?"default":"outline",size:"sm",onClick:()=>U(r,{correctAnswer:!0}),className:"w-24",children:"True"}),e(s,{type:"button",variant:!1===n.correctAnswer?"default":"outline",size:"sm",onClick:()=>U(r,{correctAnswer:!1}),className:"w-24",children:"False"})]})]})]},r))})]}),t(m,{children:[e(u,{children:e(d,{className:"text-base",children:"Giải thích"})}),e(h,{children:e(l,{id:"explanation",value:G,onChange:e=>H(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3})})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Switch } from '../../../../components/ui/switch';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+import { TrueFalseGroupClient } from './TrueFalseGroupClient';
+function parsePointsValue(raw, allowZero = false) {
+    if (raw === '')
+        return allowZero ? 0 : 1;
+    const parsed = parseInt(raw.replace(/[^0-9]/g, ''), 10);
+    if (Number.isNaN(parsed))
+        return allowZero ? 0 : 1;
+    const min = allowZero ? 0 : 1;
+    return Math.max(min, parsed);
+}
+function createEmptyItem(questionNumber) {
+    return {
+        question: '',
+        correctAnswer: true,
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+function normalizeItems(rawItems) {
+    if (!Array.isArray(rawItems) || rawItems.length === 0) {
+        return [createEmptyItem(1)];
+    }
+    return rawItems.map((item, index) => ({
+        question: item.question || '',
+        correctAnswer: typeof item.correctAnswer === 'boolean' ? item.correctAnswer : true,
+        isExample: item.isExample === true,
+        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+        questionNumber: item.questionNumber || index + 1,
+    }));
+}
+function sumPoints(items) {
+    return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
+}
+export function TrueFalseGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const [instruction, setInstruction] = useState(initialData?.instruction || 'Tick True or False.');
+    const [items, setItems] = useState(() => normalizeItems(initialData?.items));
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [errors, setErrors] = useState([]);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const buildPayload = (nextInstruction = instruction, nextItems = items, nextExplanation = explanation) => ({
+        instruction: nextInstruction,
+        items: nextItems,
+        explanation: nextExplanation,
+        points: sumPoints(nextItems),
+    });
+    const debouncedOnChange = useDebouncedCallback((payload) => {
+        onChangeRef.current?.(payload);
+    }, 300);
+    useEffect(() => {
+        const payload = buildPayload();
+        const serialized = JSON.stringify(payload);
+        if (serialized !== previousPayloadRef.current) {
+            previousPayloadRef.current = serialized;
+            debouncedOnChange(payload);
+            onUnsavedChangesChange?.(true);
+        }
+    }, [instruction, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    const validate = () => {
+        const nextErrors = [];
+        if (!instruction.trim()) {
+            nextErrors.push('Hướng dẫn (Instruction) không được để trống.');
+        }
+        if (items.length === 0) {
+            nextErrors.push('Cần ít nhất một câu hỏi trong nhóm.');
+        }
+        items.forEach((item, index) => {
+            if (!item.question.trim()) {
+                nextErrors.push(`Câu ${index + 1}: Nội dung câu hỏi không được để trống.`);
+            }
+        });
+        setErrors(nextErrors);
+        return nextErrors.length === 0;
+    };
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => validate(),
+                getFormData: () => buildPayload(),
+            };
+        }
+    }, [validationRef, instruction, items, explanation]);
+    const updateItem = (index, patch) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[index];
+            if (!current)
+                return prev;
+            next[index] = { ...current, ...patch };
+            return next;
+        });
+    };
+    const addItem = () => {
+        setItems((prev) => [...prev, createEmptyItem(prev.length + 1)]);
+    };
+    const removeItem = (index) => {
+        setItems((prev) => {
+            if (prev.length <= 1)
+                return prev;
+            const filtered = prev.filter((_, i) => i !== index);
+            return filtered.map((item, i) => ({ ...item, questionNumber: i + 1 }));
+        });
+    };
+    const currentPayload = buildPayload();
+    const displayErrors = externalErrors && externalErrors.length > 0 ? externalErrors : errors;
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "T\u1EA1o c\u00E2u h\u1ECFi \u0110\u00FAng / Sai (Nh\u00F3m)" }), _jsx("p", { className: "text-sm text-gray-500", children: "Th\u00EAm danh s\u00E1ch c\u00E1c c\u00E2u h\u1ECFi True/False trong 1 nh\u00F3m" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((prev) => !prev), className: "gap-2", children: [isClientMode ? _jsx(Pencil, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }), isClientMode ? 'Chế độ chỉnh sửa' : 'Xem trước học sinh'] })] }), displayErrors.length > 0 && (_jsx("div", { className: "rounded-lg bg-red-50 p-4 border border-red-200", children: _jsx("div", { className: "flex", children: _jsxs("div", { className: "ml-3", children: [_jsx("h3", { className: "text-sm font-medium text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("div", { className: "mt-2 text-sm text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-5", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) }) })] }) }) })), isClientMode ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Xem tr\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u1ECDc sinh" }) }), _jsx(CardContent, { children: _jsx(TrueFalseGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "H\u01B0\u1EDBng d\u1EABn chung (Instruction)" }) }), _jsx(CardContent, { className: "space-y-4", children: _jsxs("div", { children: [_jsx(Label, { htmlFor: "instruction", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "VD: Tick True or False.", className: "mt-1" })] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Danh s\u00E1ch c\u00E2u h\u1ECFi (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-4 rounded-lg border border-gray-200 bg-gray-50/50 p-4 transition-colors hover:border-gray-300", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700", children: item.questionNumber || index + 1 }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u h\u1ECFi ", index + 1] })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, {
+                                                                        isExample: checked,
+                                                                        points: checked ? 0 : 1,
+                                                                    }) }), _jsxs(Label, { htmlFor: `example-${index}`, className: "flex items-center gap-1 text-xs cursor-pointer", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "C\u00E2u m\u1EABu (Example)"] })] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+                                                                    points: parsePointsValue(event.target.value, true),
+                                                                }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(index), className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `question-${index}`, children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), _jsx(Textarea, { id: `question-${index}`, value: item.question, onChange: (e) => updateItem(index, { question: e.target.value }), placeholder: "Nh\u1EADp n\u1ED9i dung c\u00E2u h\u1ECFi...", className: "mt-1 bg-white", rows: 2 })] }), _jsxs("div", { children: [_jsx(Label, { className: "mb-2 block text-xs font-medium text-gray-700", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { type: "button", variant: item.correctAnswer === true ? 'default' : 'outline', size: "sm", onClick: () => updateItem(index, { correctAnswer: true }), className: "w-24", children: "True" }), _jsx(Button, { type: "button", variant: item.correctAnswer === false ? 'default' : 'outline', size: "sm", onClick: () => updateItem(index, { correctAnswer: false }), className: "w-24", children: "False" })] })] })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (event) => setExplanation(event.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3 }) })] })] }))] }));
+}

package/dist/components/questions/types/true-false-group/index.d.ts

@@ -2,3 +2,4 @@ export * from './TrueFalseGroupCreator';
 export * from './TrueFalseGroupClient';
 export * from './transform';
 export * from './register';
+export * from './map-true-false-group-data';

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

@@ -1 +1,5 @@
-export*from"./TrueFalseGroupCreator";export*from"./TrueFalseGroupClient";export*from"./transform";export*from"./register";
+export * from './TrueFalseGroupCreator';
+export * from './TrueFalseGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-true-false-group-data';

package/dist/components/questions/types/true-false-group/map-true-false-group-data.d.ts

@@ -0,0 +1,4 @@
+import type { TrueFalseGroupData, TrueFalseGroupItemData } from '../../_shared/types/true-false-group.type';
+export declare function createEmptyTrueFalseGroupItem(questionNumber: number): TrueFalseGroupItemData;
+export declare function mapTrueFalseGroupItem(item: unknown, index: number, fallbackAnswer?: boolean): TrueFalseGroupItemData;
+export declare function mapQuestionToTrueFalseGroupData(question: Record<string, unknown> | null | undefined): TrueFalseGroupData;