feat: implement QuestionBank CRUD with pagination and template query

- Add pagination support to findAll (page, limit query params) - Add findByTemplateId method to service - Add GET /by-template/:templateId endpoint to controller - Service already includes CRUD for QuestionBank and QuestionBankItem
2026-04-23 17:19:11 +08:00
commit 0a9588abb7
492 changed files with 112453 additions and 0 deletions
@@ -0,0 +1,96 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { X, Check } from 'lucide-react';
+
+interface InputDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    onSubmit: (value: string) => void;
+    placeholder?: string;
+    defaultValue?: string;
+    submitLabel?: string;
+}
+
+export const InputDrawer: React.FC<InputDrawerProps> = ({
+    isOpen,
+    onClose,
+    title,
+    onSubmit,
+    placeholder = '',
+    defaultValue = '',
+    submitLabel = 'Confirm'
+}) => {
+    const [value, setValue] = useState(defaultValue);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (isOpen) {
+            setValue(defaultValue);
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 50);
+        }
+    }, [isOpen, defaultValue]);
+
+    const handleSubmit = (e?: React.FormEvent) => {
+        e?.preventDefault();
+        if (value.trim()) {
+            onSubmit(value.trim());
+            onClose();
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return createPortal(
+        <div className="fixed inset-0 z-50 overflow-hidden">
+            <div className="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity" onClick={onClose} />
+            <div className="absolute inset-y-0 right-0 max-w-sm w-full flex pointer-events-none">
+                {/* pointer-events-none on wrapper, auto on content to allow closing by clicking left side */}
+                <div className="flex-1 flex flex-col bg-white shadow-xl animate-in slide-in-from-right duration-300 pointer-events-auto">
+                    <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+                        <h2 className="text-lg font-medium text-gray-900">{title}</h2>
+                        <button
+                            onClick={onClose}
+                            className="text-gray-400 hover:text-gray-500 focus:outline-none"
+                        >
+                            <X size={24} />
+                        </button>
+                    </div>
+
+                    <form onSubmit={handleSubmit} className="p-6 flex-1 flex flex-col">
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                            {title}
+                        </label>
+                        <input
+                            ref={inputRef}
+                            type="text"
+                            value={value}
+                            onChange={(e) => setValue(e.target.value)}
+                            placeholder={placeholder}
+                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
+                        />
+                        <div className="mt-6 flex justify-end gap-3">
+                            <button
+                                type="button"
+                                onClick={onClose}
+                                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                type="submit"
+                                disabled={!value.trim()}
+                                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2"
+                            >
+                                {submitLabel}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>,
+        document.body
+    );
+};