Compare commits
15 Commits
30562fead0
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 4c730fa0ab | |||
| 2abe296b9e | |||
| 1bce226d15 | |||
| b986ec343e | |||
| 379e2d3826 | |||
| cb5422f57c | |||
|
|
67724181fd | ||
| d9a5cec3c5 | |||
| 96848e1793 | |||
| cbaf96c6b5 | |||
| 0fb831fb58 | |||
| 0d1aa61022 | |||
| 84281a88f2 | |||
| d91018c612 | |||
| 658b2e245c |
BIN
public/fonts/indivisa/IndivisaTextSans-Black.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSans-Black.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSans-BlackItalic.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSans-BlackItalic.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSans-Bold.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSans-Bold.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSans-BoldItalic.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSans-BoldItalic.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSans-Light.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSans-Light.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSans-LightItalic.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSans-LightItalic.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSans-Regular.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSans-Regular.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSans-RegularItalic.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSans-RegularItalic.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSerif-Black.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSerif-Black.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSerif-BlackItalic.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSerif-BlackItalic.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSerif-Bold.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSerif-Bold.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSerif-BoldItalic.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSerif-BoldItalic.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSerif-Light.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSerif-Light.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSerif-LightItalic.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSerif-LightItalic.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSerif-Regular.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSerif-Regular.otf
Normal file
Binary file not shown.
BIN
public/fonts/indivisa/IndivisaTextSerif-RegularItalic.otf
Normal file
BIN
public/fonts/indivisa/IndivisaTextSerif-RegularItalic.otf
Normal file
Binary file not shown.
@@ -15,6 +15,7 @@ import {
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
import { useSubject, useUpdateAsignatura } from '@/data/hooks/useSubjects'
|
||||
import { columnParsers } from '@/lib/asignaturaColumnParsers'
|
||||
|
||||
export interface BibliografiaEntry {
|
||||
id: string
|
||||
@@ -38,6 +39,10 @@ export interface AsignaturaResponse {
|
||||
datos: AsignaturaDatos
|
||||
}
|
||||
|
||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === 'object' && value !== null && !Array.isArray(value)
|
||||
}
|
||||
|
||||
type CriterioEvaluacionRow = {
|
||||
criterio: string
|
||||
porcentaje: number
|
||||
@@ -791,80 +796,3 @@ function EvaluationView({ items }: { items: Array<CriterioEvaluacionRow> }) {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === 'object' && value !== null && !Array.isArray(value)
|
||||
}
|
||||
|
||||
function parseContenidoTematicoToPlainText(value: unknown): string {
|
||||
if (!Array.isArray(value)) return ''
|
||||
|
||||
const blocks: Array<string> = []
|
||||
|
||||
for (const item of value) {
|
||||
if (!isRecord(item)) continue
|
||||
|
||||
const unidad =
|
||||
typeof item.unidad === 'number' && Number.isFinite(item.unidad)
|
||||
? item.unidad
|
||||
: undefined
|
||||
const titulo = typeof item.titulo === 'string' ? item.titulo : ''
|
||||
|
||||
const header = `${unidad ?? ''}${unidad ? '.' : ''} ${titulo}`.trim()
|
||||
if (!header) continue
|
||||
|
||||
const lines: Array<string> = [header]
|
||||
|
||||
const temas = Array.isArray(item.temas) ? item.temas : []
|
||||
temas.forEach((tema, idx) => {
|
||||
const temaNombre =
|
||||
typeof tema === 'string'
|
||||
? tema
|
||||
: isRecord(tema) && typeof tema.nombre === 'string'
|
||||
? tema.nombre
|
||||
: ''
|
||||
if (!temaNombre) return
|
||||
|
||||
if (unidad != null) {
|
||||
lines.push(`${unidad}.${idx + 1} ${temaNombre}`.trim())
|
||||
} else {
|
||||
lines.push(`${idx + 1}. ${temaNombre}`)
|
||||
}
|
||||
})
|
||||
|
||||
blocks.push(lines.join('\n'))
|
||||
}
|
||||
|
||||
return blocks.join('\n\n').trimEnd()
|
||||
}
|
||||
|
||||
function parseCriteriosEvaluacionToPlainText(value: unknown): string {
|
||||
if (!Array.isArray(value)) return ''
|
||||
|
||||
const lines: Array<string> = []
|
||||
for (const item of value) {
|
||||
if (!isRecord(item)) continue
|
||||
const label = typeof item.criterio === 'string' ? item.criterio.trim() : ''
|
||||
const valueNum =
|
||||
typeof item.porcentaje === 'number'
|
||||
? item.porcentaje
|
||||
: typeof item.porcentaje === 'string'
|
||||
? Number(item.porcentaje)
|
||||
: NaN
|
||||
|
||||
if (!label) continue
|
||||
if (!Number.isFinite(valueNum)) continue
|
||||
|
||||
const v = Math.trunc(valueNum)
|
||||
if (v < 1 || v > 100) continue
|
||||
|
||||
lines.push(`${label}: ${v}%`)
|
||||
}
|
||||
|
||||
return lines.join('\n')
|
||||
}
|
||||
|
||||
const columnParsers: Partial<Record<string, (value: unknown) => string>> = {
|
||||
contenido_tematico: parseContenidoTematicoToPlainText,
|
||||
criterios_de_evaluacion: parseCriteriosEvaluacionToPlainText,
|
||||
}
|
||||
|
||||
@@ -18,7 +18,8 @@ import { Card } from '@/components/ui/card'
|
||||
interface DocumentoSEPTabProps {
|
||||
pdfUrl: string | null
|
||||
isLoading: boolean
|
||||
onDownload: () => void
|
||||
onDownloadPdf: () => void
|
||||
onDownloadWord: () => void
|
||||
onRegenerate: () => void
|
||||
isRegenerating: boolean
|
||||
}
|
||||
@@ -26,7 +27,8 @@ interface DocumentoSEPTabProps {
|
||||
export function DocumentoSEPTab({
|
||||
pdfUrl,
|
||||
isLoading,
|
||||
onDownload,
|
||||
onDownloadPdf,
|
||||
onDownloadWord,
|
||||
onRegenerate,
|
||||
isRegenerating,
|
||||
}: DocumentoSEPTabProps) {
|
||||
@@ -52,25 +54,23 @@ export function DocumentoSEPTab({
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{pdfUrl && !isLoading && (
|
||||
<Button variant="outline" onClick={onDownload}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Descargar
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<AlertDialog
|
||||
open={showConfirmDialog}
|
||||
onOpenChange={setShowConfirmDialog}
|
||||
>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button disabled={isRegenerating}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2"
|
||||
disabled={isRegenerating}
|
||||
>
|
||||
{isRegenerating ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
)}
|
||||
{isRegenerating ? 'Generando...' : 'Regenerar documento'}
|
||||
{isRegenerating ? 'Generando...' : 'Regenerar'}
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
|
||||
@@ -91,11 +91,31 @@ export function DocumentoSEPTab({
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{pdfUrl && !isLoading && (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
className="gap-2 bg-teal-700 hover:bg-teal-800"
|
||||
onClick={onDownloadWord}
|
||||
>
|
||||
<Download className="h-4 w-4" /> Descargar Word
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2"
|
||||
onClick={onDownloadPdf}
|
||||
>
|
||||
<Download className="h-4 w-4" /> Descargar PDF
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PDF Preview */}
|
||||
<Card className="h-[800px] overflow-hidden">
|
||||
<Card className="h-200 overflow-hidden">
|
||||
{isLoading ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<Loader2 className="h-10 w-10 animate-spin" />
|
||||
|
||||
@@ -1,52 +1,86 @@
|
||||
// document.api.ts
|
||||
|
||||
const DOCUMENT_PDF_URL =
|
||||
'https://n8n.app.lci.ulsa.mx/webhook/62ca84ec-0adb-4006-aba1-32282d27d434'
|
||||
import { supabaseBrowser } from '../supabase/client'
|
||||
import { invokeEdge } from '../supabase/invokeEdge'
|
||||
|
||||
const DOCUMENT_PDF_ASIGNATURA_URL =
|
||||
'https://n8n.app.lci.ulsa.mx/webhook/041a68be-7568-46d0-bc08-09ded12d017d'
|
||||
import { requireData, throwIfError } from './_helpers'
|
||||
|
||||
import type { Tables } from '@/types/supabase'
|
||||
|
||||
const EDGE = {
|
||||
carbone_io_wrapper: 'carbone-io-wrapper',
|
||||
} as const
|
||||
|
||||
interface GeneratePdfParams {
|
||||
plan_estudio_id: string
|
||||
convertTo?: 'pdf'
|
||||
}
|
||||
interface GeneratePdfParamsAsignatura {
|
||||
asignatura_id: string
|
||||
convertTo?: 'pdf'
|
||||
}
|
||||
|
||||
export async function fetchPlanPdf({
|
||||
plan_estudio_id,
|
||||
convertTo,
|
||||
}: GeneratePdfParams): Promise<Blob> {
|
||||
const response = await fetch(DOCUMENT_PDF_URL, {
|
||||
method: 'POST',
|
||||
return await invokeEdge<Blob>(
|
||||
EDGE.carbone_io_wrapper,
|
||||
{
|
||||
action: 'downloadReport',
|
||||
plan_estudio_id,
|
||||
body: convertTo ? { convertTo } : {},
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ plan_estudio_id }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Error al generar el PDF')
|
||||
}
|
||||
|
||||
// n8n devuelve el archivo → lo tratamos como blob
|
||||
return await response.blob()
|
||||
responseType: 'blob',
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
export async function fetchAsignaturaPdf({
|
||||
asignatura_id,
|
||||
convertTo,
|
||||
}: GeneratePdfParamsAsignatura): Promise<Blob> {
|
||||
const response = await fetch(DOCUMENT_PDF_ASIGNATURA_URL, {
|
||||
method: 'POST',
|
||||
const supabase = supabaseBrowser()
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('asignaturas')
|
||||
.select('*')
|
||||
.eq('id', asignatura_id)
|
||||
.single()
|
||||
|
||||
throwIfError(error)
|
||||
|
||||
const row = requireData(
|
||||
data as Pick<
|
||||
Tables<'asignaturas'>,
|
||||
'datos' | 'contenido_tematico' | 'criterios_de_evaluacion'
|
||||
>,
|
||||
'Asignatura no encontrada',
|
||||
)
|
||||
|
||||
const body: Record<string, unknown> = {
|
||||
data: row,
|
||||
}
|
||||
if (convertTo) body.convertTo = convertTo
|
||||
|
||||
return await invokeEdge<Blob>(
|
||||
EDGE.carbone_io_wrapper,
|
||||
{
|
||||
action: 'downloadReport',
|
||||
asignatura_id,
|
||||
body: {
|
||||
...body,
|
||||
},
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ asignatura_id }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Error al generar el PDF')
|
||||
}
|
||||
|
||||
// n8n devuelve el archivo → lo tratamos como blob
|
||||
return await response.blob()
|
||||
responseType: 'blob',
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@ import type { SupabaseClient } from '@supabase/supabase-js'
|
||||
export type EdgeInvokeOptions = {
|
||||
method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
|
||||
headers?: Record<string, string>
|
||||
responseType?: 'json' | 'text' | 'blob' | 'arrayBuffer'
|
||||
}
|
||||
|
||||
export class EdgeFunctionError extends Error {
|
||||
@@ -26,6 +27,55 @@ export class EdgeFunctionError extends Error {
|
||||
}
|
||||
}
|
||||
|
||||
// Soporta base64 puro o data:...;base64,...
|
||||
function decodeBase64ToUint8Array(input: string): Uint8Array {
|
||||
const trimmed = input.trim()
|
||||
const base64 = trimmed.startsWith('data:')
|
||||
? trimmed.slice(trimmed.indexOf(',') + 1)
|
||||
: trimmed
|
||||
|
||||
const bin = atob(base64)
|
||||
const bytes = new Uint8Array(bin.length)
|
||||
for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)
|
||||
return bytes
|
||||
}
|
||||
|
||||
function stripDataUrlPrefix(input: string): string {
|
||||
const trimmed = input.trim()
|
||||
if (!trimmed.startsWith('data:')) return trimmed
|
||||
const commaIdx = trimmed.indexOf(',')
|
||||
return commaIdx >= 0 ? trimmed.slice(commaIdx + 1) : trimmed
|
||||
}
|
||||
|
||||
function looksLikeBase64(s: string): boolean {
|
||||
const t = stripDataUrlPrefix(s).replace(/\s+/g, '').replace(/=+$/g, '')
|
||||
|
||||
// base64 típico: solo chars permitidos y longitud razonable
|
||||
if (t.length < 64) return false
|
||||
return /^[A-Za-z0-9+/]+$/.test(t)
|
||||
}
|
||||
|
||||
function startsWithZip(bytes: Uint8Array): boolean {
|
||||
return bytes.length >= 2 && bytes[0] === 0x50 && bytes[1] === 0x4b // "PK"
|
||||
}
|
||||
|
||||
function startsWithPdf(bytes: Uint8Array): boolean {
|
||||
return (
|
||||
bytes.length >= 5 &&
|
||||
bytes[0] === 0x25 &&
|
||||
bytes[1] === 0x50 &&
|
||||
bytes[2] === 0x44 &&
|
||||
bytes[3] === 0x46 &&
|
||||
bytes[4] === 0x2d
|
||||
) // "%PDF-"
|
||||
}
|
||||
|
||||
function binaryStringToUint8Array(input: string): Uint8Array {
|
||||
const bytes = new Uint8Array(input.length)
|
||||
for (let i = 0; i < input.length; i++) bytes[i] = input.charCodeAt(i) & 0xff
|
||||
return bytes
|
||||
}
|
||||
|
||||
export async function invokeEdge<TOut>(
|
||||
functionName: string,
|
||||
body?:
|
||||
@@ -42,10 +92,16 @@ export async function invokeEdge<TOut>(
|
||||
): Promise<TOut> {
|
||||
const supabase = client ?? supabaseBrowser()
|
||||
|
||||
const { data, error } = await supabase.functions.invoke(functionName, {
|
||||
// Nota: algunas versiones/defs de @supabase/supabase-js no tipan `responseType`
|
||||
// aunque el runtime lo soporte. Usamos `any` para no bloquear el uso de Blob.
|
||||
const invoke: any = (supabase.functions as any).invoke.bind(
|
||||
supabase.functions,
|
||||
)
|
||||
const { data, error } = await invoke(functionName, {
|
||||
body,
|
||||
method: opts.method ?? 'POST',
|
||||
headers: opts.headers,
|
||||
responseType: opts.responseType,
|
||||
})
|
||||
|
||||
if (error) {
|
||||
@@ -104,5 +160,20 @@ export async function invokeEdge<TOut>(
|
||||
throw new EdgeFunctionError(message, functionName, status, details)
|
||||
}
|
||||
|
||||
if (opts.responseType === 'blob') {
|
||||
const anyData: unknown = data
|
||||
|
||||
if (anyData instanceof Blob) {
|
||||
return anyData as TOut
|
||||
}
|
||||
|
||||
throw new EdgeFunctionError(
|
||||
'La Edge Function no devolvió un binario (Blob) válido.',
|
||||
functionName,
|
||||
undefined,
|
||||
{ receivedType: typeof anyData, received: anyData },
|
||||
)
|
||||
}
|
||||
|
||||
return data as TOut
|
||||
}
|
||||
|
||||
78
src/lib/asignaturaColumnParsers.ts
Normal file
78
src/lib/asignaturaColumnParsers.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === 'object' && value !== null && !Array.isArray(value)
|
||||
}
|
||||
|
||||
export function parseContenidoTematicoToPlainText(value: unknown): string {
|
||||
if (!Array.isArray(value)) return ''
|
||||
|
||||
const blocks: Array<string> = []
|
||||
|
||||
for (const item of value) {
|
||||
if (!isRecord(item)) continue
|
||||
|
||||
const unidad =
|
||||
typeof item.unidad === 'number' && Number.isFinite(item.unidad)
|
||||
? item.unidad
|
||||
: undefined
|
||||
const titulo = typeof item.titulo === 'string' ? item.titulo : ''
|
||||
|
||||
const header = `${unidad ?? ''}${unidad ? '.' : ''} ${titulo}`.trim()
|
||||
if (!header) continue
|
||||
|
||||
const lines: Array<string> = [header]
|
||||
|
||||
const temas = Array.isArray(item.temas) ? item.temas : []
|
||||
temas.forEach((tema, idx) => {
|
||||
const temaNombre =
|
||||
typeof tema === 'string'
|
||||
? tema
|
||||
: isRecord(tema) && typeof tema.nombre === 'string'
|
||||
? tema.nombre
|
||||
: ''
|
||||
if (!temaNombre) return
|
||||
|
||||
if (unidad != null) {
|
||||
lines.push(`${unidad}.${idx + 1} ${temaNombre}`.trim())
|
||||
} else {
|
||||
lines.push(`${idx + 1}. ${temaNombre}`)
|
||||
}
|
||||
})
|
||||
|
||||
blocks.push(lines.join('\n'))
|
||||
}
|
||||
|
||||
return blocks.join('\n\n').trimEnd()
|
||||
}
|
||||
|
||||
export function parseCriteriosEvaluacionToPlainText(value: unknown): string {
|
||||
if (!Array.isArray(value)) return ''
|
||||
|
||||
const lines: Array<string> = []
|
||||
for (const item of value) {
|
||||
if (!isRecord(item)) continue
|
||||
const label = typeof item.criterio === 'string' ? item.criterio.trim() : ''
|
||||
const valueNum =
|
||||
typeof item.porcentaje === 'number'
|
||||
? item.porcentaje
|
||||
: typeof item.porcentaje === 'string'
|
||||
? Number(item.porcentaje)
|
||||
: NaN
|
||||
|
||||
if (!label) continue
|
||||
if (!Number.isFinite(valueNum)) continue
|
||||
|
||||
const v = Math.trunc(valueNum)
|
||||
if (v < 1 || v > 100) continue
|
||||
|
||||
lines.push(`${label}: ${v}%`)
|
||||
}
|
||||
|
||||
return lines.join('\n')
|
||||
}
|
||||
|
||||
export const columnParsers: Partial<
|
||||
Record<string, (value: unknown) => string>
|
||||
> = {
|
||||
contenido_tematico: parseContenidoTematicoToPlainText,
|
||||
criterios_de_evaluacion: parseCriteriosEvaluacionToPlainText,
|
||||
}
|
||||
@@ -8,10 +8,11 @@ import {
|
||||
Clock,
|
||||
FileJson,
|
||||
} from 'lucide-react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { usePlan } from '@/data'
|
||||
import { fetchPlanPdf } from '@/data/api/document.api'
|
||||
|
||||
export const Route = createFileRoute('/planes/$planId/_detalle/documento')({
|
||||
@@ -20,30 +21,41 @@ export const Route = createFileRoute('/planes/$planId/_detalle/documento')({
|
||||
|
||||
function RouteComponent() {
|
||||
const { planId } = useParams({ from: '/planes/$planId/_detalle/documento' })
|
||||
const { data: plan } = usePlan(planId)
|
||||
const [pdfUrl, setPdfUrl] = useState<string | null>(null)
|
||||
const pdfUrlRef = useRef<string | null>(null)
|
||||
const isMountedRef = useRef<boolean>(false)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
const planFileBaseName = sanitizeFileBaseName(plan?.nombre ?? 'plan_estudios')
|
||||
|
||||
const loadPdfPreview = useCallback(async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const pdfBlob = await fetchPlanPdf({ plan_estudio_id: planId })
|
||||
if (isMountedRef.current) setIsLoading(true)
|
||||
const pdfBlob = await fetchPlanPdf({
|
||||
plan_estudio_id: planId,
|
||||
convertTo: 'pdf',
|
||||
})
|
||||
|
||||
if (!isMountedRef.current) return
|
||||
const url = window.URL.createObjectURL(pdfBlob)
|
||||
|
||||
// Limpiar URL anterior si existe para evitar fugas de memoria
|
||||
if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
|
||||
|
||||
if (pdfUrlRef.current) window.URL.revokeObjectURL(pdfUrlRef.current)
|
||||
pdfUrlRef.current = url
|
||||
setPdfUrl(url)
|
||||
} catch (error) {
|
||||
console.error('Error cargando preview:', error)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
if (isMountedRef.current) setIsLoading(false)
|
||||
}
|
||||
}, [planId])
|
||||
|
||||
useEffect(() => {
|
||||
isMountedRef.current = true
|
||||
loadPdfPreview()
|
||||
return () => {
|
||||
if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
|
||||
isMountedRef.current = false
|
||||
if (pdfUrlRef.current) window.URL.revokeObjectURL(pdfUrlRef.current)
|
||||
}
|
||||
}, [loadPdfPreview])
|
||||
|
||||
@@ -51,12 +63,13 @@ function RouteComponent() {
|
||||
try {
|
||||
const pdfBlob = await fetchPlanPdf({
|
||||
plan_estudio_id: planId,
|
||||
convertTo: 'pdf',
|
||||
})
|
||||
|
||||
const url = window.URL.createObjectURL(pdfBlob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = 'plan_estudios.pdf'
|
||||
link.download = `${planFileBaseName}.pdf`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
|
||||
@@ -67,6 +80,27 @@ function RouteComponent() {
|
||||
alert('No se pudo generar el PDF')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownloadWord = async () => {
|
||||
try {
|
||||
const docBlob = await fetchPlanPdf({
|
||||
plan_estudio_id: planId,
|
||||
})
|
||||
|
||||
const url = window.URL.createObjectURL(docBlob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `${planFileBaseName}.docx`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
|
||||
link.remove()
|
||||
setTimeout(() => window.URL.revokeObjectURL(url), 1000)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
alert('No se pudo generar el Word')
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col gap-6 bg-slate-50/30 p-6">
|
||||
{/* HEADER DE ACCIONES */}
|
||||
@@ -88,12 +122,17 @@ function RouteComponent() {
|
||||
>
|
||||
<RefreshCcw size={16} /> Regenerar
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="gap-2">
|
||||
<Download size={16} /> Descargar Word
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="gap-2 bg-teal-700 hover:bg-teal-800"
|
||||
onClick={handleDownloadWord}
|
||||
>
|
||||
<Download size={16} /> Descargar Word
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2"
|
||||
onClick={handleDownloadPdf}
|
||||
>
|
||||
<Download size={16} /> Descargar PDF
|
||||
@@ -139,7 +178,7 @@ function RouteComponent() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<CardContent className="flex min-h-[800px] justify-center bg-slate-500 p-0">
|
||||
<CardContent className="flex min-h-200 justify-center bg-slate-500 p-0">
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center gap-4 text-white">
|
||||
<RefreshCcw size={40} className="animate-spin opacity-50" />
|
||||
@@ -149,7 +188,7 @@ function RouteComponent() {
|
||||
/* 3. VISOR DE PDF REAL */
|
||||
<iframe
|
||||
src={`${pdfUrl}#toolbar=0&navpanes=0`}
|
||||
className="h-[1000px] w-full max-w-[1000px] border-none shadow-2xl"
|
||||
className="h-250 w-full max-w-250 border-none shadow-2xl"
|
||||
title="PDF Preview"
|
||||
/>
|
||||
) : (
|
||||
@@ -163,6 +202,24 @@ function RouteComponent() {
|
||||
)
|
||||
}
|
||||
|
||||
function sanitizeFileBaseName(input: string): string {
|
||||
const text = String(input)
|
||||
const withoutControlChars = Array.from(text)
|
||||
.filter((ch) => {
|
||||
const code = ch.charCodeAt(0)
|
||||
return code >= 32 && code !== 127
|
||||
})
|
||||
.join('')
|
||||
|
||||
const cleaned = withoutControlChars
|
||||
.replace(/[<>:"/\\|?*]+/g, ' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim()
|
||||
.replace(/[. ]+$/g, '')
|
||||
|
||||
return (cleaned || 'documento').slice(0, 150)
|
||||
}
|
||||
|
||||
// Componente pequeño para las tarjetas de estado superior
|
||||
function StatusCard({
|
||||
icon,
|
||||
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
Plus,
|
||||
ChevronDown,
|
||||
AlertTriangle,
|
||||
GripVertical,
|
||||
Trash2,
|
||||
Pencil,
|
||||
} from 'lucide-react'
|
||||
@@ -46,16 +45,33 @@ import {
|
||||
useUpdateAsignatura,
|
||||
useUpdateLinea,
|
||||
} from '@/data'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
|
||||
// --- Mapeadores (Fuera del componente para mayor limpieza) ---
|
||||
const palette = [
|
||||
'#4F46E5', // índigo
|
||||
'#7C3AED', // violeta
|
||||
'#EA580C', // naranja
|
||||
'#059669', // esmeralda
|
||||
'#DC2626', // rojo
|
||||
'#0891B2', // cyan
|
||||
'#CA8A04', // ámbar
|
||||
'#C026D3', // fucsia
|
||||
]
|
||||
|
||||
const mapLineasToLineaCurricular = (
|
||||
lineasApi: Array<any> = [],
|
||||
): Array<LineaCurricular> => {
|
||||
return lineasApi.map((linea) => ({
|
||||
return lineasApi.map((linea, index) => ({
|
||||
id: linea.id,
|
||||
nombre: linea.nombre,
|
||||
orden: linea.orden ?? 0,
|
||||
color: '#1976d2',
|
||||
color: palette[index % palette.length],
|
||||
}))
|
||||
}
|
||||
|
||||
@@ -121,52 +137,216 @@ function StatItem({
|
||||
)
|
||||
}
|
||||
|
||||
import * as Icons from 'lucide-react'
|
||||
|
||||
const estadoConfig: Record<
|
||||
Asignatura['estado'],
|
||||
{
|
||||
label: string
|
||||
dot: string
|
||||
soft: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
> = {
|
||||
borrador: {
|
||||
label: 'Borrador',
|
||||
dot: 'bg-slate-500',
|
||||
soft: 'bg-slate-100 text-slate-700',
|
||||
icon: Icons.FileText,
|
||||
},
|
||||
revisada: {
|
||||
label: 'Revisada',
|
||||
dot: 'bg-amber-500',
|
||||
soft: 'bg-amber-100 text-amber-700',
|
||||
icon: Icons.ScanSearch,
|
||||
},
|
||||
aprobada: {
|
||||
label: 'Aprobada',
|
||||
dot: 'bg-emerald-500',
|
||||
soft: 'bg-emerald-100 text-emerald-700',
|
||||
icon: Icons.BadgeCheck,
|
||||
},
|
||||
generando: {
|
||||
label: 'Generando',
|
||||
dot: 'bg-sky-500',
|
||||
soft: 'bg-sky-100 text-sky-700',
|
||||
icon: Icons.LoaderCircle,
|
||||
},
|
||||
}
|
||||
|
||||
function hexToRgba(hex: string, alpha: number) {
|
||||
const clean = hex.replace('#', '')
|
||||
const bigint = parseInt(clean, 16)
|
||||
const r = (bigint >> 16) & 255
|
||||
const g = (bigint >> 8) & 255
|
||||
const b = bigint & 255
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`
|
||||
}
|
||||
|
||||
function AsignaturaCardItem({
|
||||
asignatura,
|
||||
lineaColor,
|
||||
lineaNombre,
|
||||
onDragStart,
|
||||
isDragging,
|
||||
onClick,
|
||||
}: {
|
||||
asignatura: Asignatura
|
||||
lineaColor: string
|
||||
lineaNombre?: string
|
||||
onDragStart: (e: React.DragEvent, id: string) => void
|
||||
isDragging: boolean
|
||||
onClick: () => void
|
||||
}) {
|
||||
const estado = estadoConfig[asignatura.estado] ?? estadoConfig.borrador
|
||||
const EstadoIcon = estado.icon
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={150}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
draggable
|
||||
onDragStart={(e) => onDragStart(e, asignatura.id)}
|
||||
onClick={onClick}
|
||||
className={`group cursor-grab rounded-lg border bg-white p-3 shadow-sm transition-all active:cursor-grabbing ${
|
||||
className={[
|
||||
'group relative h-[200px] w-[272px] shrink-0 overflow-hidden rounded-[22px] border text-left',
|
||||
'transition-all duration-300 ease-out',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30',
|
||||
'active:cursor-grabbing cursor-grab',
|
||||
isDragging
|
||||
? 'scale-95 opacity-40'
|
||||
: 'hover:border-teal-400 hover:shadow-md'
|
||||
}`}
|
||||
? 'scale-[0.985] opacity-45 shadow-none'
|
||||
: 'hover:-translate-y-1 hover:shadow-lg',
|
||||
].join(' ')}
|
||||
style={{
|
||||
borderColor: hexToRgba(lineaColor, 0.18),
|
||||
background: `
|
||||
radial-gradient(circle at top right, ${hexToRgba(lineaColor, 0.22)} 0%, transparent 34%),
|
||||
linear-gradient(180deg, ${hexToRgba(lineaColor, 0.12)} 0%, ${hexToRgba(lineaColor, 0.04)} 42%, var(--card) 100%)
|
||||
`,
|
||||
}}
|
||||
title={asignatura.nombre}
|
||||
>
|
||||
<div className="mb-1 flex items-start justify-between">
|
||||
<span className="font-mono text-[10px] font-bold text-slate-400">
|
||||
{asignatura.clave}
|
||||
</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`px-1 py-0 text-[9px] uppercase ${statusBadge[asignatura.estado] || ''}`}
|
||||
{/* franja */}
|
||||
<div
|
||||
className="absolute inset-x-0 top-0 h-2"
|
||||
style={{ backgroundColor: lineaColor }}
|
||||
/>
|
||||
|
||||
{/* glow decorativo */}
|
||||
<div
|
||||
className="absolute -top-10 -right-10 h-28 w-28 rounded-full blur-2xl transition-transform duration-500 group-hover:scale-110"
|
||||
style={{ backgroundColor: hexToRgba(lineaColor, 0.22) }}
|
||||
/>
|
||||
|
||||
<div className="relative flex h-full flex-col p-4">
|
||||
{/* top */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div
|
||||
className="inline-flex h-8 max-w-[200px] items-center gap-1.5 rounded-full border px-2.5 text-[11px] font-semibold"
|
||||
style={{
|
||||
borderColor: hexToRgba(lineaColor, 0.2),
|
||||
backgroundColor: hexToRgba(lineaColor, 0.1),
|
||||
color: lineaColor,
|
||||
}}
|
||||
>
|
||||
{asignatura.estado}
|
||||
</Badge>
|
||||
<Icons.KeyRound className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="truncate">{asignatura.clave || 'Sin clave'}</span>
|
||||
</div>
|
||||
<p className="mb-1 text-xs leading-tight font-bold text-slate-700">
|
||||
{asignatura.nombre}
|
||||
</p>
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<span className="text-[10px] text-slate-500">
|
||||
{asignatura.creditos} CR • HD:{asignatura.hd} • HI:{asignatura.hi}
|
||||
</span>
|
||||
<GripVertical
|
||||
size={12}
|
||||
className="text-slate-300 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
|
||||
<div className="relative flex h-8 items-center overflow-hidden rounded-full bg-background/70 px-2 backdrop-blur-sm">
|
||||
<div className="flex gap-4 items-center gap-1.5 transition-transform duration-300 group-hover:-translate-x-[72px]">
|
||||
<span className={`h-2.5 w-2.5 rounded-full ${estado.dot}`} />
|
||||
<EstadoIcon
|
||||
className={[
|
||||
'h-3.5 w-3.5 text-foreground/65',
|
||||
asignatura.estado === 'generando' ? 'animate-spin' : '',
|
||||
].join(' ')}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'absolute right-2 flex translate-x-6 items-center gap-1.5 opacity-0 transition-all duration-300',
|
||||
'group-hover:translate-x-0 group-hover:opacity-100'
|
||||
].join(' ')}
|
||||
>
|
||||
<span className="text-[11px] font-semibold whitespace-nowrap">
|
||||
{estado.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* titulo */}
|
||||
<div className="mt-4 min-h-[72px]">
|
||||
<h3
|
||||
className="overflow-hidden text-[18px] leading-[1.08] font-bold text-foreground"
|
||||
style={{
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 3,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
}}
|
||||
>
|
||||
{asignatura.nombre}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* bottom */}
|
||||
<div className="mt-auto grid grid-cols-3 gap-2">
|
||||
<div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
|
||||
<Icons.Award className="h-3.5 w-3.5" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide">
|
||||
CR
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-foreground">
|
||||
{asignatura.creditos}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
|
||||
<Icons.Clock3 className="h-3.5 w-3.5" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide">
|
||||
HD
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-foreground">
|
||||
{asignatura.hd}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
|
||||
<Icons.BookOpenText className="h-3.5 w-3.5" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide">
|
||||
HI
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-foreground">
|
||||
{asignatura.hi}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* drag affordance */}
|
||||
<div className="pointer-events-none absolute right-3 bottom-3 rounded-full bg-background/70 p-1.5 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:opacity-100">
|
||||
<Icons.GripVertical className="h-4 w-4 text-muted-foreground/55" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
|
||||
<TooltipContent side="bottom">
|
||||
<div className="text-xs">
|
||||
{lineaNombre ? `${lineaNombre} · ` : ''}
|
||||
{asignatura.nombre}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -618,8 +798,7 @@ function MapaCurricularPage() {
|
||||
return (
|
||||
<Fragment key={linea.id}>
|
||||
<div
|
||||
className={`group relative flex items-center justify-between rounded-xl border-l-4 p-4 transition-all ${
|
||||
lineColors[idx % lineColors.length]
|
||||
className={`group relative flex items-center justify-between rounded-xl border-l-4 p-4 transition-all ${lineColors[idx % lineColors.length]
|
||||
} ${editingLineaId === linea.id ? 'bg-white ring-2 ring-teal-500/20' : ''}`}
|
||||
>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
@@ -635,8 +814,7 @@ function MapaCurricularPage() {
|
||||
setTempNombreLinea(linea.nombre)
|
||||
}
|
||||
}}
|
||||
className={`block w-full text-xs font-bold break-words outline-none ${
|
||||
editingLineaId === linea.id
|
||||
className={`block w-full text-xs font-bold break-words outline-none ${editingLineaId === linea.id
|
||||
? 'cursor-text border-b border-teal-500/50 pb-1'
|
||||
: 'cursor-pointer'
|
||||
}`}
|
||||
@@ -677,6 +855,8 @@ function MapaCurricularPage() {
|
||||
<AsignaturaCardItem
|
||||
key={m.id}
|
||||
asignatura={m}
|
||||
lineaColor={linea.color || '#1976d2'}
|
||||
lineaNombre={linea.nombre}
|
||||
isDragging={draggedAsignatura === m.id}
|
||||
onDragStart={handleDragStart}
|
||||
onClick={() => {
|
||||
@@ -727,45 +907,81 @@ function MapaCurricularPage() {
|
||||
</div>
|
||||
|
||||
{/* Asignaturas Sin Asignar */}
|
||||
<div className="mt-10 rounded-2xl border border-slate-200 bg-slate-50 p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-slate-600">
|
||||
<h3 className="text-sm font-bold tracking-wider uppercase">
|
||||
Bandeja de Entrada / Asignaturas sin asignar
|
||||
</h3>
|
||||
<Badge variant="secondary">{unassignedAsignaturas.length}</Badge>
|
||||
<div className="mt-12 rounded-[28px] border border-border bg-card/80 p-5 shadow-sm backdrop-blur-sm">
|
||||
<div className="mb-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
|
||||
<Icons.Inbox className="h-4.5 w-4.5" />
|
||||
</div>
|
||||
<p className="text-xs text-slate-400">
|
||||
Arrastra una asignatura aquí para quitarla del mapa
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-bold tracking-wide text-foreground uppercase">
|
||||
Bandeja de entrada
|
||||
</h3>
|
||||
|
||||
<div className="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-muted px-2 text-[11px] font-semibold text-muted-foreground">
|
||||
{unassignedAsignaturas.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-0.5 text-sm text-muted-foreground">
|
||||
Asignaturas sin ciclo o línea curricular
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 rounded-full border border-dashed border-border bg-background/80 px-3 py-1.5 text-xs text-muted-foreground">
|
||||
<Icons.MoveDown className="h-3.5 w-3.5" />
|
||||
<span>Arrastra aquí para desasignar</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`flex min-h-[120px] flex-wrap gap-4 rounded-xl border-2 border-dashed p-4 transition-colors ${
|
||||
draggedAsignatura
|
||||
? 'border-teal-300 bg-teal-50/50'
|
||||
: 'border-slate-200 bg-white/50'
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(e, null, null)} // Limpia ciclo y línea
|
||||
onDrop={(e) => handleDrop(e, null, null)}
|
||||
className={[
|
||||
'rounded-[24px] border-2 border-dashed p-4 transition-all duration-300',
|
||||
'min-h-[220px]',
|
||||
draggedAsignatura
|
||||
? 'border-primary/35 bg-primary/6 shadow-inner'
|
||||
: 'border-border bg-muted/20',
|
||||
].join(' ')}
|
||||
>
|
||||
{unassignedAsignaturas.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{unassignedAsignaturas.map((m) => (
|
||||
<div key={m.id} className="w-[200px]">
|
||||
<div key={m.id} className="w-[272px] shrink-0">
|
||||
<AsignaturaCardItem
|
||||
asignatura={m}
|
||||
lineaColor="#94A3B8"
|
||||
lineaNombre="Sin asignar"
|
||||
isDragging={draggedAsignatura === m.id}
|
||||
onDragStart={handleDragStart}
|
||||
onClick={() => {
|
||||
setEditingData(m) // Cargamos los datos en el estado de edición
|
||||
setEditingData(m)
|
||||
setIsEditModalOpen(true)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{unassignedAsignaturas.length === 0 && (
|
||||
<div className="flex w-full items-center justify-center text-sm text-slate-400">
|
||||
No hay asignaturas pendientes. Arrastra una asignatura aquí para
|
||||
desasignarla.
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex min-h-[188px] flex-col items-center justify-center rounded-[20px] border border-border/70 bg-background/70 px-6 text-center">
|
||||
<div className="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
|
||||
<Icons.CheckCheck className="h-5 w-5" />
|
||||
</div>
|
||||
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
No hay asignaturas pendientes
|
||||
</p>
|
||||
|
||||
<p className="mt-1 max-w-md text-sm text-muted-foreground">
|
||||
Todo está colocado en el mapa. Arrastra una asignatura aquí para quitarle
|
||||
ciclo y línea curricular.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
|
||||
import { DocumentoSEPTab } from '@/components/asignaturas/detalle/DocumentoSEPTab'
|
||||
import { useSubject } from '@/data'
|
||||
import { fetchAsignaturaPdf } from '@/data/api/document.api'
|
||||
|
||||
export const Route = createFileRoute(
|
||||
@@ -15,48 +16,75 @@ function RouteComponent() {
|
||||
from: '/planes/$planId/asignaturas/$asignaturaId/documento',
|
||||
})
|
||||
|
||||
const { data: asignatura } = useSubject(asignaturaId)
|
||||
const asignaturaFileBaseName = sanitizeFileBaseName(
|
||||
asignatura?.nombre ?? 'documento_sep',
|
||||
)
|
||||
|
||||
const [pdfUrl, setPdfUrl] = useState<string | null>(null)
|
||||
const pdfUrlRef = useRef<string | null>(null)
|
||||
const isMountedRef = useRef<boolean>(false)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [isRegenerating, setIsRegenerating] = useState(false)
|
||||
|
||||
const loadPdfPreview = useCallback(async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
if (isMountedRef.current) setIsLoading(true)
|
||||
|
||||
const pdfBlob = await fetchAsignaturaPdf({
|
||||
asignatura_id: asignaturaId,
|
||||
convertTo: 'pdf',
|
||||
})
|
||||
|
||||
if (!isMountedRef.current) return
|
||||
|
||||
const url = window.URL.createObjectURL(pdfBlob)
|
||||
|
||||
setPdfUrl((prev) => {
|
||||
if (prev) window.URL.revokeObjectURL(prev)
|
||||
return url
|
||||
})
|
||||
if (pdfUrlRef.current) window.URL.revokeObjectURL(pdfUrlRef.current)
|
||||
pdfUrlRef.current = url
|
||||
setPdfUrl(url)
|
||||
} catch (error) {
|
||||
console.error('Error cargando PDF:', error)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
if (isMountedRef.current) setIsLoading(false)
|
||||
}
|
||||
}, [asignaturaId])
|
||||
|
||||
useEffect(() => {
|
||||
isMountedRef.current = true
|
||||
loadPdfPreview()
|
||||
|
||||
return () => {
|
||||
if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
|
||||
isMountedRef.current = false
|
||||
if (pdfUrlRef.current) window.URL.revokeObjectURL(pdfUrlRef.current)
|
||||
}
|
||||
}, [loadPdfPreview])
|
||||
|
||||
const handleDownload = async () => {
|
||||
const handleDownloadPdf = async () => {
|
||||
const pdfBlob = await fetchAsignaturaPdf({
|
||||
asignatura_id: asignaturaId,
|
||||
convertTo: 'pdf',
|
||||
})
|
||||
|
||||
const url = window.URL.createObjectURL(pdfBlob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = 'documento_sep.pdf'
|
||||
link.download = `${asignaturaFileBaseName}.pdf`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
window.URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const handleDownloadWord = async () => {
|
||||
const docBlob = await fetchAsignaturaPdf({
|
||||
asignatura_id: asignaturaId,
|
||||
})
|
||||
|
||||
const url = window.URL.createObjectURL(docBlob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `${asignaturaFileBaseName}.docx`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
@@ -77,9 +105,28 @@ function RouteComponent() {
|
||||
<DocumentoSEPTab
|
||||
pdfUrl={pdfUrl}
|
||||
isLoading={isLoading}
|
||||
onDownload={handleDownload}
|
||||
onDownloadPdf={handleDownloadPdf}
|
||||
onDownloadWord={handleDownloadWord}
|
||||
onRegenerate={handleRegenerate}
|
||||
isRegenerating={isRegenerating}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function sanitizeFileBaseName(input: string): string {
|
||||
const text = String(input)
|
||||
const withoutControlChars = Array.from(text)
|
||||
.filter((ch) => {
|
||||
const code = ch.charCodeAt(0)
|
||||
return code >= 32 && code !== 127
|
||||
})
|
||||
.join('')
|
||||
|
||||
const cleaned = withoutControlChars
|
||||
.replace(/[<>:"/\\|?*]+/g, ' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim()
|
||||
.replace(/[. ]+$/g, '')
|
||||
|
||||
return (cleaned || 'documento').slice(0, 150)
|
||||
}
|
||||
|
||||
151
src/styles.css
151
src/styles.css
@@ -4,18 +4,145 @@
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-Light.otf') format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-LightItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-Regular.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-RegularItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-Bold.otf') format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-BoldItalic.otf') format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-Black.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-BlackItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Serif */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-Light.otf') format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-LightItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-Regular.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-RegularItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-Bold.otf') format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-BoldItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-Black.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-BlackItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply m-0;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family:
|
||||
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
strong,
|
||||
b,
|
||||
.font-bold {
|
||||
font-family: 'Indivisa Sans', serif;
|
||||
font-weight: 900;
|
||||
/* Inter letter space */
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -51,9 +178,9 @@ code {
|
||||
--sidebar-accent-foreground: oklch(0.6304 0.2472 28.2698);
|
||||
--sidebar-border: oklch(0.9401 0 0);
|
||||
--sidebar-ring: oklch(0 0 0);
|
||||
--font-sans: Plus Jakarta Sans, sans-serif;
|
||||
--font-serif: Lora, serif;
|
||||
--font-mono: IBM Plex Mono, monospace;
|
||||
--font-sans: 'Indivisa Sans', sans-serif;
|
||||
--font-serif: 'Indivisa Serif', serif;
|
||||
--font-mono: 'Indivisa Sans', monospace;
|
||||
--radius: 1.4rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 2px;
|
||||
@@ -101,7 +228,7 @@ code {
|
||||
--chart-1: oklch(0.6686 0.1794 251.7436);
|
||||
--chart-2: oklch(0.6342 0.2516 22.4415);
|
||||
--chart-3: oklch(0.8718 0.1716 90.9505);
|
||||
--chart-4: oklch(0.4503 0.229 263.0881);
|
||||
--chart-4: oklch(11.492% 0.00001 271.152);
|
||||
--chart-5: oklch(0.8322 0.146 185.9404);
|
||||
--sidebar: oklch(0.1564 0.0688 261.2771);
|
||||
--sidebar-foreground: oklch(0.9551 0 0);
|
||||
@@ -111,9 +238,9 @@ code {
|
||||
--sidebar-accent-foreground: oklch(0.6786 0.2095 24.6583);
|
||||
--sidebar-border: oklch(0.3289 0.0092 268.3843);
|
||||
--sidebar-ring: oklch(0.6048 0.2166 257.2136);
|
||||
--font-sans: Plus Jakarta Sans, sans-serif;
|
||||
--font-serif: Lora, serif;
|
||||
--font-mono: IBM Plex Mono, monospace;
|
||||
--font-sans: 'Indivisa Sans', sans-serif;
|
||||
--font-serif: 'Indivisa Serif', serif;
|
||||
--font-mono: 'Indivisa Sans', monospace;
|
||||
--radius: 1.4rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 2px;
|
||||
|
||||
@@ -154,9 +154,9 @@ export type Database = {
|
||||
numero_ciclo: number | null
|
||||
orden_celda: number | null
|
||||
plan_estudio_id: string
|
||||
prerrequisito_asignatura_id: string | null
|
||||
tipo: Database['public']['Enums']['tipo_asignatura']
|
||||
tipo_origen: Database['public']['Enums']['tipo_origen'] | null
|
||||
prerrequisito_asignatura_id?: string
|
||||
}
|
||||
Insert: {
|
||||
actualizado_en?: string
|
||||
@@ -180,6 +180,7 @@ export type Database = {
|
||||
numero_ciclo?: number | null
|
||||
orden_celda?: number | null
|
||||
plan_estudio_id: string
|
||||
prerrequisito_asignatura_id?: string | null
|
||||
tipo?: Database['public']['Enums']['tipo_asignatura']
|
||||
tipo_origen?: Database['public']['Enums']['tipo_origen'] | null
|
||||
}
|
||||
@@ -205,6 +206,7 @@ export type Database = {
|
||||
numero_ciclo?: number | null
|
||||
orden_celda?: number | null
|
||||
plan_estudio_id?: string
|
||||
prerrequisito_asignatura_id?: string | null
|
||||
tipo?: Database['public']['Enums']['tipo_asignatura']
|
||||
tipo_origen?: Database['public']['Enums']['tipo_origen'] | null
|
||||
}
|
||||
@@ -258,6 +260,20 @@ export type Database = {
|
||||
referencedRelation: 'plantilla_plan'
|
||||
referencedColumns: ['plan_estudio_id']
|
||||
},
|
||||
{
|
||||
foreignKeyName: 'asignaturas_prerrequisito_asignatura_id_fkey'
|
||||
columns: ['prerrequisito_asignatura_id']
|
||||
isOneToOne: false
|
||||
referencedRelation: 'asignaturas'
|
||||
referencedColumns: ['id']
|
||||
},
|
||||
{
|
||||
foreignKeyName: 'asignaturas_prerrequisito_asignatura_id_fkey'
|
||||
columns: ['prerrequisito_asignatura_id']
|
||||
isOneToOne: false
|
||||
referencedRelation: 'plantilla_asignatura'
|
||||
referencedColumns: ['asignatura_id']
|
||||
},
|
||||
]
|
||||
}
|
||||
bibliografia_asignatura: {
|
||||
@@ -1377,6 +1393,7 @@ export type Database = {
|
||||
Args: { p_append: Json; p_id: string }
|
||||
Returns: undefined
|
||||
}
|
||||
suma_porcentajes: { Args: { '': Json }; Returns: number }
|
||||
unaccent: { Args: { '': string }; Returns: string }
|
||||
unaccent_immutable: { Args: { '': string }; Returns: string }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user