From c8d808b26f08989db3777c5128cb3655f118f988 Mon Sep 17 00:00:00 2001
From: bes-r <27369668+bes-r@users.noreply.github.com>
Date: Mon, 6 Jul 2026 21:46:44 +0200
Subject: [PATCH] Fix logo refresh after upload

---
 frontend/src/pages.jsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx
index 5f3639e..abff120 100644
--- a/frontend/src/pages.jsx
+++ b/frontend/src/pages.jsx
@@ -3361,8 +3361,15 @@ export function PeriodeRoosterPage() {
 /* -------------------------------- Huisstijl / logo ------------------------ */
 // Klein logo dat in elke roosterweergave en op afdrukken verschijnt.
 export function RoosterLogo({ print = false }) {
-  const [logo, setLogo] = useState(null);
-  useEffect(() => { getHuisstijl().then((h) => setLogo(h && h.logo ? h.logo : null)).catch(() => {}); }, []);
+  const [huis, setHuis] = useState(null);
+  useEffect(() => {
+    let actief = true;
+    getHuisstijl().then((h) => { if (actief) setHuis(h); }).catch(() => {});
+    const update = (e) => setHuis(e.detail || null);
+    window.addEventListener("roosterwijs:huisstijl", update);
+    return () => { actief = false; window.removeEventListener("roosterwijs:huisstijl", update); };
+  }, []);
+  const logo = logoUrl(huis);
   if (!logo) return null;
   return <img src={logo} alt="" className={print ? "rooster-logo print-logo" : "rooster-logo no-print"} />;
 }
@@ -3382,6 +3389,13 @@ function _themaDirect(h) {
   if (h && h.accent_kleur) root.style.setProperty("--accent", h.accent_kleur);
 }
 
+function logoUrl(huis) {
+  if (!huis || !huis.logo) return "";
+  const versie = huis.aangepast_op || "";
+  if (!versie) return huis.logo;
+  return `${huis.logo}${huis.logo.includes("?") ? "&" : "?"}v=${encodeURIComponent(versie)}`;
+}
+
 export function HuisstijlPage() {
   const [huis, setHuis] = useState(null);
   const [kwaliteit, setKwaliteit] = useState(null);
@@ -3424,6 +3438,7 @@ export function HuisstijlPage() {
       const r = await uploadLogo(f);
       setHuis(r);
       setKwaliteit(r.kwaliteit || null);
+      window.dispatchEvent(new CustomEvent("roosterwijs:huisstijl", { detail: r }));
     } catch (err) {
       setError(err.message);
       if (err.data && err.data.kwaliteit) setKwaliteit(err.data.kwaliteit);
@@ -3432,7 +3447,7 @@ export function HuisstijlPage() {
   }
   async function wis() {
     setBezig(true); setError(null);
-    try { const r = await verwijderLogo(); setHuis(r); setKwaliteit(null); } catch (e) { setError(e.message); }
+    try { const r = await verwijderLogo(); setHuis(r); setKwaliteit(null); window.dispatchEvent(new CustomEvent("roosterwijs:huisstijl", { detail: r })); } catch (e) { setError(e.message); }
     setBezig(false);
   }
 
@@ -3457,7 +3472,7 @@ export function HuisstijlPage() {
       <p className="muted small">Het logo verschijnt in elke roosterweergave en op afdrukken. Gebruik bij voorkeur een <b>transparante PNG</b> of <b>SVG</b>; een logo met een gevulde (witte) achtergrond valt op een gekleurde balk lelijk op.</p>
       <div className="logo-vak">
         <div className="logo-preview" title="Voorbeeld op een geruite achtergrond (zo zie je transparantie)">
-          {huis && huis.logo ? <img src={huis.logo} alt="Logo" /> : <span className="muted small">Nog geen logo</span>}
+          {huis && huis.logo ? <img src={logoUrl(huis)} alt="Logo" /> : <span className="muted small">Nog geen logo</span>}
         </div>
         <div className="logo-acties">
           <label className="btn primary">{bezig ? "Bezig…" : (huis && huis.logo ? "Ander logo kiezen" : "Logo kiezen")}