@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/questions/components/QuestionTypeSelector.js

@@ -1 +1,32 @@
-import{jsx as _,jsxs as E}from"react/jsx-runtime";import{Select as R,SelectContent as O,SelectItem as T,SelectTrigger as N,SelectValue as e}from"../../../components/ui/select";import{getQuestionTypeLabel as A}from"../_shared/config/question-types.config";export function QuestionTypeSelector({value:C,onValueChange:S,disabled:I}){return E(R,{value:C,onValueChange:S,disabled:I,children:[_(N,{id:"questionType",className:"mt-1",children:_(e,{placeholder:"Chọn loại câu hỏi"})}),_(O,{children:["CHOOSE_THE_CORRECT_ANSWER","CHOOSE_THE_CORRECT_ANSWER","LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE","CHOOSE_THE_CORRECT_ANSWER","CHOOSE_THE_CORRECT_ANSWER","FILL_IN_BLANK","FILL_IN_BLANK","TICK_TRUE_OR_FALSE","TICK_YES_OR_NO","ARRANGE_LETTERS_INTO_WORDS","READ_PASSAGE_AND_COMPLETE_STORY","FILL_IN_BLANK","CHOOSE_THE_CORRECT_ANSWER","READ_AND_CHOOSE_APPROPRIATE_WORD","WRITE_SHORT_PARAGRAPH","FILL_MISSING_WORDS_IN_GRID","LOOK_PICTURE_CHOOSE_CORRECT_ANSWER","LOOK_PICTURE_FILL_WORD_HINT","LABEL_THE_PICTURE","READ_AND_COLOR_OBJECTS","ANSWER_THE_QUESTION","WORD_ORDERING","MATCH_BY_WRITING_ANSWER","WRITE_SENTENCES"].map(E=>_(T,{value:E,children:A(E)},E))})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../components/ui/select';
+import { getQuestionTypeLabel } from '../_shared/config/question-types.config';
+export function QuestionTypeSelector({ value, onValueChange, disabled, }) {
+    const questionTypes = [
+        'CHOOSE_THE_CORRECT_ANSWER',
+        'CHOOSE_THE_CORRECT_ANSWER',
+        'LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE',
+        'CHOOSE_THE_CORRECT_ANSWER',
+        'CHOOSE_THE_CORRECT_ANSWER',
+        'FILL_IN_BLANK',
+        'FILL_IN_BLANK',
+        'TICK_TRUE_OR_FALSE',
+        'TICK_YES_OR_NO',
+        'ARRANGE_LETTERS_INTO_WORDS',
+        'READ_PASSAGE_AND_COMPLETE_STORY',
+        'FILL_IN_BLANK',
+        'CHOOSE_THE_CORRECT_ANSWER',
+        'READ_AND_CHOOSE_APPROPRIATE_WORD',
+        'WRITE_SHORT_PARAGRAPH',
+        'FILL_MISSING_WORDS_IN_GRID',
+        'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER',
+        'LOOK_PICTURE_FILL_WORD_HINT',
+        'LABEL_THE_PICTURE',
+        'READ_AND_COLOR_OBJECTS',
+        'ANSWER_THE_QUESTION',
+        'WORD_ORDERING',
+        'MATCH_BY_WRITING_ANSWER',
+        'WRITE_SENTENCES',
+    ];
+    return (_jsxs(Select, { value: value, onValueChange: onValueChange, disabled: disabled, children: [_jsx(SelectTrigger, { id: "questionType", className: "mt-1", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn lo\u1EA1i c\u00E2u h\u1ECFi" }) }), _jsx(SelectContent, { children: questionTypes.map((type) => (_jsx(SelectItem, { value: type, children: getQuestionTypeLabel(type) }, type))) })] }));
+}

package/dist/components/questions/components/QuestionTypeSpecificForms.js

@@ -1 +1,6 @@
-export function QuestionTypeSpecificForms(e){return null}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function QuestionTypeSpecificForms(_props) {
+    // Tất cả các loại câu hỏi đã có dedicated Creator components
+    // Component này không còn được sử dụng nữa
+    return null;
+}

package/dist/components/questions/components/RegionNode.js

@@ -1 +1,94 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{memo as r,useState as o,useRef as t,useEffect as n}from"react";import{Input as i}from"../../../components/ui/input";import{NameNode as d}from"./NameNode";export const RegionNode=r(({data:r})=>{const{label:a,width:l,height:s,onCreateNameNode:m,isClientMode:p,savedName:u,isUnassignedRegion:h,isHighlighted:c}=r,[g,b]=o(""),[v,N]=o(!1),[f,x]=o(p?"":u??a??""),w=t(null),k=t(null);n(()=>{p?x(u||""):void 0!==u?x(u):a&&x(a)},[p,u,a]);return e("div",{ref:k,className:"relative rounded-2xl transition-all "+(h?"":p?f?"":c?"rounded-2xl border-2 border-dashed border-red-500 bg-red-100/30 ring-2 ring-red-300":"rounded-2xl border-2 border-dashed border-red-400 bg-black/20":f||a?"":"rounded-2xl border-2 border-dashed border-red-400 bg-black/10 backdrop-blur-sm"),style:h?{width:"100%",height:"100%"}:{width:`${l}%`,height:`${s}%`,minWidth:"60px",minHeight:"40px",borderRadius:"16px"},children:!p&&e("div",{className:"pointer-events-auto h-full w-full",children:v?e(i,{ref:w,value:g,onChange:e=>b(e.target.value),onKeyDown:e=>{"Enter"===e.key&&g.trim()?(m?.(g.trim()),x(g.trim()),b(""),N(!1)):"Escape"===e.key&&(b(""),N(!1))},onBlur:()=>{g.trim()&&(m?.(g.trim()),x(g.trim())),b(""),N(!1)},placeholder:"Nhập tên...",className:"pointer-events-auto h-9 text-sm",onClick:e=>{e.stopPropagation(),e.preventDefault()},onMouseDown:e=>{e.stopPropagation(),e.preventDefault()}}):f||a?e("div",{className:"pointer-events-none h-full w-full",children:e(d,{data:{name:f||a,isConnected:!0,onRemove:()=>{},displayMode:"compact"},variant:"client"})}):null})})});RegionNode.displayName="RegionNode";
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect } from 'react';
+import { Input } from '../../../components/ui/input';
+import { NameNode } from './NameNode';
+export const RegionNode = memo(({ data }) => {
+    const { label, width, height, onCreateNameNode, isClientMode, savedName: propSavedName, isUnassignedRegion, isHighlighted, } = data;
+    const [inputText, setInputText] = useState('');
+    const [showInput, setShowInput] = useState(false);
+    // Initialize: in client mode always empty, in edit mode use propSavedName if available
+    const [savedName, setSavedName] = useState(isClientMode ? '' : (propSavedName ?? label ?? ''));
+    const inputRef = useRef(null);
+    const nodeRef = useRef(null);
+    // Sync propSavedName and reset when switching modes
+    useEffect(() => {
+        if (isClientMode) {
+            // In client mode, always use propSavedName (from regionAssignments or empty)
+            // If switching TO client mode, clear any existing savedName
+            if (propSavedName) {
+                setSavedName(propSavedName);
+            }
+            else {
+                setSavedName(''); // Clear when switching to client mode
+            }
+        }
+        else {
+            // In edit mode, use propSavedName if provided (from region data)
+            if (propSavedName !== undefined) {
+                setSavedName(propSavedName);
+            }
+            else if (label) {
+                setSavedName(label);
+            }
+        }
+    }, [isClientMode, propSavedName, label]);
+    const handleInputKeyDown = (e) => {
+        if (e.key === 'Enter' && inputText.trim()) {
+            onCreateNameNode?.(inputText.trim());
+            setSavedName(inputText.trim()); // Lưu tên để hiển thị
+            setInputText('');
+            setShowInput(false);
+        }
+        else if (e.key === 'Escape') {
+            setInputText('');
+            setShowInput(false);
+        }
+    };
+    const handleInputBlur = () => {
+        if (inputText.trim()) {
+            onCreateNameNode?.(inputText.trim());
+            setSavedName(inputText.trim()); // Lưu tên để hiển thị
+        }
+        setInputText('');
+        setShowInput(false);
+    };
+    return (_jsx("div", { ref: nodeRef, className: `relative rounded-2xl transition-all ${
+        // Unassigned region has no visible styling (transparent)
+        isUnassignedRegion
+            ? '' // No border/background for unassigned region
+            : // In client mode, show transparent region (NameNode will be rendered separately)
+                isClientMode
+                    ? savedName
+                        ? '' // No border/background when NameNode is assigned
+                        : isHighlighted
+                            ? 'rounded-2xl border-2 border-dashed border-red-500 bg-red-100/30 ring-2 ring-red-300' // Highlighted empty region
+                            : 'rounded-2xl border-2 border-dashed border-red-400 bg-black/20' // Client mode - red border with semi-transparent black background when empty
+                    : savedName || label
+                        ? '' // Match client mode when region đã có tên
+                        : 'rounded-2xl border-2 border-dashed border-red-400 bg-black/10 backdrop-blur-sm' // Creator mode empty giống client
+        }`, style: isUnassignedRegion
+            ? {
+                width: '100%',
+                height: '100%',
+            }
+            : {
+                width: `${width}%`,
+                height: `${height}%`,
+                minWidth: '60px',
+                minHeight: '40px',
+                borderRadius: '16px',
+            }, children: !isClientMode && (_jsx("div", { className: "pointer-events-auto h-full w-full", children: showInput ? (_jsx(Input, { ref: inputRef, value: inputText, onChange: (e) => setInputText(e.target.value), onKeyDown: handleInputKeyDown, onBlur: handleInputBlur, placeholder: "Nh\u1EADp t\u00EAn...", className: "pointer-events-auto h-9 text-sm", onClick: (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                }, onMouseDown: (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                } })) : savedName || label ? (_jsx("div", { className: "pointer-events-none h-full w-full", children: _jsx(NameNode, { data: {
+                        name: savedName || label,
+                        isConnected: true,
+                        onRemove: () => { },
+                        displayMode: 'compact',
+                    }, variant: "client" }) })) : null })) }));
+});
+RegionNode.displayName = 'RegionNode';

package/dist/components/questions/components/index.js

@@ -1 +1,14 @@
-export{ColorNode}from"./ColorNode";export{ColorRegionClient}from"./ColorRegionClient";export{ColorRegionCreator}from"./ColorRegionCreator";export{ColorRegionNode}from"./ColorRegionNode";export{CreatorGuide}from"./CreatorGuide";export{NameNode}from"./NameNode";export{QuestionBankOption}from"./QuestionBankOption";export{QuestionBasicInfoForm}from"./QuestionBasicInfoForm";export{QuestionCommonFields}from"./QuestionCommonFields";export{QuestionSearchDropdown}from"./QuestionSearchDropdown";export{QuestionTypeSelector}from"./QuestionTypeSelector";export{QuestionTypeSpecificForms}from"./QuestionTypeSpecificForms";export{RegionNode}from"./RegionNode";export{BasicQuestionGroupCard}from"../groups/BasicQuestionGroupCard";
+export { ColorNode } from './ColorNode';
+export { ColorRegionClient } from './ColorRegionClient';
+export { ColorRegionCreator } from './ColorRegionCreator';
+export { ColorRegionNode } from './ColorRegionNode';
+export { CreatorGuide } from './CreatorGuide';
+export { NameNode } from './NameNode';
+export { QuestionBankOption } from './QuestionBankOption';
+export { QuestionBasicInfoForm } from './QuestionBasicInfoForm';
+export { QuestionCommonFields } from './QuestionCommonFields';
+export { QuestionSearchDropdown } from './QuestionSearchDropdown';
+export { QuestionTypeSelector } from './QuestionTypeSelector';
+export { QuestionTypeSpecificForms } from './QuestionTypeSpecificForms';
+export { RegionNode } from './RegionNode';
+export { BasicQuestionGroupCard } from '../groups/BasicQuestionGroupCard';

package/dist/components/questions/creator/QuestionCreator.js

@@ -1 +1,90 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{toast as o}from"sonner";import{t as n}from"../../../shared/lib/i18n";import{Button as t}from"../../../components/ui/button";import{Card as s,CardDescription as r,CardHeader as a,CardTitle as u}from"../../../components/ui/card";import{useQuestionFormState as l}from"../_shared/hooks/useQuestionFormState";import{useQuestionInitialization as d}from"../_shared/hooks/useQuestionInitialization";import{useQuestionOnChange as p}from"../_shared/hooks/useQuestionOnChange";import{QuestionTypeSpecificForms as c}from"../components/QuestionTypeSpecificForms";import{renderDedicatedComponent as f}from"./dedicated-component-router";import{buildAnswerPayload as m}from"../_shared/utils/answer-builder";import{validateQuestion as h}from"../_shared/utils/question-validation";import{QUESTION_TYPES_WITH_DEDICATED_COMPONENTS as g}from"../_shared/config/question-types.config";export function QuestionCreator({onSave:y,onCancel:C,initialData:v,prefilledType:q,prefilledSkill:T,optionCount:x,optionMode:I,defaultValue:b,defaultQuestion:k,viewMode:w,groups:S,groupConfig:Q,groupType:_,articleCount:E,questionConfig:F,questionIndexInPart:j,partId:A,isEmbedded:M=!1,onChange:z,onUnsavedChangesChange:D,externalErrors:N,validationRef:V,suggestedAnswers:P,hasSuggestedAnswers:R,headerExtra:U}){const{state:H,updateField:L}=l(),{isInitializing:O}=d({initialData:v,prefilledType:q,prefilledSkill:T,updateField:L});p({onChange:z,state:H,isInitializing:O,prefilledType:q});const B=H.questionType||q,G=B&&g.includes(B);if(G){const e=f({questionType:B,initialData:v,state:H,onSave:y,onCancel:C,onChange:z,onUnsavedChangesChange:D,externalErrors:N,optionCount:x,optionMode:I,defaultValue:b,defaultQuestion:k,viewMode:w,groups:S,groupConfig:Q,groupType:_,articleCount:E,questionConfig:F,questionIndexInPart:j,partId:A,validationRef:V,suggestedAnswers:P,hasSuggestedAnswers:R,headerExtra:U});if(e)return e}return i("div",{className:"space-y-6",children:[e(s,{children:!M&&i(a,{children:[e(u,{children:"Tạo câu hỏi mới"}),e(r,{children:"Điền thông tin cơ bản về câu hỏi"})]})}),H.questionType&&!G&&e(c,{questionType:H.questionType,state:H,updateField:L}),i("div",{className:"flex justify-end gap-3",children:[e(t,{variant:"outline",onClick:C,children:"Hủy"}),e(t,{onClick:()=>{const e=h(H.questionType,H.content);if(!e.isValid)return void o.error(e.error||n("common.question.create.fillInfo"));const i=m(H.questionType,H),t={type:H.questionType,content:H.content,answer:i,points:H.points,level:H.level,difficulty:H.difficulty,skill:H.skill};y?.(t),o.success(n("common.question.create.success"))},className:"bg-blue-500 hover:bg-blue-600",children:"Lưu câu hỏi"})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast } from 'sonner';
+import { t } from '../../../shared/lib/i18n';
+import { Button } from '../../../components/ui/button';
+import { Card, CardDescription, CardHeader, CardTitle } from '../../../components/ui/card';
+import { useQuestionFormState } from '../_shared/hooks/useQuestionFormState';
+import { useQuestionInitialization } from '../_shared/hooks/useQuestionInitialization';
+import { useQuestionOnChange } from '../_shared/hooks/useQuestionOnChange';
+import { QuestionTypeSpecificForms } from '../components/QuestionTypeSpecificForms';
+import { renderDedicatedComponent } from './dedicated-component-router';
+import { buildAnswerPayload } from '../_shared/utils/answer-builder';
+import { validateQuestion } from '../_shared/utils/question-validation';
+import { QUESTION_TYPES_WITH_DEDICATED_COMPONENTS } from '../_shared/config/question-types.config';
+export function QuestionCreator({ onSave, onCancel, initialData, prefilledType, prefilledSkill, optionCount, optionMode, defaultValue, defaultQuestion, viewMode, groups, groupConfig, groupType, articleCount, questionConfig, questionIndexInPart, partId, isEmbedded = false, onChange, onUnsavedChangesChange, externalErrors, validationRef, suggestedAnswers, hasSuggestedAnswers, headerExtra, }) {
+    const { state, updateField } = useQuestionFormState();
+    const { isInitializing } = useQuestionInitialization({
+        initialData,
+        prefilledType,
+        prefilledSkill,
+        updateField,
+    });
+    useQuestionOnChange({
+        onChange,
+        state,
+        isInitializing,
+        prefilledType,
+    });
+    // Determine effective question type - use prefilledType as fallback for state.questionType
+    // This ensures dedicated components render on first render before state is updated
+    const effectiveQuestionType = (state.questionType || prefilledType);
+    // Check if current question type has a dedicated component
+    const hasDedicatedComponent = effectiveQuestionType &&
+        QUESTION_TYPES_WITH_DEDICATED_COMPONENTS.includes(effectiveQuestionType);
+    // Render dedicated component if applicable
+    // Note: We don't use useMemo here because dedicated components manage their own
+    // internal state and the callbacks (onChange, onSave) need fresh references.
+    // The performance optimization should be done inside each creator component.
+    if (hasDedicatedComponent) {
+        const dedicatedComponent = renderDedicatedComponent({
+            questionType: effectiveQuestionType,
+            initialData,
+            state,
+            onSave,
+            onCancel,
+            onChange,
+            onUnsavedChangesChange,
+            externalErrors,
+            optionCount,
+            optionMode,
+            defaultValue,
+            defaultQuestion,
+            viewMode,
+            groups,
+            groupConfig,
+            groupType,
+            articleCount,
+            questionConfig,
+            questionIndexInPart,
+            partId,
+            validationRef,
+            suggestedAnswers,
+            hasSuggestedAnswers,
+            headerExtra,
+        });
+        if (dedicatedComponent) {
+            return dedicatedComponent;
+        }
+    }
+    const handleSubmit = () => {
+        const validation = validateQuestion(state.questionType, state.content);
+        if (!validation.isValid) {
+            toast.error(validation.error || t('common.question.create.fillInfo'));
+            return;
+        }
+        const answer = buildAnswerPayload(state.questionType, state);
+        const questionData = {
+            type: state.questionType,
+            content: state.content,
+            answer,
+            points: state.points,
+            level: state.level,
+            difficulty: state.difficulty,
+            skill: state.skill,
+        };
+        onSave?.(questionData);
+        toast.success(t('common.question.create.success'));
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: !isEmbedded && (_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "T\u1EA1o c\u00E2u h\u1ECFi m\u1EDBi" }), _jsx(CardDescription, { children: "\u0110i\u1EC1n th\u00F4ng tin c\u01A1 b\u1EA3n v\u1EC1 c\u00E2u h\u1ECFi" })] })) }), state.questionType && !hasDedicatedComponent && (_jsx(QuestionTypeSpecificForms, { questionType: state.questionType, state: state, updateField: updateField })), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { variant: "outline", onClick: onCancel, children: "H\u1EE7y" }), _jsx(Button, { onClick: handleSubmit, className: "bg-blue-500 hover:bg-blue-600", children: "L\u01B0u c\u00E2u h\u1ECFi" })] })] }));
+}

package/dist/components/questions/creator/QuestionGroupCreator.js

@@ -1 +1,119 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as l}from"react";import{Button as n}from"../../../components/ui/button";import{Input as a}from"../../../components/ui/input";import{Label as c}from"../../../components/ui/label";import{Textarea as r}from"../../../components/ui/textarea";import{Card as t,CardContent as d,CardDescription as h,CardHeader as s,CardTitle as o}from"../../../components/ui/card";import{Select as m,SelectContent as u,SelectItem as g,SelectTrigger as v,SelectValue as p}from"../../../components/ui/select";import{Badge as N}from"../../../components/ui/badge";import{Checkbox as f}from"../../../components/ui/checkbox";import{Plus as y,X as b,Upload as C,MoveUp as x,MoveDown as I,FileText as w,Music as E,Video as A,Image as S}from"lucide-react";import{toast as D}from"sonner";import{t as G}from"../../../shared/lib/i18n";export function QuestionGroupCreator({onSave:T,onCancel:k,availableQuestions:L=[]}){const[F,U]=l(1),[_,B]=l(""),[M,V]=l(""),[R,O]=l(""),[j,z]=l("A1"),[P,H]=l("READING"),[K,X]=l(""),[q,Q]=l([]),[W,J]=l(""),[Y,Z]=l(!1),[$,ee]=l({instructions:""}),[ie,le]=l([]),[ne,ae]=l(""),ce=()=>{W.trim()&&!q.includes(W.trim())&&(Q([...q,W.trim()]),J(""))},re=e=>{ie.includes(e)?le(ie.filter(i=>i!==e)):le([...ie,e])},te=(e,i)=>{const l=[...ie],n="up"===i?e-1:e+1;n>=0&&n<l.length&&([l[e],l[n]]=[l[n],l[e]],le(l))},de=L.filter(e=>e.content.toLowerCase().includes(ne.toLowerCase())||e.type.toLowerCase().includes(ne.toLowerCase())),he=ie.map(e=>L.find(i=>i.id===e)).filter(Boolean),se=he.reduce((e,i)=>e+i.points,0),oe=_&&R,me=oe&&$.instructions;return i("div",{className:"space-y-6",children:[i("div",{className:"flex items-center justify-center space-x-4",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-full "+(F>=1?"bg-blue-500 text-white":"bg-gray-200 text-gray-500"),children:"1"}),e("div",{className:"h-1 w-20 "+(F>=2?"bg-blue-500":"bg-gray-200")}),e("div",{className:"flex h-10 w-10 items-center justify-center rounded-full "+(F>=2?"bg-blue-500 text-white":"bg-gray-200 text-gray-500"),children:"2"}),e("div",{className:"h-1 w-20 "+(F>=3?"bg-blue-500":"bg-gray-200")}),e("div",{className:"flex h-10 w-10 items-center justify-center rounded-full "+(F>=3?"bg-blue-500 text-white":"bg-gray-200 text-gray-500"),children:"3"})]}),1===F&&i(t,{children:[i(s,{children:[e(o,{children:"Bước 1: Thông tin cơ bản"}),e(h,{children:"Nhập thông tin chung về nhóm câu hỏi"})]}),i(d,{className:"space-y-4",children:[i("div",{children:[e(c,{htmlFor:"name",children:"Tên nhóm câu hỏi *"}),e(a,{id:"name",value:_,onChange:e=>B(e.target.value),placeholder:"VD: TOEIC Part 3 - Conversation về mua sắm",className:"mt-1"})]}),i("div",{children:[e(c,{htmlFor:"description",children:"Mô tả"}),e(r,{id:"description",value:M,onChange:e=>V(e.target.value),placeholder:"Mô tả ngắn gọn về nhóm câu hỏi này...",className:"mt-1",rows:3})]}),i("div",{children:[e(c,{htmlFor:"groupType",children:"Loại nhóm câu hỏi *"}),i(m,{value:R,onValueChange:e=>O(e),children:[e(v,{id:"groupType",className:"mt-1",children:e(p,{placeholder:"Chọn loại nhóm câu hỏi"})}),i(u,{children:[e(g,{value:"READING_PASSAGE",children:i("div",{className:"flex items-center gap-2",children:[e(w,{className:"h-4 w-4"}),"Đọc hiểu - Đoạn văn"]})}),e(g,{value:"LISTENING_AUDIO",children:i("div",{className:"flex items-center gap-2",children:[e(E,{className:"h-4 w-4"}),"Nghe - Audio/Hội thoại"]})}),e(g,{value:"LISTENING_VIDEO",children:i("div",{className:"flex items-center gap-2",children:[e(A,{className:"h-4 w-4"}),"Nghe - Video"]})}),e(g,{value:"IMAGE_BASED",children:i("div",{className:"flex items-center gap-2",children:[e(S,{className:"h-4 w-4"}),"Dựa vào hình ảnh"]})}),e(g,{value:"MIXED",children:"Kết hợp nhiều loại"})]})]})]}),i("div",{className:"grid grid-cols-2 gap-4",children:[i("div",{children:[e(c,{htmlFor:"level",children:"Cấp độ *"}),i(m,{value:j,onValueChange:e=>z(e),children:[e(v,{id:"level",className:"mt-1",children:e(p,{})}),i(u,{children:[e(g,{value:"A1",children:"A1"}),e(g,{value:"A2",children:"A2"}),e(g,{value:"B1",children:"B1"}),e(g,{value:"B2",children:"B2"}),e(g,{value:"C1",children:"C1"}),e(g,{value:"C2",children:"C2"})]})]})]}),i("div",{children:[e(c,{htmlFor:"skill",children:"Kỹ năng *"}),i(m,{value:P,onValueChange:e=>H(e),children:[e(v,{id:"skill",className:"mt-1",children:e(p,{})}),i(u,{children:[e(g,{value:"LISTENING",children:"Listening"}),e(g,{value:"READING",children:"Reading"}),e(g,{value:"WRITING",children:"Writing"}),e(g,{value:"SPEAKING",children:"Speaking"})]})]})]})]}),i("div",{children:[e(c,{htmlFor:"category",children:"Chủ đề"}),e(a,{id:"category",value:K,onChange:e=>X(e.target.value),placeholder:"VD: Daily Life, Business, Academic...",className:"mt-1"})]}),i("div",{children:[e(c,{children:"Tags"}),i("div",{className:"mt-1 flex gap-2",children:[e(a,{value:W,onChange:e=>J(e.target.value),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),ce())},placeholder:"Nhập tag và Enter..."}),e(n,{type:"button",onClick:ce,size:"sm",children:e(y,{className:"h-4 w-4"})})]}),q.length>0&&e("div",{className:"mt-2 flex flex-wrap gap-2",children:q.map(l=>i(N,{variant:"secondary",className:"pr-1",children:[l,e("button",{onClick:()=>{return e=l,void Q(q.filter(i=>i!==e));var e},className:"ml-1 rounded-full p-0.5 hover:bg-gray-300",children:e(b,{className:"h-3 w-3"})})]},l))})]}),i("div",{className:"flex items-center space-x-2",children:[e(f,{id:"allowShuffle",checked:Y,onCheckedChange:e=>Z(e)}),e(c,{htmlFor:"allowShuffle",className:"text-sm font-normal",children:"Cho phép xáo trộn thứ tự câu hỏi trong nhóm"})]})]})]}),2===F&&R&&i(t,{children:[i(s,{children:[i(o,{className:"flex items-center gap-2",children:[(i=>{switch(i){case"READING_PASSAGE":default:return e(w,{className:"h-5 w-5"});case"LISTENING_AUDIO":return e(E,{className:"h-5 w-5"});case"LISTENING_VIDEO":return e(A,{className:"h-5 w-5"});case"IMAGE_BASED":return e(S,{className:"h-5 w-5"})}})(R),"Bước 2: Nội dung chung - ",(ue=R,{READING_PASSAGE:"Đọc hiểu - Đoạn văn",LISTENING_AUDIO:"Nghe - Audio/Hội thoại",LISTENING_VIDEO:"Nghe - Video",IMAGE_BASED:"Dựa vào hình ảnh",MIXED:"Kết hợp nhiều loại"}[ue]||ue)]}),e(h,{children:"Nhập nội dung chung mà tất cả câu hỏi trong nhóm sẽ sử dụng"})]}),i(d,{className:"space-y-4",children:[i("div",{children:[e(c,{htmlFor:"instructions",children:"Hướng dẫn chung *"}),e(r,{id:"instructions",value:$.instructions||"",onChange:e=>ee({...$,instructions:e.target.value}),placeholder:"VD: Hãy đọc đoạn văn sau và trả lời các câu hỏi...",className:"mt-1",rows:3})]}),("READING_PASSAGE"===R||"MIXED"===R)&&i("div",{className:"space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4",children:[e("h4",{className:"font-medium",children:"Đoạn văn đọc hiểu"}),i("div",{children:[e(c,{htmlFor:"passageTitle",children:"Tiêu đề đoạn văn"}),e(a,{id:"passageTitle",value:$.passageTitle||"",onChange:e=>ee({...$,passageTitle:e.target.value}),placeholder:"Tiêu đề của đoạn văn...",className:"mt-1"})]}),i("div",{children:[e(c,{htmlFor:"passage",children:"Nội dung đoạn văn"}),e(r,{id:"passage",value:$.passage||"",onChange:e=>ee({...$,passage:e.target.value}),placeholder:"Nhập nội dung đoạn văn đọc hiểu...",className:"mt-1",rows:8})]})]}),("LISTENING_AUDIO"===R||"MIXED"===R)&&i("div",{className:"space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4",children:[e("h4",{className:"font-medium",children:"Audio"}),i("div",{children:[e(c,{htmlFor:"audioUrl",children:"File âm thanh"}),i("div",{className:"mt-1 flex gap-2",children:[e(a,{id:"audioUrl",value:$.audioUrl||"",onChange:e=>ee({...$,audioUrl:e.target.value}),placeholder:"URL hoặc đường dẫn file âm thanh"}),e(n,{variant:"outline",size:"icon",children:e(C,{className:"h-4 w-4"})})]})]}),i("div",{children:[e(c,{htmlFor:"audioScript",children:"Transcript (bản ghi âm)"}),e(r,{id:"audioScript",value:$.audioScript||"",onChange:e=>ee({...$,audioScript:e.target.value}),placeholder:"Nội dung transcript của audio...",className:"mt-1",rows:5})]})]}),("LISTENING_VIDEO"===R||"MIXED"===R)&&i("div",{className:"space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4",children:[e("h4",{className:"font-medium",children:"Video"}),i("div",{children:[e(c,{htmlFor:"videoUrl",children:"File video"}),i("div",{className:"mt-1 flex gap-2",children:[e(a,{id:"videoUrl",value:$.videoUrl||"",onChange:e=>ee({...$,videoUrl:e.target.value}),placeholder:"URL hoặc đường dẫn file video"}),e(n,{variant:"outline",size:"icon",children:e(C,{className:"h-4 w-4"})})]})]}),i("div",{children:[e(c,{htmlFor:"videoScript",children:"Transcript video"}),e(r,{id:"videoScript",value:$.videoScript||"",onChange:e=>ee({...$,videoScript:e.target.value}),placeholder:"Nội dung transcript của video...",className:"mt-1",rows:5})]})]}),("IMAGE_BASED"===R||"MIXED"===R)&&i("div",{className:"space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4",children:[e("h4",{className:"font-medium",children:"Hình ảnh"}),i("div",{children:[e(c,{htmlFor:"imageUrl",children:"File hình ảnh"}),i("div",{className:"mt-1 flex gap-2",children:[e(a,{id:"imageUrl",value:$.imageUrl||"",onChange:e=>ee({...$,imageUrl:e.target.value}),placeholder:"URL hoặc đường dẫn file hình ảnh"}),e(n,{variant:"outline",size:"icon",children:e(C,{className:"h-4 w-4"})})]})]}),i("div",{children:[e(c,{htmlFor:"imageCaption",children:"Chú thích hình ảnh"}),e(a,{id:"imageCaption",value:$.imageCaption||"",onChange:e=>ee({...$,imageCaption:e.target.value}),placeholder:"Mô tả ngắn về hình ảnh...",className:"mt-1"})]})]})]})]}),3===F&&i("div",{className:"space-y-6",children:[i(t,{children:[i(s,{children:[e(o,{children:"Bước 3: Chọn câu hỏi"}),e(h,{children:"Chọn các câu hỏi thuộc nhóm này. Các câu hỏi sẽ chia sẻ context chung."})]}),i(d,{className:"space-y-4",children:[e("div",{children:e(a,{value:ne,onChange:e=>ae(e.target.value),placeholder:"Tìm kiếm câu hỏi...",className:"w-full"})}),e("div",{className:"max-h-[400px] space-y-2 overflow-y-auto rounded-lg border p-4",children:0===de.length?e("p",{className:"py-8 text-center text-sm text-gray-500",children:"Không có câu hỏi nào để chọn"}):de.map(l=>i("div",{className:"flex items-start gap-3 rounded-lg border p-3 hover:bg-gray-50",children:[e(f,{checked:ie.includes(l.id),onCheckedChange:()=>re(l.id)}),i("div",{className:"flex-1",children:[i("div",{className:"flex items-center gap-2",children:[e(N,{variant:"outline",children:l.type}),i(N,{children:[l.points," điểm"]}),e(N,{variant:"secondary",children:l.level})]}),e("p",{className:"mt-1 text-sm",children:l.content})]})]},l.id))})]})]}),he.length>0&&i(t,{children:[i(s,{children:[i(o,{children:["Câu hỏi đã chọn (",he.length," câu - Tổng ",se," điểm)"]}),e(h,{children:"Sắp xếp thứ tự câu hỏi bằng các nút mũi tên"})]}),e(d,{children:e("div",{className:"space-y-2",children:he.map((l,a)=>i("div",{className:"flex items-center gap-2 rounded-lg border bg-white p-3",children:[i("span",{className:"font-semibold text-gray-500",children:["#",a+1]}),i("div",{className:"flex-1",children:[i("div",{className:"flex items-center gap-2",children:[e(N,{variant:"outline",children:l.type}),i(N,{children:[l.points," điểm"]})]}),e("p",{className:"mt-1 text-sm",children:l.content})]}),i("div",{className:"flex gap-1",children:[e(n,{variant:"ghost",size:"icon",onClick:()=>te(a,"up"),disabled:0===a,children:e(x,{className:"h-4 w-4"})}),e(n,{variant:"ghost",size:"icon",onClick:()=>te(a,"down"),disabled:a===he.length-1,children:e(I,{className:"h-4 w-4"})}),e(n,{variant:"ghost",size:"icon",onClick:()=>re(l.id),children:e(b,{className:"h-4 w-4"})})]})]},l.id))})})]})]}),i("div",{className:"flex justify-between",children:[e("div",{children:F>1&&e(n,{variant:"outline",onClick:()=>U(F-1),children:"Quay lại"})}),i("div",{className:"flex gap-3",children:[e(n,{variant:"outline",onClick:k,children:"Hủy"}),e(n,F<3?{onClick:()=>U(F+1),disabled:1===F&&!oe||2===F&&!me,className:"bg-blue-500 hover:bg-blue-600",children:"Tiếp theo"}:{onClick:()=>{if(!_||!R||0===ie.length)return void D.error(G("common.questionGroup.create.fillInfo"));const e={name:_,description:M,type:R,context:$,level:j,skill:P,category:K||void 0,tags:q.length>0?q:void 0,allowShuffle:Y,questionIds:ie,questionCount:ie.length,totalPoints:se};T?.(e),D.success(G("common.questionGroup.create.success"))},className:"bg-blue-500 hover:bg-blue-600",children:"Lưu nhóm câu hỏi"})]})]})]});var ue}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button';
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import { Textarea } from '../../../components/ui/textarea';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../components/ui/select';
+import { Badge } from '../../../components/ui/badge';
+import { Checkbox } from '../../../components/ui/checkbox';
+import { Plus, X, Upload, MoveUp, MoveDown, FileText, Music, Video, Image as ImageIcon, } from 'lucide-react';
+import { toast } from 'sonner';
+import { t } from '../../../shared/lib/i18n';
+export function QuestionGroupCreator({ onSave, onCancel, availableQuestions = [], }) {
+    const [step, setStep] = useState(1);
+    // Step 1: Basic info
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [groupType, setGroupType] = useState('');
+    const [level, setLevel] = useState('A1');
+    const [skill, setSkill] = useState('READING');
+    const [category, setCategory] = useState('');
+    const [tags, setTags] = useState([]);
+    const [tagInput, setTagInput] = useState('');
+    const [allowShuffle, setAllowShuffle] = useState(false);
+    // Step 2: Context
+    const [context, setContext] = useState({
+        instructions: '',
+    });
+    // Step 3: Questions
+    const [selectedQuestionIds, setSelectedQuestionIds] = useState([]);
+    const [questionSearchQuery, setQuestionSearchQuery] = useState('');
+    const getGroupTypeLabel = (type) => {
+        const labels = {
+            READING_PASSAGE: 'Đọc hiểu - Đoạn văn',
+            LISTENING_AUDIO: 'Nghe - Audio/Hội thoại',
+            LISTENING_VIDEO: 'Nghe - Video',
+            IMAGE_BASED: 'Dựa vào hình ảnh',
+            MIXED: 'Kết hợp nhiều loại',
+        };
+        return labels[type] || type;
+    };
+    const getGroupTypeIcon = (type) => {
+        switch (type) {
+            case 'READING_PASSAGE':
+                return _jsx(FileText, { className: "h-5 w-5" });
+            case 'LISTENING_AUDIO':
+                return _jsx(Music, { className: "h-5 w-5" });
+            case 'LISTENING_VIDEO':
+                return _jsx(Video, { className: "h-5 w-5" });
+            case 'IMAGE_BASED':
+                return _jsx(ImageIcon, { className: "h-5 w-5" });
+            default:
+                return _jsx(FileText, { className: "h-5 w-5" });
+        }
+    };
+    const addTag = () => {
+        if (tagInput.trim() && !tags.includes(tagInput.trim())) {
+            setTags([...tags, tagInput.trim()]);
+            setTagInput('');
+        }
+    };
+    const removeTag = (tagToRemove) => {
+        setTags(tags.filter((tag) => tag !== tagToRemove));
+    };
+    const toggleQuestionSelection = (questionId) => {
+        if (selectedQuestionIds.includes(questionId)) {
+            setSelectedQuestionIds(selectedQuestionIds.filter((id) => id !== questionId));
+        }
+        else {
+            setSelectedQuestionIds([...selectedQuestionIds, questionId]);
+        }
+    };
+    const moveQuestion = (index, direction) => {
+        const newIds = [...selectedQuestionIds];
+        const newIndex = direction === 'up' ? index - 1 : index + 1;
+        if (newIndex >= 0 && newIndex < newIds.length) {
+            [newIds[index], newIds[newIndex]] = [newIds[newIndex], newIds[index]];
+            setSelectedQuestionIds(newIds);
+        }
+    };
+    const filteredQuestions = availableQuestions.filter((q) => q.content.toLowerCase().includes(questionSearchQuery.toLowerCase()) ||
+        q.type.toLowerCase().includes(questionSearchQuery.toLowerCase()));
+    const selectedQuestions = selectedQuestionIds
+        .map((id) => availableQuestions.find((q) => q.id === id))
+        .filter(Boolean);
+    const totalPoints = selectedQuestions.reduce((sum, q) => sum + q.points, 0);
+    const handleSave = () => {
+        if (!name || !groupType || selectedQuestionIds.length === 0) {
+            toast.error(t('common.questionGroup.create.fillInfo'));
+            return;
+        }
+        const groupData = {
+            name,
+            description,
+            type: groupType,
+            context,
+            level,
+            skill,
+            category: category || undefined,
+            tags: tags.length > 0 ? tags : undefined,
+            allowShuffle,
+            questionIds: selectedQuestionIds,
+            questionCount: selectedQuestionIds.length,
+            totalPoints,
+        };
+        onSave?.(groupData);
+        toast.success(t('common.questionGroup.create.success'));
+    };
+    const canProceedToStep2 = name && groupType;
+    const canProceedToStep3 = canProceedToStep2 && context.instructions;
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center justify-center space-x-4", children: [_jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-full ${step >= 1 ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500'}`, children: "1" }), _jsx("div", { className: `h-1 w-20 ${step >= 2 ? 'bg-blue-500' : 'bg-gray-200'}` }), _jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-full ${step >= 2 ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500'}`, children: "2" }), _jsx("div", { className: `h-1 w-20 ${step >= 3 ? 'bg-blue-500' : 'bg-gray-200'}` }), _jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-full ${step >= 3 ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500'}`, children: "3" })] }), step === 1 && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "B\u01B0\u1EDBc 1: Th\u00F4ng tin c\u01A1 b\u1EA3n" }), _jsx(CardDescription, { children: "Nh\u1EADp th\u00F4ng tin chung v\u1EC1 nh\u00F3m c\u00E2u h\u1ECFi" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "name", children: "T\u00EAn nh\u00F3m c\u00E2u h\u1ECFi *" }), _jsx(Input, { id: "name", value: name, onChange: (e) => setName(e.target.value), placeholder: "VD: TOEIC Part 3 - Conversation v\u1EC1 mua s\u1EAFm", className: "mt-1" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "description", children: "M\u00F4 t\u1EA3" }), _jsx(Textarea, { id: "description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "M\u00F4 t\u1EA3 ng\u1EAFn g\u1ECDn v\u1EC1 nh\u00F3m c\u00E2u h\u1ECFi n\u00E0y...", className: "mt-1", rows: 3 })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "groupType", children: "Lo\u1EA1i nh\u00F3m c\u00E2u h\u1ECFi *" }), _jsxs(Select, { value: groupType, onValueChange: (value) => setGroupType(value), children: [_jsx(SelectTrigger, { id: "groupType", className: "mt-1", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn lo\u1EA1i nh\u00F3m c\u00E2u h\u1ECFi" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "READING_PASSAGE", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "h-4 w-4" }), "\u0110\u1ECDc hi\u1EC3u - \u0110o\u1EA1n v\u0103n"] }) }), _jsx(SelectItem, { value: "LISTENING_AUDIO", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Music, { className: "h-4 w-4" }), "Nghe - Audio/H\u1ED9i tho\u1EA1i"] }) }), _jsx(SelectItem, { value: "LISTENING_VIDEO", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Video, { className: "h-4 w-4" }), "Nghe - Video"] }) }), _jsx(SelectItem, { value: "IMAGE_BASED", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4" }), "D\u1EF1a v\u00E0o h\u00ECnh \u1EA3nh"] }) }), _jsx(SelectItem, { value: "MIXED", children: "K\u1EBFt h\u1EE3p nhi\u1EC1u lo\u1EA1i" })] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "level", children: "C\u1EA5p \u0111\u1ED9 *" }), _jsxs(Select, { value: level, onValueChange: (value) => setLevel(value), children: [_jsx(SelectTrigger, { id: "level", className: "mt-1", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "A1", children: "A1" }), _jsx(SelectItem, { value: "A2", children: "A2" }), _jsx(SelectItem, { value: "B1", children: "B1" }), _jsx(SelectItem, { value: "B2", children: "B2" }), _jsx(SelectItem, { value: "C1", children: "C1" }), _jsx(SelectItem, { value: "C2", children: "C2" })] })] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "skill", children: "K\u1EF9 n\u0103ng *" }), _jsxs(Select, { value: skill, onValueChange: (value) => setSkill(value), children: [_jsx(SelectTrigger, { id: "skill", className: "mt-1", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "LISTENING", children: "Listening" }), _jsx(SelectItem, { value: "READING", children: "Reading" }), _jsx(SelectItem, { value: "WRITING", children: "Writing" }), _jsx(SelectItem, { value: "SPEAKING", children: "Speaking" })] })] })] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "category", children: "Ch\u1EE7 \u0111\u1EC1" }), _jsx(Input, { id: "category", value: category, onChange: (e) => setCategory(e.target.value), placeholder: "VD: Daily Life, Business, Academic...", className: "mt-1" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Tags" }), _jsxs("div", { className: "mt-1 flex gap-2", children: [_jsx(Input, { value: tagInput, onChange: (e) => setTagInput(e.target.value), onKeyDown: (e) => {
+                                                    if (e.key === 'Enter') {
+                                                        e.preventDefault();
+                                                        addTag();
+                                                    }
+                                                }, placeholder: "Nh\u1EADp tag v\u00E0 Enter..." }), _jsx(Button, { type: "button", onClick: addTag, size: "sm", children: _jsx(Plus, { className: "h-4 w-4" }) })] }), tags.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: tags.map((tag) => (_jsxs(Badge, { variant: "secondary", className: "pr-1", children: [tag, _jsx("button", { onClick: () => removeTag(tag), className: "ml-1 rounded-full p-0.5 hover:bg-gray-300", children: _jsx(X, { className: "h-3 w-3" }) })] }, tag))) }))] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "allowShuffle", checked: allowShuffle, onCheckedChange: (checked) => setAllowShuffle(checked) }), _jsx(Label, { htmlFor: "allowShuffle", className: "text-sm font-normal", children: "Cho ph\u00E9p x\u00E1o tr\u1ED9n th\u1EE9 t\u1EF1 c\u00E2u h\u1ECFi trong nh\u00F3m" })] })] })] })), step === 2 && groupType && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [getGroupTypeIcon(groupType), "B\u01B0\u1EDBc 2: N\u1ED9i dung chung - ", getGroupTypeLabel(groupType)] }), _jsx(CardDescription, { children: "Nh\u1EADp n\u1ED9i dung chung m\u00E0 t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong nh\u00F3m s\u1EBD s\u1EED d\u1EE5ng" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "instructions", children: "H\u01B0\u1EDBng d\u1EABn chung *" }), _jsx(Textarea, { id: "instructions", value: context.instructions || '', onChange: (e) => setContext({ ...context, instructions: e.target.value }), placeholder: "VD: H\u00E3y \u0111\u1ECDc \u0111o\u1EA1n v\u0103n sau v\u00E0 tr\u1EA3 l\u1EDDi c\u00E1c c\u00E2u h\u1ECFi...", className: "mt-1", rows: 3 })] }), (groupType === 'READING_PASSAGE' || groupType === 'MIXED') && (_jsxs("div", { className: "space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4", children: [_jsx("h4", { className: "font-medium", children: "\u0110o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u" }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "passageTitle", children: "Ti\u00EAu \u0111\u1EC1 \u0111o\u1EA1n v\u0103n" }), _jsx(Input, { id: "passageTitle", value: context.passageTitle || '', onChange: (e) => setContext({ ...context, passageTitle: e.target.value }), placeholder: "Ti\u00EAu \u0111\u1EC1 c\u1EE7a \u0111o\u1EA1n v\u0103n...", className: "mt-1" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "passage", children: "N\u1ED9i dung \u0111o\u1EA1n v\u0103n" }), _jsx(Textarea, { id: "passage", value: context.passage || '', onChange: (e) => setContext({ ...context, passage: e.target.value }), placeholder: "Nh\u1EADp n\u1ED9i dung \u0111o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u...", className: "mt-1", rows: 8 })] })] })), (groupType === 'LISTENING_AUDIO' || groupType === 'MIXED') && (_jsxs("div", { className: "space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4", children: [_jsx("h4", { className: "font-medium", children: "Audio" }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "audioUrl", children: "File \u00E2m thanh" }), _jsxs("div", { className: "mt-1 flex gap-2", children: [_jsx(Input, { id: "audioUrl", value: context.audioUrl || '', onChange: (e) => setContext({ ...context, audioUrl: e.target.value }), placeholder: "URL ho\u1EB7c \u0111\u01B0\u1EDDng d\u1EABn file \u00E2m thanh" }), _jsx(Button, { variant: "outline", size: "icon", children: _jsx(Upload, { className: "h-4 w-4" }) })] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "audioScript", children: "Transcript (b\u1EA3n ghi \u00E2m)" }), _jsx(Textarea, { id: "audioScript", value: context.audioScript || '', onChange: (e) => setContext({ ...context, audioScript: e.target.value }), placeholder: "N\u1ED9i dung transcript c\u1EE7a audio...", className: "mt-1", rows: 5 })] })] })), (groupType === 'LISTENING_VIDEO' || groupType === 'MIXED') && (_jsxs("div", { className: "space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4", children: [_jsx("h4", { className: "font-medium", children: "Video" }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "videoUrl", children: "File video" }), _jsxs("div", { className: "mt-1 flex gap-2", children: [_jsx(Input, { id: "videoUrl", value: context.videoUrl || '', onChange: (e) => setContext({ ...context, videoUrl: e.target.value }), placeholder: "URL ho\u1EB7c \u0111\u01B0\u1EDDng d\u1EABn file video" }), _jsx(Button, { variant: "outline", size: "icon", children: _jsx(Upload, { className: "h-4 w-4" }) })] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "videoScript", children: "Transcript video" }), _jsx(Textarea, { id: "videoScript", value: context.videoScript || '', onChange: (e) => setContext({ ...context, videoScript: e.target.value }), placeholder: "N\u1ED9i dung transcript c\u1EE7a video...", className: "mt-1", rows: 5 })] })] })), (groupType === 'IMAGE_BASED' || groupType === 'MIXED') && (_jsxs("div", { className: "space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4", children: [_jsx("h4", { className: "font-medium", children: "H\u00ECnh \u1EA3nh" }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "imageUrl", children: "File h\u00ECnh \u1EA3nh" }), _jsxs("div", { className: "mt-1 flex gap-2", children: [_jsx(Input, { id: "imageUrl", value: context.imageUrl || '', onChange: (e) => setContext({ ...context, imageUrl: e.target.value }), placeholder: "URL ho\u1EB7c \u0111\u01B0\u1EDDng d\u1EABn file h\u00ECnh \u1EA3nh" }), _jsx(Button, { variant: "outline", size: "icon", children: _jsx(Upload, { className: "h-4 w-4" }) })] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "imageCaption", children: "Ch\u00FA th\u00EDch h\u00ECnh \u1EA3nh" }), _jsx(Input, { id: "imageCaption", value: context.imageCaption || '', onChange: (e) => setContext({ ...context, imageCaption: e.target.value }), placeholder: "M\u00F4 t\u1EA3 ng\u1EAFn v\u1EC1 h\u00ECnh \u1EA3nh...", className: "mt-1" })] })] }))] })] })), step === 3 && (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "B\u01B0\u1EDBc 3: Ch\u1ECDn c\u00E2u h\u1ECFi" }), _jsx(CardDescription, { children: "Ch\u1ECDn c\u00E1c c\u00E2u h\u1ECFi thu\u1ED9c nh\u00F3m n\u00E0y. C\u00E1c c\u00E2u h\u1ECFi s\u1EBD chia s\u1EBB context chung." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("div", { children: _jsx(Input, { value: questionSearchQuery, onChange: (e) => setQuestionSearchQuery(e.target.value), placeholder: "T\u00ECm ki\u1EBFm c\u00E2u h\u1ECFi...", className: "w-full" }) }), _jsx("div", { className: "max-h-[400px] space-y-2 overflow-y-auto rounded-lg border p-4", children: filteredQuestions.length === 0 ? (_jsx("p", { className: "py-8 text-center text-sm text-gray-500", children: "Kh\u00F4ng c\u00F3 c\u00E2u h\u1ECFi n\u00E0o \u0111\u1EC3 ch\u1ECDn" })) : (filteredQuestions.map((question) => (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border p-3 hover:bg-gray-50", children: [_jsx(Checkbox, { checked: selectedQuestionIds.includes(question.id), onCheckedChange: () => toggleQuestionSelection(question.id) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: question.type }), _jsxs(Badge, { children: [question.points, " \u0111i\u1EC3m"] }), _jsx(Badge, { variant: "secondary", children: question.level })] }), _jsx("p", { className: "mt-1 text-sm", children: question.content })] })] }, question.id)))) })] })] }), selectedQuestions.length > 0 && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: ["C\u00E2u h\u1ECFi \u0111\u00E3 ch\u1ECDn (", selectedQuestions.length, " c\u00E2u - T\u1ED5ng ", totalPoints, " \u0111i\u1EC3m)"] }), _jsx(CardDescription, { children: "S\u1EAFp x\u1EBFp th\u1EE9 t\u1EF1 c\u00E2u h\u1ECFi b\u1EB1ng c\u00E1c n\u00FAt m\u0169i t\u00EAn" })] }), _jsx(CardContent, { children: _jsx("div", { className: "space-y-2", children: selectedQuestions.map((question, index) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-white p-3", children: [_jsxs("span", { className: "font-semibold text-gray-500", children: ["#", index + 1] }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: question.type }), _jsxs(Badge, { children: [question.points, " \u0111i\u1EC3m"] })] }), _jsx("p", { className: "mt-1 text-sm", children: question.content })] }), _jsxs("div", { className: "flex gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => moveQuestion(index, 'up'), disabled: index === 0, children: _jsx(MoveUp, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => moveQuestion(index, 'down'), disabled: index === selectedQuestions.length - 1, children: _jsx(MoveDown, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => toggleQuestionSelection(question.id), children: _jsx(X, { className: "h-4 w-4" }) })] })] }, question.id))) }) })] }))] })), _jsxs("div", { className: "flex justify-between", children: [_jsx("div", { children: step > 1 && (_jsx(Button, { variant: "outline", onClick: () => setStep(step - 1), children: "Quay l\u1EA1i" })) }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { variant: "outline", onClick: onCancel, children: "H\u1EE7y" }), step < 3 ? (_jsx(Button, { onClick: () => setStep(step + 1), disabled: (step === 1 && !canProceedToStep2) || (step === 2 && !canProceedToStep3), className: "bg-blue-500 hover:bg-blue-600", children: "Ti\u1EBFp theo" })) : (_jsx(Button, { onClick: handleSave, className: "bg-blue-500 hover:bg-blue-600", children: "L\u01B0u nh\u00F3m c\u00E2u h\u1ECFi" }))] })] })] }));
+}

package/dist/components/questions/creator/dedicated-component-router.js

@@ -1 +1,79 @@
-import{jsx as e}from"react/jsx-runtime";import{questionTypeRegistry as n}from"./question-type-registry";export function renderDedicatedComponent(t){const{questionType:a,initialData:o,state:r,onSave:i,onCancel:s,onChange:u,onUnsavedChangesChange:l,externalErrors:g,optionCount:p,optionMode:d,defaultValue:f,defaultQuestion:C,viewMode:c,groups:h,groupConfig:x,groupType:v,articleCount:w,questionConfig:y,questionIndexInPart:m,partId:I,validationRef:E,suggestedAnswers:q,hasSuggestedAnswers:D,headerExtra:S}=t,A=n[a];if(!A)return null;const M={questionType:a,initialData:o,state:r,onSave:i,onCancel:s,onChange:u,onUnsavedChangesChange:l,externalErrors:g,optionCount:p,optionMode:d,defaultValue:f,defaultQuestion:C,viewMode:c,groups:h,groupConfig:x,groupType:v,articleCount:w,questionConfig:y,questionIndexInPart:m,partId:I,validationRef:E,suggestedAnswers:q,hasSuggestedAnswers:D,headerExtra:S},P={content:r.content,points:r.points,level:r.level,difficulty:r.difficulty,skill:r.skill},T={initialData:A.transformInitialData?A.transformInitialData(o,M):A.useRawInitialData?o:o?.answer,onCancel:s,...g&&{externalErrors:g},...S&&{headerExtra:S},...x&&{groupConfig:x}};A.getExtraProps&&Object.assign(T,A.getExtraProps(M));const j=A.wrapOnSave||(e=>({type:a,...P,answer:e})),O=A.wrapOnChange||(e=>({type:a,...P,answer:e})),R=A.component;return e(R,{...T,onSave:e=>{i?.(j(e,M))},onChange:e=>{u?.(O(e,M))}})}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { questionTypeRegistry } from './question-type-registry';
+export function renderDedicatedComponent(props) {
+    const { questionType, initialData, state, onSave, onCancel, onChange, onUnsavedChangesChange, externalErrors, optionCount, optionMode, defaultValue, defaultQuestion, viewMode, groups, groupConfig, groupType, articleCount, questionConfig, questionIndexInPart, partId, validationRef, suggestedAnswers, hasSuggestedAnswers, headerExtra, } = props;
+    const registration = questionTypeRegistry[questionType];
+    if (!registration)
+        return null;
+    const ctx = {
+        questionType,
+        initialData,
+        state,
+        onSave,
+        onCancel,
+        onChange,
+        onUnsavedChangesChange,
+        externalErrors,
+        optionCount,
+        optionMode,
+        defaultValue,
+        defaultQuestion,
+        viewMode,
+        groups,
+        groupConfig,
+        groupType,
+        articleCount,
+        questionConfig,
+        questionIndexInPart,
+        partId,
+        validationRef,
+        suggestedAnswers,
+        hasSuggestedAnswers,
+        headerExtra,
+    };
+    const questionData = {
+        content: state.content,
+        points: state.points,
+        level: state.level,
+        difficulty: state.difficulty,
+        skill: state.skill,
+    };
+    // Build initialData for the component
+    const componentInitialData = registration.transformInitialData
+        ? registration.transformInitialData(initialData, ctx)
+        : registration.useRawInitialData
+            ? initialData
+            : initialData?.answer;
+    // Build common props
+    const commonProps = {
+        initialData: componentInitialData,
+        onCancel,
+        ...(externalErrors && { externalErrors }),
+        ...(headerExtra && { headerExtra }),
+        ...(groupConfig && { groupConfig }),
+    };
+    // Add extra props from registration
+    if (registration.getExtraProps) {
+        Object.assign(commonProps, registration.getExtraProps(ctx));
+    }
+    // Default onSave wrapper
+    const defaultWrapSave = (data) => ({
+        type: questionType,
+        ...questionData,
+        answer: data,
+    });
+    // Default onChange wrapper
+    const defaultWrapChange = (data) => ({
+        type: questionType,
+        ...questionData,
+        answer: data,
+    });
+    const wrapSave = registration.wrapOnSave || defaultWrapSave;
+    const wrapChange = registration.wrapOnChange || defaultWrapChange;
+    const Component = registration.component;
+    return (_jsx(Component, { ...commonProps, onSave: (data) => {
+            onSave?.(wrapSave(data, ctx));
+        }, onChange: (data) => {
+            onChange?.(wrapChange(data, ctx));
+        } }));
+}

package/dist/components/questions/creator/index.js

@@ -1 +1,3 @@
-export{QuestionCreator}from"./QuestionCreator";export{QuestionGroupCreator}from"./QuestionGroupCreator";export{renderDedicatedComponent}from"./dedicated-component-router";
+export { QuestionCreator } from './QuestionCreator';
+export { QuestionGroupCreator } from './QuestionGroupCreator';
+export { renderDedicatedComponent } from './dedicated-component-router';