wip
This commit is contained in:
@@ -1,356 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react'
|
|
||||||
|
|
||||||
import type { NewSubjectWizardState } from '@/features/asignaturas/nueva/types'
|
|
||||||
import type { Database } from '@/types/supabase'
|
|
||||||
|
|
||||||
import { Input } from '@/components/ui/input'
|
|
||||||
import { Label } from '@/components/ui/label'
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from '@/components/ui/select'
|
|
||||||
import { useSubjectEstructuras } from '@/data'
|
|
||||||
import { TIPOS_MATERIA } from '@/features/asignaturas/nueva/catalogs'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
|
|
||||||
export function PasoBasicosForm({
|
|
||||||
wizard,
|
|
||||||
onChange,
|
|
||||||
}: {
|
|
||||||
wizard: NewSubjectWizardState
|
|
||||||
onChange: React.Dispatch<React.SetStateAction<NewSubjectWizardState>>
|
|
||||||
}) {
|
|
||||||
const { data: estructuras } = useSubjectEstructuras()
|
|
||||||
|
|
||||||
const [creditosInput, setCreditosInput] = useState<string>(() => {
|
|
||||||
const c = Number(wizard.datosBasicos.creditos ?? 0)
|
|
||||||
let newC = c
|
|
||||||
console.log('antes', newC)
|
|
||||||
|
|
||||||
if (Number.isFinite(c) && c > 999) {
|
|
||||||
newC = 999
|
|
||||||
}
|
|
||||||
console.log('desp', newC)
|
|
||||||
return newC > 0 ? newC.toFixed(2) : ''
|
|
||||||
})
|
|
||||||
const [creditosFocused, setCreditosFocused] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (creditosFocused) return
|
|
||||||
const c = Number(wizard.datosBasicos.creditos ?? 0)
|
|
||||||
let newC = c
|
|
||||||
if (Number.isFinite(c) && c > 999) {
|
|
||||||
newC = 999
|
|
||||||
}
|
|
||||||
setCreditosInput(newC > 0 ? newC.toFixed(2) : '')
|
|
||||||
}, [wizard.datosBasicos.creditos, creditosFocused])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid gap-4 sm:grid-cols-2">
|
|
||||||
<div className="grid gap-1 sm:col-span-2">
|
|
||||||
<Label htmlFor="nombre">Nombre de la asignatura</Label>
|
|
||||||
<Input
|
|
||||||
id="nombre"
|
|
||||||
placeholder="Ej. Matemáticas Discretas"
|
|
||||||
maxLength={200}
|
|
||||||
value={wizard.datosBasicos.nombre}
|
|
||||||
onChange={(e) =>
|
|
||||||
onChange(
|
|
||||||
(w): NewSubjectWizardState => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: { ...w.datosBasicos, nombre: e.target.value },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-1">
|
|
||||||
<Label htmlFor="codigo">
|
|
||||||
Código
|
|
||||||
<span className="text-xs font-normal text-gray-500 dark:text-gray-400">
|
|
||||||
(Opcional)
|
|
||||||
</span>
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="codigo"
|
|
||||||
placeholder="Ej. MAT-101"
|
|
||||||
maxLength={200}
|
|
||||||
value={wizard.datosBasicos.codigo || ''}
|
|
||||||
onChange={(e) =>
|
|
||||||
onChange(
|
|
||||||
(w): NewSubjectWizardState => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: { ...w.datosBasicos, codigo: e.target.value },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
className="placeholder:text-muted-foreground/70 placeholder:italicplaceholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-1">
|
|
||||||
<Label htmlFor="tipo">Tipo</Label>
|
|
||||||
<Select
|
|
||||||
value={(wizard.datosBasicos.tipo ?? '') as string}
|
|
||||||
onValueChange={(value: string) =>
|
|
||||||
onChange(
|
|
||||||
(w): NewSubjectWizardState => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: {
|
|
||||||
...w.datosBasicos,
|
|
||||||
tipo: value as NewSubjectWizardState['datosBasicos']['tipo'],
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger
|
|
||||||
id="tipo"
|
|
||||||
className={cn(
|
|
||||||
'w-full min-w-0 [&>span]:block! [&>span]:truncate!',
|
|
||||||
!wizard.datosBasicos.tipo
|
|
||||||
? 'text-muted-foreground font-normal italic opacity-70'
|
|
||||||
: 'font-medium not-italic',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<SelectValue placeholder="Ej. Obligatoria" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{TIPOS_MATERIA.map((t) => (
|
|
||||||
<SelectItem key={t.value} value={t.value}>
|
|
||||||
{t.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-1">
|
|
||||||
<Label htmlFor="creditos">Créditos</Label>
|
|
||||||
<Input
|
|
||||||
id="creditos"
|
|
||||||
type="text"
|
|
||||||
inputMode="decimal"
|
|
||||||
maxLength={6}
|
|
||||||
pattern="^\\d*(?:[.,]\\d{0,2})?$"
|
|
||||||
value={creditosInput}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (['-', 'e', 'E', '+'].includes(e.key)) {
|
|
||||||
e.preventDefault()
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onFocus={() => setCreditosFocused(true)}
|
|
||||||
onBlur={() => {
|
|
||||||
setCreditosFocused(false)
|
|
||||||
|
|
||||||
const raw = creditosInput.trim()
|
|
||||||
if (!raw) {
|
|
||||||
onChange((w) => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: { ...w.datosBasicos, creditos: 0 },
|
|
||||||
}))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const normalized = raw.replace(',', '.')
|
|
||||||
let asNumber = Number.parseFloat(normalized)
|
|
||||||
if (!Number.isFinite(asNumber) || asNumber <= 0) {
|
|
||||||
setCreditosInput('')
|
|
||||||
onChange((w) => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: { ...w.datosBasicos, creditos: 0 },
|
|
||||||
}))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cap to 999
|
|
||||||
if (asNumber > 999) asNumber = 999
|
|
||||||
|
|
||||||
const fixed = asNumber.toFixed(2)
|
|
||||||
setCreditosInput(fixed)
|
|
||||||
onChange((w) => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: { ...w.datosBasicos, creditos: Number(fixed) },
|
|
||||||
}))
|
|
||||||
}}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const nextRaw = e.target.value
|
|
||||||
if (nextRaw === '') {
|
|
||||||
setCreditosInput('')
|
|
||||||
onChange((w) => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: { ...w.datosBasicos, creditos: 0 },
|
|
||||||
}))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!/^\d*(?:[.,]\d{0,2})?$/.test(nextRaw)) return
|
|
||||||
|
|
||||||
// If typed number exceeds 999, cap it immediately (prevents entering >999)
|
|
||||||
const asNumberRaw = Number.parseFloat(nextRaw.replace(',', '.'))
|
|
||||||
if (Number.isFinite(asNumberRaw) && asNumberRaw > 999) {
|
|
||||||
// show capped value to the user
|
|
||||||
const cappedStr = '999.00'
|
|
||||||
setCreditosInput(cappedStr)
|
|
||||||
onChange((w) => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: {
|
|
||||||
...w.datosBasicos,
|
|
||||||
creditos: 999,
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setCreditosInput(nextRaw)
|
|
||||||
|
|
||||||
const asNumber = Number.parseFloat(nextRaw.replace(',', '.'))
|
|
||||||
onChange((w) => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: {
|
|
||||||
...w.datosBasicos,
|
|
||||||
creditos:
|
|
||||||
Number.isFinite(asNumber) && asNumber > 0 ? asNumber : 0,
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
}}
|
|
||||||
className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
|
|
||||||
placeholder="Ej. 4.50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-1">
|
|
||||||
<Label htmlFor="estructura">Estructura de la asignatura</Label>
|
|
||||||
<Select
|
|
||||||
value={wizard.datosBasicos.estructuraId as string}
|
|
||||||
onValueChange={(val) =>
|
|
||||||
onChange(
|
|
||||||
(w): NewSubjectWizardState => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: { ...w.datosBasicos, estructuraId: val },
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger
|
|
||||||
id="estructura"
|
|
||||||
className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
|
|
||||||
>
|
|
||||||
<SelectValue placeholder="Selecciona plantilla..." />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{estructuras?.map(
|
|
||||||
(
|
|
||||||
e: Database['public']['Tables']['estructuras_asignatura']['Row'],
|
|
||||||
) => (
|
|
||||||
<SelectItem key={e.id} value={e.id}>
|
|
||||||
{e.nombre}
|
|
||||||
</SelectItem>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<p className="text-muted-foreground text-xs">
|
|
||||||
Define los campos requeridos (ej. Objetivos, Temario, Evaluación).
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-1">
|
|
||||||
<Label htmlFor="horasAcademicas">
|
|
||||||
Horas Académicas
|
|
||||||
<span className="text-xs font-normal text-gray-500 dark:text-gray-400">
|
|
||||||
(Opcional)
|
|
||||||
</span>
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="horasAcademicas"
|
|
||||||
type="number"
|
|
||||||
min={1}
|
|
||||||
max={999}
|
|
||||||
step={1}
|
|
||||||
inputMode="numeric"
|
|
||||||
pattern="[0-9]*"
|
|
||||||
value={wizard.datosBasicos.horasAcademicas ?? ''}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (['.', ',', '-', 'e', 'E', '+'].includes(e.key)) {
|
|
||||||
e.preventDefault()
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
|
||||||
onChange(
|
|
||||||
(w): NewSubjectWizardState => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: {
|
|
||||||
...w.datosBasicos,
|
|
||||||
horasAcademicas: (() => {
|
|
||||||
const raw = e.target.value
|
|
||||||
if (raw === '') return null
|
|
||||||
const asNumber = Number(raw)
|
|
||||||
if (Number.isNaN(asNumber)) return null
|
|
||||||
// Coerce to positive integer (natural numbers without zero)
|
|
||||||
const n = Math.floor(Math.abs(asNumber))
|
|
||||||
const capped = Math.min(n >= 1 ? n : 1, 999)
|
|
||||||
return capped
|
|
||||||
})(),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
|
|
||||||
placeholder="Ej. 48"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-1">
|
|
||||||
<Label htmlFor="horasIndependientes">
|
|
||||||
Horas Independientes
|
|
||||||
<span className="text-xs font-normal text-gray-500 dark:text-gray-400">
|
|
||||||
(Opcional)
|
|
||||||
</span>
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="horasIndependientes"
|
|
||||||
type="number"
|
|
||||||
min={1}
|
|
||||||
max={999}
|
|
||||||
step={1}
|
|
||||||
inputMode="numeric"
|
|
||||||
pattern="[0-9]*"
|
|
||||||
value={wizard.datosBasicos.horasIndependientes ?? ''}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (['.', ',', '-', 'e', 'E', '+'].includes(e.key)) {
|
|
||||||
e.preventDefault()
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
|
||||||
onChange(
|
|
||||||
(w): NewSubjectWizardState => ({
|
|
||||||
...w,
|
|
||||||
datosBasicos: {
|
|
||||||
...w.datosBasicos,
|
|
||||||
horasIndependientes: (() => {
|
|
||||||
const raw = e.target.value
|
|
||||||
if (raw === '') return null
|
|
||||||
const asNumber = Number(raw)
|
|
||||||
if (Number.isNaN(asNumber)) return null
|
|
||||||
// Coerce to positive integer (natural numbers without zero)
|
|
||||||
const n = Math.floor(Math.abs(asNumber))
|
|
||||||
const capped = Math.min(n >= 1 ? n : 1, 999)
|
|
||||||
return capped
|
|
||||||
})(),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
|
|
||||||
placeholder="Ej. 24"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,362 @@
|
|||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
import PasoSugerenciasForm from './PasoSugerenciasForm'
|
||||||
|
|
||||||
|
import type { NewSubjectWizardState } from '@/features/asignaturas/nueva/types'
|
||||||
|
import type { Database } from '@/types/supabase'
|
||||||
|
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select'
|
||||||
|
import { useSubjectEstructuras } from '@/data'
|
||||||
|
import { TIPOS_MATERIA } from '@/features/asignaturas/nueva/catalogs'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
export function PasoBasicosForm({
|
||||||
|
wizard,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
wizard: NewSubjectWizardState
|
||||||
|
onChange: React.Dispatch<React.SetStateAction<NewSubjectWizardState>>
|
||||||
|
}) {
|
||||||
|
const { data: estructuras } = useSubjectEstructuras()
|
||||||
|
|
||||||
|
const [creditosInput, setCreditosInput] = useState<string>(() => {
|
||||||
|
const c = Number(wizard.datosBasicos.creditos ?? 0)
|
||||||
|
let newC = c
|
||||||
|
console.log('antes', newC)
|
||||||
|
|
||||||
|
if (Number.isFinite(c) && c > 999) {
|
||||||
|
newC = 999
|
||||||
|
}
|
||||||
|
console.log('desp', newC)
|
||||||
|
return newC > 0 ? newC.toFixed(2) : ''
|
||||||
|
})
|
||||||
|
const [creditosFocused, setCreditosFocused] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (creditosFocused) return
|
||||||
|
const c = Number(wizard.datosBasicos.creditos ?? 0)
|
||||||
|
let newC = c
|
||||||
|
if (Number.isFinite(c) && c > 999) {
|
||||||
|
newC = 999
|
||||||
|
}
|
||||||
|
setCreditosInput(newC > 0 ? newC.toFixed(2) : '')
|
||||||
|
}, [wizard.datosBasicos.creditos, creditosFocused])
|
||||||
|
|
||||||
|
if (wizard.tipoOrigen !== 'IA_MULTIPLE') {
|
||||||
|
return (
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
|
<div className="grid gap-1 sm:col-span-2">
|
||||||
|
<Label htmlFor="nombre">Nombre de la asignatura</Label>
|
||||||
|
<Input
|
||||||
|
id="nombre"
|
||||||
|
placeholder="Ej. Matemáticas Discretas"
|
||||||
|
maxLength={200}
|
||||||
|
value={wizard.datosBasicos.nombre}
|
||||||
|
onChange={(e) =>
|
||||||
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: { ...w.datosBasicos, nombre: e.target.value },
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-1">
|
||||||
|
<Label htmlFor="codigo">
|
||||||
|
Código
|
||||||
|
<span className="text-xs font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
(Opcional)
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="codigo"
|
||||||
|
placeholder="Ej. MAT-101"
|
||||||
|
maxLength={200}
|
||||||
|
value={wizard.datosBasicos.codigo || ''}
|
||||||
|
onChange={(e) =>
|
||||||
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: { ...w.datosBasicos, codigo: e.target.value },
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="placeholder:text-muted-foreground/70 placeholder:italicplaceholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-1">
|
||||||
|
<Label htmlFor="tipo">Tipo</Label>
|
||||||
|
<Select
|
||||||
|
value={(wizard.datosBasicos.tipo ?? '') as string}
|
||||||
|
onValueChange={(value: string) =>
|
||||||
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: {
|
||||||
|
...w.datosBasicos,
|
||||||
|
tipo: value as NewSubjectWizardState['datosBasicos']['tipo'],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger
|
||||||
|
id="tipo"
|
||||||
|
className={cn(
|
||||||
|
'w-full min-w-0 [&>span]:block! [&>span]:truncate!',
|
||||||
|
!wizard.datosBasicos.tipo
|
||||||
|
? 'text-muted-foreground font-normal italic opacity-70'
|
||||||
|
: 'font-medium not-italic',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<SelectValue placeholder="Ej. Obligatoria" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{TIPOS_MATERIA.map((t) => (
|
||||||
|
<SelectItem key={t.value} value={t.value}>
|
||||||
|
{t.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-1">
|
||||||
|
<Label htmlFor="creditos">Créditos</Label>
|
||||||
|
<Input
|
||||||
|
id="creditos"
|
||||||
|
type="text"
|
||||||
|
inputMode="decimal"
|
||||||
|
maxLength={6}
|
||||||
|
pattern="^\\d*(?:[.,]\\d{0,2})?$"
|
||||||
|
value={creditosInput}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (['-', 'e', 'E', '+'].includes(e.key)) {
|
||||||
|
e.preventDefault()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onFocus={() => setCreditosFocused(true)}
|
||||||
|
onBlur={() => {
|
||||||
|
setCreditosFocused(false)
|
||||||
|
|
||||||
|
const raw = creditosInput.trim()
|
||||||
|
if (!raw) {
|
||||||
|
onChange((w) => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: { ...w.datosBasicos, creditos: 0 },
|
||||||
|
}))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalized = raw.replace(',', '.')
|
||||||
|
let asNumber = Number.parseFloat(normalized)
|
||||||
|
if (!Number.isFinite(asNumber) || asNumber <= 0) {
|
||||||
|
setCreditosInput('')
|
||||||
|
onChange((w) => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: { ...w.datosBasicos, creditos: 0 },
|
||||||
|
}))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cap to 999
|
||||||
|
if (asNumber > 999) asNumber = 999
|
||||||
|
|
||||||
|
const fixed = asNumber.toFixed(2)
|
||||||
|
setCreditosInput(fixed)
|
||||||
|
onChange((w) => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: { ...w.datosBasicos, creditos: Number(fixed) },
|
||||||
|
}))
|
||||||
|
}}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const nextRaw = e.target.value
|
||||||
|
if (nextRaw === '') {
|
||||||
|
setCreditosInput('')
|
||||||
|
onChange((w) => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: { ...w.datosBasicos, creditos: 0 },
|
||||||
|
}))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/^\d*(?:[.,]\d{0,2})?$/.test(nextRaw)) return
|
||||||
|
|
||||||
|
// If typed number exceeds 999, cap it immediately (prevents entering >999)
|
||||||
|
const asNumberRaw = Number.parseFloat(nextRaw.replace(',', '.'))
|
||||||
|
if (Number.isFinite(asNumberRaw) && asNumberRaw > 999) {
|
||||||
|
// show capped value to the user
|
||||||
|
const cappedStr = '999.00'
|
||||||
|
setCreditosInput(cappedStr)
|
||||||
|
onChange((w) => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: {
|
||||||
|
...w.datosBasicos,
|
||||||
|
creditos: 999,
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setCreditosInput(nextRaw)
|
||||||
|
|
||||||
|
const asNumber = Number.parseFloat(nextRaw.replace(',', '.'))
|
||||||
|
onChange((w) => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: {
|
||||||
|
...w.datosBasicos,
|
||||||
|
creditos:
|
||||||
|
Number.isFinite(asNumber) && asNumber > 0 ? asNumber : 0,
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
}}
|
||||||
|
className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
|
||||||
|
placeholder="Ej. 4.50"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-1">
|
||||||
|
<Label htmlFor="estructura">Estructura de la asignatura</Label>
|
||||||
|
<Select
|
||||||
|
value={wizard.datosBasicos.estructuraId as string}
|
||||||
|
onValueChange={(val) =>
|
||||||
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: { ...w.datosBasicos, estructuraId: val },
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger
|
||||||
|
id="estructura"
|
||||||
|
className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
|
||||||
|
>
|
||||||
|
<SelectValue placeholder="Selecciona plantilla..." />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{estructuras?.map(
|
||||||
|
(
|
||||||
|
e: Database['public']['Tables']['estructuras_asignatura']['Row'],
|
||||||
|
) => (
|
||||||
|
<SelectItem key={e.id} value={e.id}>
|
||||||
|
{e.nombre}
|
||||||
|
</SelectItem>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<p className="text-muted-foreground text-xs">
|
||||||
|
Define los campos requeridos (ej. Objetivos, Temario, Evaluación).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-1">
|
||||||
|
<Label htmlFor="horasAcademicas">
|
||||||
|
Horas Académicas
|
||||||
|
<span className="text-xs font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
(Opcional)
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="horasAcademicas"
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
max={999}
|
||||||
|
step={1}
|
||||||
|
inputMode="numeric"
|
||||||
|
pattern="[0-9]*"
|
||||||
|
value={wizard.datosBasicos.horasAcademicas ?? ''}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (['.', ',', '-', 'e', 'E', '+'].includes(e.key)) {
|
||||||
|
e.preventDefault()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: {
|
||||||
|
...w.datosBasicos,
|
||||||
|
horasAcademicas: (() => {
|
||||||
|
const raw = e.target.value
|
||||||
|
if (raw === '') return null
|
||||||
|
const asNumber = Number(raw)
|
||||||
|
if (Number.isNaN(asNumber)) return null
|
||||||
|
// Coerce to positive integer (natural numbers without zero)
|
||||||
|
const n = Math.floor(Math.abs(asNumber))
|
||||||
|
const capped = Math.min(n >= 1 ? n : 1, 999)
|
||||||
|
return capped
|
||||||
|
})(),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
|
||||||
|
placeholder="Ej. 48"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-1">
|
||||||
|
<Label htmlFor="horasIndependientes">
|
||||||
|
Horas Independientes
|
||||||
|
<span className="text-xs font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
(Opcional)
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="horasIndependientes"
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
max={999}
|
||||||
|
step={1}
|
||||||
|
inputMode="numeric"
|
||||||
|
pattern="[0-9]*"
|
||||||
|
value={wizard.datosBasicos.horasIndependientes ?? ''}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (['.', ',', '-', 'e', 'E', '+'].includes(e.key)) {
|
||||||
|
e.preventDefault()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||||
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({
|
||||||
|
...w,
|
||||||
|
datosBasicos: {
|
||||||
|
...w.datosBasicos,
|
||||||
|
horasIndependientes: (() => {
|
||||||
|
const raw = e.target.value
|
||||||
|
if (raw === '') return null
|
||||||
|
const asNumber = Number(raw)
|
||||||
|
if (Number.isNaN(asNumber)) return null
|
||||||
|
// Coerce to positive integer (natural numbers without zero)
|
||||||
|
const n = Math.floor(Math.abs(asNumber))
|
||||||
|
const capped = Math.min(n >= 1 ? n : 1, 999)
|
||||||
|
return capped
|
||||||
|
})(),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
|
||||||
|
placeholder="Ej. 24"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return <PasoSugerenciasForm wizard={wizard} onChange={onChange} />
|
||||||
|
}
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
import { RefreshCw, Sparkles } from 'lucide-react'
|
||||||
|
|
||||||
|
import type { NewSubjectWizardState } from '@/features/asignaturas/nueva/types'
|
||||||
|
import type { Dispatch, SetStateAction } from 'react'
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Checkbox } from '@/components/ui/checkbox'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
// Interfaces
|
||||||
|
interface Suggestion {
|
||||||
|
id: string
|
||||||
|
nombre: string
|
||||||
|
tipo: 'Obligatoria' | 'Optativa'
|
||||||
|
creditos: number
|
||||||
|
horasAcademicas: number
|
||||||
|
horasIndependientes: number
|
||||||
|
descripcion: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Datos Mock basados en tu imagen
|
||||||
|
const MOCK_SUGGESTIONS: Array<Suggestion> = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
nombre: 'Propiedad Intelectual en Entornos Digitales',
|
||||||
|
tipo: 'Optativa',
|
||||||
|
creditos: 4,
|
||||||
|
horasAcademicas: 32,
|
||||||
|
horasIndependientes: 16,
|
||||||
|
descripcion:
|
||||||
|
'Derechos de autor, patentes de software y marcas en el ecosistema digital.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
nombre: 'Derecho Constitucional Digital',
|
||||||
|
tipo: 'Obligatoria',
|
||||||
|
creditos: 8,
|
||||||
|
horasAcademicas: 64,
|
||||||
|
horasIndependientes: 32,
|
||||||
|
descripcion:
|
||||||
|
'Marco constitucional aplicado al entorno digital y derechos fundamentales en línea.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
nombre: 'Gobernanza de Internet',
|
||||||
|
tipo: 'Optativa',
|
||||||
|
creditos: 4,
|
||||||
|
horasAcademicas: 32,
|
||||||
|
horasIndependientes: 16,
|
||||||
|
descripcion:
|
||||||
|
'Políticas públicas, regulación internacional y gobernanza del ecosistema digital.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
nombre: 'Protección de Datos Personales',
|
||||||
|
tipo: 'Obligatoria',
|
||||||
|
creditos: 6,
|
||||||
|
horasAcademicas: 48,
|
||||||
|
horasIndependientes: 24,
|
||||||
|
descripcion:
|
||||||
|
'Regulación y cumplimiento de leyes de protección de datos (GDPR, LFPDPPP).',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
nombre: 'Inteligencia Artificial y Ética Jurídica',
|
||||||
|
tipo: 'Optativa',
|
||||||
|
creditos: 4,
|
||||||
|
horasAcademicas: 32,
|
||||||
|
horasIndependientes: 16,
|
||||||
|
descripcion:
|
||||||
|
'Implicaciones legales y éticas del uso de IA en la práctica jurídica.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '6',
|
||||||
|
nombre: 'Ciberseguridad y Derecho Penal',
|
||||||
|
tipo: 'Obligatoria',
|
||||||
|
creditos: 6,
|
||||||
|
horasAcademicas: 48,
|
||||||
|
horasIndependientes: 24,
|
||||||
|
descripcion:
|
||||||
|
'Delitos informáticos, evidencia digital y marco penal en el ciberespacio.',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export default function PasoSugerenciasForm({
|
||||||
|
wizard,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
wizard: NewSubjectWizardState
|
||||||
|
onChange: Dispatch<SetStateAction<NewSubjectWizardState>>
|
||||||
|
}) {
|
||||||
|
const selectedIds = wizard.iaMultiple?.selectedIds ?? []
|
||||||
|
const ciclo = wizard.iaMultiple?.ciclo ?? ''
|
||||||
|
const enfoque = wizard.iaMultiple?.enfoque ?? ''
|
||||||
|
|
||||||
|
const setIaMultiple = (
|
||||||
|
patch: Partial<NonNullable<NewSubjectWizardState['iaMultiple']>>,
|
||||||
|
) =>
|
||||||
|
onChange((w) => ({
|
||||||
|
...w,
|
||||||
|
iaMultiple: {
|
||||||
|
ciclo: w.iaMultiple?.ciclo ?? '',
|
||||||
|
enfoque: w.iaMultiple?.enfoque ?? '',
|
||||||
|
selectedIds: w.iaMultiple?.selectedIds ?? [],
|
||||||
|
...patch,
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
|
const toggleAsignatura = (id: string, checked: boolean) => {
|
||||||
|
const prev = selectedIds
|
||||||
|
const next = checked ? [...prev, id] : prev.filter((x) => x !== id)
|
||||||
|
setIaMultiple({ selectedIds: next })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
{/* --- BLOQUE SUPERIOR: PARÁMETROS --- */}
|
||||||
|
<div className="border-border/60 bg-muted/30 mb-4 rounded-xl border p-4">
|
||||||
|
<div className="mb-3 flex items-center gap-2">
|
||||||
|
<Sparkles className="text-primary h-4 w-4" />
|
||||||
|
<span className="text-sm font-semibold">
|
||||||
|
Parámetros de sugerencia
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-end gap-3 md:flex-row">
|
||||||
|
{/* Input Ciclo */}
|
||||||
|
<div className="w-full md:w-36">
|
||||||
|
<Label className="text-muted-foreground mb-1 block text-xs">
|
||||||
|
Número de ciclo
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="Ej. 3"
|
||||||
|
value={ciclo}
|
||||||
|
onChange={(e) => setIaMultiple({ ciclo: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input Enfoque */}
|
||||||
|
<div className="w-full flex-1">
|
||||||
|
<Label className="text-muted-foreground mb-1 block text-xs">
|
||||||
|
Enfoque (opcional)
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="Ej. Enfocado en normativa mexicana y tecnología"
|
||||||
|
value={enfoque}
|
||||||
|
onChange={(e) => setIaMultiple({ enfoque: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Botón Refrescar */}
|
||||||
|
<Button type="button" variant="outline" className="h-9 gap-1.5">
|
||||||
|
<RefreshCw className="h-3.5 w-3.5" />
|
||||||
|
Nuevas sugerencias
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* --- HEADER LISTA --- */}
|
||||||
|
<div className="mb-3 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-foreground text-base font-semibold">
|
||||||
|
Asignaturas sugeridas
|
||||||
|
</h3>
|
||||||
|
<p className="text-muted-foreground text-xs">
|
||||||
|
Basadas en el plan "Licenciatura en Derecho Digital"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-muted text-foreground inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-semibold">
|
||||||
|
{selectedIds.length} seleccionadas
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* --- LISTA DE ASIGNATURAS (CON EL ESTILO PEDIDO) --- */}
|
||||||
|
<div className="max-h-80 space-y-1 overflow-y-auto pr-1">
|
||||||
|
{MOCK_SUGGESTIONS.map((asignatura) => {
|
||||||
|
const isSelected = selectedIds.includes(asignatura.id)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Label
|
||||||
|
key={asignatura.id}
|
||||||
|
// Para que funcione el selector css `has-aria-checked` que tenías en tu snippet
|
||||||
|
aria-checked={isSelected}
|
||||||
|
className={cn(
|
||||||
|
// Igual al patrón de ReferenciasParaIA
|
||||||
|
'border-border hover:border-primary/30 hover:bg-accent/50 m-0.5 flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors has-aria-checked:border-blue-600 has-aria-checked:bg-blue-50 dark:has-aria-checked:border-blue-900 dark:has-aria-checked:bg-blue-950',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
checked={isSelected}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
toggleAsignatura(asignatura.id, !!checked)
|
||||||
|
}
|
||||||
|
className={cn(
|
||||||
|
// Igual al patrón de ReferenciasParaIA: invisible si no está seleccionado
|
||||||
|
'peer border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:ring-ring mt-0.5 h-5 w-5 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
isSelected ? '' : 'invisible',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Contenido de la tarjeta */}
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<span className="text-foreground text-sm font-medium">
|
||||||
|
{asignatura.nombre}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* Badges de Tipo */}
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors',
|
||||||
|
asignatura.tipo === 'Obligatoria'
|
||||||
|
? 'border-blue-200 bg-transparent text-blue-700 dark:border-blue-800 dark:text-blue-300'
|
||||||
|
: 'border-yellow-200 bg-transparent text-yellow-700 dark:border-yellow-800 dark:text-yellow-300',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{asignatura.tipo}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||||
|
{asignatura.creditos} cred. · {asignatura.horasAcademicas}h
|
||||||
|
acad. · {asignatura.horasIndependientes}h indep.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-muted-foreground mt-1 text-xs">
|
||||||
|
{asignatura.descripcion}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Label>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -29,11 +29,9 @@ import {
|
|||||||
export function PasoDetallesPanel({
|
export function PasoDetallesPanel({
|
||||||
wizard,
|
wizard,
|
||||||
onChange,
|
onChange,
|
||||||
onGenerarIA: _onGenerarIA,
|
|
||||||
}: {
|
}: {
|
||||||
wizard: NewSubjectWizardState
|
wizard: NewSubjectWizardState
|
||||||
onChange: React.Dispatch<React.SetStateAction<NewSubjectWizardState>>
|
onChange: React.Dispatch<React.SetStateAction<NewSubjectWizardState>>
|
||||||
onGenerarIA: () => void
|
|
||||||
}) {
|
}) {
|
||||||
if (wizard.tipoOrigen === 'MANUAL') {
|
if (wizard.tipoOrigen === 'MANUAL') {
|
||||||
return (
|
return (
|
||||||
@@ -49,7 +47,7 @@ export function PasoDetallesPanel({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (wizard.tipoOrigen === 'IA') {
|
if (wizard.tipoOrigen === 'IA_SIMPLE') {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
@@ -148,6 +146,10 @@ export function PasoDetallesPanel({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (wizard.tipoOrigen === 'IA_MULTIPLE') {
|
||||||
|
return <div>Hola</div>
|
||||||
|
}
|
||||||
|
|
||||||
if (wizard.tipoOrigen === 'CLONADO_INTERNO') {
|
if (wizard.tipoOrigen === 'CLONADO_INTERNO') {
|
||||||
return (
|
return (
|
||||||
<div className="grid gap-4">
|
<div className="grid gap-4">
|
||||||
|
|||||||
@@ -77,12 +77,93 @@ export function PasoMetodoCardGroup({
|
|||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>Generar contenido automático.</CardDescription>
|
<CardDescription>Generar contenido automático.</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
{(wizard.tipoOrigen === 'IA' ||
|
||||||
|
wizard.tipoOrigen === 'IA_SIMPLE' ||
|
||||||
|
wizard.tipoOrigen === 'IA_MULTIPLE') && (
|
||||||
|
<CardContent className="flex flex-col gap-3">
|
||||||
|
<div
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({
|
||||||
|
...w,
|
||||||
|
tipoOrigen: 'IA_SIMPLE',
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
onKeyDown={(e: React.KeyboardEvent) =>
|
||||||
|
handleKeyActivate(e, () =>
|
||||||
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({
|
||||||
|
...w,
|
||||||
|
tipoOrigen: 'IA_SIMPLE',
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className={`hover:border-primary/50 hover:bg-accent flex cursor-pointer items-center gap-4 rounded-lg border p-4 text-left transition-all ${
|
||||||
|
isSelected('IA_SIMPLE')
|
||||||
|
? 'bg-primary/5 text-primary ring-primary border-primary ring-1'
|
||||||
|
: 'border-border text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icons.Edit3 className="h-6 w-6 flex-none" />
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-sm font-medium">Una asignatura</span>
|
||||||
|
<span className="text-xs opacity-70">
|
||||||
|
Crear una asignatura con control detallado de metadatos.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({
|
||||||
|
...w,
|
||||||
|
tipoOrigen: 'IA_MULTIPLE',
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
onKeyDown={(e: React.KeyboardEvent) =>
|
||||||
|
handleKeyActivate(e, () =>
|
||||||
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({
|
||||||
|
...w,
|
||||||
|
tipoOrigen: 'IA_MULTIPLE',
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className={`hover:border-primary/50 hover:bg-accent flex cursor-pointer items-center gap-4 rounded-lg border p-4 text-left transition-all ${
|
||||||
|
isSelected('IA_MULTIPLE')
|
||||||
|
? 'bg-primary/5 text-primary ring-primary border-primary ring-1'
|
||||||
|
: 'border-border text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icons.List className="h-6 w-6 flex-none" />
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-sm font-medium">Varias asignaturas</span>
|
||||||
|
<span className="text-xs opacity-70">
|
||||||
|
Generar varias asignaturas a partir de sugerencias de la IA.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card
|
<Card
|
||||||
className={isSelected('OTRO') ? 'ring-ring ring-2' : ''}
|
className={isSelected('CLONADO') ? 'ring-ring ring-2' : ''}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
onChange((w): NewSubjectWizardState => ({ ...w, tipoOrigen: 'OTRO' }))
|
onChange(
|
||||||
|
(w): NewSubjectWizardState => ({ ...w, tipoOrigen: 'CLONADO' }),
|
||||||
|
)
|
||||||
}
|
}
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
@@ -93,7 +174,7 @@ export function PasoMetodoCardGroup({
|
|||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>De otra asignatura o archivo Word.</CardDescription>
|
<CardDescription>De otra asignatura o archivo Word.</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
{(wizard.tipoOrigen === 'OTRO' ||
|
{(wizard.tipoOrigen === 'CLONADO' ||
|
||||||
wizard.tipoOrigen === 'CLONADO_INTERNO' ||
|
wizard.tipoOrigen === 'CLONADO_INTERNO' ||
|
||||||
wizard.tipoOrigen === 'CLONADO_TRADICIONAL') && (
|
wizard.tipoOrigen === 'CLONADO_TRADICIONAL') && (
|
||||||
<CardContent className="flex flex-col gap-3">
|
<CardContent className="flex flex-col gap-3">
|
||||||
|
|||||||
@@ -4,9 +4,11 @@ import { StepWithTooltip } from '@/components/wizard/StepWithTooltip'
|
|||||||
export function WizardResponsiveHeader({
|
export function WizardResponsiveHeader({
|
||||||
wizard,
|
wizard,
|
||||||
methods,
|
methods,
|
||||||
|
titleOverrides,
|
||||||
}: {
|
}: {
|
||||||
wizard: any
|
wizard: any
|
||||||
methods: any
|
methods: any
|
||||||
|
titleOverrides?: Record<string, string>
|
||||||
}) {
|
}) {
|
||||||
const idx = wizard.utils.getIndex(methods.current.id)
|
const idx = wizard.utils.getIndex(methods.current.id)
|
||||||
const totalSteps = wizard.steps.length
|
const totalSteps = wizard.steps.length
|
||||||
@@ -14,6 +16,8 @@ export function WizardResponsiveHeader({
|
|||||||
const hasNextStep = idx < totalSteps - 1
|
const hasNextStep = idx < totalSteps - 1
|
||||||
const nextStep = wizard.steps[currentIndex]
|
const nextStep = wizard.steps[currentIndex]
|
||||||
|
|
||||||
|
const resolveTitle = (step: any) => titleOverrides?.[step?.id] ?? step?.title
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="block sm:hidden">
|
<div className="block sm:hidden">
|
||||||
@@ -22,13 +26,13 @@ export function WizardResponsiveHeader({
|
|||||||
<div className="flex flex-col justify-center">
|
<div className="flex flex-col justify-center">
|
||||||
<h2 className="text-lg font-bold text-slate-900">
|
<h2 className="text-lg font-bold text-slate-900">
|
||||||
<StepWithTooltip
|
<StepWithTooltip
|
||||||
title={methods.current.title}
|
title={resolveTitle(methods.current)}
|
||||||
desc={methods.current.description}
|
desc={methods.current.description}
|
||||||
/>
|
/>
|
||||||
</h2>
|
</h2>
|
||||||
{hasNextStep && nextStep ? (
|
{hasNextStep && nextStep ? (
|
||||||
<p className="text-sm text-slate-400">
|
<p className="text-sm text-slate-400">
|
||||||
Siguiente: {nextStep.title}
|
Siguiente: {resolveTitle(nextStep)}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-sm font-medium text-green-500">
|
<p className="text-sm font-medium text-green-500">
|
||||||
@@ -48,7 +52,10 @@ export function WizardResponsiveHeader({
|
|||||||
className="whitespace-nowrap"
|
className="whitespace-nowrap"
|
||||||
>
|
>
|
||||||
<wizard.Stepper.Title>
|
<wizard.Stepper.Title>
|
||||||
<StepWithTooltip title={step.title} desc={step.description} />
|
<StepWithTooltip
|
||||||
|
title={resolveTitle(step)}
|
||||||
|
desc={step.description}
|
||||||
|
/>
|
||||||
</wizard.Stepper.Title>
|
</wizard.Stepper.Title>
|
||||||
</wizard.Stepper.Step>
|
</wizard.Stepper.Step>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import * as Icons from 'lucide-react'
|
|||||||
|
|
||||||
import { useNuevaAsignaturaWizard } from './hooks/useNuevaAsignaturaWizard'
|
import { useNuevaAsignaturaWizard } from './hooks/useNuevaAsignaturaWizard'
|
||||||
|
|
||||||
import { PasoBasicosForm } from '@/components/asignaturas/wizard/PasoBasicosForm'
|
import { PasoBasicosForm } from '@/components/asignaturas/wizard/PasoBasicosForm/PasoBasicosForm'
|
||||||
import { PasoDetallesPanel } from '@/components/asignaturas/wizard/PasoDetallesPanel'
|
import { PasoDetallesPanel } from '@/components/asignaturas/wizard/PasoDetallesPanel'
|
||||||
import { PasoMetodoCardGroup } from '@/components/asignaturas/wizard/PasoMetodoCardGroup'
|
import { PasoMetodoCardGroup } from '@/components/asignaturas/wizard/PasoMetodoCardGroup'
|
||||||
import { PasoResumenCard } from '@/components/asignaturas/wizard/PasoResumenCard'
|
import { PasoResumenCard } from '@/components/asignaturas/wizard/PasoResumenCard'
|
||||||
@@ -55,10 +55,16 @@ export function NuevaAsignaturaModalContainer({ planId }: { planId: string }) {
|
|||||||
canContinueDesdeMetodo,
|
canContinueDesdeMetodo,
|
||||||
canContinueDesdeBasicos,
|
canContinueDesdeBasicos,
|
||||||
canContinueDesdeDetalles,
|
canContinueDesdeDetalles,
|
||||||
simularGeneracionIA,
|
|
||||||
crearAsignatura,
|
|
||||||
} = useNuevaAsignaturaWizard(planId)
|
} = useNuevaAsignaturaWizard(planId)
|
||||||
|
|
||||||
|
const titleOverrides =
|
||||||
|
wizard.tipoOrigen === 'IA_MULTIPLE'
|
||||||
|
? {
|
||||||
|
basicos: 'Sugerencias',
|
||||||
|
detalles: 'Estructura',
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
navigate({ to: `/planes/${planId}/asignaturas`, resetScroll: false })
|
navigate({ to: `/planes/${planId}/asignaturas`, resetScroll: false })
|
||||||
}
|
}
|
||||||
@@ -99,7 +105,11 @@ export function NuevaAsignaturaModalContainer({ planId }: { planId: string }) {
|
|||||||
title="Nueva Asignatura"
|
title="Nueva Asignatura"
|
||||||
onClose={handleClose}
|
onClose={handleClose}
|
||||||
headerSlot={
|
headerSlot={
|
||||||
<WizardResponsiveHeader wizard={Wizard} methods={methods} />
|
<WizardResponsiveHeader
|
||||||
|
wizard={Wizard}
|
||||||
|
methods={methods}
|
||||||
|
titleOverrides={titleOverrides}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
footerSlot={
|
footerSlot={
|
||||||
<Wizard.Stepper.Controls>
|
<Wizard.Stepper.Controls>
|
||||||
@@ -137,11 +147,7 @@ export function NuevaAsignaturaModalContainer({ planId }: { planId: string }) {
|
|||||||
|
|
||||||
{idx === 2 && (
|
{idx === 2 && (
|
||||||
<Wizard.Stepper.Panel>
|
<Wizard.Stepper.Panel>
|
||||||
<PasoDetallesPanel
|
<PasoDetallesPanel wizard={wizard} onChange={setWizard} />
|
||||||
wizard={wizard}
|
|
||||||
onChange={setWizard}
|
|
||||||
onGenerarIA={simularGeneracionIA}
|
|
||||||
/>
|
|
||||||
</Wizard.Stepper.Panel>
|
</Wizard.Stepper.Panel>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
|
||||||
import type { AsignaturaPreview, NewSubjectWizardState } from '../types'
|
import type { NewSubjectWizardState } from '../types'
|
||||||
|
|
||||||
export function useNuevaAsignaturaWizard(planId: string) {
|
export function useNuevaAsignaturaWizard(planId: string) {
|
||||||
const [wizard, setWizard] = useState<NewSubjectWizardState>({
|
const [wizard, setWizard] = useState<NewSubjectWizardState>({
|
||||||
@@ -28,6 +28,11 @@ export function useNuevaAsignaturaWizard(planId: string) {
|
|||||||
repositoriosReferencia: [],
|
repositoriosReferencia: [],
|
||||||
archivosAdjuntos: [],
|
archivosAdjuntos: [],
|
||||||
},
|
},
|
||||||
|
iaMultiple: {
|
||||||
|
ciclo: '',
|
||||||
|
enfoque: '',
|
||||||
|
selectedIds: ['1', '3', '6'],
|
||||||
|
},
|
||||||
resumen: {},
|
resumen: {},
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
errorMessage: null,
|
errorMessage: null,
|
||||||
@@ -35,16 +40,18 @@ export function useNuevaAsignaturaWizard(planId: string) {
|
|||||||
|
|
||||||
const canContinueDesdeMetodo =
|
const canContinueDesdeMetodo =
|
||||||
wizard.tipoOrigen === 'MANUAL' ||
|
wizard.tipoOrigen === 'MANUAL' ||
|
||||||
wizard.tipoOrigen === 'IA' ||
|
wizard.tipoOrigen === 'IA_SIMPLE' ||
|
||||||
|
wizard.tipoOrigen === 'IA_MULTIPLE' ||
|
||||||
wizard.tipoOrigen === 'CLONADO_INTERNO' ||
|
wizard.tipoOrigen === 'CLONADO_INTERNO' ||
|
||||||
wizard.tipoOrigen === 'CLONADO_TRADICIONAL'
|
wizard.tipoOrigen === 'CLONADO_TRADICIONAL'
|
||||||
|
|
||||||
const canContinueDesdeBasicos =
|
const canContinueDesdeBasicos =
|
||||||
!!wizard.datosBasicos.nombre &&
|
(!!wizard.datosBasicos.nombre &&
|
||||||
wizard.datosBasicos.tipo !== null &&
|
wizard.datosBasicos.tipo !== null &&
|
||||||
wizard.datosBasicos.creditos !== null &&
|
wizard.datosBasicos.creditos !== null &&
|
||||||
wizard.datosBasicos.creditos > 0 &&
|
wizard.datosBasicos.creditos > 0 &&
|
||||||
!!wizard.datosBasicos.estructuraId
|
!!wizard.datosBasicos.estructuraId) ||
|
||||||
|
true
|
||||||
|
|
||||||
const canContinueDesdeDetalles = (() => {
|
const canContinueDesdeDetalles = (() => {
|
||||||
if (wizard.tipoOrigen === 'MANUAL') return true
|
if (wizard.tipoOrigen === 'MANUAL') return true
|
||||||
@@ -60,35 +67,11 @@ export function useNuevaAsignaturaWizard(planId: string) {
|
|||||||
return false
|
return false
|
||||||
})()
|
})()
|
||||||
|
|
||||||
const simularGeneracionIA = async () => {
|
|
||||||
setWizard((w) => ({ ...w, isLoading: true }))
|
|
||||||
await new Promise((r) => setTimeout(r, 1500))
|
|
||||||
setWizard((w) => ({
|
|
||||||
...w,
|
|
||||||
isLoading: false,
|
|
||||||
resumen: {
|
|
||||||
previewAsignatura: {
|
|
||||||
nombre: w.datosBasicos.nombre,
|
|
||||||
objetivo:
|
|
||||||
'Aplicar los fundamentos teóricos para la resolución de problemas...',
|
|
||||||
unidades: 5,
|
|
||||||
bibliografiaCount: 3,
|
|
||||||
} as AsignaturaPreview,
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
const crearAsignatura = async () => {
|
|
||||||
await new Promise((r) => setTimeout(r, 1000))
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
wizard,
|
wizard,
|
||||||
setWizard,
|
setWizard,
|
||||||
canContinueDesdeMetodo,
|
canContinueDesdeMetodo,
|
||||||
canContinueDesdeBasicos,
|
canContinueDesdeBasicos,
|
||||||
canContinueDesdeDetalles,
|
canContinueDesdeDetalles,
|
||||||
simularGeneracionIA,
|
|
||||||
crearAsignatura,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,7 +15,12 @@ export type AsignaturaPreview = {
|
|||||||
export type NewSubjectWizardState = {
|
export type NewSubjectWizardState = {
|
||||||
step: 1 | 2 | 3 | 4
|
step: 1 | 2 | 3 | 4
|
||||||
plan_estudio_id: Asignatura['plan_estudio_id']
|
plan_estudio_id: Asignatura['plan_estudio_id']
|
||||||
tipoOrigen: Asignatura['tipo_origen'] | null
|
tipoOrigen:
|
||||||
|
| Asignatura['tipo_origen']
|
||||||
|
| 'CLONADO'
|
||||||
|
| 'IA_SIMPLE'
|
||||||
|
| 'IA_MULTIPLE'
|
||||||
|
| null
|
||||||
datosBasicos: {
|
datosBasicos: {
|
||||||
nombre: Asignatura['nombre']
|
nombre: Asignatura['nombre']
|
||||||
codigo?: Asignatura['codigo']
|
codigo?: Asignatura['codigo']
|
||||||
@@ -42,6 +47,11 @@ export type NewSubjectWizardState = {
|
|||||||
repositoriosReferencia?: Array<string>
|
repositoriosReferencia?: Array<string>
|
||||||
archivosAdjuntos?: Array<UploadedFile>
|
archivosAdjuntos?: Array<UploadedFile>
|
||||||
}
|
}
|
||||||
|
iaMultiple?: {
|
||||||
|
ciclo: string
|
||||||
|
enfoque: string
|
||||||
|
selectedIds: Array<string>
|
||||||
|
}
|
||||||
resumen: {
|
resumen: {
|
||||||
previewAsignatura?: AsignaturaPreview
|
previewAsignatura?: AsignaturaPreview
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user