Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code structure for improved readability and maintainability

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-04-01 11:03:07 -03:00
parent abc6d59276
commit c2fc6bc499
3 changed files with 135 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/components/TestTemplates/TestTemplateManager.tsx
+74 -24
View File
@@ -39,8 +39,8 @@ export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate
const [applyCourses, setApplyCourses] = useState<MySqlCourse[]>([]);
const [applyPlanId, setApplyPlanId] = useState<number | ''>('');
const [applyCourseId, setApplyCourseId] = useState<number | ''>('');
const [applyCoursesError, setApplyCoursesError] = useState('');
const [selectedCourse, setSelectedCourse] = useState<string>('');
const [selectedLesson, setSelectedLesson] = useState<string>('');
const [applying, setApplying] = useState(false);
@@ -48,7 +48,7 @@ export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate
setSelectedTemplate(null);
setApplyPlanId('');
setApplyCourseId('');
setSelectedCourse('');
setApplyCoursesError('');
setSelectedLesson('');
};
@@ -87,11 +87,64 @@ export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate
if (!applyPlanId) {
setApplyCourses([]);
setApplyCourseId('');
setApplyCoursesError('');
return;
}
questionBankApi.getMySQLCoursesByPlan(applyPlanId).then(setApplyCourses).catch(() => {});
questionBankApi
.getMySQLCoursesByPlan(applyPlanId)
.then((courses) => {
setApplyCourses(courses);
setApplyCoursesError('');
})
.catch((error) => {
console.error('Failed to load MySQL courses by plan:', error);
setApplyCourses([]);
setApplyCoursesError('No se pudieron cargar los cursos para este plan.');
});
}, [applyPlanId]);
const getCourseTypeFromPlan = (planName: string): 'intensive' | 'regular' => {
const planLower = (planName || '').toLowerCase();
return planLower.includes('intensive') || planLower.includes('intensivo') ? 'intensive' : 'regular';
};
const getCourseLevelFromMysql = (nivelCurso?: number, planNombre?: string): string => {
if (typeof nivelCurso === 'number') {
if (nivelCurso >= 1 && nivelCurso <= 2) return 'beginner';
if (nivelCurso >= 3 && nivelCurso <= 4) return 'beginner_1';
if (nivelCurso >= 5 && nivelCurso <= 6) return 'beginner_2';
if (nivelCurso >= 7 && nivelCurso <= 8) return 'intermediate';
if (nivelCurso >= 9 && nivelCurso <= 10) return 'intermediate_1';
if (nivelCurso >= 11 && nivelCurso <= 12) return 'intermediate_2';
return 'advanced';
}
const planLower = (planNombre || '').toLowerCase();
if (planLower.includes('basic') || planLower.includes('beginner')) return 'beginner';
if (planLower.includes('intermediate') || planLower.includes('intermedio')) return 'intermediate';
return 'advanced';
};
const matchingPlatformCourses = useMemo(() => {
if (!applyCourseId) return [] as Course[];
const mysqlCourse = applyCourses.find((c) => c.idCursos === applyCourseId);
if (!mysqlCourse) return [] as Course[];
const expectedLevel = getCourseLevelFromMysql(mysqlCourse.NivelCurso, mysqlCourse.NombrePlan);
const expectedType = getCourseTypeFromPlan(mysqlCourse.NombrePlan);
return courses.filter((course) => {
const courseLevel = String((course as { level?: string }).level || '').toLowerCase();
const courseType = String((course as { course_type?: string }).course_type || '').toLowerCase();
return courseLevel === expectedLevel && courseType === expectedType;
});
}, [applyCourseId, applyCourses, courses]);
const selectedPlatformCourseId = useMemo(() => {
if (matchingPlatformCourses.length === 0) return '';
return matchingPlatformCourses[0].id;
}, [matchingPlatformCourses]);
const filteredTemplates = useMemo(() => {
if (!searchTerm.trim()) return templates;
const q = searchTerm.toLowerCase();
@@ -120,8 +173,8 @@ export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate
setShowApplyModal(true);
setApplyPlanId('');
setApplyCourseId('');
setSelectedCourse('');
setSelectedLesson('');
setApplyCoursesError('');
cmsApi.getCourses()
.then(setCourses)
@@ -129,8 +182,8 @@ export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate
};
const handleApplyToLesson = async () => {
if (!selectedTemplate || !selectedLesson) {
alert('Selecciona una lección');
if (!selectedTemplate || !selectedPlatformCourseId || !selectedLesson) {
alert('Selecciona plan, curso y lección');
return;
}
@@ -413,7 +466,6 @@ export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate
onChange={(e) => {
setApplyPlanId(e.target.value ? Number(e.target.value) : '');
setApplyCourseId('');
setSelectedCourse('');
setSelectedLesson('');
}}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
@@ -432,7 +484,6 @@ export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate
value={applyCourseId}
onChange={(e) => {
setApplyCourseId(e.target.value ? Number(e.target.value) : '');
setSelectedCourse('');
setSelectedLesson('');
}}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
@@ -442,33 +493,32 @@ export default function TestTemplateManager({ onSelectTemplate, onCreateTemplate
<option key={c.idCursos} value={c.idCursos}>{c.NombreCurso}</option>
))}
</select>
{applyCoursesError && (
<p className="text-xs text-red-600 mt-1">{applyCoursesError}</p>
)}
</div>
)}
{applyCourseId && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">3. Curso en la Plataforma</label>
<select
value={selectedCourse}
onChange={(e) => {
setSelectedCourse(e.target.value);
setSelectedLesson('');
}}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
>
<option value="">Selecciona el curso destino...</option>
{courses.map((course) => (
<option key={course.id} value={course.id}>{course.title}</option>
))}
</select>
<label className="block text-sm font-medium text-gray-700 mb-1">3. Curso destino detectado</label>
{matchingPlatformCourses.length > 0 ? (
<div className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-sm text-gray-700">
{matchingPlatformCourses[0].title}
</div>
) : (
<div className="w-full px-3 py-2 border border-red-200 rounded-lg bg-red-50 text-sm text-red-700">
No se encontró un curso de plataforma compatible para este curso SAM.
</div>
)}
</div>
)}
{selectedCourse && (
{selectedPlatformCourseId && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">4. Lección</label>
<LessonSelector
courseId={selectedCourse}
courseId={selectedPlatformCourseId}
selectedLesson={selectedLesson}
onSelect={setSelectedLesson}
/>
web/studio/src/lib/api.ts
+60 -4
View File
@@ -1154,17 +1154,73 @@ export const questionBankApi = {
apiFetch(`/question-bank/${id}`, { method: 'DELETE' }, false),
importFromMySQL: (courseId?: number, questionIds?: number[], importAll?: boolean): Promise<QuestionBank[]> =>
apiFetch('/question-bank/import-mysql', { method: 'POST', body: JSON.stringify({ mysql_course_id: courseId, question_ids: questionIds, import_all: importAll }) }, false),
getMySQLPlans: (): Promise<MySqlPlan[]> =>
apiFetch('/question-bank/mysql-plans', {}, false),
getMySQLCoursesByPlan: (planId: number): Promise<MySqlCourse[]> =>
apiFetch(`/question-bank/mysql-courses?plan_id=${planId}`, {}, false),
getMySQLPlans: async (): Promise<MySqlPlan[]> => {
const plans = (await apiFetch('/question-bank/mysql-plans', {}, false)) as MySqlPlanRaw[];
return plans.reduce((acc: MySqlPlan[], p: MySqlPlanRaw) => {
const idPlanDeEstudios = p.idPlanDeEstudios ?? p.id_plan_de_estudios;
const nombrePlan = p.NombrePlan ?? p.nombre_plan;
if (typeof idPlanDeEstudios === 'number' && typeof nombrePlan === 'string' && nombrePlan.trim()) {
acc.push({ idPlanDeEstudios, NombrePlan: nombrePlan });
}
return acc;
}, []);
},
getMySQLCoursesByPlan: async (planId: number): Promise<MySqlCourse[]> => {
const courses = (await apiFetch(`/question-bank/mysql-courses?plan_id=${planId}`, {}, false)) as MySqlCourseRaw[];
return courses.reduce((acc: MySqlCourse[], c: MySqlCourseRaw) => {
const idCursos = c.idCursos ?? c.id_cursos;
const nombreCurso = c.NombreCurso ?? c.nombre_curso;
const idPlanDeEstudios = c.idPlanDeEstudios ?? c.id_plan_de_estudios;
const nombrePlan = c.NombrePlan ?? c.nombre_plan;
if (
typeof idCursos === 'number' &&
typeof nombreCurso === 'string' &&
nombreCurso.trim() &&
typeof idPlanDeEstudios === 'number' &&
typeof nombrePlan === 'string' &&
nombrePlan.trim()
) {
acc.push({
idCursos,
NombreCurso: nombreCurso,
NivelCurso: c.NivelCurso ?? c.nivel_curso,
idPlanDeEstudios,
NombrePlan: nombrePlan,
Duracion: c.Duracion ?? c.duracion,
});
}
return acc;
}, []);
},
};
interface MySqlPlanRaw {
idPlanDeEstudios?: number;
NombrePlan?: string;
id_plan_de_estudios?: number;
nombre_plan?: string;
}
export interface MySqlPlan {
idPlanDeEstudios: number;
NombrePlan: string;
}
interface MySqlCourseRaw {
idCursos?: number;
NombreCurso?: string;
NivelCurso?: number;
idPlanDeEstudios?: number;
NombrePlan?: string;
Duracion?: number;
id_cursos?: number;
nombre_curso?: string;
nivel_curso?: number;
id_plan_de_estudios?: number;
nombre_plan?: string;
duracion?: number;
}
export interface MySqlCourse {
idCursos: number;
NombreCurso: string;
web/studio/tsconfig.tsbuildinfo
+1 -1
View File
File diff suppressed because one or more lines are too long