fix(ar1-admin): TabView interno per Layout vs Struttura quadri (prima erano Button invisibili)

I due 'tab' interni al Dialog erano <Button> con prop text=true quando non selezionati:
rendering senza sfondo ne bordo, praticamente invisibili. Carlo non vedeva come
raggiungere l'editor Struttura quadri e pensava mancasse.

Sostituito l'hacky Button-tab con un vero TabView PrimeReact (stesso componente
del TabView esterno delle 5 tab). Due TabPanel:
  1. 'Layout grafico' (icona pi pi-palette) - contenuto form brand/header/intro/privacy
  2. 'Struttura quadri' (icona pi pi-list, + ' •' se modificata) - rende QuadriStructureEditor

Mapping activeIndex<->editSection:
  editSection='layout' -> activeIndex=0
  editSection='struttura' -> activeIndex=1
  onTabChange setta entrambi.
This commit is contained in:
BFLOWS
2026-04-23 16:02:13 +02:00
parent 3ae5aabe2d
commit 8f9e3d5622

View File

@@ -863,28 +863,13 @@ const Ar1AdminConfig = () => {
)}
</div>
{/* Tab switch: Layout vs Struttura */}
<div style={{ display: 'flex', gap: 0, borderBottom: '2px solid #e0e0e0', marginBottom: 16 }}>
<Button
label="Layout grafico"
icon="pi pi-palette"
text={editSection !== 'layout'}
onClick={() => setEditSection('layout')}
style={{ borderRadius: 0, borderBottom: editSection === 'layout' ? '3px solid var(--primary-color)' : 'none' }}
/>
<Button
label={'Struttura quadri' + (questionsStructureChanged() ? ' •' : '')}
icon="pi pi-list"
text={editSection !== 'struttura'}
severity={questionsStructureChanged() ? 'warning' : undefined}
onClick={() => setEditSection('struttura')}
style={{ borderRadius: 0, borderBottom: editSection === 'struttura' ? '3px solid var(--primary-color)' : 'none' }}
/>
</div>
{/* TabView interno: Layout vs Struttura */}
<TabView
activeIndex={editSection === 'layout' ? 0 : 1}
onTabChange={(e) => setEditSection(e.index === 0 ? 'layout' : 'struttura')}
>
<TabPanel header={<span><i className="pi pi-palette" style={{ marginRight: '0.5rem' }} />Layout grafico</span>}>
{/* SEZIONE LAYOUT */}
{editSection === 'layout' && (
<div>
<Message severity="info" style={{ marginBottom: 10 }}
text="Modifiche al layout grafico (brand, colori, testi introduttivi) si applicano in place alla versione corrente, senza creare una nuova versione." />
@@ -954,16 +939,17 @@ const Ar1AdminConfig = () => {
<InputTextarea value={layoutAdvancedJson} onChange={(e) => setLayoutAdvancedJson(e.target.value)} rows={20} style={{ width: '100%', fontFamily: 'monospace', fontSize: 12 }} />
</div>
)}
</div>
)}
</TabPanel>
{/* SEZIONE STRUTTURA QUADRI */}
{editSection === 'struttura' && questionsSnapshot && (
<QuadriStructureEditor
value={questionsSnapshot}
onChange={setQuestionsSnapshot}
/>
)}
<TabPanel header={<span><i className="pi pi-list" style={{ marginRight: '0.5rem' }} />Struttura quadri{questionsStructureChanged() ? ' •' : ''}</span>}>
{questionsSnapshot && (
<QuadriStructureEditor
value={questionsSnapshot}
onChange={setQuestionsSnapshot}
/>
)}
</TabPanel>
</TabView>
{/* Footer azioni */}
<div style={{ position: 'sticky', bottom: 0, background: 'white', paddingTop: 14, borderTop: '1px solid #eee', marginTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>