@tinyweb_dev/oe-exam-sdk 1.0.0 → 1.0.1

package/dist/components/questions/question-bank/QuestionBankPickerDialog.js

@@ -0,0 +1,209 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Library, Loader2, Search } from 'lucide-react';
+import { Button } from '../../../components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../../components/ui/dialog';
+import { Input } from '../../../components/ui/input';
+import { FilterSelect, mergeFilterOptions, toStringOptions, } from './question-bank-picker.utils';
+import { QuestionBankPickerRow } from './QuestionBankPickerRow';
+const PAGE_SIZE = 20;
+const EMPTY_FILTERS = {
+    questionTypes: [],
+    books: [],
+    units: [],
+    lessons: [],
+};
+/**
+ * Multi-select bank picker. Cascade filters use stable meta ids:
+ * bookId → unitId → lessonId (labels from meta.*Name).
+ * Default lesson scope = session lessonIds when dropdown is "Tất cả".
+ */
+export function QuestionBankPickerDialog({ open, onOpenChange, searchQuestions, getQuestionFilters, defaultFilters, lessonSuggestions = [], onConfirm, title = 'Chọn từ ngân hàng câu hỏi', description = 'Lọc theo sách / unit / lesson rồi chọn một hoặc nhiều câu.', confirmLabel = 'Thêm vào đề', }) {
+    const [bookId, setBookId] = useState('');
+    const [unitId, setUnitId] = useState('');
+    const [lessonId, setLessonId] = useState('');
+    const [questionType, setQuestionType] = useState('');
+    const [keyword, setKeyword] = useState('');
+    const [debouncedKeyword, setDebouncedKeyword] = useState('');
+    const [page, setPage] = useState(1);
+    const [items, setItems] = useState([]);
+    const [totalItems, setTotalItems] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [filtersLoading, setFiltersLoading] = useState(false);
+    const [filterOptions, setFilterOptions] = useState(EMPTY_FILTERS);
+    const [selected, setSelected] = useState(new Map());
+    const [error, setError] = useState(null);
+    const sessionLessonIds = useMemo(() => {
+        const fromDefault = (defaultFilters?.lessonIds ?? [])
+            .map((id) => id.trim())
+            .filter(Boolean);
+        if (fromDefault.length > 0)
+            return [...new Set(fromDefault)];
+        const fromSuggestions = lessonSuggestions
+            .map((s) => s.lessonId?.trim() || s.lesson?.trim() || '')
+            .filter(Boolean);
+        return [...new Set(fromSuggestions)];
+    }, [defaultFilters?.lessonIds, lessonSuggestions]);
+    const sessionLessonOptions = useMemo(() => {
+        const out = [];
+        const seen = new Set();
+        for (const s of lessonSuggestions) {
+            const id = s.lessonId?.trim() || s.lesson?.trim() || '';
+            if (!id || seen.has(id))
+                continue;
+            seen.add(id);
+            out.push({ id, name: s.label?.trim() || id });
+        }
+        for (const id of sessionLessonIds) {
+            if (seen.has(id))
+                continue;
+            seen.add(id);
+            out.push({ id, name: id });
+        }
+        return out;
+    }, [lessonSuggestions, sessionLessonIds]);
+    // Prefill when dialog opens. Lesson/type empty = "Tất cả" (session lessons for search).
+    useEffect(() => {
+        if (!open)
+            return;
+        setBookId(defaultFilters?.bookId?.trim() ?? '');
+        setUnitId(defaultFilters?.unitId?.trim() ?? '');
+        setLessonId(defaultFilters?.lessonId?.trim() ?? '');
+        setQuestionType(defaultFilters?.questionType?.trim() ?? '');
+        setKeyword('');
+        setDebouncedKeyword('');
+        setPage(1);
+        setSelected(new Map());
+        setError(null);
+    }, [
+        open,
+        defaultFilters?.bookId,
+        defaultFilters?.unitId,
+        defaultFilters?.lessonId,
+        defaultFilters?.questionType,
+    ]);
+    useEffect(() => {
+        const timer = window.setTimeout(() => setDebouncedKeyword(keyword.trim()), 300);
+        return () => window.clearTimeout(timer);
+    }, [keyword]);
+    // Cascade options: bookId → units; bookId+unitId → lessons.
+    useEffect(() => {
+        if (!open || !getQuestionFilters)
+            return;
+        let ignore = false;
+        setFiltersLoading(true);
+        void getQuestionFilters({
+            bookId: bookId || undefined,
+            unitId: unitId || undefined,
+        })
+            .then((result) => {
+            if (ignore)
+                return;
+            setFilterOptions(result);
+        })
+            .catch(() => {
+            if (!ignore)
+                setFilterOptions(EMPTY_FILTERS);
+        })
+            .finally(() => {
+            if (!ignore)
+                setFiltersLoading(false);
+        });
+        return () => {
+            ignore = true;
+        };
+    }, [open, getQuestionFilters, bookId, unitId]);
+    const lessonSelectOptions = useMemo(() => {
+        // BTVN session: only lessons taught that day — do not list the whole unit.
+        const base = sessionLessonOptions.length > 0
+            ? sessionLessonOptions
+            : filterOptions.lessons;
+        return mergeFilterOptions(base, lessonId);
+    }, [sessionLessonOptions, filterOptions.lessons, lessonId]);
+    // Search by meta ids. When lesson = Tất cả and session has lessons → IN lessonIds.
+    useEffect(() => {
+        if (!open)
+            return;
+        let ignore = false;
+        setLoading(true);
+        setError(null);
+        const singleLesson = lessonId.trim();
+        const multiLessons = !singleLesson && sessionLessonIds.length > 0 ? sessionLessonIds : undefined;
+        void searchQuestions({
+            questionType: (questionType || undefined),
+            keyword: debouncedKeyword || undefined,
+            bookId: bookId.trim() || undefined,
+            unitId: unitId.trim() || undefined,
+            lessonId: singleLesson || undefined,
+            lessonIds: multiLessons,
+            page,
+            size: PAGE_SIZE,
+        })
+            .then((result) => {
+            if (ignore)
+                return;
+            setItems(result.data ?? []);
+            setTotalItems(result.meta?.totalItems ?? result.data?.length ?? 0);
+        })
+            .catch((err) => {
+            if (ignore)
+                return;
+            setItems([]);
+            setTotalItems(0);
+            setError(err instanceof Error ? err.message : 'Không tải được ngân hàng câu hỏi');
+        })
+            .finally(() => {
+            if (!ignore)
+                setLoading(false);
+        });
+        return () => {
+            ignore = true;
+        };
+    }, [
+        open,
+        searchQuestions,
+        questionType,
+        debouncedKeyword,
+        bookId,
+        unitId,
+        lessonId,
+        sessionLessonIds,
+        page,
+    ]);
+    const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
+    const questionTypeOptions = useMemo(() => toStringOptions(filterOptions.questionTypes), [filterOptions.questionTypes]);
+    const toggleItem = useCallback((item) => {
+        setSelected((prev) => {
+            const next = new Map(prev);
+            if (next.has(item.id))
+                next.delete(item.id);
+            else
+                next.set(item.id, item);
+            return next;
+        });
+    }, []);
+    const handleConfirm = () => {
+        onConfirm(Array.from(selected.values()));
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "flex h-[min(92vh,880px)] w-[min(96vw,920px)] max-w-4xl flex-col gap-0 overflow-hidden p-0", children: [_jsxs(DialogHeader, { className: "shrink-0 border-b border-gray-100 px-5 py-4", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(Library, { className: "h-5 w-5 text-blue-600" }), title] }), _jsx(DialogDescription, { className: "text-xs text-gray-500", children: description })] }), _jsxs("div", { className: "shrink-0 space-y-3 border-b border-gray-100 bg-slate-50/70 px-5 py-3", children: [_jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-4", children: [_jsx(FilterSelect, { label: "S\u00E1ch", value: bookId, options: filterOptions.books, selectedLabel: defaultFilters?.bookLabel, onChange: (v) => {
+                                        setBookId(v);
+                                        setUnitId('');
+                                        setLessonId('');
+                                        setPage(1);
+                                    }, disabled: filtersLoading }), _jsx(FilterSelect, { label: "Unit", value: unitId, options: filterOptions.units, selectedLabel: defaultFilters?.unitLabel, onChange: (v) => {
+                                        setUnitId(v);
+                                        setLessonId('');
+                                        setPage(1);
+                                    }, disabled: filtersLoading || !bookId }), _jsx(FilterSelect, { label: "Lesson", value: lessonId, options: lessonSelectOptions, onChange: (v) => {
+                                        setLessonId(v);
+                                        setPage(1);
+                                    }, disabled: filtersLoading }), _jsx(FilterSelect, { label: "Lo\u1EA1i c\u00E2u", value: questionType, options: questionTypeOptions, onChange: (v) => {
+                                        setQuestionType(v);
+                                        setPage(1);
+                                    }, disabled: filtersLoading })] }), sessionLessonIds.length > 0 && !lessonId ? (_jsxs("p", { className: "text-[11px] text-slate-600", children: ["\u0110ang l\u1ECDc ", sessionLessonIds.length, " lesson trong bu\u1ED5i (T\u1EA5t c\u1EA3)."] })) : null, _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-gray-400" }), _jsx(Input, { value: keyword, onChange: (e) => {
+                                        setKeyword(e.target.value);
+                                        setPage(1);
+                                    }, placeholder: "T\u00ECm theo m\u00E3 / ti\u00EAu \u0111\u1EC1\u2026", className: "h-9 pl-8" })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-2", children: loading ? (_jsxs("div", { className: "flex items-center justify-center gap-2 py-16 text-sm text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "\u0110ang t\u1EA3i\u2026"] })) : error ? (_jsx("p", { className: "px-2 py-12 text-center text-sm text-red-600", children: error })) : items.length === 0 ? (_jsx("p", { className: "px-2 py-12 text-center text-sm text-gray-500", children: "Kh\u00F4ng c\u00F3 c\u00E2u h\u1ECFi kh\u1EDBp b\u1ED9 l\u1ECDc" })) : (_jsx("ul", { className: "space-y-1.5 pb-2", children: items.map((item) => (_jsx(QuestionBankPickerRow, { item: item, selected: selected.has(item.id), onToggle: toggleItem }, item.id))) })) }), _jsxs("div", { className: "flex shrink-0 items-center justify-between gap-2 border-t border-gray-100 px-5 py-2 text-xs text-gray-500", children: [_jsxs("span", { children: [totalItems, " c\u00E2u \u00B7 \u0111\u00E3 ch\u1ECDn ", selected.size] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: page <= 1 || loading, onClick: () => setPage((p) => Math.max(1, p - 1)), children: "Tr\u01B0\u1EDBc" }), _jsxs("span", { className: "px-2", children: [page, "/", totalPages] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: page >= totalPages || loading, onClick: () => setPage((p) => p + 1), children: "Sau" })] })] }), _jsxs(DialogFooter, { className: "shrink-0 border-t border-gray-100 bg-gray-50/80 px-5 py-3", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "H\u1EE7y" }), _jsxs(Button, { type: "button", disabled: selected.size === 0, onClick: handleConfirm, children: [confirmLabel, selected.size > 0 ? ` (${selected.size})` : ''] })] })] }) }));
+}

package/dist/components/questions/question-bank/QuestionBankPickerRow.d.ts

@@ -0,0 +1,9 @@
+import type { QuestionSearchItem } from '../../../api/exam-questions.types';
+type QuestionBankPickerRowProps = {
+    item: QuestionSearchItem;
+    selected: boolean;
+    onToggle: (item: QuestionSearchItem) => void;
+};
+/** One multi-select row in the bank picker list. */
+export declare function QuestionBankPickerRow({ item, selected, onToggle, }: QuestionBankPickerRowProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/question-bank/QuestionBankPickerRow.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { Badge } from '../../../components/ui/badge';
+import { Checkbox } from '../../../components/ui/checkbox';
+import { cn } from '../../../shared/lib/utils';
+import { difficultyBadge, MediaHints, previewText, primaryDisplayText, provenanceFooterText, questionTypeLabel, QuestionTypeIcon, subItemCount, } from './question-bank-picker.utils';
+/** One multi-select row in the bank picker list. */
+export function QuestionBankPickerRow({ item, selected, onToggle, }) {
+    const difficulty = difficultyBadge(item.difficulty);
+    const subCount = subItemCount(item);
+    const typeName = String(item.questionType);
+    const heading = primaryDisplayText(item);
+    const body = previewText(item);
+    const showBody = body !== '—' && body !== heading;
+    const provenance = provenanceFooterText(item);
+    return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onToggle(item), className: cn('flex w-full items-start gap-3 rounded-xl border px-3 py-2.5 text-left transition-colors', selected
+                ? 'border-blue-300 bg-blue-50/80 ring-1 ring-blue-200'
+                : 'border-gray-200 bg-white hover:border-blue-200 hover:bg-slate-50'), children: [_jsx(Checkbox, { checked: selected, onCheckedChange: () => onToggle(item), className: "mt-0.5", onClick: (e) => e.stopPropagation() }), _jsx("div", { className: cn('mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg', selected ? 'bg-blue-100' : 'bg-slate-100'), children: _jsx(QuestionTypeIcon, { type: typeName }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("p", { className: "line-clamp-2 min-w-0 flex-1 text-sm font-medium leading-snug text-gray-900", children: heading }), _jsx(MediaHints, { item: item })] }), showBody ? (_jsx("p", { className: "line-clamp-3 text-xs leading-relaxed text-gray-600", children: body })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 pt-0.5", children: [_jsx(Badge, { variant: "secondary", className: "text-[10px] font-normal text-gray-600", children: questionTypeLabel(typeName) }), difficulty ? (_jsx(Badge, { variant: "outline", className: cn('text-[10px] font-normal', difficulty.className), children: difficulty.label })) : null, item.skill ? (_jsx(Badge, { variant: "outline", className: "text-[10px] font-normal capitalize", children: item.skill.toLowerCase() })) : null, subCount ? (_jsxs(Badge, { variant: "outline", className: "text-[10px] font-normal", children: [subCount, " c\u00E2u con"] })) : null, provenance ? (_jsx("span", { className: "ml-auto max-w-[55%] truncate text-right text-[10px] font-medium text-gray-600", title: provenance, children: provenance })) : null] })] }), selected ? _jsx(Check, { className: "mt-0.5 h-4 w-4 shrink-0 text-blue-600" }) : null] }) }));
+}

package/dist/components/questions/question-bank/index.d.ts

@@ -1,4 +1,5 @@
 export { EditQuestionBankDialog } from './EditQuestionBankDialog';
 export { QuestionEditorRenderer, QuestionBankEditorType } from './QuestionEditorRenderer';
+export { QuestionBankPickerDialog, type QuestionBankLessonSuggestion, type QuestionBankPickerDefaultFilters, type QuestionBankPickerDialogProps, } from './QuestionBankPickerDialog';
 export { DifficultyLevel, DIFFICULTY_LEVELS, parseDifficultyLevel } from './difficulty';
 export type { EditQuestionBankDialogProps, QuestionBankEditItem, QuestionEditorChangeData, QuestionEditorRendererProps, SkillType, UpdateQuestionBankDto, } from './types';

package/dist/components/questions/question-bank/index.js

@@ -1,3 +1,4 @@
 export { EditQuestionBankDialog } from './EditQuestionBankDialog';
 export { QuestionEditorRenderer, QuestionBankEditorType } from './QuestionEditorRenderer';
+export { QuestionBankPickerDialog, } from './QuestionBankPickerDialog';
 export { DifficultyLevel, DIFFICULTY_LEVELS, parseDifficultyLevel } from './difficulty';

package/dist/components/questions/question-bank/question-bank-picker.utils.d.ts

@@ -0,0 +1,55 @@
+import type { QuestionBankFilterOption, QuestionSearchItem } from '../../../api/exam-questions.types';
+export declare const QUESTION_BANK_FILTER_ALL_VALUE = "__all__";
+/** Keep selected id visible even before cascade options finish loading. */
+export declare function mergeFilterOptions(options: QuestionBankFilterOption[], selectedId: string, selectedLabel?: string): QuestionBankFilterOption[];
+export declare function FilterSelect({ label, value, options, onChange, disabled, selectedLabel, }: {
+    label: string;
+    /** Selected option id (or questionType string). */
+    value: string;
+    options: QuestionBankFilterOption[];
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    /** Display label when value is not yet in options (prefill). */
+    selectedLabel?: string;
+}): import("react").JSX.Element;
+/** Map plain string list (e.g. questionTypes) → FilterSelect options. */
+export declare function toStringOptions(values: string[]): QuestionBankFilterOption[];
+export declare function questionTypeLabel(type: string): string;
+/** Icon + tint per question type family — quick visual scanning in lists. */
+export declare function QuestionTypeIcon({ type }: {
+    type: string;
+}): import("react").JSX.Element;
+export declare enum QuestionDifficulty {
+    EASY = "EASY",
+    MEDIUM = "MEDIUM",
+    HARD = "HARD"
+}
+export declare function difficultyBadge(raw?: string): {
+    label: string;
+    className: string;
+} | null;
+/** Strip HTML tags / entities so list rows show readable text, not markup. */
+export declare function stripHtmlToText(raw: string): string;
+/**
+ * Human-readable preview for bank list rows.
+ * Handles Pearson HTML (`content.content`), group items, options-only MCQ.
+ */
+export declare function previewText(item: QuestionSearchItem): string;
+/** Prefer content preview over XML-ish titles for the primary row heading. */
+export declare function primaryDisplayText(item: QuestionSearchItem): string;
+/**
+ * Compact provenance for row footer (right side):
+ * "Unit 0 · 0.3 Favourites · Ex 1"
+ */
+export declare function provenanceFooterText(item: QuestionSearchItem): string | null;
+/** Sub-item count for group types — shown as “n câu con”. */
+export declare function subItemCount(item: QuestionSearchItem): number | null;
+/** Detect media attachments to surface image/audio hints on list rows. */
+export declare function contentMediaFlags(item: QuestionSearchItem): {
+    hasImage: boolean;
+    hasAudio: boolean;
+};
+/** Small inline icons for image/audio presence. */
+export declare function MediaHints({ item }: {
+    item: QuestionSearchItem;
+}): import("react").JSX.Element;