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:
@@ -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 = () => {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user