Se crea funcionalidad de exportar pdf desde front y generar historial de version de cambios se agrego una libreri jspdf

This commit is contained in:
2025-11-05 15:19:38 -06:00
parent daac6f3f6d
commit 9462e25a20
8 changed files with 6622 additions and 91 deletions

View File

@@ -3,7 +3,7 @@ import { useQueryClient } from "@tanstack/react-query";
import { createFileRoute, Link, useRouter } from "@tanstack/react-router"
import * as Icons from "lucide-react"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { supabase } from "@/auth/supabase"
import { supabase, useSupabaseAuth } from "@/auth/supabase"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
@@ -403,29 +403,79 @@ function EditAsignaturaButton({ asignatura, onUpdate }: {
const [open, setOpen] = useState(false)
const [saving, setSaving] = useState(false)
const [form, setForm] = useState<Partial<Asignatura>>({})
const auth = useSupabaseAuth()
const openAndFill = () => { setForm(asignatura); setOpen(true) }
// ✅ Función que genera las diferencias entre los datos anteriores y los nuevos
function generateDiff(oldData: Asignatura, newData: Partial<Asignatura>) {
const changes: any[] = []
for (const key of Object.keys(newData)) {
const oldValue = (oldData as any)[key]
const newValue = (newData as any)[key]
if (newValue !== undefined && newValue !== oldValue) {
changes.push({
op: "replace",
path: `/${key}`,
from: oldValue,
value: newValue
})
}
}
return changes
}
async function save() {
setSaving(true)
const payload = {
nombre: form.nombre ?? asignatura.nombre,
clave: form.clave ?? asignatura.clave,
tipo: form.tipo ?? asignatura.tipo,
semestre: form.semestre ?? asignatura.semestre,
creditos: form.creditos ?? asignatura.creditos,
horas_teoricas: form.horas_teoricas ?? asignatura.horas_teoricas,
horas_practicas: form.horas_practicas ?? asignatura.horas_practicas,
try {
// 1⃣ Preparar el payload final
const payload = {
nombre: form.nombre ?? asignatura.nombre,
clave: form.clave ?? asignatura.clave,
tipo: form.tipo ?? asignatura.tipo,
semestre: form.semestre ?? asignatura.semestre,
creditos: form.creditos ?? asignatura.creditos,
horas_teoricas: form.horas_teoricas ?? asignatura.horas_teoricas,
horas_practicas: form.horas_practicas ?? asignatura.horas_practicas,
}
// 2⃣ Detectar cambios
const diff = generateDiff(asignatura, payload)
// 3⃣ Guardar respaldo si hubo cambios
if (diff.length > 0) {
const { error: backupError } = await supabase
.from("historico_cambios_asignaturas") // 👈 usa el nombre real de tu tabla
.insert({
id_asignatura: asignatura.id,
json_cambios: diff, // jsonb
user_id: auth.user?.id,
created_at: new Date().toISOString()
})
if (backupError) throw backupError
}
// 4⃣ Actualizar el registro principal
const { data, error } = await supabase
.from("asignaturas")
.update(payload)
.eq("id", asignatura.id)
.select()
.maybeSingle()
if (error) throw error
// 5⃣ Actualizar vista local
if (data) {
onUpdate(data as Asignatura)
setOpen(false)
}
} catch (err: any) {
alert(err.message ?? "Error al guardar")
} finally {
setSaving(false)
}
const { data, error } = await supabase
.from("asignaturas")
.update(payload)
.eq("id", asignatura.id)
.select()
.maybeSingle()
setSaving(false)
if (!error && data) { onUpdate(data as Asignatura); setOpen(false) }
else alert(error?.message ?? "Error al guardar")
}
return (
@@ -650,6 +700,7 @@ export function EditContenidosButton({
const [saving, setSaving] = useState(false)
const [units, setUnits] = useState<UnitDraft[]>([])
const [initialUnits, setInitialUnits] = useState<UnitDraft[]>([])
const auth = useSupabaseAuth() // 👈 para registrar el usuario que edita
// --- Normaliza entrada flexible a estructura estable
const normalize = useCallback((v: any): UnitDraft[] => {
@@ -685,7 +736,7 @@ export function EditContenidosButton({
}
}, [])
// --- Construye payload consistente { "1": { titulo, subtemas:{ "1": "t1" } } }
// --- Construye payload consistente
const buildPayload = useCallback((us: UnitDraft[]) => {
const out: Record<string, any> = {}
us.forEach((u, idx) => {
@@ -702,9 +753,9 @@ export function EditContenidosButton({
return out
}, [])
// --- Limpia UI: recorta espacios, elimina líneas vacías/duplicadas (case-insensitive)
// --- Limpia UI
const cleanUnits = useCallback((us: UnitDraft[]) => {
return us.map((u, idx) => {
return us.map((u) => {
const seen = new Set<string>()
const temas = u.temas
.map((t) => t.trim())
@@ -715,10 +766,7 @@ export function EditContenidosButton({
seen.add(key)
return true
})
return {
title: (u.title || "").trim(),
temas,
}
return { title: (u.title || "").trim(), temas }
})
}, [])
@@ -734,7 +782,7 @@ export function EditContenidosButton({
[units, initialUnits, cleanUnits],
)
// --- Atajos: Guardar con Ctrl/Cmd + Enter
// --- Atajos: Ctrl/Cmd + Enter
useEffect(() => {
if (!open) return
const handler = (e: KeyboardEvent) => {
@@ -746,7 +794,6 @@ export function EditContenidosButton({
}
window.addEventListener("keydown", handler)
return () => window.removeEventListener("keydown", handler)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open, units, saving])
// --- Acciones por unidad
@@ -754,15 +801,17 @@ export function EditContenidosButton({
if (!confirm("¿Eliminar esta unidad?")) return
setUnits((prev) => prev.filter((_, i) => i !== idx))
}
const moveUnit = (idx: number, dir: -1 | 1) => {
setUnits((prev) => {
const next = [...prev]
const j = idx + dir
if (j < 0 || j >= next.length) return prev
;[next[idx], next[j]] = [next[j], next[idx]]
;[next[idx], next[j]] = [next[j], next[idx]]
return next
})
}
const duplicateUnit = (idx: number) => {
setUnits((prev) => {
const next = [...prev]
@@ -774,24 +823,54 @@ export function EditContenidosButton({
})
}
// ✅ Función para guardar con respaldo histórico
async function save() {
setSaving(true)
const cleaned = cleanUnits(units)
const contenidos = buildPayload(cleaned)
const { data, error } = await supabase
.from("asignaturas")
.update({ contenidos })
.eq("id", asignaturaId)
.select()
.maybeSingle()
setSaving(false)
if (error) {
alert(error.message || "No se pudo guardar")
return
try {
const cleaned = cleanUnits(units)
const contenidos = buildPayload(cleaned)
// 1⃣ Generar diff entre valor anterior y nuevo
const diff = [
{
op: "replace",
path: "/contenidos",
from: value,
value: contenidos,
},
]
// 2⃣ Guardar respaldo en tabla de histórico (solo si hay cambios)
if (JSON.stringify(value) !== JSON.stringify(contenidos)) {
const { error: backupError } = await supabase
.from("historico_cambios_asignaturas") // 👈 nombre de tu tabla de respaldo
.insert({
id_asignatura: asignaturaId,
json_cambios: diff,
user_id: auth.user?.id,
created_at: new Date().toISOString(),
})
if (backupError) throw backupError
}
// 3⃣ Actualizar campo contenidos
const { data, error } = await supabase
.from("asignaturas")
.update({ contenidos })
.eq("id", asignaturaId)
.select()
.maybeSingle()
if (error) throw error
setInitialUnits(cleaned)
onSaved((data as any)?.contenidos ?? contenidos)
setOpen(false)
} catch (err: any) {
alert(err.message || "Error al guardar contenidos")
} finally {
setSaving(false)
}
setInitialUnits(cleaned)
onSaved((data as any)?.contenidos ?? contenidos)
setOpen(false)
}
const cancel = () => {

View File

@@ -20,6 +20,7 @@ import { AuroraButton } from "@/components/effect/aurora-button"
import { DeletePlanButton } from "@/components/planes/DeletePlan"
import { AddAsignaturaButton } from "@/components/planes/AddAsignaturaButton"
import { DescargarPdfButton } from "@/components/planes/GenerarPdfButton"
import { DownloadPlanPDF } from "@/components/planes/DownloadPlanPDF"
type LoaderData = { plan: PlanFull; asignaturas: AsignaturaLite[] }
@@ -105,7 +106,8 @@ function RouteComponent() {
{/* <div className='flex gap-2'> */}
<EditPlanButton plan={plan} />
<AdjustAIButton plan={plan} />
<DescargarPdfButton planId={plan.id} opcion="plan" />
{/* <DescargarPdfButton planId={plan.id} opcion="plan" /> */}
<DownloadPlanPDF plan={plan} />
<DescargarPdfButton planId={plan.id} opcion="asignaturas" />
<DeletePlanButton planId={plan.id} />
{/* </div> */}
@@ -203,33 +205,77 @@ function StatCard({ label, value = "—", Icon = Icons.Info, accent, className =
/* ===== Editar ===== */
function EditPlanButton({ plan }: { plan: PlanFull }) {
const auth = useSupabaseAuth()
const [open, setOpen] = useState(false)
const [form, setForm] = useState<Partial<PlanFull>>({})
const [saving, setSaving] = useState(false)
const qc = useQueryClient()
// Función para comparar valores y generar diffs tipo JSON Patch
function generateDiff(oldData: PlanFull, newData: Partial<PlanFull>) {
const changes: any[] = []
for (const key of Object.keys(newData)) {
const oldValue = (oldData as any)[key]
const newValue = (newData as any)[key]
if (newValue !== undefined && newValue !== oldValue) {
changes.push({
op: "replace",
path: `/${key}`,
from: oldValue,
value: newValue
})
}
}
return changes
}
const mutation = useMutation({
mutationFn: async (payload: Partial<PlanFull>) => {
const { error } = await supabase.from('plan_estudios').update({
nombre: payload.nombre ?? plan.nombre,
nivel: payload.nivel ?? plan.nivel,
duracion: payload.duracion ?? plan.duracion,
total_creditos: payload.total_creditos ?? plan.total_creditos,
}).eq('id', plan.id)
// 1⃣ Generar las diferencias antes del update
const diff = generateDiff(plan, payload)
// 2⃣ Guardar respaldo (solo si hay cambios)
if (diff.length > 0) {
const { error: backupError } = await supabase.from("historico_cambios").insert({
id_plan_estudios: plan.id,
json_cambios: diff, // jsonb
user_id:auth.user?.id,
created_at: new Date().toISOString()
})
if (backupError) throw backupError
}
// 3⃣ Actualizar el plan principal
const { error } = await supabase
.from("plan_estudios")
.update({
nombre: payload.nombre ?? plan.nombre,
nivel: payload.nivel ?? plan.nivel,
duracion: payload.duracion ?? plan.duracion,
total_creditos: payload.total_creditos ?? plan.total_creditos,
})
.eq("id", plan.id)
if (error) throw error
},
onMutate: async (payload) => {
await qc.cancelQueries({ queryKey: planKeys.byId(plan.id) })
const prev = qc.getQueryData<PlanFull>(planKeys.byId(plan.id))
qc.setQueryData<PlanFull>(planKeys.byId(plan.id), (old) => old ? { ...old, ...payload } as PlanFull : old as any)
qc.setQueryData<PlanFull>(
planKeys.byId(plan.id),
(old) => (old ? { ...old, ...payload } as PlanFull : old as any)
)
return { prev }
},
onError: (_e, _vars, ctx) => {
if (ctx?.prev) qc.setQueryData(planKeys.byId(plan.id), ctx.prev)
},
onSettled: async () => {
await qc.invalidateQueries({ queryKey: planKeys.byId(plan.id) })
}
},
})
async function save() {