MyClub/DOCS/MYUIBRIX_PREVIEW_MODE.md

MyUIbrix - Režim náhledu / Preview Mode

🔒 Koncept izolace náhledu

MyUIbrix nyní odděluje režim úprav (náhled) od produkčního zobrazení.

---

🎯 Jak to funguje

Před uložením:

• ✅ Změny vidíte pouze VY (admin v režimu úprav)
• ❌ Běžní návštěvníci webu změny NEVIDÍ
• 🔒 Preview mode je izolován od produkce

Po kliknutí "Publikovat":

• ✅ Změny se uloží do databáze
• ✅ Stránka se automaticky obnoví
• ✅ Změny jsou viditelné všem návštěvníkům
• ✅ Produkční web používá nové nastavení

---

🛠️ Technická implementace

1. Preview Events (previewMode flag)

Všechny události pro živý náhled nyní obsahují previewMode: true:

window.dispatchEvent(new CustomEvent('myuibrix-change', {
  detail: { 
    elementName, 
    variant, 
    visible, 
    previewMode: true  // ← Klíčový příznak!
  }
}));

Události jsou odesílány POUZE když:

• isEditing === true (editor je aktivní)
• Admin má zapnutý režim úprav

2. Filtrování v hooks

Hook usePageElementConfig ignoruje preview události pokud nejsou v preview mode:

const handleMyUIbrixChange = ((event: CustomEvent) => {
  const { elementName, variant, visible, previewMode } = event.detail;
  
  // Aplikuj změny POUZE v preview mode
  if (previewMode) {
    setConfigs(prev => ({ ...prev, [elementName]: variant }));
    setVisibility(prev => ({ ...prev, [elementName]: visible }));
  }
}) as EventListener;

3. Produkční reload po uložení

Po úspěšném uložení se stránka automaticky obnoví:

await batchUpdatePageElementConfigs(configsToSave);

toast({
  title: 'Změny úspěšně uloženy!',
  description: 'Změny jsou nyní viditelné na produkci.',
  status: 'success',
});

// Reload aby se načetla nová konfigurace z databáze
setTimeout(() => {
  window.location.reload();
}, 1500);

---

📋 Workflow pro administrátora

Krok 1: Aktivace editoru

1. Přejděte na homepage
2. Klikněte na fialové tlačítko ✏️ (pravý dolní roh)
   NEBO použijte: /?myuibrix=edit

Krok 2: Úpravy (Preview Mode)

✓ Vidíte horní lištu s textem "🔒 REŽIM NÁHLEDU"
✓ Pod tím text: "Změny vidíte pouze vy"
✓ Klikejte na elementy, měňte varianty
✓ Změny se zobrazují OKAMŽITĚ, ale jen VÁM

Krok 3: Publikování

1. Klikněte "Publikovat" v horní liště
2. Zobrazí se: "Změny úspěšně uloženy!"
3. Stránka se automaticky obnoví (1.5s)
4. ✅ Změny jsou nyní viditelné všem

---

🔍 Co vidí různí uživatelé

Uživatel	Co vidí během editace	Co vidí po uložení
Admin (editor zapnutý)	✅ Preview změn v reálném čase	✅ Produkční verze po reloadu
Admin (editor vypnutý)	❌ Pouze produkční verze	✅ Produkční verze
Běžný návštěvník	❌ Pouze produkční verze	✅ Produkční verze

---

🎨 Vizuální indikátory

V režimu úprav uvidíte:

1. Horní lišta:

⚽ ELEMENTOR  |  🔒 REŽIM NÁHLEDU  |  Změny vidíte pouze vy

2. Oranžový badge:

• Bliká (animation pulse)
• Text: "🔒 REŽIM NÁHLEDU"
• Připomíná, že jste v preview mode

3. Modrá ohraničení:

• Elementy při najetí myší
• Vybraný element má modrý overlay

---

📁 Změněné soubory

Frontend:

1. frontend/src/components/editor/MyUIbrixEditor.tsx

   • Přidán previewMode: true do všech událostí
   • Události se odesílají pouze když isEditing === true
   • Přidán vizuální indikátor "REŽIM NÁHLEDU"
   • Reload stránky po uložení

2. frontend/src/hooks/usePageElementConfig.ts

   • Filtrování událostí podle previewMode příznaku
   • Ignoruje preview události v produkci

---

⚠️ Důležité poznámky

✅ Výhody:

• Bezpečné testování změn před publikací
• Žádné nechtěné změny na produkci
• Jasné oddělení náhledu a produkce
• Lepší UX pro administrátory

🔄 Reload po uložení:

• Důvod: Zajistí, že se načte nová konfigurace z databáze
• Trvání: 1.5 sekundy delay (čas na zobrazení toastu)
• Alternativa: Mohli bychom použít SSE/WebSocket pro live reload bez refresh

🎯 Best Practices:

1. Vždy testujte změny před publikováním
2. Klikněte na různé elementy abyste viděli jak vypadají
3. Zkontrolujte mobile view pomocí viewport switcher
4. Publikujte až když jste spokojeni s výsledkem

---

🔧 Řešení problémů

Problem: Změny se nezobrazují po uložení

Řešení:

• Zkontrolujte, že se stránka automaticky obnovila
• Pokud ne, manuálně obnovte (F5)
• Vyčistěte cache prohlížeče

Problem: Vidím změny i když nejsem v editoru

Řešení:

• Ujistěte se, že jste ukončili režim úprav (ESC nebo ✕)
• Obnovte stránku pro reset

Problem: Preview se nenahrává

Řešení:

• Zkontrolujte konzoli prohlížeče (F12)
• Ujistěte se, že backend běží
• Zkontrolujte endpoint: /api/v1/page-elements?page_type=homepage

---

🚀 Budoucí vylepšení

Možná rozšíření:

1. Historii změn - Undo/Redo funkce
2. Verzování - Ukládání verzí konfigurací
3. Plánované publikování - Nastavit čas pro auto-publikaci
4. Multi-user preview - Sdílení preview URL s jinými adminy
5. A/B testování - Testování více variant najednou

---

Implementováno: 14. října 2025
Verze: 2.0.0
Status: ✅ Production Ready

---

📞 Kontakt

Pokud máte otázky nebo návrhy na vylepšení:

• Otevřete issue na GitHubu
• Kontaktujte vývojový tým
• Přečtěte si MYUIBRIX_IMPROVEMENTS.md pro více informací